@extends('layouts.app')

@section('content')

    <x-alerts />

    <!-- Main Content -->
    <main class="px-6 py-6 bg-white dark:bg-white transition-colors duration-200" x-data="dashboardData()">


            <x-admin.request.requests-stats
                :pending-count="$pendingCount"
                :urgent-count="$urgentCount"
                :overdue-count="$overdueCount"x
                :in-review-count="$inReviewCount"
            />


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


        {{-- <section class="mt-4 bg-[#404040] border border-yellow-300/60 rounded-2xl px-4 py-5 shadow-lg"> --}}
            {{-- vista de grid --}}
            <x-admin.request.requests-grid-view :requests="$requests" />


            {{-- vista de lista --}}
            {{-- <x-request.requests-list-view :requests="$requests"/> --}}


            {{-- vista de paginacion --}}
            {{-- <x-request.requests-pagination :requests="$requests"/> --}}
        {{-- </section> --}}


        <x-pagination :requests="$requests"/>

        <!-- Modal Asignar Analista -->
        <x-modals.request.assign-analyst :analysts="$analysts" />

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

        <!-- Modal Devolver al Analista -->
        <x-modals.request.return />

        <!-- Modal Iteración Externa -->
        <x-modals.request.external-iteration />

        <!-- 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) {
                    // Depuración: verificar el valor de urgente
                    console.log('Request object:', request);
                    console.log('Urgente value:', request.urgente);
                    console.log('Urgente type:', typeof request.urgente);
                    
                    // 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