@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/{{$category}}"> Back</a>
    <form class="form-horizontal" action="{{url('/admin/infographic/create')}}" method="post">
        <input type="hidden" name="category"  id="category" value="{{$category}}"/>
        <input type="hidden" name="id"  id="id" value="{{$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" />
                <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"></textarea>
                <span class="text-danger description_e "></span>
            </div>
            
            
        </div>
            <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>
                <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="0"   id="" class="form-control input-sm display_names" placeholder="Dispaly Name " > 
                          <span class="text-danger display_image_e "></span>
                        </div>
                    </div>
                </div>
                <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="1"  class="form-control input-sm display_names" placeholder="Dispaly Name" > 
                            <span class="text-danger display_image_e "></span>
                        </div>
                    </div>
                </div>
                <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="">Upload</a>
    </form>
@stop
@push('script')
    <script>
        var info_files = [];
        $('.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)
           }
           
    });
    $('.info_files').on('change','.display_names', function(e){
        var objIndex=$(this).attr('data-index');
        info_files[objIndex].name = $(this).val()
    });
    $('.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);
                var config = {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                };
                axios.post('/admin/infographic/create',infoDocs,config)
                    .then(response=>{
                        shownot({type:'success',message:type+' successfully created'});
                        return    window.location.href='/admin/'+response.data.next;
                    })
                    .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