<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Persetujuan Penyewaan | Kos Calista</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" />

    <style>
        body {
            background: linear-gradient(to right, #a1c4fd, #c2e9fb);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Poppins', sans-serif;
        }

        .card {
            max-width: 700px;
            width: 100%;
            border-radius: 20px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            background-color: #fff;
            padding: 30px;
        }

        .card-header {
            background: linear-gradient(to right, #4facfe, #00f2fe);
            color: #fff;
            padding: 20px;
            text-align: center;
            font-size: 1.5rem;
            font-weight: bold;
            letter-spacing: 1px;
        }

        .card-body p {
            font-size: 1rem;
            color: #333;
        }

        .card-body ul {
            padding-left: 1.2rem;
        }

        .card-body ul li {
            margin-bottom: 0.7rem;
            color: #555;
        }

        .form-label {
            font-weight: 600;
            color: #444;
        }

        .btn-gradient {
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            border: none;
            color: #fff;
            font-weight: 600;
            padding: 12px;
            border-radius: 50px;
            transition: 0.3s ease;
        }

        .btn-gradient:hover {
            opacity: 0.9;
            transform: scale(1.02);
        }

        .form-check-label {
            font-size: 0.95rem;
            color: #444;
        }

        .text-muted {
            font-size: 0.85rem;
        }

        @media (max-width: 576px) {
            .card {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="card-header">
            Persetujuan Penyewaan Kamar<br />
            <small style="font-size: 0.9rem;">Kos Calista</small>
        </div>

        <div class="card-body mt-3">
            <p>Dengan ini saya, sebagai calon penghuni <strong>Kos Calista</strong>, menyatakan bahwa saya telah membaca, memahami, dan menyetujui syarat dan ketentuan berikut:</p>

            <ul>
                <li>Saya bersedia memberikan data diri yang valid, termasuk <strong>kartu identitas resmi (KTP)</strong> yang masih berlaku untuk keperluan administrasi dan verifikasi.</li>
                <li>Kartu identitas hanya digunakan oleh pengelola Kos Calista untuk keperluan verifikasi dan tidak akan disalahgunakan.</li>
                <li>Saya bersedia menjaga ketertiban, keamanan, serta kebersihan lingkungan Kos Calista.</li>
                <li>Saya bertanggung jawab atas penggunaan dan perawatan fasilitas kamar kos yang saya tempati.</li>
                <li>Jika terjadi kerusakan akibat kelalaian pribadi, saya siap bertanggung jawab untuk memperbaiki atau mengganti sesuai ketentuan yang berlaku.</li>
                <li>Saya tidak akan menggunakan kamar kos untuk kegiatan yang melanggar hukum atau norma yang berlaku.</li>
                <li>Semua informasi yang saya berikan adalah benar dan dapat dipertanggungjawabkan. Jika terbukti memberikan data palsu, saya siap menerima sanksi dari pengelola Kos Calista.</li>
            </ul>

            <form method="POST" action="{{ route('user.approveRental') }}" enctype="multipart/form-data" class="mt-4">
                @csrf

                <!-- Upload Kartu Identitas -->
                <div class="mb-3">
                    <label for="id_card" class="form-label">Upload Foto Kartu Identitas (KTP) *</label>
                    <input type="file" name="id_card" id="id_card" class="form-control" required>
                    <small class="text-muted">Format JPG, PNG, atau PDF. Maksimal 2MB.</small>
                </div>

                <!-- Checkbox persetujuan -->
                <div class="form-check mb-4">
                    <input class="form-check-input" type="checkbox" name="agree" id="agree" required>
                    <label class="form-check-label" for="agree">
                        Saya menyetujui semua syarat dan ketentuan di atas.
                    </label>
                </div>

                <!-- Tombol Submit -->
                <div class="d-grid">
                    <button type="submit" class="btn btn-gradient">
                        <i class="bi bi-check-circle me-2"></i> Setuju & Lanjutkan
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Bootstrap JS (optional) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
