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

@section('content2')

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

@php
    $kycStatus = auth()->user()->kyc; 
@endphp

{{-- If status is NOT processing (2), hide the header/nav to force focus on the form --}}
@if($kycStatus != 2)
<style>
    .header, .bottom-nav {
        display: none !important;
    }
</style>
@endif

<script>
    'use strict'
    $(document).ready(function() {
        // If KYC is processing, disable all inputs and the submit button
        @if($kycStatus == 2)
            $('form input, form textarea, form select, form button[type="submit"]').prop('disabled', true);
            $('form button[type="submit"]').addClass('opacity-50 cursor-not-allowed grayscale').html(`
                <div class="flex items-center justify-center gap-3">
                    <i data-lucide="clock" class="w-5 h-5"></i>
                    <span class="italic tracking-widest">{{ __('UNDER REVIEW') }}</span>
                </div>
            `);
        @endif

        $("form").on("submit", function() {
            const btn = $(this).find('button[type="submit"]');
            btn.prop('disabled', true).addClass('opacity-70 cursor-not-allowed shadow-none scale-95');
            btn.html(`
                <div class="flex items-center justify-center gap-3">
                    <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 class="italic tracking-widest">{{ __('PROCESSING...') }}</span>
                </div>
            `);
        });
    });
</script>
<script>
    'use strict'
    $(document).ready(function() {
        $("form").on("submit", function() {
            const btn = $(this).find('button[type="submit"]');
            btn.prop('disabled', true).addClass('opacity-70 cursor-not-allowed shadow-none scale-95');
            btn.html(`
                <div class="flex items-center justify-center gap-3">
                    <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 class="italic tracking-widest">{{ __('PROCESSING...') }}</span>
                </div>
            `);
        });
    });
</script>

<div class="min-h-screen bg-slate-50 dark:bg-slate-950 pt-24 pb-20 px-4 transition-colors duration-300">
  <div class="max-w-3xl mx-auto space-y-8">

    <div class="text-center space-y-2">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-3xl bg-blue-600/10 border border-blue-600/20 mb-4">
            <i data-lucide="shield-check" class="w-8 h-8 text-blue-600"></i>
        </div>
        <h4 class="text-slate-900 dark:text-white text-2xl font-black tracking-tighter uppercase italic">{{ __('Identity Verification') }}</h4>
        <p class="text-slate-500 dark:text-slate-500 text-[10px] font-bold uppercase tracking-[0.2em] max-w-md mx-auto leading-relaxed">
            {{ __('Ensure documents match your registration data to avoid terminal suspension') }}
        </p>
        
        <p class="text-gray-700 dark:text-gray-300 text-sm mt-2 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-lg p-6">
            {{ __('Current KYC Status:') }}
            @php
                $kycStatus = auth()->user()->kyc; // use 'kyc' not 'kyc_status'
            @endphp

            <span class="text-xs font-medium px-2 py-1 rounded-lg
                @if($kycStatus == 2) bg-yellow-400 text-black dark:text-black
                @elseif($kycStatus == 1) bg-green-500 text-white
                @elseif($kycStatus == 3) bg-red-500 text-white
                @else bg-gray-400 text-white
                @endif">
                @if($kycStatus == 2) Processing
                @elseif($kycStatus == 1) Verified
                @elseif($kycStatus == 3) Rejected
                @else Unverified
                @endif
            </span>
        </p>
    </div>

    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800/60 rounded-[2.5rem] shadow-2xl p-6 md:p-12 relative overflow-hidden">
      <div class="absolute -top-24 -right-24 w-64 h-64 bg-emerald-500/5 blur-[100px] rounded-full pointer-events-none"></div>
      
      <form action="" method="post" enctype="multipart/form-data" class="relative z-10 space-y-8">
        @csrf

        <div class="space-y-3">
          <div class="flex items-center gap-2">
            <i data-lucide="fingerprint" class="w-4 h-4 text-blue-600"></i>
            <label class="block font-black text-[10px] uppercase tracking-widest text-slate-400 dark:text-slate-500">{{ __('Credential Category') }}</label>
          </div>
          <select name="kyc[${i}][type]" id="Select_tag"
            class="w-full bg-slate-100 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white rounded-2xl p-4 font-bold text-sm focus:outline-none focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 transition-all appearance-none cursor-pointer">
            <option value="ssn">{{ __('SSN') }}</option>
            <option value="ds_number">{{ __('DS Number') }}</option>
            <option value="drivers_license">{{ __('Drivers License') }}</option>
            <option value="national_id">{{ __('National ID') }}</option>
            <option value="others">{{ __('Others') }}</option>
          </select>
        </div>

        <div class="h-px bg-slate-100 dark:bg-slate-800/50"></div>

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

              @if ($proof['type'] == 'textarea')
                <div class="space-y-2">
                  <label class="block font-black text-[10px] uppercase tracking-widest text-slate-400 dark:text-slate-500">{{ __($proof['field_name']) }}</label>
                  <textarea
                    name="{{ strtolower(str_replace(' ', '_', $proof['field_name'])) }}"
                    class="w-full bg-slate-100 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white rounded-2xl p-4 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 transition-all min-h-[120px] placeholder:text-slate-400 dark:placeholder:text-slate-600"
                    {{ $proof['validation'] == 'required' ? 'required' : '' }}></textarea>
                </div>
              @endif

              @if ($proof['type'] == 'file')
                <div class="space-y-2">
                  <label class="block font-black text-[10px] uppercase tracking-widest text-slate-400 dark:text-slate-500">{{ __($proof['field_name']) }}</label>
                  <div class="relative group">
                      <input type="file"
                        name="{{ strtolower(str_replace(' ', '_', $proof['field_name'])) }}"
                        class="w-full text-[10px] text-slate-500 font-bold uppercase tracking-widest rounded-2xl p-3 bg-slate-100 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-600/20 file:bg-blue-600 file:text-white file:border-0 file:rounded-xl file:px-6 file:py-2 file:mr-4 file:text-[9px] file:font-black file:uppercase file:tracking-widest file:cursor-pointer hover:file:bg-blue-700 transition-all"
                        {{ $proof['validation'] == 'required' ? 'required' : '' }}>
                  </div>
                </div>
              @endif
            @endforeach
        </div>

        <div class="pt-6">
          <button type="submit"
            class="group w-full bg-blue-600 text-white font-black uppercase tracking-[0.2em] py-5 rounded-3xl hover:bg-blue-700 shadow-[0_20px_40px_-15px_rgba(37,99,235,0.4)] transition-all duration-500 active:scale-95 flex items-center justify-center gap-3">
            <i data-lucide="upload-cloud" class="w-5 h-5 group-hover:-translate-y-1 transition-transform"></i>
            {{ __('Submit Documents') }}
          </button>
          
          <p class="text-center text-[9px] font-bold text-slate-400 dark:text-slate-600 uppercase tracking-widest mt-6">
            <i data-lucide="lock" class="w-3 h-3 inline mr-1 mb-0.5"></i> {{ __('End-to-end Encrypted Processing') }}
          </p>
        </div>
      </form>
    </div>
  </div>
</div>

@endsection