@php
    $supportTicket = app()->make(\App\Models\Collection\Support\SupportTicket::class);
@endphp

<div x-data>
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                @include('livewire.support.include.index.header.header')
                <div class="card-body pt-0">
                    <div class="table-responsive" style="position: relative;">
                        @include('livewire.support.include.index.table')
                        @include('livewire.support.include.loading')
                        @if ($tickets->hasPages())
                            <span class="mt-3" wire:loading.class="d-none">
                                {{ $tickets->links() }}
                            </span>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.store('dropdowns', {
                filterOpen: false,
                downloadOpen: false,

                toggleFilter() {
                    this.filterOpen = !this.filterOpen;
                    if (this.filterOpen) this.downloadOpen = false;
                },

                toggleDownload() {
                    this.downloadOpen = !this.downloadOpen;
                    if (this.downloadOpen) this.filterOpen = false;
                },

                closeAll() {
                    this.filterOpen = false;
                    this.downloadOpen = false;
                }
            });

            window.addEventListener('toggle-filter', () => {
                Alpine.store('dropdowns').toggleFilter();
            });

            window.addEventListener('toggle-download', () => {
                Alpine.store('dropdowns').toggleDownload();
            });

            window.addEventListener('showScheduleCalendar', () => {

            });
        });
        document.addEventListener("DOMContentLoaded", function () {
            Livewire.on('showScheduleCalendar', () => {
                setTimeout(function () {
                    flatpickrInstance = flatpickr("#datetimepicker", {
                        enableTime: false,
                        dateFormat: "Y-m-d",
                        time_24hr: true,
                        locale: 'es',
                    });

                    flatpickr("#dateFromValue", {
                        enableTime: false,
                        dateFormat: "Y-m-d",
                        time_24hr: true,
                        locale: 'es',
                    });

                    flatpickr("#dateToValue", {
                        enableTime: false,
                        dateFormat: "Y-m-d",
                        time_24hr: true,
                        locale: 'es',
                    });
                }, 50);
            });
        });
    </script>

    <style>
        [x-cloak] { display: none !important; }

        .filter-dropdown, .download-dropdown {
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .btn.active {
            background-color: var(--bs-primary) !important;
            color: white !important;
        }
    </style>
</div>

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/flatpickr.min.css') }}">
@endpush

@push('scripts')
    <script src="{{ asset('js/datepicker-full.min.js') }}"></script>
    <script src="{{ asset('js/imask.min.js') }}"></script>
    <script src="{{ asset('js/flatpickr-es.js') }}"></script>
@endpush