@extends('layouts.app')

@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link id="canonicalTag" rel="canonical" href="" />

@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="{{ url('register/affiliator/pembayaran') }}"
                            class="ms-1 text-xs text-primary hover:text-primary-dark md:ms-2">Informasi Pembayaran</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">Verifikasi</a>
                    </div>
                </li>

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

    <div class="flex-grow lg:px-8 py-8">
        <div class="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-600">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 step-active w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium">
                            3</div>
                        <div class="ml-2">
                            <p class="text-sm font-semibold text-black">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.storeVerifikasi') }}">
                    @csrf
                    <!-- Update the summary fields to show actual data -->
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <div class="mb-10">
                            <h2 class="text-xl font-semibold text-gray-800">Informasi Pribadi</h2>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                            <div>
                                <p class="text-gray-500">Nama Lengkap</p>
                                <p class="font-medium">{{ $data['informasi']['firstName'] }} {{
                                    $data['informasi']['lastName'] }}</p>
                            </div>
                            <div>
                                <p class="text-gray-500">Email</p>
                                <p class="font-medium">{{ $data['informasi']['emailAffiliator'] }}</p>
                            </div>
                            <!-- Add other fields similarly -->
                        </div>
                    </div>

                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h3 class="font-medium text-gray-800 mb-2">Informasi Pembayaran</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                            <div>
                                <p class="text-gray-500">Bank</p>
                                <p class="font-medium">{{ $data['pembayaran']['bankName'] }}</p>
                            </div>
                            <div>
                                <p class="text-gray-500">Nomor Rekening</p>
                                <p class="font-medium">{{ $data['pembayaran']['accountNumber'] }}</p>
                            </div>
                            <!-- Add other fields similarly -->
                        </div>
                    </div>

                    <div class="pt-4 flex justify-between">
                        <a href="{{ route('affiliator.pembayaran') }}" id="backToStep2" class="btn btn-outline">
                            Kembali
                        </a>
                        <button type="submit" class="btn btn-primary">
                            Daftar Sekarang
                        </button>
                    </div>
                </form>

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



    {{-- End Modals --}}
    @endsection

    @section('javascript')
    <script>
        // Cek flash message dan tampilkan notifikasi
    @if (session('success'))
        const notyf = new Notyf({
            duration: 5000,
            position: {
                x: 'right',
                y: 'top',
            },
            types: [
                {
                    type: 'success',
                    background: '#4CAF50',
                    icon: {
                        className: 'fas fa-check',
                        tagName: 'i',
                        color: 'white'
                    },
                    dismissible: true
                }
            ]
        });
        
        notyf.success("{{ session('success') }}");
        
        // Redirect setelah notifikasi ditampilkan
        @if (session('notyf'))
            setTimeout(() => {
                window.location.href = "{{ route('affiliator.admin') }}";
            }, 3000);
        @endif
    @endif

    @if (session('error'))
        const notyfError = new Notyf({
            duration: 5000,
            position: {
                x: 'right',
                y: 'top',
            },
            types: [
                {
                    type: 'error',
                    background: '#F44336',
                    icon: {
                        className: 'fas fa-times',
                        tagName: 'i',
                        color: 'white'
                    },
                    dismissible: true
                }
            ]
        });
        
        notyfError.error("{{ session('error') }}");
    @endif
    </script>
    @endsection