@extends('layouts.app')

@section('head')
<link rel="stylesheet" href="{{ asset('plugins/select2/select2.min.css')}}" />
@endsection

@section('content')
<div class="lg:container pt-16 lg:pb-0">
    <div class="hidden md:block">
        {{-- Breadcrumb --}}
        <div class="flex mt-8 text-gray-700" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
                <li class="inline-flex items-center">
                    <a href="{{ route('beranda') }}"
                        class="inline-flex items-center text-xs text-primary hover:text-primary-dark">Beranda</a>
                </li>
                <li>
                    <div class="flex items-center">
                        <i class="fa fa-chevron-right text-xs text-gray-400"></i>
                        <a href="#" class="ms-1 text-xs  md:ms-2">Daftar Sebagai Afiliator</a>
                    </div>
                </li>

            </ol>
        </div>
        {{-- End Breadcrumb --}}
    </div>

    <div class="flex-grow lg:px-8 py-8">
        <div class="lg:max-w-4xl mx-auto px-4">
            <div class="text-center mb-12">
                <h1 class="text-2xl sm:text-3xl font-bold text-black">Daftar Sebagai Affiliator</h1>
                <p class="mt-2 text-sm text-gray-600">Bergabunglah dengan program affiliasi BacaBuku.com dan dapatkan
                    komisi dari setiap penjualan</p>
            </div>

            <!-- Progress Steps -->
            <div class="mb-8">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div
                            class="flex-none step-active w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium">
                            1</div>
                        <div class="ml-2">
                            <p class="text-sm font-semibold text-black">Informasi Pribadi</p>
                            <p class="text-xs text-gray-500">Data diri Anda</p>
                        </div>
                    </div>
                    <div class="hidden sm:block w-full bg-gray-200 h-0.5 mx-4"></div>
                    <div class="flex items-center">
                        <div
                            class="flex-none w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-sm font-medium text-gray-600">
                            2</div>
                        <div class="ml-2">
                            <p class="text-sm font-medium text-gray-600">Informasi Pembayaran</p>
                            <p class="text-xs text-gray-500">Detail rekening bank</p>
                        </div>
                    </div>
                    <div class="hidden sm:block w-full bg-gray-200 h-0.5 mx-4"></div>
                    <div class="flex items-center">
                        <div
                            class="flex-none w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-sm font-medium text-gray-600">
                            3</div>
                        <div class="ml-2">
                            <p class="text-sm font-medium text-gray-600">Verifikasi</p>
                            <p class="text-xs text-gray-500">Konfirmasi data</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Registration Form -->
            <div class="bg-white rounded-xl border border-gray-100 p-4 lg:p-6">
                @if($errors->any())
                <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                                    clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm leading-5 font-medium text-red-800">
                                Terdapat {{ $errors->count() }} kesalahan dalam pengisian form
                            </h3>
                            <div class="mt-2 text-sm leading-5 text-red-700">
                                <ul class="list-disc pl-5">
                                    @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                <form method="POST" action="{{ route('affiliator.storeInformasi') }}">
                    @csrf
                    <!-- Step 1: Personal Information -->
                    <div id="step1" class="space-y-4">
                        <div class="mb-10">
                            <h2 class="text-xl font-semibold text-gray-800">Informasi Pribadi</h2>
                            <p class="text-sm text-gray-600 mt-1">Lengkapi data diri Anda untuk mendaftar sebagai
                                affiliator.</p>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="firstName" class="block text-sm font-medium text-gray-700 mb-1">Nama Depan
                                    <span class="text-red-500">*</span></label>
                                <input type="text" id="firstName" name="firstName" value="{{ $namaDepan ?? '' }}"
                                    class="form-input w-full">
                            </div>
                            <div>
                                <label for="lastName" class="block text-sm font-medium text-gray-700 mb-1">Nama Belakang
                                    <span class="text-red-500">*</span></label>
                                <input type="text" id="lastName" name="lastName" value="{{ $namaBelakang ?? '' }}"
                                    class="form-input w-full">
                            </div>
                        </div>

                        <div>
                            <label for="emailAffiliator" class="block text-sm font-medium text-gray-700 mb-1">Email
                                <span class="text-red-500">*</span></label>
                            <input type="emailAffiliator" id="emailAffiliator" name="emailAffiliator"
                                value="{{ $email ?? '' }}" class="form-input w-full" readonly>
                            <p class="mt-1 text-xs text-gray-500">Email ini akan digunakan untuk login dan komunikasi
                            </p>
                        </div>

                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">No. Handphone
                                @if(empty($no_ponsel))
                                <span class="text-red-500">*</span>
                                @endif
                            </label>
                            <div class="flex">
                                <span
                                    class="inline-flex items-center px-3 text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-xl">
                                    +62
                                </span>
                                <input type="tel" id="phone" name="phone" value="{{ old('phone', $no_ponsel ?? '') }}"
                                    class="form-input w-full rounded-l-none focus:outline-none @error('phone') border-red-500 @enderror"
                                    placeholder="8123456789" @if(empty($no_ponsel)) required @endif
                                    @if(!empty($no_ponsel))@endif>
                            </div>
                            @error('phone')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                            <p class="mt-1 text-xs text-gray-500">Nomor aktif yang dapat dihubungi</p>
                        </div>

                        <div>
                            <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Alamat <span
                                    class="text-red-500">*</span></label>
                            <textarea id="address" name="address" rows="3" class="form-input w-full"
                                required></textarea>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div class="flex flex-col">
                                <label for="province" class="block text-sm font-medium text-gray-700 mb-1">
                                    Provinsi <span class="text-red-500">*</span>
                                </label>
                                <select id="province" name="province" required></select>
                            </div>

                            <div class="flex flex-col">
                                <label for="city" class="block text-sm font-medium text-gray-700 mb-1">
                                    Kota/Kabupaten <span class="text-red-500">*</span>
                                </label>
                                <select id="city" name="city" required></select>
                            </div>
                            <div>
                                <label for="postalCode" class="block text-sm font-medium text-gray-700 mb-1">Kode Pos
                                    <span class="text-red-500">*</span></label>
                                <input type="text" id="postalCode" name="postalCode" class="form-input w-full" required>
                            </div>
                        </div>

                        <div>
                            <label for="website" class="block text-sm font-medium text-gray-700 mb-1">Website/Blog
                                (opsional)</label>
                            <input type="url" id="website" name="website" class="form-input w-full"
                                placeholder="https://www.example.com">
                            <p class="mt-1 text-xs text-gray-500">Jika Anda memiliki website atau blog untuk promosi</p>
                        </div>

                        <div>
                            <label for="socialMedia" class="block text-sm font-medium text-gray-700 mb-1">Media Sosial
                                (opsional)</label>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="flex items-center">

                                    <span
                                        class="form-input inline-flex items-center px-3 text-gray-500 bg-gray-100 border border-r-0 rounded-r-none">
                                        <div class="flex items-center justify-center w-5 h-5">
                                            <i class="fa-brands fa-tiktok text-lg"></i>
                                        </div>
                                    </span>
                                    <input type="text" id="tiktok" name="tiktok"
                                        class="form-input w-full rounded-l-none" placeholder="contoh: @username">
                                </div>
                                <div class="flex items-center">
                                    <span
                                        class="form-input inline-flex items-center px-3 text-gray-500 bg-gray-100 border border-r-0 rounded-r-none">
                                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                                            <path
                                                d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                                        </svg>
                                    </span>
                                    <input type="text" id="facebook" name="facebook"
                                        class="form-input w-full rounded-l-none" placeholder="Username Facebook">
                                </div>
                                <div class="flex items-center">
                                    <span
                                        class="form-input inline-flex items-center px-3 text-gray-500 bg-gray-100 border border-r-0 rounded-r-none">
                                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                                            <path
                                                d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                                        </svg>
                                    </span>
                                    <input type="text" id="instagram" name="instagram"
                                        class="form-input w-full rounded-l-none" placeholder="Username Instagram">
                                </div>
                                {{-- <label for="tiktok" class="block text-sm font-medium text-gray-700 mb-1">
                                    <span class="text-xs text-gray-500">*Username Tiktok gunakan @, contoh:
                                        @bacabukucom_official</span>
                                </label> --}}
                            </div>
                        </div>

                        <div>
                            <div class="space-y-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Bagaimana Anda akan
                                    mempromosikan produk kami? <span class="text-red-500">*</span></label>
                                <div class="block ps-6">
                                    <input id="promo_website"
                                        class="relative float-left -ms-[1.5rem] me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60 focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent rtl:float-right"
                                        name="promotion_method[]" type="checkbox" value="website" />
                                    <label class="inline-block text-sm ps-1 hover:cursor-pointer" for="promo_website">
                                        Website/Blog
                                    </label>
                                </div>

                                <div class="block ps-6">
                                    <input id="promo_social"
                                        class="relative float-left -ms-[1.5rem] me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60 focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent rtl:float-right"
                                        name="promotion_method[]" type="checkbox" value="social_media" />
                                    <label class="inline-block text-sm ps-1 hover:cursor-pointer" for="promo_social">
                                        Media Sosial
                                    </label>
                                </div>

                                <div class="block ps-6">
                                    <input id="promo_email"
                                        class="relative float-left -ms-[1.5rem] me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60 focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent rtl:float-right"
                                        name="promotion_method[]" type="checkbox" value="emailPromotion" />
                                    <label class="inline-block text-sm ps-1 hover:cursor-pointer" for="promo_email">
                                        Marketing
                                    </label>
                                </div>

                                <div class="block ps-6">
                                    <input id="promo_other"
                                        class="relative float-left -ms-[1.5rem] me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60 focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent rtl:float-right"
                                        name="promotion_method[]" type="checkbox" value="other" />
                                    <label class="inline-block text-sm ps-1 hover:cursor-pointer" for="promo_other">
                                        Lainnya
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div>
                            <label for="experience" class="block text-sm font-medium text-gray-700 mb-1">Pengalaman
                                Affiliate Marketing <span class="text-red-500">*</span></label>
                            <select id="experience" class="w-full" name="experience" required>
                                <option value="">Pilih Pengalaman</option>
                                <option value="Pemula">Pemula (belum pernah)</option>
                                <option value="Menengah">Menengah (1-2 tahun)</option>
                                <option value="Berpengalaman">Berpengalaman (lebih dari 2 tahun)</option>
                            </select>
                        </div>

                        <div class="space-y-2">
                            <div class="block ps-6">
                                <input id="terms"
                                    class="relative float-left -ms-[1.5rem] me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60 focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent rtl:float-right"
                                    name="terms" type="checkbox" />
                                <label class="inline-block text-sm ps-1 hover:cursor-pointer" for="terms" required> Saya
                                    menyetujui <a href="{{ route('terms.affiliator') }}"
                                        class="text-primary hover:underline">Syarat dan Ketentuan</a> serta <a
                                        href="{{ route('kebijakanPrivacy.affiliator') }}"
                                        class="text-primary hover:underline">Kebijakan Privasi</a> Bacabuku.com <span
                                        class="text-red-500">*</span>
                                </label>
                            </div>

                            <div class="block ps-6">
                                <input id="newsletter"
                                    class="relative float-left -ms-[1.5rem] me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60 focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent rtl:float-right"
                                    name="newsletter" type="checkbox" />
                                <label class="inline-block text-sm ps-1 hover:cursor-pointer" for="newsletter">
                                    Saya ingin menerima newsletter dan informasi terbaru dari Bacabuku.com
                                </label>
                            </div>
                        </div>
                        <div class="text-xs text-black italic">Ket: <span class="text-red-500">(*)</span> wajib
                            diisi.
                        </div>

                        <div class="pt-4">
                            {{-- <button type="button" id="nextToStep2"
                                class="w-full bg-primary hover:bg-primary/90 text-white py-2.5 px-4 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
                                Lanjutkan
                            </button> --}}
                            <button type="submit" id="nextToStep2" class="btn btn-primary w-full" data-twe-ripple-init
                                data-twe-ripple-color="light">
                                Lanjutkan
                            </button>
                        </div>
                    </div>

                </form>

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

</div>
@endsection

@section('javascript')
<script src="{{ asset('plugins/select2/select2.min.js') }}"></script>
<script>
    $(document).ready(function () {
        $('#province').select2({ placeholder: 'Pilih Provinsi' });
        $('#city').select2({ placeholder: 'Pilih Kota/Kabupaten' });
        $('#experience').select2();
        // Ambil data provinsi
        $.ajax({
            url: '{{ route('data.provinsi') }}',
            type: 'GET',
            success: function(province) {
                $('#province').append('<option></option>'); // Kosongkan dulu
                province.forEach(function(p) {
                    $('#province').append(new Option(p.nama, p.id));
                });
            }
        });

        // Ketika provinsi dipilih, ambil kota/kabupaten berdasarkan ID
        $('#province').on('change', function() {
            const provId = $(this).val();
            $('#city').empty().append('<option></option>');
            
            if(provId) {
                $.ajax({
                    url: '{{ route('data.kota') }}',
                    type: 'GET',
                    data: { id_provinsi: provId },
                    success: function(city) {
                        city.forEach(function(c) {
                            $('#city').append(new Option(c.nama, c.id));
                        });
                    }
                });
            }
        });
    });

    @if (!@$stsLogin)

    document.getElementById('btn-login-navbar').click();

    @endif
</script>
@endsection