@model foundation_system.Models.ViewModels.CajaChicaViewModel

@{
    ViewData["Title"] = "Apertura de Caja Chica";
}

<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-action="Index" class="btn btn-secondary">
            <i class="bi bi-arrow-left me-1"></i> Volver
        </a>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Datos de Apertura</h6>
                </div>
                <div class="card-body">
                    <form asp-action="Create">
                        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                        
                        <div class="mb-3">
                            <label asp-for="Nombre" class="form-label">Nombre de la Caja</label>
                            <input asp-for="Nombre" class="form-control" placeholder="Ej. Caja Chica Administración" />
                            <span asp-validation-for="Nombre" class="text-danger"></span>
                        </div>
                        
                        <div class="mb-3">
                            <label asp-for="ResponsableUsuarioId" class="form-label">Responsable (Custodio)</label>
                            <select asp-for="ResponsableUsuarioId" class="form-select" asp-items="ViewBag.ResponsableUsuarioId">
                                <option value="">-- Seleccione un Responsable --</option>
                            </select>
                            <span asp-validation-for="ResponsableUsuarioId" class="text-danger"></span>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label asp-for="MontoAsignado" class="form-label">Monto del Fondo ($)</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input asp-for="MontoAsignado" class="form-control" type="number" step="0.01" min="0" />
                                </div>
                                <span asp-validation-for="MontoAsignado" class="text-danger"></span>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label asp-for="FechaApertura" class="form-label">Fecha de Apertura</label>
                                <input asp-for="FechaApertura" class="form-control" type="date" />
                                <span asp-validation-for="FechaApertura" class="text-danger"></span>
                            </div>
                        </div>
                        
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle me-2"></i>
                            Al crear la caja, se registrará automáticamente un movimiento de "Apertura" por el monto asignado.
                        </div>
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle me-2"></i> Abrir Caja
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
