@extends('layouts.app')
@section('title', trans('menu.gallery_title'))
@section('content')
    @php $current_user = request()->user(); @endphp
<div class="content">

    <x-content.header title="{{__('title.gallery_title')}}" subTitle="{{ $albums->total() }} {{__('title.folders')}}">
        <x-slot:headerRight>

            @can('create', \Modules\Gallery\Entities\Album::class)
                <a class="btn-create btn-secondary-base" href="{{route('galleries.albums.create')}}"><x-svg-icon icon="icon-plus" />{{trans('forms.lbl_add_new')}}</a>
            @endcan
        </x-slot:headerRight>
    </x-content.header>


    <div id="folder-search-bar" class="flex gap-3 items-center">
        <div class="search-bar w-full 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>
    </div>

    @can('delete', Modules\Gallery\Entities\Album::class)
        <div id="selected-count" class="hidden">
            <div class="bg-custom-orange-50 text-custom-grey-600 py-2 px-[7px] rounded-lg flex items-center">
                <x-svg-icon class="mr-2 selected-bar-close cursor-pointer" icon="icon-close" />

                <h1 id="show-selected-count" class="text-md-semibold">
                    <span class="selected_items">0</span> {{ trans('forms.lbl_items_selected') }}
                </h1>

                <a href="javascript:;"
                    data-uri="{{route('galleries.albums.store')}}"
                    class="btn-folder-delete-all">
                    <x-svg-icon class="ml-6" icon="icon-trash" />
                </a>
            </div>
        </div>
    @endcan

    <div id="light-gallery-with-initsort" class="laravel-pagination">
        @include('gallery::albums.albums')
    </div>

</div>
@stop

@section('footer-script')

    @can('create', \Modules\Gallery\Entities\Album::class)
        <!-- jQuery UI -->
        <script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>
    @endcan

    <script type="text/javascript">

        function initSortFeature() {
            $( "#light-gallery-with-initsort .albums" ).sortable({
                items: ".pdrow",
                cursor: 'move',
                opacity: 0.6,
                update: function() {
                    reOrderList("{{route('galleries.albums.index.reorder')}}");
                }
            });
        }

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

            event.preventDefault();

            let url = '{{route('galleries.albums.index')}}/'+$(this).data('id')+'/locked', id = $(this).data('id');

            //album-lock-

            PDRequest({
                type    : "POST",
                url     : url,
                isFlash : false,
                event   : event,
                data    : {}
            }).then((response) => {

                if(response.status == "success" && response.locked === 1) {

                    $("#album-lock-"+id).find(".locked").removeClass("hidden");
                    $("#album-lock-"+id).find(".unlocked").addClass("hidden");
                    $("#lock-placer-"+id).removeClass("hidden");

                } else if(response.status == "success" && response.locked === 0) {
                    $("#album-lock-"+id).find(".locked").addClass("hidden");
                    $("#album-lock-"+id).find(".unlocked").removeClass("hidden");
                    $("#lock-placer-"+id).addClass("hidden");
                }

            }).catch(error => {

                $el.find(".custom-loader").remove();

            });

            return false;

        });

        $('#filter-form input').on("keyup", function(event) {

            let url = '{{route('galleries.albums.index.filter')}}';

            itemSearch(
                $('#light-gallery'),
                url,
                (results) => {
                    initSortFeature()
                }
            );

        });

        @can('create', \Modules\Gallery\Entities\Album::class)

            initSortFeature();

        @endcan

    </script>
@stop