@extends('admin.layouts.main')
@section('content')
    <div class="col-md-12 col-sm-12 col-xs-12">
        <h2>
           Upload Infographic
        </h2>
    </div>
    <a href="/admin/{{$data->content_type}}"> Back</a>
    <form class="form-horizontal" action="{{url('/admin/infographic/create')}}" method="post">
        <input type="hidden" name="category"  id="category" value="{{$data->content_type}}"/>
        <input type="hidden" name="id"  id="id" value="{{$data->content_id}}"/>
        @csrf
    <div class="col-md-12 col-sm-12 admin-sub-section">
        <div class="col-md-12 col-sm-12 sub-section-title-band">
        </div>
        <div class="col-md-12 col-sm-12 sub-section-content">
            <div class="form-group">
                <label for="email">Title
                    <span class="mandatory">*</span>
                </label>
                <input type="text" name="title" class="form-control input-sm" id="title" value="{{$data->title}}" />
                <span class="text-danger title_e "></span>
            </div>
            <div class="form-group">
                <label for="pwd">Description <span class="mandatory">*</span></label>
                <textarea class="form-control" id="description" name="description">{{$data->description}}</textarea>
                <span class="text-danger description_e "></span>
            </div>
            
            
        </div>
        @php
            $files =$data->info_files!=null ? json_decode($data->info_files) : [];
        @endphp

            <div class="row info_files" style="padding-top:10px;">
                <div class="col-md-12 col-sm-12 sub-section-title-band">
                    <h4 class="block_title">Infographic</h4>
                </div>
                @if($files!=0)
                    @forelse($files as $key=>$list )
                        <div class="row">
                            <div class="col-xs-12 col-sm-4 col-md-4">
                                <div class="form-group">
                                <a href="{{$list->url}}">  View </a>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4 col-md-4">
                                <div class="form-group">
                                <a href="javascript://" data-index="{{$key}}" class="remove-db-file">  Remove </a>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4 col-md-4">
                                <div class="form-group">
                                    {{$list->name}}
                                    {{-- <input type="text" name="infograp_name[]" data-index="0"   id="" class="form-control input-sm display_names" placeholder="Dispaly Name " >  --}}
                                <span class="text-danger display_image_e "></span>
                                </div>
                            </div>
                        </div>
                        @empty
                @endforelse
                @endif
                @if(count($files)<3)
                    @for($i = count($files)+1; $i <= 3; $i++)
                        <div class="row">
                            <div class="col-xs-12 col-sm-3 col-md-3">
                                <div class="form-group">
                                    <input type="file" name="infograp_file[]" data-index="{{$i}}" id="infograp_file" class="form-control input-sm infograp_file" placeholder="" > 
                                    <span class="text-danger display_image_e "></span>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-3 col-md-3">
                                <div class="form-group">
                                    <input type="text" name="infograp_name[]"   data-index="{{$i}}"  class="form-control input-sm display_names" placeholder="Dispaly Name" > 
                                    <span class="text-danger display_image_e "></span>
                                </div>
                            </div>
                        </div>
                    @endfor
                @endif
                
               {{-- <div class="row">
                    <div class="col-xs-12 col-sm-3 col-md-3">
                        <div class="form-group">
                            <input type="file" name="infograp_file[]"  id="infograp_file" class="form-control input-sm infograp_file" placeholder="" > 
                            <span class="text-danger display_image_e "></span>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-3 col-md-3">
                        <div class="form-group">
                            <input type="text" name="infograp_name[]"  data-index="2"  class="form-control input-sm display_names" placeholder="Dispaly Name" > 
                            <span class="text-danger display_image_e "></span>
                        </div>
                    </div>
                </div> --}}
            </div>
    </div>
    <a class="btn btn-primary upload-button" type="submit" name="">Update Details</a>
    <a class="btn btn-primary activate" href="javascript://" data-id="{{$data->id}}" data-status="{{$data->is_active ==1 ? 0 : 1}}"> {{$data->is_active==1 ? 'Remove from frontend' : 'Push to frontend'}}</a>
</form>

<input type="hidden" value="{{$data->info_files!=null ? $data->info_files :''}}" id="dbassets" name="dbassets" class="form-control">
@stop
@push('script')
    <script>
        var info_files = [];
        var info_files_db = [];
       $('.infograp_file').change(function(e){
           let file_index=$(this).attr('data-index');
           let file_name=$(this).get(0).files[0].name;
           let files={
                    name:file_name.slice(0, -4),
                    file:$(this).get(0).files[0],
                    type:'new',
                    file_name:'',
                    url:''
                };
           if (info_files.length > 0) {
               var idx = info_files[file_index];
               if(idx!=undefined){
                    info_files[file_index]=files
               }else{
                info_files.push(files)
               }
           }else{
            info_files.push(files)
           }
           
           
           
        console.log(info_files);
    });
    let dbvalues =$('#dbassets').val() !=null ? $('#dbassets').val() :false;
    if(dbvalues){
         const DbAssets=JSON.parse(dbvalues);
        $.each(DbAssets,function(key,val){
            info_files_db.push({
                name:val.name,
                file:'',
                type:'db',
                file_name:val.file_name,
                url:val.url,
                created_at:val.created_at,
            });
        });
    }
   
    $('.info_files').on('change','.display_names', function(e){
        var objIndex=$(this).attr('data-index');
        info_files[objIndex].name = $(this).val()
    });
    $('.activate').click(function(){
        let tableId=$(this).attr('data-id');
        let status=$(this).attr('data-status');
        axios.get('/admin/infographic/update', {     params:{
                            'tableId':tableId,
                            'status' :status,}
                        })
            .then(response=>{
                shownot({type:'success',message:'successfully updated'});
                setTimeout(function(){
                    window.location.reload();
                },2000);
                return;
            })
    });
    $('.info_files').on('click','.remove-db-file', function(e){
        var objIndex=$(this).attr('data-index');
        info_files_db.splice(objIndex, 1);
        // console.log(info_files);
        var id =$('#id').val();
        var type =$('#category').val();
        var infoDocs=new FormData();
        infoDocs.append("category_id",id);
        infoDocs.append("category_type",type);
        infoDocs.append("info_files",JSON.stringify(info_files_db));
        axios.post('/admin/infographic/remove',infoDocs)
            .then(response=>{
                shownot({type:'success',message:'successfully removed'});
                setTimeout(function(){
                    window.location.reload();
                },2000);
                return;
            })
    })
    $('.upload-button').click(function(){
        var description =$('#description').val();
        var title =$('#title').val();
        var id =$('#id').val();
        var type =$('#category').val();
        var form_type ='new';
        var infoDocs=new FormData();
        if (info_files.length > 0) {
            for (var i = 0; i < info_files.length; i++) {
                    let attachment = info_files[i]["file"];
                    infoDocs.append("assest_docs[]", attachment);
                    infoDocs.append("type[]", info_files[i]["type"]);
                    infoDocs.append("assets_id[]", info_files[i]["id"]);
                    infoDocs.append("dispaly_names[]", info_files[i]["name"]);
                }
            }
                infoDocs.append("title",title);
                infoDocs.append("description",description);
                infoDocs.append("category_id",id);
                infoDocs.append("category_type",type);
                infoDocs.append("form_type",form_type);
                infoDocs.append("info_files",JSON.stringify(info_files_db));
                var config = {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                };
                axios.post('/admin/infographic/create',infoDocs,config)
                    .then(response=>{
                        shownot({type:'success',message:type+' successfully created'});
                        window.location.reload();
                    })
                    .catch(error=>{
                        let status=error.response.status;
                        if(status==422){
                            let err_data=error.response.data.errors;
                                $.each(err_data, function(key, val){
                                    $('.'+key+'_e').html(val[0]);
                                });
                                
                        }
                    });
                    return;
            // shownot({type:'warning',message:'Please select files'});
            return;
    });
    </script>
@endpush