@extends('layouts.base')

@section('content')
{{-- resources/views/user/requests.blade.php --}}

@php
    $limit = $user->activeSubscription?->request_info ?? 0;
    $count = $userRequests->count();
    $percent = $limit > 0 ? min(100, intval(($count / $limit) * 100)) : ($count > 0 ? 100 : 0);
@endphp
@include('user.components.page-header', ['title' => 'My Request', 'subtitle' => 'Don’t see your favorite celebrity? Ask for information here.'])

<div x-data="requestPanel()" x-init="init()" class="max-w-6xl mx-auto px-4 py-6">
  {{-- Top container for tabs --}}
  <div class="bg-white rounded-xl shadow-sm">
    <div class="border-b px-4 py-3 flex items-center justify-between">
      <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
        <button
          @click="tab = 'add'"
          :class="tab === 'add' ? 'border-b-2 border-sky-600 text-sky-700' : 'text-gray-600'"
          class="pb-2 px-3 text-sm font-semibold transition"
          role="tab"
          :aria-selected="tab === 'add' ? 'true' : 'false'">
          Add New Celebrity
        </button>

        <button
          @click="tab = 'status'"
          :class="tab === 'status' ? 'border-b-2 border-sky-600 text-sky-700' : 'text-gray-600'"
          class="pb-2 px-3 text-sm font-semibold transition"
          role="tab"
          :aria-selected="tab === 'status' ? 'true' : 'false'">
          Request Status
        </button>
      </nav>

      <div class="text-sm text-gray-500">You have used <span class="font-semibold text-slate-700">{{ $count }}</span> / <span class="font-semibold">{{ $limit }}</span> today</div>
    </div>

    <div class="p-6 space-y-6">
      {{-- Progress info (shared) --}}
      <div class="space-y-2">
        <div class="flex items-center justify-between">
          <div class="text-sm text-gray-700">Requests submitted today</div>
          <div class="text-sm text-gray-600">{{ $count }} / {{ $limit }}</div>
        </div>
        <div class="w-full bg-gray-100 rounded-full h-2">
          <div class="h-2 rounded-full transition-all" style="width: {{ $percent }}%; background: linear-gradient(90deg,#06b6d4,#0ea5e9)"></div>
        </div>
      </div>

      {{-- Alerts (server should toggle these; kept hidden by default) --}}
      @if(session('success'))
        <div class="rounded-md bg-green-50 p-4">
          <p class="text-sm text-green-700">{{ session('success') }}</p>
        </div>
      @endif

      @if(session('warning'))
        <div class="rounded-md bg-yellow-50 p-4">
          <p class="text-sm text-yellow-700">{{ session('warning') }}</p>
        </div>
      @endif

      @if(session('error'))
        <div class="rounded-md bg-red-50 p-4">
          <p class="text-sm text-red-700">{{ session('error') }}</p>
        </div>
      @endif

      {{-- ---------- ADD NEW TAB ---------- --}}
      <div x-show="tab === 'add'" x-transition>
        <div class="bg-white rounded-lg shadow-inner p-6 space-y-4">
          <p class="text-sm text-gray-600 italic">You can submit a maximum of <span class="font-semibold">{{ $limit }}</span> celebrity name(s) per plan.</p>

          <form id="addCelebrityForm"
                method="POST"
                action="{{ route('user.request.info.add') }}"
                enctype="multipart/form-data"
                x-ref="form"
                @submit.prevent="handleSubmit($event)"
                class="space-y-4">

            @csrf

            {{-- Dynamic rows container --}}
            <div class="space-y-4" id="rows-container" x-ref="rows">

              {{-- Initial row template (rendered from blade as first row) --}}
              <template x-for="(row, index) in rows" :key="row.id">
                <div class="bg-gray-50 rounded-lg p-4 grid grid-cols-1 md:grid-cols-12 gap-4 items-start">
                  {{-- Sequence 1: Text input label on top, icon inside right --}}
                  <div class="md:col-span-4">
                    <label class="block text-sm font-medium text-gray-700">Celebrity Name</label>
                    <div class="mt-1 relative">
                      <input :name="`artist_name[]`"
                             x-model="row.name"
                             type="text"
                             required
                             class="block w-full pr-10 rounded-lg border border-gray-200 bg-white py-2 px-3 text-sm placeholder-gray-400 shadow-sm focus:ring-2 focus:ring-sky-200 focus:border-sky-400"
                             placeholder="e.g. John Doe" />
                      {{-- right edit icon (Heroicon: Pencil) --}}
                      <div class="absolute inset-y-0 right-2 flex items-center pointer-events-none">
                        <svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5h4M11 3h6m-9 4v6m0 4v2m0-12L5 19l4 0 0-4 6-6-4-4z"/>
                        </svg>
                      </div>
                    </div>
                  </div>

                  {{-- Sequence 2: Details textarea label on top --}}
                  <div class="md:col-span-6">
                    <label class="block text-sm font-medium text-gray-700">Details</label>
                    <textarea :name="`artist_details[]`"
                              x-model="row.details"
                              rows="2"
                              placeholder="Add additional celebrity details, such as company name, profession, social media link."
                              class="mt-1 block w-full rounded-lg border border-gray-200 bg-white py-2 px-3 text-sm placeholder-gray-400 shadow-sm focus:ring-2 focus:ring-sky-200 focus:border-sky-400"></textarea>
                  </div>

                  {{-- Toggle + Remove on desktop column --}}
                  <div class="md:col-span-2 flex md:flex-col items-center gap-3 justify-end">
                    <div class="flex items-center space-x-3">
                      <div class="text-sm text-gray-600">Notify</div>
                      <!-- Toggle switch -->
                      <button type="button" @click="row.notify = !row.notify" :aria-pressed="row.notify.toString()" class="relative inline-flex items-center h-6 rounded-full w-11 transition-colors" :class="row.notify ? 'bg-sky-600' : 'bg-gray-200'">
                        <span class="sr-only">Notify toggle</span>
                        <span class="inline-block transform bg-white rounded-full w-5 h-5 transition-transform" :class="row.notify ? 'translate-x-5' : 'translate-x-0'"></span>
                        <input type="hidden" :name="`notify[]`" :value="row.notify ? 1 : 0" />
                      </button>
                    </div>

                    <div class="ml-2 md:ml-0">
                      <button type="button" @click="removeRow(index)" class="text-sm text-red-600 hover:text-red-800">
                        Remove
                      </button>
                    </div>
                  </div>
                </div>
              </template>

            </div> {{-- /rows container --}}

            {{-- Add Row + submit area --}}
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
              <div class="flex items-center gap-3">
                <button type="button" @click="addRow()" class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-gray-200 text-sm font-medium shadow-sm hover:shadow-md hover:bg-gray-50">
                  <svg class="h-4 w-4 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                  <span>+ Add Row</span>
                </button>

                <div class="text-sm text-gray-500">You can add multiple celebrities at once.</div>
              </div>

              <div class="flex items-center gap-3">
                <div id="ajaxLoader" x-show="submitting" class="flex items-center">
                  <svg class="animate-spin h-6 w-6 text-sky-600" 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-8v8H4z"></path>
                  </svg>
                </div>

                @if($allowRequest)
                  <button type="submit" class="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-sky-600 text-white font-semibold shadow hover:bg-sky-700 focus:outline-none">
                    Send Request
                  </button>
                @else
                  <div class="rounded-md bg-yellow-50 p-3 text-sm text-yellow-700">
                    Upgrade your account to submit requests.
                  </div>
                @endif
              </div>
            </div>

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

      {{-- ---------- STATUS TAB ---------- --}}
      <div x-show="tab === 'status'" x-transition>
        <div class="bg-white rounded-lg shadow-inner p-6">
          {{-- Responsive: table on md+, cards on mobile --}}
          <div class="hidden md:block">
            <table class="min-w-full divide-y divide-gray-100">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">Celebrity Name</th>
                  <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">Details</th>
                  <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">Submission Date</th>
                  <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">Status</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-100">
                @forelse($userRequests as $uRequest)
                  <tr>
                    <td class="px-4 py-3 text-sm text-gray-700">{{ $uRequest->artist_name }}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">{{ $uRequest->artist_details }}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">{{ __date_parse($uRequest->created_at, 'M d, Y') }}</td>
                    <td class="px-4 py-3 text-sm">{!! request_status_badge($uRequest->status) !!}</td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="4" class="px-4 py-6 text-center text-sm text-gray-500">No submissions found</td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>

          {{-- Mobile cards --}}
          <div class="md:hidden space-y-3">
            @forelse($userRequests as $uRequest)
              <div class="border rounded-lg p-4 bg-white">
                <div class="flex justify-between items-start">
                  <div>
                    <div class="text-sm font-semibold text-gray-800">{{ $uRequest->artist_name }}</div>
                    <div class="text-xs text-gray-500 mt-1">{{ __date_parse($uRequest->created_at, 'M d, Y') }}</div>
                  </div>
                  <div class="text-sm">{!! request_status_badge($uRequest->status) !!}</div>
                </div>
                @if($uRequest->artist_details)
                  <div class="mt-3 text-sm text-gray-600">{{ $uRequest->artist_details }}</div>
                @endif
              </div>
            @empty
              <div class="text-sm text-gray-500">No submissions found</div>
            @endforelse
          </div>

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

{{-- Alpine component script --}}
<script>
  function requestPanel() {
    return {
      tab: 'add',
      rows: [],
      submitting: false,
      init() {
        // Initialize with one row (server-rendered empty values not provided here)
        // If old input exists (from Laravel session) you could seed rows accordingly
        //this.addRow(); // start with single empty row
      },
      addRow() {
        this.rows.push({
          id: Date.now() + Math.floor(Math.random() * 999),
          name: '',
          details: '',
          notify: false
        });
        // keep an upper limit to prevent abuse (same as sub limit)
        if (this.rows.length > 20) this.rows = this.rows.slice(0,20);
      },
      removeRow(idx) {
        this.rows.splice(idx, 1);
      },
      async handleSubmit(e) {
        // Basic client validation: ensure at least one non-empty name
        const hasName = this.rows.some(r => r.name && r.name.trim().length > 0);
        if (!hasName) {
          alert('Please provide at least one celebrity name.');
          return;
        }

        // If allowRequest is false, prevent submit (server handles too)
        @if(!$allowRequest)
          alert('Your account cannot submit requests. Upgrade to submit.');
          return;
        @endif

        // Submit the native form (we only used @submit.prevent to show loader)
        this.submitting = true;
        // build a temporary plain form to submit to server, since Alpine manages rows
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("user.request.info.add") }}';
        form.style.display = 'none';

        // add CSRF token
        const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || null;
        if (csrf) {
          const inputCsrf = document.createElement('input');
          inputCsrf.type = 'hidden';
          inputCsrf.name = '_token';
          inputCsrf.value = csrf;
          form.appendChild(inputCsrf);
        } else {
          // fallback to blade token input
          const bladeCsrf = document.createElement('input');
          bladeCsrf.type = 'hidden';
          bladeCsrf.name = '_token';
          bladeCsrf.value = '{{ csrf_token() }}';
          form.appendChild(bladeCsrf);
        }

        // Append row inputs
        this.rows.forEach(r => {
          const inName = document.createElement('input');
          inName.type = 'hidden';
          inName.name = 'artist_name[]';
          inName.value = r.name || '';
          form.appendChild(inName);

          const inDetails = document.createElement('input');
          inDetails.type = 'hidden';
          inDetails.name = 'artist_details[]';
          inDetails.value = r.details || '';
          form.appendChild(inDetails);

          const inNotify = document.createElement('input');
          inNotify.type = 'hidden';
          inNotify.name = 'notify[]';
          inNotify.value = r.notify ? 1 : 0;
          form.appendChild(inNotify);
        });

        document.body.appendChild(form);
        form.submit();
      }
    }
  }
</script>

{{-- Be sure Alpine is loaded in the layout:
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
--}}


@endsection