<?php
include 'config.php';

if(isset($_POST["tujuan"])){
    $tanggal = $_POST["tanggal"];
    $nama = $_POST["nama"];
    $alamat = isset($_POST["alamat"]) ? $_POST["alamat"] : '';
    $nowa = isset($_POST["nowa"]) ? $_POST["nowa"] : '';
    $note = isset($_POST["note"]) ? $_POST["note"] : '';

    if (empty($tanggal) || empty($nama)){
        $error = "Tanggal dan Nama wajib diisi.";
    } else {
        header("Location: order2.php");
        // data dikirim via POST asli (form submit langsung ke order2.php),
        // baris redirect di atas hanya fallback jika JS dimatikan
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Pesanan Baru - IniSpikoe</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 1rem;
        }

        .header { text-align: center; color: white; margin-bottom: 1.5rem; padding: 1rem 0; }
        .header h2 { font-size: clamp(1.4rem, 6vw, 2rem); margin-bottom: 0.4rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
        .header p { font-size: 0.95rem; opacity: 0.9; }

        .form-container {
            background: white; border-radius: 20px; padding: 1.5rem;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1); max-width: 480px; margin: 0 auto;
        }

        .form-group { margin-bottom: 1.2rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #333; font-size: 0.95rem; }
        .required { color: #e74c3c; }

        .form-control {
            width: 100%; padding: 0.9rem; border: 2px solid #e1e5e9; border-radius: 10px;
            font-size: 1rem; background: #f8f9fa;
        }
        .form-control:focus { outline: none; border-color: #04AA6D; background: white; box-shadow: 0 0 0 3px rgba(4,170,109,0.1); }
        textarea.form-control { resize: vertical; min-height: 80px; }

        .submit-btn {
            width: 100%; background: linear-gradient(135deg, #04AA6D, #45a049); color: white;
            border: none; padding: 1rem 2rem; font-size: 1.1rem; font-weight: 600;
            border-radius: 12px; cursor: pointer; margin-top: 0.5rem;
        }

        .alert {
            padding: 1rem; border-radius: 10px; margin-bottom: 1.2rem;
            background: linear-gradient(135deg, #e74c3c, #c0392b); color: white; font-weight: 500;
        }
    </style>
</head>
<body>
    <div class="header">
        <h2>🍞 Input Pesanan Baru</h2>
        <p>Isi data pemesan untuk mulai memilih menu</p>
    </div>

    <?php if(isset($error)): ?>
        <div class="alert"><strong>Gagal!</strong> <?php echo $error; ?></div>
    <?php endif; ?>

    <div class="form-container">
        <form id="orderForm" method="POST" action="order2.php">
            <div class="form-group">
                <label for="tanggal">Tanggal & Jam Pesanan <span class="required">*</span></label>
                <input type="datetime-local" id="tanggal" name="tanggal" class="form-control" required>
            </div>

            <div class="form-group">
                <label for="nama">Nama Pemesan <span class="required">*</span></label>
                <input type="text" id="nama" name="nama" class="form-control" placeholder="Nama pembeli" required>
            </div>

            <div class="form-group">
                <label for="alamat">Alamat</label>
                <textarea id="alamat" name="alamat" class="form-control" placeholder="Alamat pengiriman (opsional)"></textarea>
            </div>

            <div class="form-group">
                <label for="nowa">No. WhatsApp</label>
                <input type="tel" id="nowa" name="nowa" class="form-control" placeholder="08xxxxxxxxxx (opsional)">
            </div>

            <div class="form-group">
                <label for="note">Catatan</label>
                <textarea id="note" name="note" class="form-control" placeholder="Catatan tambahan (opsional)"></textarea>
            </div>

            <input name="tujuan" type="hidden" value="USER_ADD">
            <button type="submit" class="submit-btn">Lanjut Pilih Menu →</button>
        </form>
    </div>

    <script>
        function setDefaultDateTime() {
            const now = new Date();
            const pad = n => String(n).padStart(2, '0');
            const val = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`;
            document.getElementById('tanggal').value = val;
        }
        setDefaultDateTime();

        document.getElementById('orderForm').addEventListener('submit', function(e) {
            const tanggal = document.getElementById('tanggal').value;
            const nama = document.getElementById('nama').value.trim();
            if (!tanggal || !nama) {
                e.preventDefault();
                alert('Mohon lengkapi tanggal dan nama!');
            }
        });

        document.getElementById('nowa').addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            if (value.charAt(0) === '8') value = '0' + value;
            e.target.value = value;
        });
    </script>
</body>
</html>
