@extends('layouts.admin')
@section('style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">

<link href="{{asset('assets/lib/file-input/css/fileinput.min.css')}}" rel="stylesheet" type="text/css">
@endsection
@section('content')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb  py-0">
        <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">{{ __('messages.Home') }}</a></li>
        @if(auth()->user()->type == 'admin')
        <li class="breadcrumb-item"><a href="{{ route('admin.customers.index') }}">{{ __('messages.Customers') }}</a></li>
        <li class="breadcrumb-item">
            <a href="{{ route('admin.customers.show' ,  $folder->user_id) }}">
                @php
                    $first_name = explode(" " , $folder->user->name);
                    $first_name = $first_name[0];
                @endphp
                {{ $first_name }}
            </a>

        </li>
        @else 
                    <li class="breadcrumb-item"><a href="{{ route('admin.tasks.index') }}">{{ __('messages.Tasks') }}</a></li>

        @endif
        <li class="breadcrumb-item" aria-current="page">{{ __('messages.Client folders') }}</li>
        <li class="breadcrumb-item" aria-current="page">{{$folder->name }}</li>
        <li class="breadcrumb-item active" aria-current="page">{{ __('messages.Add files') }}</li>
    </ol>
</nav>
<div class="container">
    <div class="form-group mt-3">
        <form id="file_uploads" action="{{ route('admin.customers.folders.files.store' , $folder->id) }}" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="folder_id" value="{{ $folder->id }}">
            @csrf
            <input type="file" multiple id="inp-images"   name="folder_files[]" class="form-control">
            <div class="d-flex justify-content-center">
                <button type="submit" class="btn btn-primary mt-3 btn-form-upload">{{ __("messages.Save files in the folder") }}</button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('script')
<script src="{{asset('assets/lib/file-input')}}/js/plugins/piexif.min.js" type="text/javascript"></script>
<script src="{{asset('assets/lib/file-input')}}/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="{{asset('assets/lib/file-input')}}/js/fileinput.min.js"></script>

<script src="{{asset('assets/lib/file-input')}}/themes/fas/theme.min.js"></script>

<script src="{{asset('assets/lib/file-input')}}/js/locales/LANG.js"></script>
<script>
    $(function(){
         $("#inp-images").fileinput({
                theme: "fa",
                maxFileCount: 5,
               //allowedFileTypes: ['image', 'pdf' , 'docs' , 'doc' , 'text'],
                showCancel: true,
                showRemove: false,
                showUpload: false,
                overwriteInitial: false,
         });

         $('.fileinput-remove').
                                html('<i class="fa fa-times-circle text-danger"></i>')
                                .addClass('rounded p-1 m-1')
            ;
            $(".btn-form-upload").click(function(e){
                e.preventDefault();

                var url = $("#file_uploads").attr('action');
                var method = $("#file_uploads").attr('method');
                var data = new FormData($(this).parents('form')[0]);
                console.log(url , method , data)
                $.ajax({
                    url,
                    method,
                    data,
                    success:function(res){
                        $("#inp-images").fileinput('clear')
                        toast_alert("success" , "{{ __('messages.The files have been added to the folder successfully') }}")

                    },
                    error:function(res){
                        if(res.status == 422){
                            toast_alert("warning" , res.responseJSON.message)

                        }else{
                            toast_alert("error" , "Server Error !")

                        }
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                })

             })




    })
    </script>
@endsection