@extends('layouts.app')

@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link id="canonicalTag" rel="canonical" href="" />
<link rel="stylesheet" href="{{ asset('plugins/select2/select2.min.css')}}" />

@if(isset($konten))
<script type="application/ld+json">
    {!! json_encode($jsonLd, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!}
</script>
@endif

@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="{{ route('affiliator.informasi') }}"
                            class="ms-1 text-xs text-primary hover:text-primary-dark md:ms-2">Informasi Pribadi</a>
                    </div>
                </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">Informasi Pembayaran</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-gray-800">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 w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-sm font-medium text-gray-600">
                            1</div>
                        <div class="ml-2">
                            <p class="text-sm font-medium text-gray-500">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 step-active w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium">
                            2</div>
                        <div class="ml-2">
                            <p class="text-sm font-semibold text-black">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.storePembayaran') }}">
                    @csrf
                    <!-- Step 2: Payment Information (Hidden initially) -->
                    <div id="step2" class="space-y-4">
                        <div class="mb-10">
                            <h2 class="text-xl font-semibold text-gray-800">Informasi Pembayaran</h2>
                            <p class="text-sm text-gray-600 mt-1">Lengkapi informasi rekening bank untuk penerimaan
                                komisi.</p>
                        </div>

                        <div class="flex flex-col">
                            <label for="bank" class="block text-sm font-medium text-gray-700 mb-1">Nama Bank <span
                                    class="text-red-500">*</span></label>
                            <select id="bank" class="select-filter w-full" name="bankName" required>
                                <option value="" disabled selected>Pilih Bank</option>
                                <option value="BCA">Bank Central Asia (BCA)</option>
                                <option value="Mandiri">Bank Mandiri</option>
                                <option value="BNI">Bank Negara Indonesia (BNI)</option>
                                <option value="BRI">Bank Rakyat Indonesia (BRI)</option>
                                <option value="CIMB">CIMB Niaga</option>
                                <option value="Permata">Bank Permata</option>
                                <option value="Danamon">Bank Danamon</option>
                                <option value="BSI">Bank Syariah Indonesia (BSI)</option>
                            </select>
                            <p class="mt-1 text-xs text-gray-500">
                                ⚠️ Transfer ke bank selain BCA akan dikenakan biaya administrasi tambahan.
                            </p>
                        </div>

                        <div class="flex flex-col">
                            <label for="accountNumber" class="block text-sm font-medium text-gray-700 mb-1">Nomor
                                Rekening <span class="text-red-500">*</span></label>
                            <input type="number" id="accountNumber" name="accountNumber" class="form-input " required>
                            <p class="mt-1 text-xs text-gray-500">Masukkan nomor rekening tanpa spasi</p>
                        </div>

                        <div class="flex flex-col">
                            <label for="accountName" class="block text-sm font-medium text-gray-700 mb-1">Nama
                                Pemilik Rekening <span class="text-red-500">*</span></label>
                            <input type="text" id="accountName" name="accountName" class="form-input" required>
                            <p class="mt-1 text-xs text-gray-500">Nama harus sesuai dengan yang tertera pada
                                rekening bank</p>
                        </div>

                        <div class="flex flex-col">
                            <label for="idType" class="block text-sm font-medium text-gray-700 mb-1">Jenis Identitas
                                <span class="text-red-500">*</span></label>
                            <select id="idType" class="select-filter w-full" name="idType"
                                class="form-input w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none"
                                required>
                                <option value="" disabled selected>Pilih Jenis Identitas</option>
                                <option value="KTP">KTP</option>
                                <option value="SIM">SIM</option>
                                <option value="Passport">Passport</option>
                            </select>
                        </div>

                        <div class="flex flex-col">
                            <label for="idNumber" class="block text-sm font-medium text-gray-700 mb-1">Nomor Identitas
                                <span class="text-red-500">*</span></label>
                            <input type="text" id="idNumber" name="idNumber" class="form-input" required>
                            <p class="mt-1 text-xs text-gray-500">masukkan di sini dengan
                                minimal 16 karakter</p>
                        </div>

                        <div class="flex flex-col">
                            <label for="taxNumber" class="block text-sm font-medium text-gray-700 mb-1">NPWP
                                (opsional)</label>
                            <input type="text" id="taxNumber" name="taxNumber" class="form-input">
                            <p class="mt-1 text-xs text-gray-500">jika anda memiliki NPWP, masukkan di sini dengan
                                minimal 16 karakter</p>
                        </div>

                        <div class="text-xs text-black italic">Ket: <span class="text-red-500">(*)</span> wajib
                            diisi.
                        </div>

                        <div class="pt-4 flex justify-between">
                            <a href="{{ route('affiliator.informasi') }}" id="backToStep1" class="btn btn-outline">
                                Kembali
                            </a>
                            <button type="submit" id="nextToStep3" class="btn btn-primary">
                                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 () {
        $('.select-filter').select2();
    });
</script>
@endsection