@extends('layouts.app')

@section('content')

    <x-alerts />

    <main class="px-6 py-8 mt-10 md:mt-16 bg-white" x-data="dashboardData()">

        <!-- Stats Cards -->
        <x-analyst.requests-stats :pendientes="$pendientes" :enIteracionInterna="$enIteracionInterna" :totalAsignadas="$totalAsignadas" />

        {{-- filtros --}}
        <x-requests-filters :statuses="$statuses" />



        {{-- Grid View --}}
        <x-analyst.requests-grid-view :requests="$requests" />





        {{-- paginacion --}}
        <x-pagination :requests="$requests"/>

        <!-- Modal Completar Solicitud -->
        <x-modals.request.completed />

        <!-- Componente Modal de Detalles -->
        <x-request-details-modal />

    </main>

    <script>
        function dashboardData() {
            return {
                darkMode: localStorage.getItem('darkMode') === 'true',
                viewMode: localStorage.getItem('viewMode') || 'grid',
                requests: @json($requestsData ?? []),
                showAssignModal: false,
                showCloseModal: false,
                showReturnModal: false,
                showExternalModal: false,
                selectedRequest: null,
                selectedCloseRequest: null,
                selectedReturnRequest: null,
                selectedExternalRequest: null,

                init() {
                    if (this.darkMode) {
                        document.documentElement.classList.add('dark');
                    }

                    // Watch for viewMode changes and save to localStorage
                    this.$watch('viewMode', value => {
                        localStorage.setItem('viewMode', value);
                    });
                },

                toggleDarkMode() {
                    this.darkMode = !this.darkMode;
                    localStorage.setItem('darkMode', this.darkMode);
                    if (this.darkMode) {
                        document.documentElement.classList.add('dark');
                    } else {
                        document.documentElement.classList.remove('dark');
                    }
                },

                openDetailsModal(data) {
                    window.dispatchEvent(new CustomEvent('open-details-modal', {
                        detail: data
                    }));
                },

                viewDetails(request) {
                    // Disparar evento para abrir el modal de detalles
                    window.dispatchEvent(new CustomEvent('open-details-modal', {
                        detail: request
                    }));
                },

                toggleUrgent(request) {
                    // Crear formulario para enviar la petición
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = `/request/${request.id}/urgent`;

                    // Token CSRF
                    const csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = '_token';
                    csrfToken.value = '{{ csrf_token() }}';
                    form.appendChild(csrfToken);

                    // Método PUT
                    const methodField = document.createElement('input');
                    methodField.type = 'hidden';
                    methodField.name = '_method';
                    methodField.value = 'PUT';
                    form.appendChild(methodField);

                    // Campo is_urgent
                    const urgentField = document.createElement('input');
                    urgentField.type = 'hidden';
                    urgentField.name = 'is_urgent';
                    urgentField.value = request.urgente ? '0' : '1';
                    form.appendChild(urgentField);

                    document.body.appendChild(form);
                    form.submit();
                }
            }
        }
    </script>

@endsection