@extends('layouts.base')

@section('content')
<main class="page-main container mx-auto px-4 py-8">
  <!-- Page Header -->
  <header class="mb-8">
    <h1 class="text-3xl font-bold text-gray-800">Your Membership</h1>
  </header>

  <div class="subscription-container space-y-12">

    <!-- Account Overview -->
    <section>
      <h2 class="text-xl font-semibold text-gray-700 mb-4">Account Overview</h2>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 border rounded-lg shadow-sm">
          <thead class="bg-gray-100">
            <tr>
              <th class="px-4 py-3 text-left text-gray-600 font-medium">Status</th>
              <th class="px-4 py-3 text-left text-gray-600 font-medium">Subscription</th>
              <th class="px-4 py-3 text-left text-gray-600 font-medium">Expiration</th>
              <th class="px-4 py-3 text-left text-gray-600 font-medium">Actions</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200">
            @forelse($subscriptionPlans as $subscriptionPlan)
              @php $plan = $subscriptionPlan->plan; @endphp
              @if(!blank($plan))
              <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition">
                <td class="px-4 py-3">{{ $subscriptionPlan->status == 1 ? 'Active' :'Inactive' }}</td>
                <td class="px-4 py-3">{{$plan->name}}</td>
                <td class="px-4 py-3">{{__date_parse($subscriptionPlan->ends_at , 'M d, Y')}}</td>
                <td class="px-4 py-3">
                  <a href="{{ secure_url('subscription') }}" class="inline-block bg-teal-500 hover:bg-teal-700 text-white px-4 py-2 rounded-lg font-medium transition">
                    Upgrade / Change
                  </a>
                </td>
              </tr>
              @endif
            @empty
              <tr class="bg-white">
                <td class="px-4 py-3">Active</td>
                <td class="px-4 py-3">Free</td>
                <td class="px-4 py-3">None</td>
                <td class="px-4 py-3">
                  <a href="{{ secure_url('subscription') }}" class="inline-block bg-teal-500 hover:bg-teal-700 text-white px-4 py-2 rounded-lg font-medium transition">
                    Upgrade / Change
                  </a>
                </td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </section>

    <!-- Payment History -->
    <section>
      <h2 class="text-xl font-semibold text-gray-700 mb-4">Payment History</h2>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 border rounded-lg shadow-sm">
          <thead class="bg-gray-100">
            <tr>
              <th class="px-4 py-3 text-left text-gray-600 font-medium">Invoice #</th>
              <th class="px-4 py-3 text-left text-gray-600 font-medium">Subscription</th>
              <th class="px-4 py-3 text-left text-gray-600 font-medium">Amount</th>
              <th class="px-4 py-3 text-left text-gray-600 font-medium">Date</th>
              <th class="px-4 py-3 text-left text-gray-600 font-medium">Actions</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200">
            @forelse($subscriptionPlans as $subscriptionPlan)
              @if($subscriptionPlan->status == '1')
                @php $plan = $subscriptionPlan->plan; @endphp
                @if(!blank($plan))
                <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition">
                  <td class="px-4 py-3">Invoice #</td>
                  <td class="px-4 py-3">{{$plan->name}}</td>
                  <td class="px-4 py-3">{{__format_number($plan->price , 2)}}</td>
                  <td class="px-4 py-3">{{__date_parse($subscriptionPlan->ends_at , 'M d, Y')}}</td>
                  <td class="px-4 py-3"></td>
                </tr>
                @endif
              @endif
            @empty
              <tr class="bg-white">
                <td class="px-4 py-3 text-center" colspan="5">You have not made any payments.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </section>

    <!-- Delete Account Button -->
 

  </div>

</main>

@endsection