@model foundation_system.Models.CajaChica

@{
    ViewData["Title"] = "Reposición de Fondo";
    var gastosPendientes = Model.Movimientos.Where(m => m.TipoMovimiento == "GASTO" && m.EstadoReembolso == "PENDIENTE").ToList();
    var totalReembolso = gastosPendientes.Sum(m => m.Monto);
}

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">@ViewData["Title"]</h1>
        <a asp-controller="CajaChica" asp-action="Details" asp-route-id="@Model.Id" class="btn btn-secondary">
            <i class="bi bi-arrow-left me-1"></i> Volver
        </a>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">Gastos Pendientes de Reembolso</h6>
                    <h5 class="m-0 font-weight-bold text-success">Total a Reembolsar: @totalReembolso.ToString("C")</h5>
                </div>
                <div class="card-body">
                    @if (gastosPendientes.Any())
                    {
                        <form asp-action="ConfirmarReposicion" method="post">
                            <input type="hidden" name="cajaId" value="@Model.Id" />
                            
                            <div class="table-responsive mb-4">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th><input type="checkbox" id="checkAll" checked /></th>
                                            <th>Fecha</th>
                                            <th>Descripción</th>
                                            <th>Categoría</th>
                                            <th class="text-end">Monto</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (var item in gastosPendientes)
                                        {
                                            <tr>
                                                <td>
                                                    <input type="checkbox" name="movimientoIds" value="@item.Id" checked class="mov-check" />
                                                </td>
                                                <td>@item.FechaMovimiento.ToString("dd/MM/yyyy")</td>
                                                <td>@item.Descripcion</td>
                                                <td>@(item.CategoriaGasto?.Nombre ?? "-")</td>
                                                <td class="text-end">@item.Monto.ToString("C")</td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                            </div>

                            <div class="alert alert-warning">
                                <i class="bi bi-exclamation-triangle me-2"></i>
                                Al confirmar, se generará un movimiento de "REPOSICIÓN" por el total seleccionado y el saldo de la caja aumentará.
                            </div>

                            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                <button type="submit" class="btn btn-success btn-lg">
                                    <i class="bi bi-check-lg me-2"></i> Confirmar Reposición
                                </button>
                            </div>
                        </form>
                    }
                    else
                    {
                        <div class="text-center py-5">
                            <p class="text-muted">No hay gastos pendientes de reembolso.</p>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        document.getElementById('checkAll').addEventListener('change', function() {
            var checkboxes = document.getElementsByClassName('mov-check');
            for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = this.checked;
            }
        });
    </script>
}
