@extends('layouts.app')
@section('title')
{{ __("messages.Shows") }}
@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.Shows")=>route('admin.admins.index'),
          $show->name =>null,
         __("messages.Edit") . " " . __("messages.Media")=>"active"
    ]])



    <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.shows.update_media' , $show->id) }}" id="form_submit" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="row g-3">
                    <div class="mb-3">
                        <div class="row">
                            <div class="col-6">
                                <div class="box-img" >
                                    <img class="logo-preview" src="{{ asset('uploads/shows/'.$show->image) }}" alt="">
                                </div>
                                <div class="text-center mt-2">
                                    <label for="logo" class="btn btn-primary">{{ __("messages.Select the main image") }} <i class="ti ti-photo-plus"></i> </label>
                                </div>
                                <input type="file"  name="logo" class="d-none" id="logo"  accept="image/*">
                            </div>
                            <div class="col-6">
                              {{-- <div class="video_box-img " id="video_box-icon" >
                                  <img src="{{ asset('default-images/input_video.png') }}" alt="">
                              </div> --}}
                              <div class="video_box-img"   id="video_box-preview">
                                <video controls class="video-preview"  src="{{ asset('uploads/shows/'.$show->video) }}" alt=""
                                srcset="">
                               </video>
                              </div>

                              <div class="text-center mt-2">
                                  <label for="video" class="btn btn-primary">{{ __("messages.Choose the promo video") }}<i class="ti ti-video-plus"></i></label>
                              </div>
                              <input type="file"  name="video" class="d-none" id="video">
                          </div>
                        </div>
                    </div>

                    <hr>
                    <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($show->photo_gallery as $img)
                    "{{ asset('uploads/shows/'.$img->image)}}",
                @endforeach
            ],
            initialPreviewAsData: true,
            initialPreviewConfig: [

                @foreach($show->photo_gallery as $img)
                    @php $size=filesize('uploads/shows/'.$img->image);  @endphp
                    { size:"{{$size}}" , width: "120px", url: "{{route('admin.shows.delete_media',[$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