@extends('backend.template.layouts.template-base')
@section('title')
    Video Gallery | {{ config('app.name') }}
@endsection
@section('content')
    <section>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header align-items-center d-flex">
                        <h4 class="card-title mb-0 flex-grow-1">Video Gallery</h4>
                        @can('readVideo', \App\Models\Gallery::class)
                            <button type="button" id="add_galleries" class="btn btn-primary btn-sm add add_galleries"><i
                                    class="ri-add-line align-bottom me-1"></i>Add</button>
                        @endcan
                    </div><!-- end card header -->
                    <form action="{{ route('backend.template.gallery.store', 'video') }}" id="gallery-form" method="post"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="card-body ">
                            <div class="gallery-box">
                                @forelse ($galleries as $gallery)
                                    <div class="row gy-4 mb-3 row_index parent-gallery-row"
                                        data-gallery-index="{{ $loop->iteration }}">
                                        <div class="col-xxl-3 col-md-3">
                                            <div>
                                                <input type="hidden" class="form-control"
                                                    name="gallery[{{ $loop->iteration }}][gallery_id]"
                                                    value={{ $gallery->id }}>
                                                <label class="form-label">Video Title<span class="error"></span></label>
                                                <input type="text" class="form-control"
                                                    name="gallery[{{ $loop->iteration }}][title]"
                                                    placeholder="Enter Video Title" value="{{ $gallery->title }}">
                                                @error('title')
                                                    <div class="error">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-xxl-3 col-md-3">
                                            <div>
                                                <label class="form-label">Thumbnail Image<span class="error">*
                                                    </span><span class="resolution"></span></label>
                                                <div class="input-group">
                                                    <input type="file" class="form-control"
                                                        name="gallery[{{ $loop->iteration }}][thumbnail]"
                                                        placeholder="Place thumbnail image" accept=".jpeg, .png, .jpg, .gif, .svg">

                                                    @if ($gallery->thumbnail)
                                                        <a href="javascript:void(0);"
                                                            class="show_image input-group-text text-success"
                                                            data-size="modal-xs" data-title="{{ $gallery->title }}"
                                                            data-url="{{ asset($gallery->thumbnail) }}" alt="Not-found"
                                                            data-bs-toggle="tooltip" data-bs-placement="top"
                                                            data-bs-html="true" title="<small> View Image </small>">
                                                            <i class="bx bx-photo-album fs-4"></i>
                                                        </a>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xxl-5 col-md-5">
                                            <div>
                                                <label class="form-label">Video Youtube URL<span class="error">*
                                                    </span></label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control input_file"
                                                        name="gallery[{{ $loop->iteration }}][input_file]"
                                                        placeholder="Enter Video Youtube URL" value="{{ $gallery->files }}">
                                                </div>
                                            </div>
                                        </div>

                                        @can('deleteImage', \App\Models\Gallery::class)
                                            <div class="col-md-1 pt-2">
                                                <a href="javascript:void(0);"
                                                    data-route="{{ route('backend.template.gallery.delete', $gallery->id) }}"
                                                    data-type="image" class="btn btn-danger btn-sm destroy mt-4"><i
                                                        class="bx bx-trash"></i></a>
                                            </div>
                                        @endcan
                                    </div>
                                @empty
                                    <div class="row gy-4 mb-3 row_index parent-gallery-row" data-gallery-index="1">
                                        <div class="col-xxl-3 col-md-3">
                                            <div>
                                                <input class="form-control" name="gallery[1][gallery_id]" type="hidden">
                                                <label class="form-label">Video Title <span class="error">*</span>
                                                </label>
                                                <input class="form-control" required="" name="gallery[1][title]"
                                                    placeholder="Enter Video Title">
                                                @error('title')
                                                    <div class="error">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-xxl-3 col-md-3">
                                            <div>
                                                <label class="form-label">Thumbnail Image <span class="error">*</span>
                                                </label>
                                                <img alt="" src="#" width="50px">
                                                <input class="form-control" name="gallery[1][thumbnail]" type="file"
                                                    placeholder="Place Thumbnail Image" accept=".jpeg, .png, .jpg, .gif, .svg"
                                                    required="">
                                            </div>
                                        </div>
                                        <div class="col-xxl-5 col-md-5">
                                            <div>
                                                <label class="form-label">Video Youtube URL<span class="error">*
                                                    </span></label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control input_file"
                                                        name="gallery[1][input_file]" placeholder="Enter Video Youtube URL">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-1 pt-2">
                                            <a class="btn btn-danger btn-sm remove_galleries  mt-4">
                                                <i class="bx bx-trash"></i>
                                            </a>
                                        </div>
                                    </div>
                                @endforelse
                            </div>

                            <div class="row">
                                <div class="col-xxl-3 mt-3 col-md-6">
                                    <button type="submit" class="btn btn-success btn-label right ms-auto"><i
                                            class="bx bx-right-arrow-alt label-icon align-middle fs-16 ms-2"></i>Submit</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--end col-->
        </div>
    </section>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $("#gallery-form").validate({
                ignore: [],
                rules: {
                    "gallery[*][title]": {
                        required: true,
                        maxlength: 191
                    },
                    "gallery[*][file_alt_tag]": {
                        required: true,
                        maxlength: 191
                    },
                    'gallery[*][input_file]': {
                        required: true,
                    },
                    'gallery[*][thumbnail]': function(element) {
                        // If remove image is checked or no existing file, require a new file
                        if ($(element).closest('.input-group').next('.form-check').find('.remove-image')
                            .is(':checked') ||
                            $(element).siblings('.hidden_name').val() === "") {
                            return {
                                required: true,
                                extension: "jpeg|png|jpg|svg"
                            };
                        }
                        // If new file is selected (regardless of existing file), validate it
                        else if (element.files.length > 0) {
                            return {
                                extension: "jpeg|png|jpg|svg"
                            };
                        }
                        // Otherwise no validation needed
                        else {
                            return {};
                        }
                    }
                },
                messages: {
                    "gallery[*][title]": {
                        required: "Please enter a title for this item",
                        maxlength: "Title must be less than 191 characters"
                    },
                    "gallery[*][file_alt_tag]": {
                        required: "Please enter a alt tag for this item",
                        maxlength: "Alt tag must be less than 191 characters"
                    },
                },
                highlight: function(element) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function(element) {
                    $(element).closest('.form-group').removeClass('has-error');
                },
            });

            function rulesForMultipleDatas(params) {
                $('.input_file').each(function() {
                    $(this).rules("add", {
                        youtubeIframe: true
                    });
                });
            }
            jQuery.validator.addMethod("youtubeIframe", function(value, element, params) {
                var regex = /^<iframe .*<\/iframe>$/i;

                return this.optional(element) || regex.test(value);
            }, 'Please enter a valid YouTube iframe code.');


            $(document).on('click', '.add_galleries', function() {
                var index = 0;
                if ($('.parent-gallery-row').last().attr('data-gallery-index')) {
                    index = parseInt($('.parent-gallery-row').last().attr('data-gallery-index')) + 1;
                }
                var addIndex =
                    '<div class="row gy-4 mb-3 row_index parent-gallery-row" data-gallery-index="' + index +
                    '"><div class="col-xxl-3 col-md-3"><div><input class="form-control" name="gallery[' +
                    index +
                    '][gallery_id]" type="hidden"><label class="form-label">Video Title<span class="error">*</span></label><input class="form-control" required="" name="gallery[' +
                    index +
                    '][title]" placeholder="Enter Video Title"> @error('title')<div class="error">{{ $message }}</div>@enderror</div></div><div class="col-xxl-3 col-md-3"><div><label class="form-label">Thumbnail Image<span class="error">*</span></label><img alt="" src="#" width="50px"> <input class="form-control" name="gallery[' +
                    index +
                    '][thumbnail]" type="file" placeholder="Place Image" accept=".jpeg, .png, .jpg, .gif, .svg" required=""></div></div><div class="col-xxl-5 col-md-5"><div><label class="form-label">Video Youtube URL<span class="error">*</span></label><input class="form-control input_file" name="gallery[' +
                    index +
                    '][input_file]" type="text" placeholder="Enter Video Youtube URL" required=""></div></div><div class="col-md-1 pt-2"><a class="btn btn-danger btn-sm remove_galleries mt-4"><i class="bx bx-trash"></i></a></div></div>'
                $('.gallery-box').append(addIndex);
            });
            $(document).on('click', '.remove_galleries', function() {
                $(this).closest('.row_index').remove();
            });

        });
    </script>
@endsection