@extends('../padre.padre')

@section('styles')
<style>
    .report-header {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
        color: #ffffff;
        padding: 12px 20px;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
        margin-bottom: 12px;
    }

    .badge-admin {
        background: linear-gradient(90deg, #f59e0b, #d97706);
        color: white;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 2px 8px;
        border-radius: 10px;
    }

    .filter-card {
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
        padding: 10px 14px;
        border: 1px solid #e2e8f0;
        margin-bottom: 12px;
    }

    .filter-label {
        font-size: 0.72rem;
        font-weight: 700;
        color: #475569;
        margin-bottom: 2px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .filter-input {
        height: 33px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        font-size: 0.82rem !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        padding: 2px 8px !important;
    }

    .filter-input:focus {
        border-color: #f59e0b !important;
        box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15) !important;
    }

    .btn-consultar {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        color: #ffffff !important;
        border: none;
        height: 33px;
        padding: 0 16px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 0.8rem;
    }

    .btn-consultar:hover {
        background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
        color: #ffffff !important;
    }

    .btn-exportar {
        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
        color: #ffffff !important;
        border: none;
        height: 33px;
        padding: 0 16px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 0.8rem;
    }

    .btn-exportar:hover {
        background: linear-gradient(135deg, #15803d 0%, #166534 100%);
        color: #ffffff !important;
    }

    .results-table {
        font-size: 0.82rem;
        border-collapse: collapse;
        width: 100%;
    }

    .results-table thead th {
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        color: #ffffff;
        font-weight: 700;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        padding: 8px 10px;
        border: 1px solid #475569;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .results-table tbody td {
        padding: 6px 10px;
        border: 1px solid #e2e8f0;
        vertical-align: middle;
    }

    .results-table tbody tr:nth-child(even) {
        background-color: #f8fafc;
    }

    .results-table tbody tr:hover {
        background-color: #eff6ff;
    }

    .badge-estado {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .badge-pendiente {
        background: #fef3c7;
        color: #92400e;
    }

    .badge-aprobado {
        background: #d1fae5;
        color: #065f46;
    }

    .badge-rechazado {
        background: #fecaca;
        color: #991b1b;
    }

    .badge-completado {
        background: #dbeafe;
        color: #1e40af;
    }

    .summary-card {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 8px 14px;
        margin-bottom: 10px;
    }

    .summary-number {
        font-size: 1.5rem;
        font-weight: 800;
        color: #1e293b;
    }

    .scroll-table-wrapper {
        max-height: 65vh;
        overflow-y: auto;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }
</style>
@endsection

@section('contenido')

{{-- Encabezado --}}
<div class="report-header d-flex justify-content-between align-items-center">
    <div>
        <h5 class="mb-0" style="font-weight: 800;">📋 AUDITORÍA DE REQUISICIONES <span class="badge-admin ms-2">Solo Admin</span></h5>
        <small style="opacity: 0.7;">Informe detallado de requisiciones por rango de fechas y bodegas</small>
    </div>
</div>

{{-- Filtros --}}
<div class="filter-card">
    <form action="auditoriaRequisicionesConsulta" method="GET" class="row align-items-end g-2">

        <div class="col-auto">
            <div class="filter-label">📅 Fecha Inicial</div>
            <input required type="date" name="fi" value="{{ $fi }}" class="form-control filter-input">
        </div>

        <div class="col-auto">
            <div class="filter-label">📅 Fecha Final</div>
            <input required type="date" name="ff" value="{{ $ff }}" class="form-control filter-input">
        </div>

        <div class="col-auto">
            <div class="filter-label">🏪 Bodega</div>
            @include('../menu.bodegas')
        </div>

        <div class="col-auto d-flex gap-2">
            <button type="submit" class="btn btn-consultar">🔍 Consultar</button>
            <button type="submit" name="exportar" value="1" class="btn btn-exportar">📥 Exportar Excel</button>
        </div>

        <div class="col-auto">
            @include('menu.botonRegresar')
        </div>
    </form>
</div>

{{-- Resumen --}}
@if(count($resultados) > 0)
<div class="row g-2 mb-2">
    <div class="col-md-3">
        <div class="summary-card text-center">
            <div class="summary-number">{{ $totalRegistros }}</div>
            <small class="text-muted" style="font-weight: 600;">Total Registros</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="summary-card text-center">
            <div class="summary-number" style="color: #f59e0b;">{{ $resultados->where('estado', 'Pendiente')->count() }}</div>
            <small class="text-muted" style="font-weight: 600;">Pendientes</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="summary-card text-center">
            <div class="summary-number" style="color: #16a34a;">{{ $resultados->where('estado', 'Aprobado')->count() }}</div>
            <small class="text-muted" style="font-weight: 600;">Aprobados</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="summary-card text-center">
            <div class="summary-number" style="color: #dc2626;">{{ $resultados->where('estado', 'Rechazado')->count() }}</div>
            <small class="text-muted" style="font-weight: 600;">Rechazados</small>
        </div>
    </div>
</div>
@endif

{{-- Tabla de Resultados --}}
@if(count($resultados) > 0)
<div class="scroll-table-wrapper">
    <table class="results-table">
        <thead>
            <tr>
                <th>#</th>
                <th>Código</th>
                <th>Producto</th>
                <th>Bodega</th>
                <th>Usuario</th>
                <th>Fecha</th>
                <th>Hora</th>
                <th>Estado</th>
                <th>Observación</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($resultados as $index => $item)
            <tr>
                <td>{{ $index + 1 }}</td>
                <td style="mso-number-format:'\@';"><strong>{{ $item->codigoProd }}</strong></td>
                <td>{{ $item->nombreProd }}</td>
                <td>{{ $item->nombreBodega ?? 'Bodega ' . $item->idbodega }}</td>
                <td>{{ $item->usuario }}</td>
                <td>{{ $item->fecha }}</td>
                <td>{{ $item->hora }}</td>
                <td>
                    @php
                        $estadoLower = strtolower($item->estado ?? 'pendiente');
                        $badgeClass = 'badge-pendiente';
                        if ($estadoLower == 'aprobado' || $estadoLower == 'completado') $badgeClass = 'badge-aprobado';
                        elseif ($estadoLower == 'rechazado' || $estadoLower == 'anulado') $badgeClass = 'badge-rechazado';
                        elseif ($estadoLower == 'completado') $badgeClass = 'badge-completado';
                    @endphp
                    <span class="badge-estado {{ $badgeClass }}">{{ $item->estado ?? 'Pendiente' }}</span>
                </td>
                <td>{{ $item->observacion }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div class="mt-2 text-end">
    <small class="text-muted"><strong>{{ $totalRegistros }}</strong> registro(s) encontrado(s)</small>
</div>

@elseif($fi != '' && $ff != '')
<div class="alert alert-info mt-3">
    <strong>ℹ️ Sin resultados.</strong> No se encontraron registros de auditoría de requisiciones en el rango de fechas seleccionado.
</div>
@endif

@endsection