@extends('layouts.base')

@section('content')
<section class="section py-6 bg-gray-50">
  <div class="container mx-auto px-4">
    <div class="main-body">

      <main class="bai-lists-page">
        <section class="bai_lists_index">
          
          <!-- Header -->
          <div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-800">My Partnership History</h1>
          </div>

          @if(!blank($myLists))
          <!-- Desktop Table -->
          <div class="hidden md:block overflow-x-auto bg-white shadow rounded-lg">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-100">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pledge</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                @forelse($myLists as $myList)
                @php $plan = $myList->supportable; @endphp
                @if(!blank($plan))
                <tr class="hover:bg-gray-50 transition">
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{$myList->type . ": " . $plan->name}}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{$myList->commitment}}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{__date_parse($myList->created_at)}}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm">{!! part_status_badge($myList->status) !!}</td>
                </tr>
                @endif
                @empty
                <tr>
                  <td colspan="4" class="px-6 py-4 text-center text-gray-500">No partnership history found.</td>
                </tr>
                @endforelse
              </tbody>
            </table>
          </div>

          <!-- Mobile Cards -->
          <div class="md:hidden space-y-4">
            @forelse($myLists as $myList)
            @php $plan = $myList->supportable; @endphp
            @if(!blank($plan))
            <div class="bg-white p-4 rounded-lg shadow">
              <div class="flex justify-between items-center mb-2">
                <h2 class="text-sm font-semibold text-gray-800">{{$myList->type . ": " . $plan->name}}</h2>
                <span class="text-sm">{!! part_status_badge($myList->status) !!}</span>
              </div>
              <div class="text-gray-600 text-sm mb-1"><span class="font-medium">Pledge:</span> {{$myList->commitment}}</div>
              <div class="text-gray-500 text-sm"><span class="font-medium">Date:</span> {{__date_parse($myList->created_at)}}</div>
            </div>
            @endif
            @empty
            <p class="text-gray-500">No partnership history found.</p>
            @endforelse
          </div>

          @else
          <p class="text-gray-500">You currently have no subscriptions.</p>
          @endif

        </section>
      </main>

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

@endsection