@extends('layouts.app')

@section('content')
    <div class="container-fluid py-4">

        <!-- Encabezado de la Sección -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h3 class="font-weight-bold text-dark mb-0">
                    <i class="fas fa-file-invoice-dollar text-primary mr-2"></i> Historial de Cuadres - Clínica
                </h3>
                <p class="text-muted small mb-0">Listado histórico de cierres de caja y arqueos diarios.</p>
            </div>
            <button class="btn btn-outline-success rounded-pill shadow-sm oculto-impresion" onclick="exportarExcel()">
                <i class="fas fa-file-excel mr-1"></i> Exportar a Excel
            </button>
        </div>

        <!-- Tabla Principal de Cuadres -->
        <div class="row">
            <div class="col-12">
                <div class="card border-0 shadow-sm rounded-lg">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0" id="cauadres" data-page-length="31">
                                <thead class="bg-light text-muted small text-uppercase">
                                    <tr>
                                        <th>Fecha</th>
                                        <th>Entradas</th>
                                        <th>Salidas</th>
                                        <th>Total Sistema</th>
                                        <th>Total Efectivo</th>
                                        <th>Total Visas</th>
                                        <th>Total Depósitos</th>
                                        <th>Deuda Med.</th>
                                        <th>Faltante</th>
                                        <th class="text-center" style="width: 100px;">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- Declaración e inicialización del acumulador --}}
                                    @php $totalMes = 0; @endphp

                                    @foreach ($cuadres as $cau)
                                        @php
                                            $aux = explode(" ", $cau->created_at);
                                            $totalMes += $cau->cuadre; // Acumular total
                                        @endphp
                                        <tr>
                                            <td class="font-weight-bold text-nowrap">
                                                {{ \Carbon\Carbon::parse($cau->created_at)->format('d/m/Y H:i') }}
                                            </td>
                                            <td class="text-success font-weight-bold text-nowrap">+ Q. {{ number_format($cau->entrada, 2) }}</td>
                                            <td class="text-danger font-weight-bold text-nowrap">- Q. {{ number_format($cau->salida, 2) }}</td>
                                            <td class="font-weight-bold text-nowrap">Q. {{ number_format($cau->cuadre, 2) }}</td>
                                            <td class="text-nowrap">Q. {{ number_format($cau->totalEfectico, 2) }}</td>
                                            <td class="text-nowrap">Q. {{ number_format($cau->totalVisas, 2) }}</td>
                                            <td class="font-weight-bold text-primary text-nowrap">Q. {{ number_format($cau->totalDeposito ?? 0, 2) }}</td>
                                            <td class="text-nowrap">Q. {{ number_format($cau->deuda_medicamento, 2) }}</td>
                                            <td class="text-nowrap">
                                                <span class="badge {{ $cau->faltante > 0 ? 'badge-soft-danger' : 'badge-soft-success' }} px-2 py-1">
                                                    Q. {{ number_format($cau->faltante, 2) }}
                                                </span>
                                            </td>
                                            <td class="text-center text-nowrap">
                                                @can('caja_movimientos_dia')
                                                    <a href="{{ route('caja.cuadreFecha', ['fecha' => $aux[0]]) }}" class="btn btn-sm btn-outline-info rounded-circle" title="Ver detalle del día">
                                                        <i class="fa fa-eye"></i>
                                                    </a>
                                                @endcan

                                                @can('caja_cuadre_delete')
                                                    <a href="{{ route('caja.deleteCuadre', ['id' => $cau->id]) }}" class="btn btn-sm btn-outline-danger rounded-circle" onclick="return confirm('¿Está seguro de eliminar este registro de cuadre?')" title="Eliminar registro">
                                                        <i class="fa fa-trash"></i>
                                                    </a>
                                                @endcan
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Footer del Card con Total Consolidado -->
                    <div class="card-footer bg-light border-0 p-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted font-weight-bold small text-uppercase">Acumulado en Registro:</span>
                            <h4 class="font-weight-bold text-primary mb-0">Q. {{ number_format($totalMes, 2) }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
        .badge-soft-danger {
            background-color: #fee2e2;
            color: #991b1b;
        }

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

        .table td,
        .table th {
            vertical-align: middle;
        }
    </style>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>

    <script>
        function exportarExcel() {
            var tabla = document.getElementById('cauadres');
            var wb = XLSX.utils.table_to_book(tabla, {
                sheet: "Cuadres Clinica"
            });
            XLSX.writeFile(wb, "Cuadres_Clinica.xlsx");
        }
    </script>
@endsection