@extends('master-user')

@section('content')
<section class="py-8">
  <div class="max-w-7xl mx-auto px-4">
    @if(!$hasAnyPaidPlan)
      <div class="mb-8">
        <h3 class="text-2xl font-bold text-[#3a3058] mb-4 flex items-center gap-2">
          <svg class="w-6 h-6 text-yellow-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M12 20a8 8 0 100-16 8 8 0 000 16z" /></svg>
          Manage Prefixes/Headers
        </h3>
        <div class="bg-red-100 border border-red-300 text-red-700 rounded-lg px-6 py-4">You don't have any <strong>PAID plan</strong> to use this feature.</div>
      </div>
    @else
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- First Part: Form to Add Prefix -->
        <div>
          <h3 class="text-xl font-semibold text-[#3a3058] mb-4">Add Prefix/Header</h3>
          <!-- Global Errors -->
          @if ($errors->any())
            <div class="bg-red-100 border border-red-300 text-red-700 rounded-lg px-6 py-4 mb-4">
              <ul class="list-disc pl-5">
                @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
                @endforeach
              </ul>
            </div>
          @endif
          <form id="prefix-form" action="{{ route('user.prefix.store') }}" method="POST" class="space-y-4">
            @csrf
            <div>
              <label for="prefix" class="block font-medium text-gray-700 mb-1">Prefix/Header (6 or 8 characters)</label>
              <input placeholder="i.e: PIZZZAHUT" type="text" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" id="prefix" name="prefix" maxlength="8" required value="{{ old('prefix') }}">
              <small class="text-blue-600">(Please note, the Prefix is case sensitive)</small><br>
              <small id="prefix-status"></small>
            </div>
            <button type="submit" class="bg-yellow-500 text-[#3a3058] hover:bg-yellow-400 font-semibold px-6 py-2 rounded-md shadow transition">Register</button>
          </form>
          <div class="mt-6">
            <h4 class="font-semibold text-[#3a3058] mb-2 underline">Important Notes:</h4>
            <ul class="list-disc pl-5 text-gray-700 text-sm space-y-1">
              <li>It might take up to 24 hours to review your Prefix/Header request.</li>
              <li>These prefixes/headers might need verification even if they are approved. Please keep necessary supporting documents ready to justify the Prefix/Header uses, if asked.</li>
              <li>The supporting document might contain any one from following (issued by recognized Govt. institution):
                <ul class="list-disc pl-5">
                  <li>Business Registration Certificate by Govt.</li>
                  <li>GST Registration Certificate</li>
                  <li>Agreement Deed</li>
                </ul>
              </li>
              <li>If you fail to provide such documents, the prefix/header will be released to the free pool and anyone can register, except you.</li>
            </ul>
          </div>
        </div>
        <!-- Second Part: Table to Manage User Prefixes -->
        <div>
          <h3 class="text-xl font-semibold text-[#3a3058] mb-4">Registered Prefixes/Headers</h3>
          @if (session('success'))
            <div class="bg-green-100 border border-green-300 text-green-700 rounded-lg px-6 py-4 mb-4">
              {{ session('success') }}
            </div>
          @endif
          <div class="overflow-x-auto rounded-lg border border-gray-200">
            <table class="min-w-full bg-white text-base text-left whitespace-nowrap">
              <thead class="bg-[#3a3058]">
                <tr>
                  <th class="px-6 py-4 font-semibold text-sm uppercase tracking-wider text-left text-yellow-200">Prefix/Header</th>
                  <th class="px-6 py-4 font-semibold text-sm uppercase tracking-wider text-left text-yellow-200">Status</th>
                  <th class="px-6 py-4 font-semibold text-sm uppercase tracking-wider text-left text-yellow-200">Remark</th>
                  <th class="px-6 py-4 font-semibold text-sm uppercase tracking-wider text-left text-yellow-200">Registered On</th>
                  <th class="px-6 py-4 font-semibold text-sm uppercase tracking-wider text-left text-yellow-200">Actions</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-gray-100 text-base">
                @if($userPrefixes->count())
                  @foreach ($userPrefixes as $prefix)
                    @php
                      $labelClass = 'info';
                      if($prefix->status == 'active'){
                        $labelClass = 'success';
                      }elseif($prefix->status == 'rejected'){
                        $labelClass = 'danger';
                      }
                    @endphp
                    <tr>
                      <td class="px-6 py-3">{{ $prefix->prefix }}</td>
                      <td class="px-6 py-3">
                        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold
                          @if($labelClass=='success') bg-green-100 text-green-700
                          @elseif($labelClass=='danger') bg-red-100 text-red-700
                          @else bg-blue-100 text-blue-700 @endif">
                          {!! getUserFriendlyName($prefix->status) !!}
                        </span>
                      </td>
                      <td class="px-6 py-3"><small>{!! $prefix->remarks !!}</small></td>
                      <td class="px-6 py-3">{!! convertDateTimeFormat($prefix->created_at, 'd-M-Y') !!}</td>
                      <td class="px-6 py-3">
                        @if($prefix->status !='rejected')
                          <form action="{{ route('user.prefix.destroy', quickEnc($prefix->id)) }}" method="POST" onsubmit="return confirmRelease()">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="bg-red-600 text-white hover:bg-red-700 font-semibold px-4 py-2 rounded-md shadow transition">Release</button>
                          </form>
                        @endif
                      </td>
                    </tr>
                  @endforeach
                @else
                  <tr>
                    <td colspan="5" class="text-center px-6 py-4 text-gray-500">No Prefix/Header registered with your account.</td>
                  </tr>
                @endif
              </tbody>
            </table>
          </div>
        </div>
      </div>
    @endif
  </div>
</section>

<!-- Include JS for AJAX Prefix Check -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function confirmRelease() {
        return confirm('Are you sure you want to release this prefix/header? All the URLs created with this prefix/header will be deleted');
    }
    $(document).ready(function() {
        $('#prefix').on('input', function() {
            let prefix = $(this).val();
            if(prefix.length > 8){
                return false;
            }
            if (prefix.length === 6 || prefix.length === 8) {
                $.ajax({
                    url: '{{ route('user.prefix.check') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        prefix: prefix
                    },
                    beforeSend:function(){
                        $('#prefix-status').removeClass('text-success, text-danger').text('Checking availability...').css('color', 'blue');
                    },
                    success: function(response) {
                        if (response.available) {
                            $('#prefix-status').text('Prefix is available!').css('color', 'green');
                        } else {
                            $('#prefix-status').text(response.error).css('color', 'red');
                        }
                    },
                    error: function(xhr) {
                        // Handle validation errors
                        var errors = xhr.responseJSON.errors;
                        
                        // Display the first validation error in #prefix-status
                        if (errors && errors.prefix) {
                            $('#prefix-status').text(errors.prefix[0]).removeClass('text-success').addClass('text-danger');
                        } else {
                            // Fallback message if no specific error is found
                            $('#prefix-status').text('An error occurred. Please try again.').removeClass('text-success').addClass('text-danger');
                        }
                    }
                });
            } else {
                $('#prefix-status').text('');
            }
        });
    });
</script>
@endsection