@if($isCustomizeMode())
    <div id="menu-template-modal"
         class="modal"
         data-bs-backdrop="static"
         data-bs-keyboard="false"
         tabindex="-1"
         aria-labelledby="templateModal"
         aria-hidden="true"
    >
        <div class="modal-dialog modal-custom-width">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Select Template</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    @foreach ($templates(true) as $template)
                        @if (!$template->id)
                            <hr/>
                            @continue
                        @endif
                    <div class="fs-5 row fw-bold">
                        <span class="cell">
                        @if ($template->id === $menuTemplateId)
                            <i class="fa fa-circle-check"></i> {{ $template->name }}
                        @else
                            <a class="fw-normal ps-4" href="{{ url()->current() }}?customize=true&menu={{ $template->id }}">
                                {{ $template->name }}
                            </a>
                        @endif
                        </span>

                        <span class="cell text-end">
                            @if($template->user_page_menu_items_count) Assigned to {{ $template->user_page_menu_items_count }} user(s)@endif
                        </span>
                        <span class="cell text-end me-3">
                            @if ($template->created_by_id === request()->user()->id)
                                <i class="fas fa-trash-alt" style="cursor:pointer;"
                                   data-url="{{ route('custom-page-menu-templates.delete', ['template' => request('template'), 'pageMenuTemplate' => $template->id]) }}"
                                   onclick="deleteCustomTemplate(this)"></i>
                            @endif
                        </span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div id="assign-template-modal"
         class="modal"
         data-bs-backdrop="static"
         data-bs-keyboard="false"
         tabindex="-1"
         aria-labelledby="assignTemplateModal"
         aria-hidden="true"
    >
        <div class="modal-dialog modal-custom-width">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Assign Template</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="assign-form" method="post" action="{{ route('page-menu-templates.assign-to-workers', ['template' => request('template'), 'pageMenuTemplate' => $menuTemplateId]) }}">
                        <p class="text-danger feedback"></p>
                        @csrf
                        <div class="form-group mb-3">
                            <label class="form-label" for="menu-template-id">Template</label>
                            <select id="menu-template-id"
                                    tabindex="-1"
                                    aria-hidden="true"
                                    class="form-control @error('menu_template_id') is-invalid @enderror"
                                    name="menu_template_id"
                            >
                                <option value="">Current Selected Items</option>
                                @foreach ($templates() as $template)
                                    <option value="{{ $template->id }}">{{ $template->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <nav>
                            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                <button class="nav-link active" id="nav-user-tab" data-bs-toggle="tab" data-bs-target="#nav-user-panel" type="button" role="tab" aria-controls="nav-user-panel" aria-selected="true">User</button>
                                <button class="nav-link" id="nav-role-tab" data-bs-toggle="tab" data-bs-target="#nav-role-panel" type="button" role="tab" aria-controls="nav-role-panel" aria-selected="false">Role</button>
                            </div>
                        </nav>
                        <div class="tab-content mb-5" id="nav-tab-content">
                            <div class="tab-pane fade show active" id="nav-user-panel" role="tabpanel" aria-labelledby="nav-user-tab">
                                <div class="form-group">
                                    <label class="form-label" for="users">Workers</label>
                                    <select id="users"
                                            multiple
                                            tabindex="-1"
                                            aria-hidden="true"
                                            class="form-control @error('user_ids') is-invalid @enderror"
                                            name="user_ids[]"
                                    >
                                    </select>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-role-panel" role="tabpanel" aria-labelledby="nav-role-tab">
                                <div class="form-group">
                                    <label class="form-label" for="role">Role</label>
                                    <select id="role"
                                            tabindex="-1"
                                            aria-hidden="true"
                                            class="form-control @error('role') is-invalid @enderror"
                                            name="role"
                                    >
                                        <option value="">Select role...</option>
                                        @foreach([\App\Models\Role::ROLE_WORKER, \App\Models\Role::ROLE_SUPERVISOR] as $role)
                                            <option value="{{ $role }}">{{ ucwords($role) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <button type="submit" class="btn btn-primary text-white float-end">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="manage-template-modal"
         class="modal"
         data-bs-backdrop="static"
         data-bs-keyboard="false"
         tabindex="-1"
         aria-labelledby="manageTemplateModal"
         aria-hidden="true"
    >
        <div class="modal-dialog modal-custom-width">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@if($menuTemplate->created_by_id)Update @else Create @endif Custom Template</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="manage-template-form" method="post" enctype="multipart/form-data" action="{{ $menuTemplate->created_by_id ? route('custom-page-menu-templates.update', ['template' => request('template'), 'pageMenuTemplate' => $menuTemplateId]) : route('custom-page-menu-templates.create', ['template' => request('template'), 'page' => $menuTemplate->page_id]) }}">
                        @if ($menuTemplate->created_by_id)
                            @method('PUT')
                        @endif
                        @csrf
                        <div class="form-group">
                            <label class="form-label" for="name">Template Name</label>
                            <input id="name" name="name" class="form-control" value="{{ $menuTemplate->created_by_id ? $menuTemplate->name : '' }}" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="default_background">Background Type</label>
                            <div class="right-arrow">
                                <select class="form-control" id="default_background" name="default_background">
                                @foreach(['background_color', 'background_image', 'background_video'] as $type)
                                    <option value="{{ $type }}" @if($type === $menuTemplate?->default_background) selected='selected' @endif>{{ \Illuminate\Support\Str::title(str_replace('background_', '', $type)) }}</option>
                                @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group background_panel" style="@if(in_array($menuTemplate?->default_background, ['background_image', 'background_video'])) display:none; @endif">
                            <label class="form-label" for="background_color">Background Color</label>
                            <select id="background_color"
                                    name="background_color"
                                    class="select-background-color form-control preset-color"
                                    tabindex="-1"
                            >
                                <option value="">Choose...</option>
                                @foreach(json_decode(setting('preset_colors')) as $item)
                                    <option value="{{ $item->color }}"
                                    {{ $menuTemplate->background_color === $item->color ? 'selected' : '' }}
                                    >{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group background_panel" style="{{ $menuTemplate?->default_background === 'background_image' ? 'display:block;' : 'display:none;' }}">
                            <label for="background_image" class="form-label">Secondary Background (Image)</label>
                            <input type="file"
                                   name="background_image"
                                   id="background_image"
                                   accept="image/*"
                                   class="form-control @error('background_image') is-invalid @enderror"
                            >

                            @if($menuTemplate->background_image)
                                <img alt="bg" class="my-2" src="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($menuTemplate->background_image) }}"/>
                                <div class="">
                                    <label for="delete_background_image" class="form-label mb-0">Delete background image</label>
                                    <input type="checkbox" name="delete_background_image" id="delete_background_image" value="1"/>
                                </div>
                            @endif
                        </div>

                        <div class="form-group background_panel" style="{{ $menuTemplate?->default_background === 'background_video' ? 'display:block;' : 'display:none;' }}">
                            <label for="background_video" class="form-label">Third Background (Video)</label>
                            <input type="file"
                                   name="background_video"
                                   id="background_video"
                                   accept="video/*"
                                   class="form-control @error('background_video') is-invalid @enderror"
                            >
                            @if($menuTemplate->background_video)
                                <div class="my-2">
                                    <video autoplay loop muted playsinline height="auto" width="100%">
                                        <source src="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($menuTemplate->background_video) }}" type="{{ 'video/'.pathinfo($menuTemplate->background_video, PATHINFO_EXTENSION) }}">
                                        Your browser does not support the video tag.
                                    </video>
                                </div>
                                <div class="">
                                    <label for="delete_background_video" class="form-label mb-0">Delete background video</label>
                                    <input type="checkbox" name="delete_background_video" id="delete_background_video" value="1"/>
                                </div>
                            @endif
                        </div>
                        {{--@if($menuTemplate->background_image)
                            <div class="form-group">
                                <label for="delete_background_image" class="form-label">Delete background image</label>
                                <input type="checkbox" name="delete_background_image" id="delete_background_image" value="1"/>
                            </div>
                        @endif
                        @if($menuTemplate->background_video)
                            <div class="form-group">
                                <label for="delete_background_video" class="form-label">Delete background video</label>
                                <input type="checkbox" name="delete_background_video" id="delete_background_video" value="1"/>
                            </div>
                        @endif--}}
                        <div class="form-group pt-3 mt-3">
                        @if($menuTemplate->created_by_id && $menuTemplate->created_by_id === request()->user()->id)

                            @if (request()->user()->hasPermissionTo(\App\Models\Permission::PERM_UPDATE_CUSTOM_MENU_TEMPLATE))
                            <button type="submit" data-action="update" class="btn btn-primary text-white float-end">Update</button>
                            @endif
                            @if (request()->user()->hasPermissionTo(\App\Models\Permission::PERM_CREATE_CUSTOM_MENU_TEMPLATE))
                                <button type="submit" data-action="create" class="btn btn-info text-white float-end me-2">Save as New</button>
                            @endif
                            @if (request()->user()->hasPermissionTo(\App\Models\Permission::PERM_DELETE_CUSTOM_MENU_TEMPLATE))
                            <button type="button"
                                    class="btn btn-danger float-start text-white"
                                    onclick="deleteCustomTemplate(this)"
                                    data-url="{{ route('custom-page-menu-templates.delete', ['template' => request('template'), 'pageMenuTemplate' => $menuTemplateId]) }}"
                            >Delete</button>
                            @endif
                        @elseif (!$menuTemplate->created_by_id && request()->user()->hasPermissionTo(\App\Models\Permission::PERM_CREATE_CUSTOM_MENU_TEMPLATE))
                            <button type="submit" class="btn btn-primary text-white float-end">Save</button>
                        @endif
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
@endif

@push('js')
    <script>
        function deleteCustomTemplate(e) {
            Swal.fire({
                title: 'Do you want to delete this template?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.value) {
                    axios.delete($(e).data('url')).then((response) => {

                        iziToast.success({
                            title: response.data.status,
                            message: response.data.message,
                        });

                        setTimeout(function(){
                            window.location.reload();
                        }, 2000);

                    }).catch((errors) => {
                        iziToast.success({
                            title: 'Error',
                            message: errors.response.data.message,
                        });
                    }).finally(() => {});
                }
            })
        }

        $(document).ready(function() {
            PresetColor.init({
                colors: JSON.parse('{!! setting('preset_colors') !!}'),
                color_selector: 'select.select-background-color',
                width: '100%',
                dropdownParent: $("#manage-template-modal"),
            });

            $('#default_background').change(function () {
                const selected = $(this).val();
                $('.background_panel').hide();
                $(`#${selected}`).closest('.background_panel').show();
            })
            const manageTemplateForm = $('#manage-template-form');
            manageTemplateForm.submit(async function (e){
                e.preventDefault();
                let formData = new FormData();
                let defaultBackground = manageTemplateForm.find('select[name=default_background]').val();
                formData.append('default_background', defaultBackground);
                switch (defaultBackground) {
                    case 'background_color':
                        formData.append('background_color', manageTemplateForm.find('select[name=background_color]').val());
                        break;
                    case 'background_image':
                        let backgroundImage = $('#background_image').prop('files')[0];
                        if (backgroundImage) {
                            formData.append('background_image', backgroundImage);
                        }
                        //formData.append('delete_background_image', manageTemplateForm.find('input[name=delete_background_image]:checked').length)
                        break;
                    case 'background_video':
                        let backgroundVideo = $('#background_video').prop('files')[0];
                        if (backgroundVideo) {
                            formData.append('background_video', backgroundVideo);
                        }
                        //formData.append('delete_background_video', manageTemplateForm.find('input[name=delete_background_video]:checked').length)
                        break;
                    default:

                }
                /*let backgroundImage = $('#background_image').prop('files')[0];
                let backgroundVideo = $('#background_video').prop('files')[0];
                if (backgroundImage) {
                    formData.append('background_image', backgroundImage);
                }
                if (backgroundVideo) {
                    formData.append('background_video', backgroundVideo);
                }*/
                $.each($('.switch > input[type=checkbox]:checked'), function(i, o) {
                    formData.append('menu_items[]', $(o).data('id')); // Append each item with the key 'menu_items'
                });
                formData.append('name', manageTemplateForm.find('input[name=name]').val());
                //formData.append('background_color', manageTemplateForm.find('select[name=background_color]').val());
                formData.append('create', $(e.originalEvent.submitter).data('action') === 'create' ? 1 : 0);
                formData.append('delete_background_image', manageTemplateForm.find('input[name=delete_background_image]:checked').length)
                formData.append('delete_background_video', manageTemplateForm.find('input[name=delete_background_video]:checked').length)

                if (manageTemplateForm.find('input[name=_method]').val() === 'PUT') {
                    formData.append('_method', manageTemplateForm.find('input[name=_method]').val());
                }
                await axios.post(manageTemplateForm.attr('action'), formData)
                    .then((response) => {

                        iziToast.success({
                            title: response.data.status,
                            message: response.data.message,
                        });

                        setTimeout(function(){
                            if (!response.data.data) {
                                window.location.reload();
                            } else {
                                const url = new URL(window.location.href);
                                url.searchParams.set('menu', response.data.data.id);
                                window.location.href = url.href;
                            }
                        }, 2000);

                    }).catch((errors) => {
                        iziToast.success({
                            title: 'Error',
                            message: errors.response.data.message,
                        });
                    }).finally(() => {});
            });

            const assignForm = $('#assign-form');
            assignForm.submit(function (e) {
                e.preventDefault();
                let roleSelector = $('#role');
                let userSelector = $('#users');
                let menuTemplateSelector = $('#menu-template-id');
                if (roleSelector.val() && userSelector.val().length) {
                    assignForm.find('.feedback').text('It isn\'t allowed to choose user and role');
                    return;
                }
                let data = {
                    user_ids: userSelector.val() || undefined,
                    role: roleSelector.val() || undefined,
                    menu_items: {},
                    menu_template_id: menuTemplateSelector.val() || undefined,
                };

                $.each($('.switch > input[type=checkbox]'), function(i, o) {
                    data.menu_items['a' + $(o).data('id')] = $(o).is(':checked') ? 1 : 0;
                });

                axios.post(assignForm.attr('action'), data).then((response) => {

                    iziToast.success({
                        title: response.data.status,
                        message: response.data.message,
                    });
                    $('#assign-template-modal .btn-close[data-bs-dismiss=modal]').click();
                    window.location.reload();
                }).catch((errors) => {
                    iziToast.success({
                        title: 'Error',
                        message: errors.response.data.message,
                    });
                }).finally(() => {});
            })

            $('#users').select2({
                width: '100%',
                dropdownParent: $("#assign-template-modal"),
                ajax: {
                    url: "{{ route('client.workers') }}",
                    data: function (params) {
                        return {
                            q: params.term,
                        }
                    },
                    processResults: function (data) {
                        let options = [];
                        for (let i = 0; i < data.length; i++) {

                            //options.push(new Option(data[i].username, data[i].id, false, false));
                            options.push({
                                id: data[i].id,
                                text: data[i].username
                            })
                        }

                        return {
                            results: options,
                        };
                    }
                },
                minimumInputLength: 1,
            })
        });
    </script>
@endpush

@push('css')
    <style>
        .modal-body .row {
            display: flex;
        }
        .modal-body .cell {
            flex: 1;
            padding: 2px;
        }
    </style>
@endpush