@extends('layouts.pwa')

@section('title', 'Patio')

@section('content')

<div class="mb-3">
    <div id="menuPwa" class="menu-pwa">
        <button class="menu-item" onclick="toggleTema()">
            🌙 / ☀️ Cambiar tema
        </button>
    </div>
    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body text-center py-3">
            <div class="fw-bold">
                👷 {{ auth()->user()->name ?? 'Operador' }}
            </div>
            <small class="text-muted">
                Panel móvil de operaciones
            </small>
        </div>
    </div>
</div>

<div class="row g-2 mb-3">
    <div class="col-4">
        <div class="card border-0 shadow-sm text-center rounded-4">
            <div class="card-body p-2">
                <div class="fw-bold fs-5">{{ $enPatio }}</div>
                <small class="text-muted">En patio</small>
            </div>
        </div>
    </div>

    <div class="col-4">
        <div class="card border-0 shadow-sm text-center rounded-4">
            <div class="card-body p-2">
                <div class="fw-bold fs-5">{{ $conIncidencia }}</div>
                <small class="text-muted">Incidencias</small>
            </div>
        </div>
    </div>

    <div class="col-4">
        <div class="card border-0 shadow-sm text-center rounded-4">
            <div class="card-body p-2">
                <div class="fw-bold fs-5">{{ $salidasHoy }}</div>
                <small class="text-muted">Salidas hoy</small>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">

    <div class="col-6">
        <a href="{{ route('pwa.entradas.create') }}" class="text-decoration-none">
            <div class="card bg-success text-white card-touch h-100">
                <div class="display-6 mb-2">📥</div>
                <div>Entrada</div>
                <small class="opacity-75">Registrar</small>
            </div>
        </a>
    </div>

    <div class="col-6">
        <a href="{{ route('pwa.salidas.index') }}" class="text-decoration-none">
            <div class="card bg-danger text-white card-touch h-100">
                <div class="display-6 mb-2">📤</div>
                <div>Salida</div>
                <small class="opacity-75">Liberar</small>
            </div>
        </a>
    </div>

    <div class="col-6">
        <a href="{{ route('pwa.inventario.index') }}" class="text-decoration-none">
            <div class="card bg-primary text-white card-touch h-100">
                <div class="display-6 mb-2">📦</div>
                <div>Inventario</div>
                <small class="opacity-75">Consultar</small>
            </div>
        </a>
    </div>

    <div class="col-6">
        <a href="{{ route('pwa.contenedores.buscar') }}" class="text-decoration-none">
            <div class="card bg-dark text-white card-touch h-100">
                <div class="display-6 mb-2">🔍</div>
                <div>Buscar</div>
                <small class="opacity-75">Contenedor</small>
            </div>
        </a>
    </div>
    {{-- NUEVOS DATOS --}}  
    <div class="card border-0 shadow-sm rounded-4 mt-3">
        <div class="card-body">
            <h6 class="fw-bold mb-3">Movimientos últimos 7 días</h6>
            
            <div style="height: 220px;">
                <canvas id="movimientosChart"></canvas>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm rounded-4 mt-3">
        <div class="card-body">
            <h6 class="fw-bold mb-3">Distribución por estado</h6>

            <div style="height: 220px;">
                <canvas id="estadosChart"></canvas>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm rounded-4 mt-3">
        <div class="card-body">
            <h6 class="fw-bold mb-3">Últimos movimientos</h6>

            @forelse($ultimosMovimientos as $mov)
                <div class="border-bottom pb-2 mb-2 small">
                    <div class="d-flex justify-content-between">
                        <strong>{{ $mov->contenedor->contenedor ?? 'N/A' }}</strong>

                        @if($mov->tipo_movimiento === 'ENTRADA')
                            <span class="badge bg-success">ENTRADA</span>
                        @elseif($mov->tipo_movimiento === 'SALIDA')
                            <span class="badge bg-warning text-dark">SALIDA</span>
                        @else
                            <span class="badge bg-info">{{ $mov->tipo_movimiento }}</span>
                        @endif
                    </div>
                    
                    <div class="text-muted">
                        {{ \Carbon\Carbon::parse($mov->fecha)->format('d/m/Y') }} {{ $mov->hora }}
                    </div>
                </div>
            @empty
                <div class="text-muted small">Sin movimientos registrados.</div>
            @endforelse
        </div>
    </div>
@section('scripts')
    <script>
        const esDark = document.body.classList.contains('dark');

        const colorTexto = esDark ? '#e0e0e0' : '#6c757d';
        const colorGrid = esDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)';
        const labels = @json($labels);
        const entradasData = @json($entradasData);
        const salidasData = @json($salidasData);

        const estadosLabels = @json($estados->keys());
        const estadosData = @json($estados->values());

        new Chart(document.getElementById('movimientosChart'), {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                {
                    label: 'Entradas',
                    data: entradasData,
                    borderColor: '#6f42c1', // linea morado
                    backgroundColor: 'rgba(111, 66, 193, 0.15)', // 'rgba(40, 167, 69, 0.15)', // area rellena
                    pointBackgroundColor: '#28a745',
                    pointBorderColor: '#6f42c1', // morado puntos de entrada
                    borderWidth: 3,
                    tension: 0.35, // curva suave
                    fill: true // sombreado
                },
                {
                    label: 'Salidas',
                    data: salidasData,
                    borderColor: '#fd7e14', // naranja 🔥
                    backgroundColor: 'rgba(253, 126, 20, 0.15)',
                    pointBackgroundColor: '#fd7e14',
                    pointBorderColor: '#fd7e14',
                    borderWidth: 3,
                    tension: 0.35,
                    fill: true
                }
            ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        labels: {
                            color: colorTexto
                        }
                    }
                },
                scales: {
                    x: {
                        ticks: { color: colorTexto },
                        grid: { color: colorGrid }
                    },
                    y: {
                        ticks: { color: colorTexto },
                        grid: { color: colorGrid }
                    }
                }
            }
        });

        new Chart(document.getElementById('estadosChart'), {
            type: 'doughnut',
            data: {
                labels: estadosLabels,
                datasets: [{
                    data: estadosData,
                    backgroundColor: estadosLabels.map(label => {
                        switch (label) {
                            case 'EN_PATIO':
                                return '#28a745'; // verde
                            case 'CON_INCIDENCIA':
                                return '#6c757d'; // gris
                            case 'SALIO':
                                return '#ffc107'; // amarillo
                            default:
                                return '#007bff'; // azul fallback
                        }
                    }),
                    borderColor: '#ffffff',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            color: colorTexto
                        }
                    }
                }
            }
        });
    </script>
    <script>
        function aplicarTema() {
            const tema = localStorage.getItem('tema');

            if (tema === 'dark') {
                document.body.classList.add('dark');
            } else if (tema === 'light') {
                document.body.classList.remove('dark');
            } else {
                // automático según sistema
                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                    document.body.classList.add('dark');
                }
            }
        }

        function toggleTema() {
            const isDark = document.body.classList.contains('dark');

            if (isDark) {
                document.body.classList.remove('dark');
                localStorage.setItem('tema', 'light');
            } else {
                document.body.classList.add('dark');
                localStorage.setItem('tema', 'dark');
            }
        }

        // ejecutar al cargar
        aplicarTema();
        </script>
@endsection

</div>

<form method="POST" action="{{ route('logout') }}" class="mt-4">
    @csrf
    <button type="submit" class="btn btn-outline-danger w-100 rounded-4">
        Cerrar sesión
    </button>
</form>

@endsection