flujo de pedido y pago
This commit is contained in:
Brisa
@@ -0,0 +1,154 @@
|
||||
<?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>
|
||||
Reference in New Issue
Block a user