@extends('layouts.app')
@section('title')
{{ __("messages_1.Banners") }}
@endsection
@section('style')
@include('admin.shows.inc.style')
@endsection
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    @include('inc.breadcrumb' , ['breadcrumb_items'=>[
         __("messages.Home")=>route('home'),
         __("messages_1.Banners")=>route('admin.banners.index'),
    ]])



    <div class="row justify-content-center">
        <!-- Form controls -->
        <div class="col-md-12">
            <!-- Multi Column with Form Separator -->
            <div class="card mb-4">
              <h5 class="card-header">{{ __("messages.Media") }}</h5>
              <form class="card-body" action="{{ route('admin.banners.update') }}" id="form_submit" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="row g-3">


                    <div class="content-header mb-3">
                        <h6 class="mb-0">{{ __("messages.Image gallery")}}</h6>
                        <small>{{ __("messages.Upload the photos you want to the photo gallery") }}</small>
                      </div>

                    <div class="col-12">
                        <input type="file" multiple id="inp-images"   name="images[]"  accept="image/*" class="form-control">
                    </div>
                </div>
                <div class="pt-4">
                    <button  type="submit" class="btn btn-primary me-sm-3 me-1 btn_with_load">{{ __('messages.Save') }}

                    </button>
                    <button type="reset" class="btn btn-label-secondary">{{ __('messages.Cancel') }}</button>
                </div>
              </form>
            </div>
        </div>
    </div>

 </div>
@endsection
@section('script')
<script src="{{ asset('assets/vendor/libs/bs-stepper/bs-stepper.js') }}"></script>
<script src="{{ asset('assets/js/form-wizard-numbered.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/jquery-repeater/jquery-repeater.js') }}"></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 src="{{asset('assets/vendor/libs/toastr/toastr.js')}}"></script>
@include('admin.shows.inc.script_submit')
<script>
    $(function(){
        $("#inp-images").fileinput({
            theme: "fa",
            maxFileCount: 20,
            allowedFileTypes: ['image'],
            showCancel: true,
            showRemove: false,
            showUpload: false,
            overwriteInitial: false,
            initialPreview: [
                @foreach($data as $img)
                    "{{ asset('uploads/banners/'.$img->path)}}",
                @endforeach
            ],
            initialPreviewAsData: true,
            initialPreviewConfig: [

                @foreach($data as $img)
                    @php $size=filesize('uploads/banners/'.$img->path);  @endphp
                    { size:"{{$size}}" , width: "120px", url: "{{route('admin.banners.delete',[$img->id , '_token' => csrf_token()])}}"},
                @endforeach

            ],
     });

     $('.fileinput-remove').
                            html('<i class="fa fa-times-circle text-danger"></i>')
                            .addClass('rounded p-1 m-1')
        ;

    $("#inp-images").on("filepredelete", function(jqXHR) {
    var abort = true;
    if (confirm("Are you sure you want to delete this image?")) {
        abort = false;
    }
    return abort;
    });

    })
</script>
@endsection