@extends('layouts.admin')

@section('content')

<div class="max-w-7xl mx-auto py-8">


<!-- Header -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
    <div>
        <h2 class="text-2xl font-bold text-gray-800">
            Subscription Plans
        </h2>
        <p class="text-sm text-gray-500">
            Manage Mintana Plus subscription packages and benefits.
        </p>
    </div>

    <a href="{{ route('admin.subscription-plans.create') }}"
       class="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 text-white font-semibold rounded-xl hover:bg-indigo-700 transition">
        + Add Plan
    </a>
</div>

<!-- Table Card -->
<div class="bg-white shadow-lg rounded-2xl overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full text-sm text-left text-gray-600">
            <thead class="bg-gray-50 text-gray-700 uppercase text-xs">
                <tr>
                    <th class="px-6 py-4">Plan Name</th>
                    <th class="px-6 py-4">Price (£)</th>
                    <th class="px-6 py-4">Duration (Days)</th>
                    <th class="px-6 py-4">Points ×</th>
                    <th class="px-6 py-4">Base Rate (£)</th>
                    <th class="px-6 py-4">Status</th>
                    <th class="px-6 py-4 text-right">Actions</th>
                </tr>
            </thead>

            <tbody class="divide-y">
                @forelse ($plans as $plan)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-6 py-4 font-medium text-gray-800">
                            {{ $plan->name }}
                        </td>
                        <td class="px-6 py-4">
                            £{{ number_format($plan->price, 2) }}
                        </td>
                        <td class="px-6 py-4">
                            {{ $plan->duration_days }}
                        </td>
                        <td class="px-6 py-4">
                            ×{{ $plan->points_multiplier }}
                        </td>
                        <td class="px-6 py-4">
                            £{{ number_format($plan->base_shipping_rate, 2) }}
                        </td>
                       <td class="px-6 py-4">
    <button
        class="toggle-status px-3 py-1 text-xs font-semibold rounded-full {{ $plan->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}"
        data-id="{{ $plan->id }}">
        {{ $plan->is_active ? 'Active' : 'Inactive' }}
    </button>
</td>

                        <td class="px-6 py-4 text-right">
                            <div class="flex justify-end gap-3">
                                <a href="{{ route('admin.subscription-plans.edit', $plan) }}"
                                   class="text-indigo-600 hover:text-indigo-800 font-medium">
                                    Edit
                                </a>

                                <form method="POST"
                                      action="{{ route('admin.subscription-plans.destroy', $plan) }}"
                                      onsubmit="return confirm('Are you sure you want to delete this plan?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                            class="text-red-600 hover:text-red-800 font-medium">
                                        Delete
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-6 py-8 text-center text-gray-500">
                            No subscription plans found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('.toggle-status');

    buttons.forEach(button => {
        button.addEventListener('click', function() {
            const planId = this.dataset.id;

            fetch(`/admin/subscription-plans/${planId}/toggle`, {
                method: 'PATCH',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    if (data.is_active) {
                        this.textContent = 'Active';
                        this.classList.remove('bg-red-100','text-red-700');
                        this.classList.add('bg-green-100','text-green-700');
                    } else {
                        this.textContent = 'Inactive';
                        this.classList.remove('bg-green-100','text-green-700');
                        this.classList.add('bg-red-100','text-red-700');
                    }
                }
            })
            .catch(err => console.error(err));
        });
    });
});
</script>

@endsection