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

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

    <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">

    <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:28px;
        }

        .page-heading h1{
            font-family:var(--font-display);
            font-size:24px;
            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:32px 34px;
            overflow:hidden;
            border:0;
        }

        .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 20% 20%, black, transparent 70%);
            pointer-events:none;
        }

        .card-header .header-inner{
            position:relative;
            z-index:1;
            display:flex;
            align-items:center;
            gap:16px;
        }

        .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);
            font-size:22px;
            color:var(--navy-700);
            flex-shrink:0;
        }

        .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:4px;
        }

        .card-body{ background:#fff; padding:38px !important; }

        .thanks-box{
            background:var(--paper);
            border:1px solid var(--line);
            border-radius:16px;
            padding:20px 22px;
            margin-bottom:28px;
            display:flex;
            align-items:center;
            gap:16px;
        }

        .thanks-box .check{
            width:42px;
            height:42px;
            border-radius:12px;
            background:linear-gradient(135deg, var(--accent), var(--navy-700));
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:19px;
            flex-shrink:0;
            box-shadow:0 8px 18px rgba(29,64,144,.28);
        }

        .thanks-box h5{
            font-family:var(--font-display);
            font-weight:700;
            font-size:15.5px;
            color:var(--navy-900);
            margin:0 0 4px;
        }

        .thanks-box p{
            margin:0;
            font-size:13.5px;
            color:var(--muted);
        }

        .thanks-box p strong{ color:var(--navy-800); }

        .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{
            border-radius:13px;
            padding:13px 16px;
            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{
            border-color:var(--accent);
            background:#fff;
            box-shadow:0 0 0 4px rgba(61,111,224,.12);
        }

        textarea.form-control{ resize:vertical; }

        .btn-success{
            border-radius:13px;
            padding:13px 36px;
            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-success:hover{
            transform:translateY(-2px);
            box-shadow:0 18px 36px rgba(29,64,144,.4);
            filter:brightness(1.05);
        }

        .btn-success:active{ transform:translateY(0); }

        .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-7">

            <div class="page-heading">
                <div class="page-eyebrow">SMKN 7 Palembang</div>
                <h1>Pesan &amp; Kesan Kunjungan</h1>
                <p>Bagikan pengalaman Anda selama berkunjung ke sekolah kami.</p>
            </div>

            <div class="card shadow">
                <div class="card-header">
                    <div class="header-inner">
                        <div class="icon-badge">
                            <i class="bi bi-chat-heart-fill"></i>
                        </div>
                        <div>
                            <h3>Pesan &amp; Kesan</h3>
                            <small>Masukan Anda sangat berarti bagi kami</small>
                        </div>
                    </div>
                </div>

                <div class="card-body">

                    <div class="thanks-box">
                        <div class="check"><i class="bi bi-check-lg"></i></div>
                        <div>
                            <h5>Terima kasih telah berkunjung</h5>
                            <p><strong>Nama :</strong> {{ $kunjungan->nama }}</p>
                        </div>
                    </div>

                    <form action="{{ route('pesan.kesan.store', $kunjungan->id) }}" method="POST">
                        @csrf

                        <div class="mb-3">
                            <label class="form-label">
                                <i class="bi bi-chat-square-text"></i>
                                Pesan
                            </label>
                            <textarea class="form-control" name="pesan" rows="4" placeholder="Tuliskan pesan Anda untuk sekolah kami" required></textarea>
                        </div>

                        <div class="mb-4">
                            <label class="form-label">
                                <i class="bi bi-emoji-smile"></i>
                                Kesan
                            </label>
                            <textarea class="form-control" name="kesan" rows="4" placeholder="Bagaimana kesan Anda selama berkunjung?" required></textarea>
                        </div>

                        <div class="d-grid">
                            <button class="btn btn-success text-white">
                                <i class="bi bi-send-fill"></i>
                                Simpan
                            </button>
                        </div>

                    </form>

                </div>
            </div>

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

        </div>

    </div>

</div>

</body>
</html>