<?php session_start(); ?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>TSGJ | Registrar Abastecimiento (Galonera)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../../Modelo/Archivos_Media/Color_LogoTipo.png" type="image/png">

    <!-- Bootstrap / Select2 / Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <!-- CSS -->
    <link rel="stylesheet" href="../../Modelo/Archivos_CSS/Style_ForAbastecimiento.css" />

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<?php
require_once '../../Controlador/Utilidades/Conexion_BD.php';
require_once '../../Controlador/Ctrl_Administrador/MySQL_Mostrar_Grifos.php';
require_once '../../Controlador/Ctrl_Administrador/MySQL_Mostrar_Galoneras.php';

$conn = new Conexion_BD();

$grifos = (new MostrarGrifos($conn))->ObtenerGrifosActivos() ?? [];
$galoneras_all = (new MostrarGaloneras($conn))->ObtenerTodasLasGaloneras() ?? [];
$galoneras_activas = array_values(array_filter($galoneras_all, function($g){
  return isset($g['estado']) && strtolower($g['estado']) === 'activo';
}));

$conn->closeConnection();
?>

<div class="container mt-2">
    <a href="Adm_Gestion_Abastecimientos.php" class="btn btn-outline-primary btn-sm mb-2">
        <i class="bi bi-arrow-left"></i> Volver a gestión
    </a>

    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white text-center rounded">
            <h5 class="mb-0">Registrar Control de Abastecimiento (Galonera)</h5>
        </div>

        <div class="card-body">
            <form action="../../Controlador/Ctrl_Administrador/MySQL_Agregar_Abastecimiento_Galonera.php"
                  method="post" id="Registrar_Abastecimiento_Galonera" autocomplete="off" novalidate>
                <div class="row g-1">

                    <!-- FILA 1 | Galonera + info -->
                    <div class="col-12 col-md-6 col-lg-4 mb-1">
                        <label for="galonera_id" class="form-label">Galonera</label>
                        <select class="form-select form-select-sm" id="galonera_id" name="galonera_id" required>
                            <option value="">Seleccione una galonera</option>
                           <?php foreach ($galoneras_activas as $g): ?>
  <option
    value="<?= (int)$g['id'] ?>"
    data-capacidad="<?= isset($g['capacidad_litros']) ? (float)$g['capacidad_litros'] : 0 ?>"
    data-tipo="<?= isset($g['tipo_combustible_id']) && $g['tipo_combustible_id'] !== null ? (int)$g['tipo_combustible_id'] : '' ?>"
    data-tipo-nombre="<?= htmlspecialchars((string)($g['tipo_combustible_nombre'] ?? ''), ENT_QUOTES, 'UTF-8') ?>"
  >
    <?= htmlspecialchars($g['codigo'] ?? ('ID ' . (int)$g['id'])) ?>
  </option>
<?php endforeach; ?>

                        </select>
                        <div class="form-text">Solo se listan galoneras en estado <b>activo</b>.</div>
                    </div>

                    <div class="col-6 col-md-3 col-lg-2 mb-1">
                        <label for="capacidad_litros" class="form-label">Capacidad (GLN)</label>
                        <input type="text" id="capacidad_litros" class="form-control form-control-sm" disabled>
                    </div>

                    <div class="col-6 col-md-3 col-lg-2 mb-1">
                        <label for="tipo_combustible_txt" class="form-label">Tipo Combustible</label>
                        <input type="text" id="tipo_combustible_txt" class="form-control form-control-sm" disabled>
                    </div>

                    <input type="hidden" name="tipo_combustible_id" id="tipo_combustible_id">

                    <!-- FILA 2 | Grifo -->
                    <div class="col-12 col-md-6 col-lg-4 mb-1">
                        <label for="grifo_id" class="form-label">Grifo</label>
                        <select class="form-select form-select-sm" id="grifo_id" name="grifo_id" required>
                            <option value="">Seleccione un grifo</option>
                            <?php foreach ($grifos as $gr): ?>
                                <option value="<?= (int)$gr['id'] ?>">
                                    <?= htmlspecialchars($gr['nombre'] ?? ('ID ' . (int)$gr['id'])) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <!-- FILA 3 | Responsable (DNI) -->
                    <div class="col-6 col-md-3 col-lg-2 mb-1">
                        <label for="dni" class="form-label">DNI del Responsable</label>
                        <input type="text"
                               id="dni"
                               maxlength="8"
                               pattern="[0-9]{8}"
                               inputmode="numeric"
                               class="form-control form-control-sm"
                               placeholder="12345678"
                               required>
                        <div class="form-text">Escribe el DNI (8 dígitos) para buscarlo.</div>
                    </div>

                    <div class="col-6 col-md-5 col-lg-4 mb-1">
                        <label for="nombre_chofer" class="form-label">Nombre del Responsable</label>
                        <input type="text" id="nombre_chofer" class="form-control form-control-sm" placeholder="—" disabled>
                        <input type="hidden" name="responsable_id" id="responsable_id">
                    </div>

                    <!-- FILA 4 | Cantidad / Precio / Vale -->
                    <div class="col-6 col-md-4 col-lg-3 mb-1">
                        <label for="cantidad_gln" class="form-label">Cantidad (GLN)</label>
                        <input
                            type="number"
                            name="cantidad_gln"
                            id="cantidad_gln"
                            class="form-control form-control-sm"
                            step="0.00001"
                            min="0"
                            inputmode="decimal"
                            pattern="^\d+([.]\d{1,5})?$"
                            placeholder="Ej.: 12.37519"
                            required
                        >
                        <div id="capacidad_alert" class="form-text text-danger d-none">
                          La cantidad excede la capacidad de la galonera.
                        </div>
                    </div>

                    <div class="col-6 col-md-4 col-lg-3 mb-1">
                        <label for="valor_unitario_gln" class="form-label">Valor Unitario GLN</label>
                        <input
                            type="number"
                            name="valor_unitario_gln"
                            id="valor_unitario_gln"
                            class="form-control form-control-sm"
                            step="0.01"
                            min="0"
                            inputmode="decimal"
                            pattern="^\d+([.]\d{1,2})?$"
                            placeholder="Ej.: 15.98"
                            required
                        >
                    </div>

                    <div class="col-6 col-md-4 col-lg-3 mb-1">
                        <label for="numero_vale" class="form-label">N° Vale</label>
                        <input
                            type="text"
                            name="numero_vale"
                            id="numero_vale"
                            maxlength="50"
                            class="form-control form-control-sm"
                            oninput="this.value=this.value.toUpperCase().replace(/[^A-Z0-9\-\/]/g,'')"
                            required
                        >
                    </div>

                    <!-- FILA 5 | Fecha / Hora -->
                    <div class="col-6 col-md-4 col-lg-3 mb-1">
                        <label for="fecha_abastecimiento" class="form-label">Fecha</label>
                        <input type="date" name="fecha_abastecimiento" id="fecha_abastecimiento" class="form-control form-control-sm" required>
                    </div>

                    <div class="col-6 col-md-4 col-lg-3 mb-1">
                        <label for="hora_abastecimiento" class="form-label">Hora</label>
                        <input type="time" name="hora_abastecimiento" id="hora_abastecimiento" class="form-control form-control-sm" required>
                    </div>

                    <!-- FILA 6 | Observaciones -->
                    <div class="col-12 mb-1">
                        <label for="observaciones" class="form-label">Observaciones (opcional)</label>
                        <textarea name="observaciones" id="observaciones" rows="2"
                                  class="form-control form-control-sm" maxlength="255"
                                  placeholder="Ej.: Abastecimiento para faena del día."></textarea>
                    </div>

                    <div class="col-12 text-center mt-2">
                        <button type="submit" id="btn-registrar" class="btn btn-success btn-sm px-4">Registrar</button>
                        <button type="button" class="btn btn-borrar btn-sm px-4 ms-2" id="btn-borrar">Borrar Datos</button>
                    </div>

                </div>
            </form>
        </div>
    </div>
</div>

<!-- Librerías y scripts -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- JS general del formulario (capacidad, tipo combustible, etc.) -->
<script src="../../Modelo/Archivos_JS/Formulario_Abastecimiento_Galonera.js"></script>

<?php if (isset($_SESSION['error_abastecimiento_galonera'])): ?>
<script>
  Swal.fire({
    icon: 'error',
    title: 'Error',
    text: <?= json_encode($_SESSION['error_abastecimiento_galonera']); ?>
  });
</script>
<?php unset($_SESSION['error_abastecimiento_galonera']); endif; ?>

</body>
</html>
