@model foundation_system.Models.CajaChica

@{
    ViewData["Title"] = "Detalle de Caja Chica";
    var porcentajeSaldo = (Model.MontoAsignado > 0) ? (Model.SaldoActual / Model.MontoAsignado) * 100 : 0;
    var colorSaldo = porcentajeSaldo < 20 ? "danger" : (porcentajeSaldo < 50 ? "warning" : "success");
}

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">@Model.Nombre</h1>
            <p class="mb-0 text-muted">Responsable: @Model.Responsable?.Persona?.Nombres @Model.Responsable?.Persona?.Apellidos</p>
        </div>
        <div>
            <a asp-action="Index" class="btn btn-secondary me-2">
                <i class="bi bi-arrow-left me-1"></i> Volver
            </a>
            @if (Model.Estado == "ABIERTA")
            {
                <a asp-controller="MovimientoCaja" asp-action="CreateGasto" asp-route-cajaId="@Model.Id" class="btn btn-danger me-2">
                    <i class="bi bi-dash-circle me-1"></i> Registrar Gasto
                </a>
                <a asp-controller="MovimientoCaja" asp-action="Reposicion" asp-route-cajaId="@Model.Id" class="btn btn-success me-2">
                    <i class="bi bi-arrow-repeat me-1"></i> Reposición
                </a>
                <form id="formCloseBox" asp-action="Close" asp-route-id="@Model.Id" method="post" class="d-inline">
                    <button type="button" class="btn btn-secondary" onclick="confirmClose()">
                        <i class="bi bi-lock me-1"></i> Cerrar Caja
                    </button>
                </form>
            }
            else
            {
                <span class="badge bg-secondary p-2">CAJA CERRADA</span>
            }
        </div>
    </div>

    <!-- Status Cards -->
    <div class="row mb-4">
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Monto Asignado</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">@Model.MontoAsignado.ToString("C")</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-wallet2 fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-left-@colorSaldo shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-@colorSaldo text-uppercase mb-1">Saldo Disponible</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">@Model.SaldoActual.ToString("C")</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-cash-stack fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Gastos Pendientes</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                @Model.Movimientos.Where(m => m.TipoMovimiento == "GASTO" && m.EstadoReembolso == "PENDIENTE").Sum(m => m.Monto).ToString("C")
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-receipt fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Movimientos Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Historial de Movimientos</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Fecha</th>
                            <th>Tipo</th>
                            <th>Descripción</th>
                            <th>Categoría</th>
                            <th>Monto</th>
                            <th>Estado</th>
                            <th>Registrado Por</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var mov in Model.Movimientos)
                        {
                            <tr>
                                <td>@mov.FechaMovimiento.ToString("dd/MM/yyyy")</td>
                                <td>
                                    @if(mov.TipoMovimiento == "GASTO") { <span class="badge bg-danger">GASTO</span> }
                                    else if(mov.TipoMovimiento == "REPOSICION") { <span class="badge bg-success">REPOSICIÓN</span> }
                                    else { <span class="badge bg-info">@mov.TipoMovimiento</span> }
                                </td>
                                <td>@mov.Descripcion</td>
                                <td>@(mov.CategoriaGasto?.Nombre ?? "-")</td>
                                <td class="text-end">@mov.Monto.ToString("C")</td>
                                <td>
                                    @if(mov.TipoMovimiento == "GASTO")
                                    {
                                        @if(mov.EstadoReembolso == "PENDIENTE") { <span class="badge bg-warning text-dark">Pendiente</span> }
                                        else { <span class="badge bg-success">Reembolsado</span> }
                                    }
                                    else
                                    {
                                        <span>-</span>
                                    }
                                </td>
                                <td>@mov.UsuarioRegistro?.Persona?.Nombres</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@section Styles {
    <style>
        .border-left-primary { border-left: 0.25rem solid #4e73df !important; }
        .border-left-success { border-left: 0.25rem solid #1cc88a !important; }
        .border-left-danger { border-left: 0.25rem solid #e74a3b !important; }
        .border-left-warning { border-left: 0.25rem solid #f6c23e !important; }
        .border-left-info { border-left: 0.25rem solid #36b9cc !important; }
        .text-xs { font-size: .7rem; }
    </style>
}

@section Scripts {
    <script>
        function confirmClose() {
            Swal.fire({
                title: '¿Cerrar Caja Chica?',
                text: "Esta acción cambiará el estado de la caja a CERRADA. Asegúrese de haber realizado el arqueo final.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#6c757d',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sí, cerrar caja',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('formCloseBox').submit();
                }
            })
        }
    </script>
}
