<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Register - SIDAKDesa</title>
    <meta name="description"
        content="Halaman pendaftaran SIDAKDesa untuk membuat akun dan mengakses sistem informasi serta layanan digital Desa Pelem.">
    <meta name="keywords"
        content="register SIDAKDesa, daftar SIDAKDesa, pendaftaran akun desa, sistem informasi desa, Desa Pelem">
    <meta name="author" content="Desa Pelem">
    <meta name="robots" content="noindex, nofollow">
    <meta name="theme-color" content="#ffffff">

    <link rel="canonical" href="{{ url()->current() }}">

    <meta property="og:type" content="website">
    <meta property="og:title" content="Register - SIDAKDesa">
    <meta property="og:description"
        content="Daftar akun SIDAKDesa untuk mengakses sistem informasi dan layanan digital Desa Pelem.">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:image" content="{{ asset('assets/images/njk-logo.png') }}">
    <meta property="og:site_name" content="SIDAKDesa">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Register - SIDAKDesa">
    <meta name="twitter:description"
        content="Daftar akun SIDAKDesa untuk mengakses sistem informasi dan layanan digital Desa Pelem.">
    <meta name="twitter:image" content="{{ asset('assets/images/njk-logo.png') }}">

    <link rel="icon" type="image/png" href="{{ asset('assets/images/njk-logo.png') }}">
    <link rel="shortcut icon" href="{{ asset('assets/images/njk-logo.png') }}">
    <link rel="apple-touch-icon" href="{{ asset('assets/images/njk-logo.png') }}">

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <style>
        body {
            background: #ffffff;
            font-family: 'Inter', sans-serif;
        }

        .register-wrapper {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .logo-col {
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .logo-card {
            background: #f4f6f8;
            border-radius: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            padding: 2rem;
            text-align: center;
            max-width: 380px;
            width: 100%;
        }

        .logo-card img {
            max-width: 100%;
            height: auto;
        }

        .form-col {
            background: #ffffff;
            padding: 3rem 2rem;
            display: flex;
            align-items: center;
        }

        .btn-register {
            background-color: #f27d32;
            border: none;
            color: #fff;
        }

        .btn-register:hover {
            background-color: #d86b28;
            color: #fff;
        }

        .btn-login {
            background-color: #168a85;
            border: none;
            color: #fff;
        }

        .btn-login:hover {
            background-color: #11716c;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="register-wrapper">
        <div class="row g-0 w-100" style="max-width: 1100px; background: transparent;">

            {{-- Kolom kiri: card logo & ilustrasi --}}
            <div class="col-lg-6 logo-col">
                <div class="logo-card">
                    {{-- Logo --}}
                    <img src="{{ asset('assets/images/sidak-desa.jpg') }}" alt="Logo SIDAKDesa" class="img-fluid mb-4"
                        style="max-width:200px;">
                    {{-- Ilustrasi --}}
                    <img src="{{ asset('assets/images/absensi.png') }}" alt="Ilustrasi Absensi" class="img-fluid"
                        style="max-width:280px;">
                </div>
            </div>

            {{-- Kolom kanan: form register --}}
            <div class="col-lg-6 form-col">
                <div class="w-100" style="max-width: 500px;">
                    <a href="{{ url('/') }}" class="btn btn-light mb-4"
                        style="border-radius:8px; border:1px solid #ddd;">
                        ← Halaman Utama
                    </a>
                    <h3 class="fw-bold mb-2">Daftar Akun Perangkat Desa</h3>
                    <p class="text-muted mb-4">Silahkan lengkapi data diri anda untuk membuat akun baru!</p>

                    <form method="POST" action="{{ route('register') }}">
                        @csrf

                        <div class="mb-3">
                            <label class="form-label">Nama Lengkap</label>
                            <input type="text" name="name" class="form-control form-control-lg"
                                placeholder="Masukkan Nama Lengkap" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control form-control-lg"
                                placeholder="Masukkan Email" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Jabatan</label>
                            <select name="jabatan" class="form-select form-select-lg" required>
                                <option value="" disabled selected>Pilih Jabatan</option>
                                <option value="Kepala Desa">Kepala Desa</option>
                                <option value="Sekretaris Desa">Sekretaris Desa</option>
                                <option value="Kasi Pemerintahan">Kasi Pemerintahan</option>
                                <option value="Kasi Kesejahteraan">Kasi Kesejahteraan</option>
                                <option value="Kasi Pelayanan">Kasi Pelayanan</option>
                                <option value="Kaur Keuangan">Kaur Keuangan</option>
                                <option value="Kaur Perencanaan">Kaur Perencanaan</option>
                                <option value="Staff">Staff</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Kata Sandi</label>
                            <input type="password" name="password" class="form-control form-control-lg"
                                placeholder="Masukkan Kata Sandi" required>
                        </div>

                        <div class="mb-4">
                            <label class="form-label">Konfirmasi Kata Sandi</label>
                            <input type="password" name="password_confirmation" class="form-control form-control-lg"
                                placeholder="Konfirmasi Kata Sandi" required>
                        </div>

                        <div class="d-grid gap-3">
                            <button type="submit" class="btn btn-register btn-lg">Daftar Akun</button>
                            <a href="{{ route('login') }}" class="btn btn-login btn-lg">Sudah Punya Akun? Masuk</a>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</body>

</html>
