<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Kunjungan Tamu</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icon -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <?php
        \Carbon\Carbon::setLocale('id');
    ?>

    <style>

        :root{
            --navy-950:#050B1A;
            --navy-900:#0A1730;
            --navy-800:#0F2247;
            --navy-700:#15316B;
            --navy-600:#1D4090;
            --accent:#3D6FE0;
            --accent-light:#6E93F2;
            --gold:#E3B341;
            --ink:#0A1730;
            --muted:#5C6B8A;
            --line:#E1E7F5;
            --paper:#F7F9FE;
            --font-display:'Plus Jakarta Sans',sans-serif;
            --font-body:'Inter',sans-serif;
        }

        *{ font-family:var(--font-body); }

        body{
            background:
                radial-gradient(1100px 600px at 12% -10%, rgba(61,111,224,.10), transparent 60%),
                radial-gradient(900px 500px at 100% 10%, rgba(227,179,65,.06), transparent 55%),
                linear-gradient(180deg,#F7F9FE 0%,#EEF2FC 100%);
            color:var(--ink);
            min-height:100vh;
        }

        .page-eyebrow{
            font-family:var(--font-display);
            font-size:11.5px;
            font-weight:700;
            letter-spacing:.12em;
            text-transform:uppercase;
            color:var(--accent);
            display:inline-flex;
            align-items:center;
            gap:9px;
            margin-bottom:10px;
        }

        .page-eyebrow::before{
            content:"";
            width:18px;
            height:2px;
            background:var(--accent);
            display:inline-block;
            border-radius:2px;
        }

        .page-heading{
            text-align:center;
            margin-bottom:30px;
        }

        .page-heading h1{
            font-family:var(--font-display);
            font-size:26px;
            font-weight:800;
            color:var(--navy-900);
            letter-spacing:-.015em;
        }

        .page-heading p{
            color:var(--muted);
            font-size:14px;
            margin-top:6px;
        }

        .card{
            border:0;
            border-radius:26px;
            overflow:hidden;
            box-shadow:0 24px 60px rgba(5,11,26,.14);
        }

        .card-header{
            position:relative;
            background:
                radial-gradient(500px 300px at 100% 0%, rgba(110,147,242,.25), transparent 60%),
                linear-gradient(150deg,var(--navy-950) 0%,var(--navy-900) 45%,var(--navy-700) 100%);
            color:#fff;
            padding:34px 30px;
            overflow:hidden;
        }

        .card-header::before{
            content:"";
            position:absolute;
            inset:0;
            background-image:
                linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
            background-size:32px 32px;
            mask-image:radial-gradient(circle at 25% 20%, black, transparent 70%);
            pointer-events:none;
        }

        .card-header .header-inner{
            position:relative;
            z-index:1;
        }

        .card-header .icon-badge{
            width:52px;
            height:52px;
            border-radius:15px;
            background:rgba(255,255,255,.98);
            display:flex;
            align-items:center;
            justify-content:center;
            box-shadow:0 10px 24px rgba(0,0,0,.25);
            margin:0 auto 14px;
            font-size:22px;
            color:var(--navy-700);
        }

        .card-header h3{
            margin:0;
            font-family:var(--font-display);
            font-weight:800;
            font-size:21px;
            letter-spacing:-.01em;
        }

        .card-header small{
            color:rgba(255,255,255,.65);
            font-size:13px;
            display:block;
            margin-top:6px;
        }

        .card-body{ background:#fff; }

        .form-label{
            font-weight:600;
            font-size:13.5px;
            color:var(--navy-900);
            margin-bottom:8px;
        }

        .form-label i{ color:var(--accent); margin-right:4px; }

        .form-control, .form-select{
            border-radius:13px;
            padding:12px 15px;
            border:1.5px solid var(--line);
            background:var(--paper);
            font-size:14.5px;
            color:var(--ink);
            transition:.2s;
        }

        .form-control::placeholder{ color:#9AA6BC; }

        .form-control:focus, .form-select:focus{
            border-color:var(--accent);
            background:#fff;
            box-shadow:0 0 0 4px rgba(61,111,224,.12);
        }

        textarea.form-control{ resize:vertical; }

        .btn-primary{
            border-radius:13px;
            padding:12px 34px;
            font-weight:700;
            font-size:14.5px;
            border:none;
            background:linear-gradient(135deg, var(--accent) 0%, var(--navy-700) 100%);
            box-shadow:0 14px 30px rgba(29,64,144,.32);
            transition:.2s;
        }

        .btn-primary:hover{
            transform:translateY(-2px);
            box-shadow:0 18px 36px rgba(29,64,144,.4);
            filter:brightness(1.05);
        }

        .btn-secondary{
            border-radius:13px;
            padding:12px 30px;
            font-weight:600;
            font-size:14.5px;
            border:1.5px solid var(--line);
            background:#fff;
            color:var(--muted);
            transition:.2s;
        }

        .btn-secondary:hover{
            background:var(--paper);
            color:var(--navy-800);
            border-color:var(--navy-600);
        }

        .info-box{
            background:var(--paper);
            border:1.5px solid var(--line);
            border-radius:14px;
            padding:16px 18px;
            transition:.2s;
        }

        .info-box:focus-within{
            border-color:var(--accent);
            background:#fff;
        }

        .section-divider{
            display:flex;
            align-items:center;
            gap:12px;
            margin:26px 0 18px;
        }

        .section-divider span{
            font-family:var(--font-display);
            font-size:11.5px;
            font-weight:700;
            letter-spacing:.08em;
            text-transform:uppercase;
            color:var(--muted);
            white-space:nowrap;
        }

        .section-divider::after{
            content:"";
            flex:1;
            height:1px;
            background:var(--line);
        }

        .footer-note{
            text-align:center;
            color:var(--muted);
            font-size:12.5px;
            margin-top:22px;
        }

    </style>

</head>

<body>

<div class="container py-5">

    <div class="row justify-content-center">

        <div class="col-lg-9">

            <div class="page-heading">
                <div class="page-eyebrow">SMKN 7 Palembang</div>
                <h1>Formulir Kunjungan Tamu</h1>
                <p>Lengkapi data berikut untuk mencatat kunjungan Anda ke sekolah.</p>
            </div>

            <div class="card shadow-lg">

                <div class="card-header text-center">
                    <div class="header-inner">
                        <div class="icon-badge">
                            <i class="bi bi-person-vcard-fill"></i>
                        </div>

                        <h3>Form Kunjungan Tamu</h3>

                        <small>
                            Silakan isi data kunjungan dengan benar.
                        </small>
                    </div>
                </div>

                <div class="card-body p-4 p-md-5">

                    <form action="<?php echo e(route('kunjungan.store')); ?>" method="POST">

                        <?php echo csrf_field(); ?>

                        <div class="row">

                            <div class="col-md-6 mb-3">

                                <label class="form-label">
                                    <i class="bi bi-person-fill"></i>
                                    Nama
                                </label>

                                <input
                                    type="text"
                                    name="nama"
                                    class="form-control"
                                    placeholder="Masukkan nama lengkap"
                                    required>

                            </div>

                            <div class="col-md-6 mb-3">

                                <label class="form-label">
                                    <i class="bi bi-building"></i>
                                    Alamat / Asal Instansi
                                </label>

                                <input
                                    type="text"
                                    name="instansi"
                                    class="form-control"
                                    placeholder="Contoh : Dinas Pendidikan"
                                    required>

                            </div>

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                <i class="bi bi-chat-square-text"></i>
                                Tujuan Berkunjung
                            </label>

                            <textarea
                                name="tujuan"
                                rows="4"
                                class="form-control"
                                placeholder="Tuliskan tujuan berkunjung"
                                required></textarea>

                        </div>

                        <div class="mb-2">

                            <label class="form-label">
                                <i class="bi bi-person-check-fill"></i>
                                Bertemu Dengan
                            </label>

                            <input
                                type="text"
                                name="bertemu_dengan"
                                class="form-control"
                                placeholder="Nama guru / pegawai"
                                required>

                        </div>

                        <div class="section-divider">
                            <span>Waktu Kunjungan</span>
                        </div>

                        <!-- Jam & Tanggal -->

                        <div class="row">

                            <div class="col-md-6 mb-3">

                                <div class="info-box">

                                    <label class="form-label">
                                        <i class="bi bi-clock"></i>
                                        Jam Kunjungan
                                    </label>

                                    <input
                                        type="time"
                                        name="jam"
                                        class="form-control"
                                        value="<?php echo e(now()->format('H:i')); ?>"
                                        required>

                                </div>

                            </div>

                            <div class="col-md-6 mb-3">

                                <div class="info-box">

                                    <label class="form-label">
                                        <i class="bi bi-calendar-date"></i>
                                        Tanggal Kunjungan
                                    </label>

                                    <input
                                        type="date"
                                        name="tanggal"
                                        class="form-control"
                                        value="<?php echo e(now()->format('Y-m-d')); ?>"
                                        required>

                                </div>

                            </div>

                        </div>

                        <div class="d-flex justify-content-between mt-4">

                            <a href="/" class="btn btn-secondary">

                                <i class="bi bi-arrow-left"></i>
                                Kembali

                            </a>

                            <button type="submit" class="btn btn-primary text-white">

                                <i class="bi bi-save"></i>
                                Simpan Data

                            </button>

                        </div>

                    </form>

                </div>

            </div>

            <p class="footer-note">
                &copy; <?php echo e(date('Y')); ?> SMKN 7 Palembang &mdash; Sistem Informasi Data Kunjungan Tamu
            </p>

        </div>

    </div>

</div>

<script>

// Mengisi jam otomatis saat halaman dibuka
window.onload = function () {

    const now = new Date();

    let jam = String(now.getHours()).padStart(2,'0');
    let menit = String(now.getMinutes()).padStart(2,'0');

    document.querySelector('input[name="jam"]').value = jam + ":" + menit;

}

</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html><?php /**PATH C:\Tamu_Track\resources\views/kunjungan.blade.php ENDPATH**/ ?>