@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 lg: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 Affiliator</a>
          </div>
        </li>
      </ol>
    </div>
    {{-- End Breadcrumb --}}
  </div>

  <div class="flex-grow md:mx-8 lg:px-8 md:pt-8 pb-8">
    <div class="lg:max-w-3xl mx-auto p-6 md:p-8 bg-gradient-to-t from-primary to-primary/40 md:rounded-2xl">
      {{-- <div class="text-center mb-6 lg:mb-10">
        <h1 class="text-2xl sm:text-3xl font-bold text-black">Daftar sebagai Affiliator</h1>
        <p class="mt-2 text-sm text-black">Bergabunglah dengan program affiliasi Bacabuku.com dan dapatkan
          komisi dari setiap penjualan</p>
      </div> --}}

      <img src="{{ asset('images/text-affiliators.png') }}" alt="teks daftar affiliator"
        class="mt-4 md:mt-0 mb-4 w-64 lg:w-80 mx-auto">
      <p class="mb-6 text-sm text-amber-900 text-center">Bergabunglah dengan program affiliasi Bacabuku.com dan
        dapatkan
        komisi dari setiap penjualan</p>
      <img src="{{ asset('images/affiliator.webp') }}" alt="affiliator" class="mb-6 lg:mb-10 w-96 mx-auto">

      <!-- 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.storeDaftar') }}">
          @csrf
          <!-- Step 1: Personal Information -->
          <div 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="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 id="submitBtn" type="submit" class="btn btn-primary w-full flex items-center justify-center"
                data-twe-ripple-init data-twe-ripple-color="light">
                <span id="btnText">Lanjutkan</span>
                <span id="btnSpinner" class="hidden ms-2">
                  <i class="fa fa-spinner fa-spin"></i>
                </span>
              </button>
            </div>

          </div>

        </form>

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

</div>
@endsection

@section('javascript')
<script src="{{ asset('plugins/select2/select2.min.js') }}"></script>
<script>
  $(document).ready(function() {
      $('form').on('submit', function() {
        const btn = $('#submitBtn');
        btn.prop('disabled', true); // disable button
        $('#btnText').text('Loading...');
        $('#btnSpinner').removeClass('hidden');
      });

      $('#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