<?php
session_start();
include("db.php");

if (empty($_SESSION['carrito'])) {
    header("Location: carrito.php");
    exit();
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Datos de Entrega - La Pecosa</title>
    <link rel="stylesheet" href="css/all.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', sans-serif; background-color: #fffef8; color: #333; padding: 50px; }
        .box { max-width: 500px; margin: 0 auto; background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        
        .header-form { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
        h2 { color: #e02828; font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }
        
        .btn-volver { 
            color: #888; 
            text-decoration: none; 
            font-size: 1.2rem; 
            transition: 0.2s; 
            padding: 5px 10px; 
            border-radius: 50px;
        }
        .btn-volver:hover { color: #e02828; background-color: #fff5f5; }

        .form-group { margin-bottom: 15px; width: 100%; }
        label { display: block; margin-bottom: 5px; font-weight: 600; }
        
        input, select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; box-sizing: border-box; }
        input[type="file"] { padding: 5px; background: #f9f9f9; }

        .btn-enviar { background: #e02828; color: white; border: none; padding: 12px 20px; border-radius: 50px; cursor: pointer; font-weight: bold; width: 100%; margin-top: 15px; transition: 0.3s; }
        .btn-enviar:hover { background: #c02020; transform: scale(1.02); }
        
        #seccion_envio, #seccion_retiro { display: none; width: 100%; }

        .info-pago-box {
            background-color: #fff5f5;
            border: 2px dashed #e02828;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            margin-bottom: 15px;
        }
        .info-pago-box h4 { color: #333; font-size: 0.9rem; letter-spacing: 1px; margin-bottom: 5px; }
        .info-pago-box .alias { color: #e02828; font-size: 1.3rem; font-weight: bold; margin: 5px 0; }
        .info-pago-box p { font-size: 0.85rem; color: #555; line-height: 1.4; }

        .info-retiro-box {
            background-color: #f4fbf7;
            border: 1px solid #2ecc71;
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 15px;
            font-size: 0.9rem;
            color: #27ae60;
        }
    </style>
    <script>
        function evaluarTipo(select) {
            var seccionEnvio = document.getElementById('seccion_envio');
            var seccionRetiro = document.getElementById('seccion_retiro');
            var inputDir = document.getElementById('direccion');
            var inputComprobante = document.getElementById('comprobante');
            
            if (select.value === 'envio') {
                seccionEnvio.style.display = 'block';
                seccionRetiro.style.display = 'none';
                inputDir.required = true;
                inputComprobante.required = true; 
            } else if (select.value === 'retiro') {
                seccionEnvio.style.display = 'none';
                seccionRetiro.style.display = 'block';
                inputDir.required = false;
                inputComprobante.required = false; 
                inputDir.value = '';
                inputComprobante.value = ''; 
            } else {
                seccionEnvio.style.display = 'none';
                seccionRetiro.style.display = 'none';
                inputDir.required = false;
                inputComprobante.required = false;
            }
        }
    </script>
</head>
<body>
<div class="box">
    <div class="header-form">
        <h2><i class="fa-solid fa-truck"></i> Opciones de entrega</h2>
        <a href="carrito.php" class="btn-volver" title="Volver al carrito">
            <i class="fa-solid fa-arrow-left"></i> Volver
        </a>
    </div>
    
    <form action="procesar_pago.php" method="POST" enctype="multipart/form-data">
        
        <div class="form-group">
            <label for="tipo_entrega">¿Cómo querés recibir tu pedido?</label>
            <select name="tipo_entrega" id="tipo_entrega" onchange="evaluarTipo(this)" required>
                <option value="">-- Seleccioná una opción --</option>
                <option value="retiro">Retiro en el local (México 569)</option>
                <option value="envio">Envío a domicilio</option>
            </select>
        </div>

        <div class="form-group">
            <label for="telefono">Teléfono de contacto:</label>
            <input type="text" name="telefono" id="telefono" placeholder="Ej: 3434567890" required>
        </div>

        <div id="seccion_retiro">
            <div class="info-retiro-box">
                <i class="fa-solid fa-circle-info"></i> <b>Formas de pago en el local:</b><br>
                Podés abonar al momento de retirar en <b>Efectivo, Débito o Transferencia</b>.
            </div>
        </div>

        <div id="seccion_envio">
            <div class="form-group">
                <label for="direccion">Dirección de entrega (en Paraná):</label>
                <input type="text" name="direccion" id="direccion" placeholder="Calle, Número y Barrio">
            </div>

            <div class="info-pago-box">
                <h4><i class="fa-solid fa-credit-card"></i> PAGO POR TRANSFERENCIA</h4>
                <div class="alias">Alias: LA.PECOSA.PARANA</div>
                <p>
                    ⚠️ <b>Única forma de pago para envíos.</b><br>
                    Realizá la transferencia del pedido y adjuntá el comprobante abajo.<br>
                    <i>El costo del envío se abona en efectivo directamente al repartidor al recibirlo.</i>
                </p>
            </div>

            <div class="form-group">
                <label for="comprobante"><i class="fa-solid fa-receipt"></i> Adjuntar Comprobante de Transferencia:</label>
                <input type="file" name="comprobante" id="comprobante" accept="image/*,.pdf">
                <small style="color: #666; display: block; margin-top: 4px;">Obligatorio para procesar tu envío.</small>
            </div>
        </div>

        <button type="submit" class="btn-enviar">Confirmar y registrar pedido →</button>
    </form>
</div>
</body>
</html>