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

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Registrasi Mahasiswa - Politeknik Negeri Jember</title>
    
    <!-- Favicon -->
    <link rel="icon" href="{{ asset('images/favicon.png') }}" type="image/png">
    
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    
    <!-- Custom CSS -->
    <style>
        :root {
            --primary-color: #00A9E0;
            --secondary-color: #8B0000;
            --dark-color: #1A1A2E;
            --light-color: #F8F9FA;
            --success-color: #28A745;
            --warning-color: #FFC107;
            --danger-color: #DC3545;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, var(--primary-color), #0066CC);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .register-wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .register-container {
            width: 100%;
            max-width: 1000px;
            display: flex;
            background: white;
            border-radius: 15px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            animation: fadeInUp 0.5s ease-out;
        }
        
        .register-illustration {
            flex: 1;
            background: linear-gradient(rgba(0, 169, 224, 0.8), rgba(0, 102, 204, 0.8));
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 15px;
            color: var(--dark-color);
            text-align: center;
            display: none;
        }
        
        .register-illustration h2 {
            font-size: 2rem;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .register-illustration p {
            font-size: 1rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .register-box {
            flex: 1;
            padding: 40px;
            background: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .logo-container {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .logo {
            height: 80px;
            margin-bottom: 15px;
        }
        
        .register-title {
            font-size: 1.8rem;
            color: var(--dark-color);
            margin-bottom: 5px;
            font-weight: 600;
        }
        
        .register-subtitle {
            color: #6c757d;
            margin-bottom: 30px;
            font-size: 0.9rem;
        }
        
        .form-group {
            margin-bottom: 20px;
            position: relative;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark-color);
            font-size: 0.9rem;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 0.95rem;
            transition: all 0.3s;
            background-color: #f8f9fa;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(0, 169, 224, 0.2);
            background-color: white;
            outline: none;
        }
        
        .input-with-icon {
            position: relative;
        }
        
        .input-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #6c757d;
        }
        
        .btn-register {
            width: 100%;
            padding: 12px;
            background-color: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .btn-register:hover {
            background-color: #A52A2A;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(139, 0, 0, 0.3);
        }
        
        .btn-register:active {
            transform: translateY(0);
        }
        
        .login-link {
            text-align: center;
            margin-top: 20px;
            color: #6c757d;
            font-size: 0.9rem;
        }
        
        .login-link a {
            color: var(--primary-color);
            font-weight: 500;
            text-decoration: none;
            transition: all 0.3s;
        }
        
        .login-link a:hover {
            text-decoration: underline;
            color: #0066CC;
        }
        
        .invalid-feedback {
            color: var(--danger-color);
            font-size: 0.8rem;
            margin-top: 5px;
            display: block;
        }
        
        .form-control.is-invalid {
            border-color: var(--danger-color);
        }
        
        .form-control.is-invalid:focus {
            box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
        }
        
        .password-toggle {
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .password-toggle:hover {
            color: var(--primary-color);
        }

        .alert {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

       .alert-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .alert-error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .select2-container--default .select2-selection--single {
            height: 46px;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #f8f9fa;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 44px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px;
        }
        .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: #00A9E0;
            box-shadow: 0 0 0 3px rgba(0, 169, 224, 0.2);
            background-color: white;
        }

        .select2-search--dropdown {
            padding: 10px;
            background: #f8f9fa;
        }

        .select2-search__field {
            width: 100% !important;
            padding: 8px !important;
        }

         @keyframes slideDown {
            from { top: -50px; opacity: 0; }
            to { top: 20px; opacity: 1; }
        }

        /* Responsive Design */
        @media (min-width: 992px) {
            .register-illustration {
                display: flex;
            }
        }
        
        @media (max-width: 768px) {
            .register-container {
                flex-direction: column;
                max-width: 500px;
            }
            
            .register-box {
                padding: 30px;
            }
        }
        
        @media (max-width: 576px) {
            .register-box {
                padding: 20px;
            }
            
            .register-title {
                font-size: 1.5rem;
            }
        }
    </style>
</head>

<body>
    <div class="register-wrapper">
        <div class="register-container">
            <div class="register-illustration">
            </div>
            
            <div class="register-box">
                <div class="logo-container">
                    <img src="{{ asset('images/ok.png') }}" alt="Logo Politeknik Negeri Jember" class="logo">
                    <h2 class="register-title">Registrasi Mahasiswa</h2>
                    <p class="register-subtitle"></p>
                </div>
                
                <form method="POST" action="{{ route('register.mahasiswa') }}" id="registrationForm">
                    @csrf
                    <input type="hidden" name="force_mahasiswa" value="1">

                   @if(session('register_status'))
                        <div class="alert alert-{{ session('register_status') }}">
                            <i class="fas @if(session('register_status') == 'success') fa-check-circle @else fa-exclamation-circle @endif" 
                                style="margin-right: 10px;"></i>
                            {{ session('register_message') }}
                        </div>
                    @endif
                  
                    <!-- Data User -->
                    <div class="form-group">
                        <label for="name" class="form-label">Nama Lengkap</label>
                        <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" 
                               name="name" value="{{ old('name') }}" required autocomplete="name" autofocus
                               placeholder="Masukkan Nama Lengkap"
                               pattern="[A-Za-z\s]+" 
                               title="Hanya huruf diperbolehkan">
                        @error('name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="email" class="form-label">Email</label>
                        <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" 
                               name="email" value="{{ old('email') }}" required autocomplete="email"
                               placeholder="contoh@student.polije.ac.id">
                        @error('email')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="password" class="form-label">Password</label>
                        <div class="input-with-icon">
                            <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" 
                                   name="password" required autocomplete="new-password"
                                   placeholder="Minimal 8 karakter">
                            <i class="fas fa-eye password-toggle input-icon" id="togglePassword"></i>
                        </div>
                        @error('password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="password-confirm" class="form-label">Konfirmasi Password</label>
                        <div class="input-with-icon">
                            <input id="password-confirm" type="password" class="form-control" 
                                   name="password_confirmation" required autocomplete="new-password"
                                   placeholder="Ketik ulang password">
                            <i class="fas fa-eye password-toggle input-icon" id="toggleConfirmPassword"></i>
                        </div>
                    </div>

                    <!-- Data Mahasiswa -->
                    <div class="form-group">
                        <label for="nim" class="form-label">NIM</label>
                        <input id="nim" type="text" class="form-control @error('nim') is-invalid @enderror" 
                               name="nim" value="{{ old('nim') }}" required
                               placeholder="Contoh: E12345678 (1 huruf + 8 angka)" maxlength="9" 
                               pattern="[A-Za-z][0-9]*"
                               title="Format NIM: 1 huruf diikuti angka (contoh: E12345678)">            
                        @error('nim')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="program_studi" class="form-label">Program Studi</label>
                        <select class="form-control @error('program_studi') is-invalid @enderror" 
                                id="program_studi" name="program_studi" required>
                            <option value="">Pilih Program Studi</option>
                            <option value="D4-Akuntansi Sektor Publik">D4-Akuntansi Sektor Publik</option>
                            <option value="D3-Bahasa Inggris">D3-Bahasa Inggris</option>
                            <option value="D4-Bisnis Digital">D4-Bisnis Digital</option>
                            <option value="D4-Budidaya Tanaman Perkebunan">D4-Budidaya Tanaman Perkebunan</option>
                            <option value="D4-Destinasi Pariwisata">D4-Destinasi Pariwisata</option>
                            <option value="D4-Gizi Klinik">D4-Gizi Klinik</option>
                            <option value="D3-Keteknikan Pertanian">D3-Keteknikan Pertanian</option>
                            <option value="D3-Manajemen Agribisnis">D3-Manajemen Agribisnis</option>
                            <option value="D4-Manajemen Agroindustri">D4-Manajemen Agroindustri</option>
                            <option value="D4-Manajemen Bisnis Unggas">D4-Manajemen Bisnis Unggas</option>
                            <option value="D3-Manajemen Informatika">D3-Manajemen Informatika</option>
                            <option value="D4-Manajemen Informasi Kesehatan">D4-Manajemen Informasi Kesehatan</option>
                            <option value="D4-Manajemen Pemasaran Internasional">D4-Manajemen Pemasaran Internasional</option>
                            <option value="D4-Mesin Otomotif">D4-Mesin Otomotif</option>
                            <option value="D4-Produksi Media (Kampus Bondowoso)">D4-Produksi Media (Kampus Bondowoso)</option>
                            <option value="D4-Pengelolaan Perkebunan Kopi">D4-Pengelolaan Perkebunan Kopi</option>
                            <option value="D3-Produksi Tanaman Hortikultura">D3-Produksi Tanaman Hortikultura</option>
                            <option value="D3-Produksi Tanaman Perkebunan">D3-Produksi Tanaman Perkebunan</option>
                            <option value="D3-Produksi Ternak">D3-Produksi Ternak</option>
                            <option value="D4-Promosi Kesehatan">D4-Promosi Kesehatan</option>
                            <option value="D4-Teknik Energi Terbarukan">D4-Teknik Energi Terbarukan</option>
                            <option value="D4-Teknik Produksi Benih">D4-Teknik Produksi Benih</option>
                            <option value="D4-Teknik Informatika">D4-Teknik Informatika</option>
                            <option value="D3-Teknik Komputer">D3-Teknik Komputer</option>
                            <option value="D3-Teknologi Industri Pangan">D3-Teknologi Industri Pangan</option>
                            <option value="D4-Teknologi Pakan Ternak">D4-Teknologi Pakan Ternak</option>
                            <option value="D4-Teknologi Produksi Tanaman Pangan">D4-Teknologi Produksi Tanaman Pangan</option>
                            <option value="D4-Teknologi Rekayasa Komputer">D4-Teknologi Rekayasa Komputer</option>
                            <option value="D4-Teknologi Rekayasa Perangkat Lunak">D4 Teknologi Rekayasa Perangkat Lunak</option>
                            <option value="D4-Teknologi Rekayasa Mekatronika">D4-Teknologi Rekayasa Mekatronika</option>
                            <option value="D4-Teknologi Rekayasa Pangan">D4-Teknologi Rekayasa Pangan</option>
                        </select>
                        @error('program_studi')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="jurusan" class="form-label">Jurusan</label>
                        <input id="jurusan" type="text" class="form-control @error('jurusan') is-invalid @enderror" 
                            name="jurusan" value="{{ old('jurusan') }}" required
                            placeholder="Contoh: Teknologi Informasi" readonly>
                        @error('jurusan')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="no_hp" class="form-label">No. HP/WhatsApp</label>
                        <input id="no_hp" type="text" class="form-control @error('no_hp') is-invalid @enderror" 
                               name="no_hp" value="{{ old('no_hp') }}" required
                               placeholder="Contoh: 081234567890" pattern="[0-9]*" inputmode="numeric">                        
                        @error('no_hp')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <button type="submit" class="btn-register">
                        <i class="fas fa-user-plus"></i> Daftar Sekarang
                    </button>
                    
                    <div class="login-link">
                        Sudah punya akun? <a href="{{ route('login') }}">Login disini</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- JavaScript Libraries -->
    <script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Custom Script -->
    <script>
    $(document).ready(function() {
        // Auto-hide alerts after 5 seconds
        setTimeout(() => {
            const alert = document.querySelector('.register-alert');
            alert.style.transition = 'all 0.5s ease';
            alert.style.opacity = '0';
            alert.style.top = '-50px';
            setTimeout(() => alert.remove(), 500);
        }, 5000);

        // Validasi nama lengkap (hanya huruf dan spasi)
        $('#name').on('input', function() {
            this.value = this.value.replace(/[^A-Za-z\s]/g, '');
        });

        // Initialize Select2 for program studi dengan pengaturan khusus
        $('#program_studi').select2({
            placeholder: "Ketik nama program studi...",
            allowClear: true,
            width: '100%',
            dropdownParent: $('.register-box'),
            minimumResultsForSearch: 0, // Selalu tampilkan search box
            language: {
                noResults: function() {
                    return "Program studi tidak ditemukan";
                },
                searching: function() {
                    return "Mencari...";
                }
            }
        });

        // Fokus otomatis ke search box saat dropdown dibuka
        $('#program_studi').on('select2:open', function() {
            document.querySelector('.select2-search__field').focus();   
        });

        // Aktifkan pencarian langsung saat mulai mengetik  
        $(document).on('keydown', '.select2-selection--single', function(e) {
            $('#program_studi').select2('open');
            // Set timeout kecil untuk memastikan search box sudah terbuka
            setTimeout(function() {
                $('.select2-search__field').val('').trigger('input');
            }, 100);
        });
        
        // Password toggle functionality
        $('#togglePassword, #toggleConfirmPassword').click(function() {
            const field = $(this).hasClass('fa-eye') ? 
                $(this).siblings('input') : 
                $(this).closest('.input-with-icon').find('input');
            
            const type = field.attr('type') === 'password' ? 'text' : 'password';
            field.attr('type', type);
            
            $(this).toggleClass('fa-eye fa-eye-slash');
        });
        
        // Email validation with remove error when valid
        $('#email').on('blur', function() {
            const email = $(this).val();
            if (email && !email.endsWith('@student.polije.ac.id')) {
                $(this).addClass('is-invalid');
                $(this).after('<span class="invalid-feedback">Hanya email @student.polije.ac.id yang diperbolehkan</span>');
            } else {
                $(this).removeClass('is-invalid');
                $(this).next('.invalid-feedback').remove();
            }
        });

        // NIM validation with auto-uppercase first character
        $('#nim').on('input', function(e) {
            // Ambil nilai input
            let nimValue = this.value;

            // Pastikan huruf pertama adalah abjad (auto uppercase)
            if (nimValue.length === 1) {
                if (!/[A-Za-z]/.test(nimValue)) {
                    this.value = '';
                    return;
                }
                // Auto-uppercase huruf pertama
                this.value = nimValue.toUpperCase();
            }
    
            // Untuk karakter setelah huruf pertama, hanya ijinkan angka
            if (nimValue.length > 1) {
                // Simpan huruf pertama
                const firstChar = nimValue.charAt(0);
                // Hanya ambil angka untuk karakter selanjutnya
                const numbers = nimValue.substring(1).replace(/[^0-9]/g, '');
                // Gabungkan huruf pertama dengan angka
                this.value = firstChar + numbers;
            }
    
            // Validasi panjang maksimal 9 karakter (1 huruf + 8 angka)
            if (this.value.length > 9) {
                this.value = this.value.substring(0, 9);
            }
        });

        // Validasi saat blur (kehilangan fokus)
        $('#nim').on('blur', function() {
            const nim = this.value;
            if (nim && !/^[A-Z][0-9]{8}$/.test(nim)) {
                $(this).addClass('is-invalid');
                if (!$(this).next('.invalid-feedback').length) {
                    $(this).after('<span class="invalid-feedback">Format NIM: 1 huruf kapital diikuti 8 angka (contoh: E12345678)</span>');
                }
            } else {
                $(this).removeClass('is-invalid');
                $(this).next('.invalid-feedback').remove();
            }
        });

        // Phone number validation - prevent non-numeric input
        $('#no_hp').on('input', function(e) {
            // Hanya input angka
            this.value = this.value.replace(/[^0-9]/g, '');
    
            // Validasi tambahan
            const phone = $(this).val();
            if (phone && !/^[0-9]+$/.test(phone)) {
                $(this).addClass('is-invalid');
                $(this).after('<span class="invalid-feedback">Nomor HP hanya boleh mengandung angka</span>');
            } else {
                $(this).removeClass('is-invalid');
                $(this).next('.invalid-feedback').remove();
            }
        });

        // Jurusan mapping
        const jurusanMap = {
            "Kesehatan": ["D4-Gizi Klinik", "D4-Promosi Kesehatan", "D4-Manajemen Informasi Kesehatan"],
            "Teknologi Informasi": ["D4-Teknik Informatika", "D3-Manajemen Informatika", "D3-Teknik Komputer", "D4-Teknologi Rekayasa Perangkat Lunak", "D4-Teknologi Rekayasa Komputer"],
            "Teknik": ["D4-Teknik Energi Terbarukan", "D4-Teknologi Rekayasa Mekatronika", "D4-Mesin Otomotif"],
            "Teknologi Pertanian": ["D3-Keteknikan Pertanian", "D4-Teknologi Rekayasa Pangan", "D3-Teknologi Industri Pangan"],
            "Peternakan": ["D4-Teknologi Pakan Ternak", "D3-Produksi Ternak", "D4-Manajemen Bisnis Unggas"],
            "Manajemen Agribisnis": ["D4-Manajemen Agroindustri", "D3-Manajemen Agribisnis"],
            "Bahasa, Komunikasi dan Pariwisata": ["D3-Bahasa Inggris", "D4-Destinasi Pariwisata", "D4-Produksi Media (Kampus Bondowoso)"],
            "Produksi Pertanian": ["D3-Produksi Tanaman Hortikultura", "D3-Produksi Tanaman Perkebunan", "D4-Teknik Produksi Benih", "D4-Teknologi Produksi Tanaman Pangan", "D4-Budidaya Tanaman Perkebunan","D4-Pengelolaan Perkebunan Kopi"],
            "Bisnis": ["D4-Akuntansi Sektor Publik", "D4-Manajemen Pemasaran Internasional", "D4-Bisnis Digital"]
        };

        // Update jurusan when program studi changes
        $('#program_studi').on('change', function() {
            const selectedProdi = $(this).val();
            let jurusanDitemukan = '';

            $.each(jurusanMap, function(jurusan, listProdi) {
                if (listProdi.includes(selectedProdi)) {
                    jurusanDitemukan = jurusan;
                    return false;
                }
            });

            $('#jurusan').val(jurusanDitemukan);
        });

        // Auto set jurusan if reloading with existing value
        const currentProdi = $('#program_studi').val();
        if (currentProdi) {
            $.each(jurusanMap, function(jurusan, listProdi) {
                if (listProdi.includes(currentProdi)) {
                    $('#jurusan').val(jurusan);
                    return false;
                }
            });
        }

        // Update form submission validation
        $('#registrationForm').on('submit', function(e) {
            // Clear previous errors
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
            
            let isValid = true;
            
            // Basic validation
            $(this).find('input[required], select[required]').each(function() {
                if (!$(this).val()) {
                    $(this).addClass('is-invalid');
                    $(this).after('<span class="invalid-feedback">Field ini wajib diisi</span>');
                    isValid = false;
                }
            });
            
            // Email validation
            const email = $('#email').val();
            if (email && !email.endsWith('@student.polije.ac.id')) {
                $('#email').addClass('is-invalid');
                $('#email').after('<span class="invalid-feedback">Hanya email @student.polije.ac.id yang diperbolehkan</span>');
                isValid = false;
            }
            
            // NIM validation
            const nim = $('#nim').val();
            if (nim && !/^[A-Z][0-9]{8}$/.test(nim)) {
                $('#nim').addClass('is-invalid');
                $('#nim').after('<span class="invalid-feedback">Format NIM tidak valid. Harus diawali huruf kapital diikuti 8 angka (contoh: E12345678)</span>');
                isValid = false;
            }
            
            // Phone number validation
            const phone = $('#no_hp').val();
            if (phone && !/^[0-9]+$/.test(phone)) {
                $('#no_hp').addClass('is-invalid');
                $('#no_hp').after('<span class="invalid-feedback">Nomor HP hanya boleh mengandung angka</span>');
                isValid = false;
            }
            
            // Password confirmation validation
            if ($('#password').val() !== $('#password-confirm').val()) {
                $('#password-confirm').addClass('is-invalid');
                $('#password-confirm').after('<span class="invalid-feedback">Password tidak cocok</span>');
                isValid = false;
            }
            
            if (!isValid) {
                e.preventDefault();
                $(this).addClass('shake');
                setTimeout(() => {
                    $(this).removeClass('shake');
                }, 500);
                return false;
            }
            
            // Show loading state
            $('.btn-register').html('<i class="fas fa-spinner fa-spin"></i> Memproses...')
                .prop('disabled', true);
        });
    });
    </script>
</body>
</html>