@extends('admin/course-management/course-details/index')

@section('main-content-tab')
<form action="{{route('gallery.update', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug, 'id' => $gallery_item->id])}}" name="institute" class="form mb-15" method="POST" id="kt_contact_form" enctype="multipart/form-data">
    @csrf
    <h1 class="fw-bolder text-dark mb-9">Edit Gallery</h1>
    <input type="hidden" name="image_data" value="{{$gallery_item->image}}">
    <input type="hidden" name="video_thumbnail_data" value="{{$gallery_item->video_thumbnail}}">
    <!--begin::Input group-->
    <div class="row mb-3">
        <div class="col-md-6 pe-lg-10">
            <!--begin::Form-->
            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class="required fs-5 fw-bold mb-2">Title (EN)</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input  type="text" class="form-control form-control-solid" placeholder="Enter Title (EN)" value="{{$gallery_item->title}}" name="title" autocomplete="off"/>
                @if($errors->has('title'))
                    <span class="text-danger">{{ $errors->first('title') }}</span>
                @endif

                <!--end::Input-->
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class="fs-5 fw-bold mb-2">Title (BN)</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input  type="text" class="form-control form-control-solid" placeholder="Enter Title (BN)" value="{{$gallery_item->title_bn}}" name="title_bn" autocomplete="off"/>
                @if($errors->has('title_bn'))
                    <span class="text-danger">{{ $errors->first('title_bn') }}</span>
                @endif

                <!--end::Input-->
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <label class="required fs-6 fw-bold mb-2">File Type</label>
                    <select id="type" class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Select a File Type" name="file_type">
                        <option disabled>Select File Type</option>
                        <option value="1" {{$gallery_item->file_type == 1 ? 'selected' : 'disabled'}}>Image</option>
                        <option value="0" {{$gallery_item->file_type == 0 ? 'selected' : 'disabled'}}>Video</option>
                    </select>
                    @if($errors->has('file_type'))
                        <span class="text-danger">{{ $errors->first('file_type') }}</span>
                    @endif
            </div>

            <div class="d-flex mb-5 fv-row" style="float:left;">
                <label class="form-check form-switch form-check-custom form-check-solid">
                    <span class="required form-check-label fw-bold text-muted" style="margin-right: 10px;margin-left: 0px;">Status</span>
                    <input class="form-check-input radio-btn" name="status" type="checkbox" value="1" {{$gallery_item->status == 0 ? '' : 'checked'}} />
                </label>
                <!--end::Switch-->
            </div>
            <div class="d-flex mb-5 fv-row" style="float:right;">
                <label class="form-check form-switch form-check-custom form-check-solid">
                    <span class="required form-check-label fw-bold text-muted" style="margin-right: 10px;margin-left: 0px;">Is Featured</span>
                    <input class="form-check-input radio-btn" name="is_featured" type="checkbox" value="1" {{$gallery_item->is_featured == 0 ? '' : 'checked'}} />
                </label>
                <!--end::Switch-->
            </div>
            <div style="clear:both"></div>
            <div class="d-flex">
                <a style="margin-right:5px;" href="{{route('gallery.index', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug])}}" class="btn btn-secondary">Back</a>
                <button type="submit" class="btn btn-primary" id="kt_contact_submit_button">
                    <!--begin::Indicator-->
                    <span class="indicator-label">Update</span>
                </button>
            </div>
            <!--end::Form-->
        </div>

        <div class="col-md-6 pe-lg-10">
            <div class="d-flex flex-column mb-5 fv-row imageDiv">
                <!--begin::Label-->
                <label class="required fs-5 fw-bold mb-2">Image</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input accept="image/*" type="file" name="image" id="image" class="form-control dropify file-path" placeholder="Enter Image">
                <span style="font-size: 12px;color: red;">Suggested Image ratio: 870 x 490 | max-size: 500 KB</span>
                @if($errors->has('image'))
                    <span class="text-danger">{{ $errors->first('image') }}</span>
                @endif

                <!--end::Input-->
            </div>
            <div class="d-flex flex-column mb-5 fv-row videoDiv">
                <!--begin::Label-->
                <label class="required fs-5 fw-bold mb-2">Video Url</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input type="text" class="form-control form-control-solid" placeholder="Enter Video Url" value="{{$gallery_item->video_url}}" name="video_url" autocomplete="off"/>
                @if($errors->has('video_url'))
                    <span class="text-danger">{{ $errors->first('video_url') }}</span>
                @endif

                <!--end::Input-->
            </div>
            <div class="d-flex flex-column mb-5 fv-row videoDiv">
                <label class="required fs-5 fw-bold mb-2">Video Thumbnail</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input accept="image/*" type="file" name="video_thumbnail" id="video_thumbnail" class="form-control dropify file-path" placeholder="Enter Video Thumbnail">
                <span style="font-size: 12px;color: red;">Suggested Image ratio: 870 x 490 | max-size: 500 KB</span>
                @if($errors->has('video_thumbnail'))
                    <span class="text-danger">{{ $errors->first('video_thumbnail') }}</span>
                @endif
            </div>
        </div>
    </div>

    <!--end::Submit-->
</form>
@endsection

@section('extra-extra-css')
<link rel="stylesheet" href="{{ asset('css/dropify.min.css') }}">
<style>
    .displayBlock{
        display: block!important;
    }
    .displayNone{
        display: none!important;
    }
</style>
@endsection


@section('extra-extra-script')
{{--<script src="{{ asset('js/popper.min.js') }}"></script>--}}
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('js/dropify.min.js') }}"></script>
//validate form
<script>
    $(function() {
        $("form[name='institute']").validate({
            rules: {
                title:'required',
                // file_type:'required',
            },
            messages: {
                title: "Title is required.",
                // file_type: "File type is required.",
            },
            submitHandler: function(form) {
            form.submit();
            }
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function(){
        var editData = {!! json_encode($gallery_item) !!};
        if(editData.file_type == 1)
        {
        $('.videoDiv').addClass('displayNone');
        }
        else{
        $('.imageDiv').addClass('displayNone');
        }

        if(editData && editData.file_type == 1)
        {
            var imageUrl = "{{URL::asset($gallery_item->image)}}";
            var drEvent = $('#image').dropify(
            {
                defaultFile: imageUrl
            });
            drEvent = drEvent.data('dropify');
            drEvent.resetPreview();
            drEvent.clearElement();
            drEvent.settings.defaultFile = imageUrl;
            drEvent.destroy();
            drEvent.init();
        }
        else{
            var drEvent = $('#image').dropify();
            drEvent = drEvent.data('dropify');
            drEvent.resetPreview();
            drEvent.clearElement();
        }

        if(editData && editData.file_type == 0)
        {
            var imageUrl = "{{URL::asset($gallery_item->video_thumbnail)}}";
            var drEvent = $('#video_thumbnail').dropify(
            {
                defaultFile: imageUrl
            });
            drEvent = drEvent.data('dropify');
            drEvent.resetPreview();
            drEvent.clearElement();
            drEvent.settings.defaultFile = imageUrl;
            drEvent.destroy();
            drEvent.init();
        }
        else{
            var drEvent = $('#video_thumbnail').dropify();
            drEvent = drEvent.data('dropify');
            drEvent.resetPreview();
            drEvent.clearElement();
        }
    });
</script>
@endsection