@extends(template().'layout.master2')

@section('content2')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        $("form").on("submit", function() {
            const btn = $(this).find('button[type="submit"]');
            btn.prop('disabled', true).addClass('opacity-70 cursor-not-allowed');
            btn.html(`
                <div class="flex items-center justify-center gap-2">
                    <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span>{{ __('Processing...') }}</span>
                </div>
            `);
        });
    });
</script>

<div class="dashboard-body-part bg-zinc-950 min-h-screen pt-24 pb-20 px-4">
  <div class="max-w-4xl mx-auto space-y-6">

    <div class="text-center">
      <h4 class="text-white text-xl font-black tracking-tight uppercase">{{ __('KYC VERIFICATION') }}</h4>
      <p class="text-zinc-500 text-xs pt-1">{{ __('Ensure document provided contains the same information used during registration') }}</p>
    </div>

    <div class="bg-zinc-900 border border-zinc-800 rounded-3xl shadow-2xl p-6 md:p-10">
      <form action="" method="post" enctype="multipart/form-data" class="space-y-6">
        @csrf

        <div class="space-y-3">
          <label class="block font-bold text-xs uppercase tracking-widest text-zinc-400">KYC Type</label>
          <p class="text-zinc-500 text-xs">Choose KYC type</p>
          <select name="kyc[${i}][type]" id="Select_tag"
            class="w-full bg-zinc-800 border border-zinc-700 text-white rounded-xl p-4 focus:outline-none focus:ring-2 focus:ring-emerald-500 transition-all">
            <option>{{ __('SSN') }}</option>
            <option>{{ __('DS Number') }}</option>
            <option>{{ __('Drivers License') }}</option>
            <option>{{ __('National ID') }}</option>
            <option>{{ __('Others') }}</option>
          </select>
        </div>

        <div class="h-px bg-zinc-800 my-8"></div>

        @foreach ($general->kyc as $proof)
          @if ($proof['type'] == 'text')
            <div class="space-y-2">
              <label class="block font-bold text-xs uppercase tracking-widest text-zinc-400">{{ __($proof['field_name']) }}</label>
              <input type="text"
                name="{{ strtolower(str_replace(' ', '_', $proof['field_name'])) }}"
                class="w-full bg-zinc-800 border border-zinc-700 text-white rounded-xl p-4 focus:outline-none focus:ring-2 focus:ring-emerald-500 transition-all placeholder:text-zinc-600"
                {{ $proof['validation'] == 'required' ? 'required' : '' }}>
            </div>
          @endif

          @if ($proof['type'] == 'textarea')
            <div class="space-y-2">
              <label class="block font-bold text-xs uppercase tracking-widest text-zinc-400">{{ __($proof['field_name']) }}</label>
              <textarea
                name="{{ strtolower(str_replace(' ', '_', $proof['field_name'])) }}"
                class="w-full bg-zinc-800 border border-zinc-700 text-white rounded-xl p-4 focus:outline-none focus:ring-2 focus:ring-emerald-500 transition-all min-h-[120px]"
                {{ $proof['validation'] == 'required' ? 'required' : '' }}></textarea>
            </div>
          @endif

          @if ($proof['type'] == 'file')
            <div class="space-y-2">
              <label class="block font-bold text-xs uppercase tracking-widest text-zinc-400">{{ __($proof['field_name']) }}</label>
              <input type="file"
                name="{{ strtolower(str_replace(' ', '_', $proof['field_name'])) }}"
                class="w-full text-zinc-400 rounded-xl p-3 bg-zinc-800 border border-zinc-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 file:bg-zinc-700 file:text-white file:border-0 file:rounded-lg file:px-4 file:py-1 file:mr-4 file:text-xs file:uppercase file:font-bold transition-all"
                {{ $proof['validation'] == 'required' ? 'required' : '' }}>
            </div>
          @endif
        @endforeach

        <div class="pt-4">
          <button type="submit"
            class="w-full bg-emerald-600 text-white font-black uppercase tracking-widest py-5 rounded-2xl hover:bg-emerald-500 shadow-[0_10px_20px_-10px_rgba(16,185,129,0.4)] transition-all duration-300">
            {{ __('Submit KYC Application') }}
          </button>
        </div>
      </form>
    </div>

  </div>
</div>

@endsection