@extends('layouts.app')
@section('title', trans('menu.gallery_title'))
@section('plugin-styles')
    <link rel="stylesheet" href="{{ asset('vendors/jquery-file-upload/uploadfile.css') }}">
    <link href="https://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
@stop
@section('content')
    @php $current_user = request()->user(); @endphp
    <div class="content">
        <x-content.header title="{{ __('title.gallery_title') }}" subTitle="{{ $album->name }}">
            <x-slot:headerRight>
                @can('create', \Modules\Gallery\Entities\Album::class)
                    <button
                        data-toggle="canvas-panel"
                        data-title="{{ __('title.upload') }}"
                        class="btn-secondary-base"><x-svg-icon icon="icon-plus" /> {{ __('title.upload') }}</button>
                @endcan
            </x-slot:headerRight>
        </x-content.header>

        <div class="flex flex-wrap-reverse lg:flex-nowrap gap-6">
            <div id="gallery-item-container" class="w-full lg:w-[calc(100%-328px-24px)]">
                <div
                    class="flex mb-[24px] bg-custom-grey-50 rounded-[8px] w-full lg:w-max items-center p-[8px] overflow-x-scroll no-scrollbar">
                    <div>
                        <button id="filter-all" type="button" data-content="all" class="filter-tab tabs-btn-box min-w-[94px] active">{{ __('forms.lbl_all') }}</button>
                    </div>
                    <div>
                        <button id="filter-photos" type="button" data-content="photos" class="filter-tab tabs-btn-box min-w-[94px]">{{ __('forms.lbl_photos') }}</button>
                    </div>
                    <div>
                        <button id="filter-videos" type="button" data-content="videos" class="filter-tab tabs-btn-box min-w-[94px]">{{ __('forms.lbl_videos') }}</button>
                    </div>
                </div>

                <div id="folder-search-bar" class="flex gap-3 justify-between items-center">
                    <div class="search-bar w-[calc(100%-24px-12px)] lg:w-auto">
                        <form id="filter-form" method="POST" onsubmit="return false;">
                            <input name="_term" type="text" class="album-search search-input w-full lg:w-[320px]"
                                placeholder="{{ trans('forms.lbl_search') }}" />
                            <x-svg-icon icon="icon-search" />
                        </form>
                    </div>

                    <svg id="folder-info-btn" class="text-custom-grey-600 cursor-pointer min-h-6 min-w-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 16.0006V12.0006M12 8.00057H12.01M3 7.94202V16.0591C3 16.4018 3 16.5731 3.05048 16.7259C3.09515 16.8611 3.16816 16.9851 3.26463 17.0898C3.37369 17.2082 3.52345 17.2914 3.82297 17.4578L11.223 21.5689C11.5066 21.7264 11.6484 21.8052 11.7985 21.8361C11.9315 21.8634 12.0685 21.8634 12.2015 21.8361C12.3516 21.8052 12.4934 21.7264 12.777 21.5689L20.177 17.4578C20.4766 17.2914 20.6263 17.2082 20.7354 17.0898C20.8318 16.9851 20.9049 16.8611 20.9495 16.7259C21 16.5731 21 16.4018 21 16.0591V7.94202C21 7.59937 21 7.42805 20.9495 7.27525C20.9049 7.14008 20.8318 7.016 20.7354 6.91131C20.6263 6.79297 20.4766 6.70977 20.177 6.54337L12.777 2.43225C12.4934 2.2747 12.3516 2.19592 12.2015 2.16503C12.0685 2.1377 11.9315 2.1377 11.7985 2.16503C11.6484 2.19592 11.5066 2.2747 11.223 2.43225L3.82297 6.54337C3.52345 6.70977 3.37369 6.79297 3.26463 6.91131C3.16816 7.016 3.09515 7.14008 3.05048 7.27525C3 7.42805 3 7.59937 3 7.94202Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </div>

                <div class="filter-tab-content">
                    <div id="photos-content" class="tab-pane-box relative laravel-pagination">
                        @include('gallery::photos')
                    </div>

                    <div id="videos-content" class="tab-pane-box relative laravel-pagination">
                        @include('gallery::videos')
                    </div>

                </div>
            </div>

            @include('gallery::albums.details')


        </div>

        @include('gallery::edit_form')
    </div>
@stop

@section('panel-content')
    @can('create', \Modules\Gallery\Entities\Album::class)
        <x-content.canvas title="{{ __('title.upload') }}" action="{{ route('galleries.albums.assets.store', $album->id) }}">
            <div class="file-upload-wrapper">
                <div id="fileuploader" data-types="jpg,jpeg,png,gif,mp4,mpeg,avi,m4v,mov" data-assets=""
                    data-extrahtmlwithname="1">{{ trans('employee_documents.select_documents_upload') }}</div>
            </div>
        </x-content.canvas>
    @endcan
@stop

@section('footer-script')
    <script src="{{ asset('vendors/jquery-file-upload/jquery.uploadfile.min.js') }}"></script>
    {{-- <script src="{{asset('vendors/lightgallery/js/lightgallery-all.min.js')}}"></script> --}}
    <script src="https://vjs.zencdn.net/4.12/video.js"></script>
    <!-- Custom js for this page-->
    <script src="{{ asset('js/jquery-file-upload.js') }}"></script>

    <script type="text/javascript">

        $('#filter-form input').on("keyup", function(event) {
            searchDebounce(
                function() {
                    getItems($("#photos-content"), "{{ route('galleries.albums.assets.index.photo', $album) }}")
                },
                function() {
                    getItems($("#videos-content"), "{{ route('galleries.albums.assets.index.video', $album) }}")
                },
            );
        });


        $("body").on("click", '.btn-save', function(event) {

            event.preventDefault();

            data = $(this).parents("form").serialize();

            data = data + "&files=" + JSON.stringify(selectedFiles);

            PDRequest({
                type: "POST",
                url: $(this).parents("form").prop("action"),
                data: data,
                event: event
            }).then((response) => {

                if (response.status == 'success') {

                    window.location = "{{ route('galleries.albums.assets.index', $album) }}";

                }

            });

        });

        jQuery(document).ready(function() {

            initPhotoGallery();

            initVideoGallery();

        });

        // Function to handle tab clicks for the second set
        $("body").on("click", ".filter-tab", function( event ) {
            // Reset all tabs and contents for the second set
            $("#filter-photos, #filter-videos, #filter-all").removeClass(
                "active text-custom-grey-700 bg-base-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px]"
            );

            // Set new active state for the clicked tab in the second set
            $(this).addClass(
                "active text-custom-grey-700 bg-base-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px]"
            );

            $(".filter-tab-content .tab-pane-box").addClass("hidden");

            if($(this).attr("id") == "filter-all") {
                $("#photos-content, #videos-content").removeClass("hidden");

            } else {
                $("#"+$(this).data("content")+"-content").removeClass("hidden");
            }


        });

        // Trigger click for the initially selected tabs
        $("#filter-all").trigger("click");

        function handleTabClick1(tab, content) {
            $(tab).click(function() {
                // Reset all tabs and contents for the second set
                $("#tab1_22, #tab2_22, #tab3_22").removeClass(
                    "active text-custom-grey-700 bg-base-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px]"
                );
                $(".tabContent_22 .tab-pane-box").addClass("hidden");

                // Set new active state for the clicked tab in the second set
                $(tab).addClass(
                    "active text-custom-grey-700 bg-base-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px]"
                );
                $(content).removeClass("hidden");
            });
        }

        // Handling clicks for the second set of tabs
        handleTabClick1("#tab1_22", "#content1_22");
        handleTabClick1("#tab2_22", "#content2_22");
        handleTabClick1("#tab3_22", "#content3_22");

        // Trigger click for the initially selected tabs
        $("#tab1_22").trigger("click");

        var validateForm = $("#album-form").validate(validateFormObj);

        $("#folder-details-save").on("click", function(event) {
			event.preventDefault();

            if($("#album-form").valid()) {

               PDRequest({
    				type    : "POST",
    				url     : $("#album-form").prop("action"),
    				data    : $("#album-form").serialize(),
    				event   : event
    			}).then((response) => {
                    window.location = "{{ route('galleries.albums.assets.index', $album) }}";
                });
            }
		});

        //Folder Details Close
        $("#folder-details-close, #folder-details-cancel").click(function() {
            $("#folder-details").addClass("hidden");

            $("#gallery-item-container")
                .removeClass("w-full lg:w-[calc(100%-328px-24px)]")
                .addClass("w-full");

            $(".gallery-item-grid")
                .removeClass("lg:grid-cols-3")
                .addClass("lg:grid-cols-4");
        });

        //Folder Details View
        $("#folder-info-btn").click(function() {
            $("#folder-details").removeClass("hidden");

            $("#gallery-item-container")
                .addClass("w-full lg:w-[calc(100%-328px-24px)]")
                .removeClass("w-full");

            $(".gallery-item-grid")
                .addClass("lg:grid-cols-3")
                .removeClass("lg:grid-cols-4");
        });

        $(".inline-edit").on("click", function(event){
            $("#"+$(this).data("field")).toggleClass("hidden")
            $(this).toggle()
        });

        $(".close-btn").on("click", function(event) {
            $("#"+$(this).data("field")).toggleClass("hidden")
            $("#inline-edit-"+$(this).data("field")).toggle()
        });


    </script>
@stop