@extends('master-admin')

@section('content')
<section class="py-8">
    <div class="max-w-7xl mx-auto px-4">
        <div class="bg-white rounded-xl shadow p-6">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6 gap-4">
                <h1 class="text-2xl font-bold text-[#3a3058]">Plans</h1>
                <a href="{{ route('admin.plans.create') }}" class="inline-block px-5 py-2 bg-indigo-600 text-white rounded-lg font-semibold shadow hover:bg-indigo-700 transition">Add New Plan</a>
            </div>
            @if(session('success'))
                <div class="mb-4 p-3 rounded bg-green-100 text-green-800 border border-green-200">{{ session('success') }}</div>
            @endif
            <div class="overflow-x-auto rounded-lg border border-gray-200">
                <table class="min-w-full divide-y divide-gray-200 text-sm whitespace-nowrap bg-white text-gray-900">
                    <thead class="bg-[#3a3058] text-white">
                        <tr>
                            <th class="px-4 py-3">ID</th>
                            <th class="px-4 py-3">Name</th>
                            <th class="px-4 py-3">Slug</th>
                            <th class="px-4 py-3">Price</th>
                            <th class="px-4 py-3">Max Short URLs</th>
                            <th class="px-4 py-3">Description</th>
                            <th class="px-4 py-3">Can Track URLs</th>
                            <th class="px-4 py-3">Allow Custom Headers</th>
                            <th class="px-4 py-3">Expiry Days</th>
                            <th class="px-4 py-3">Sort Order</th>
                            <th class="px-4 py-3">Status</th>
                            <th class="px-4 py-3">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-100">
                        @foreach($plans as $plan)
                            <tr>
                                <td class="px-4 py-3">{{ $plan->id }}</td>
                                <td class="px-4 py-3">{{ $plan->name }}</td>
                                <td class="px-4 py-3">{{ $plan->slug }}</td>
                                <td class="px-4 py-3">Rs. <span>{{ convertToIndianNumberFormat($plan->price) }}</span></td>
                                @if(!empty($plan->max_short_urls))
                                    <td class="px-4 py-3">{{ convertToIndianNumberFormat($plan->max_short_urls) }}</td>
                                @else
                                    <td class="px-4 py-3">Unlimited</td>
                                @endif
                                <td class="px-4 py-3">{{ $plan->description }}</td>
                                <td class="px-4 py-3">{{ $plan->can_track_urls ? 'Yes' : 'No' }}</td>
                                <td class="px-4 py-3 text-center">{{ $plan->allow_custom_headers ? 'Yes' : 'No' }}</td>
                                @if(!empty($plan->expiry_days))
                                    <td class="px-4 py-3">{{ $plan->expiry_days }} days</td>
                                @else
                                    <td class="px-4 py-3">No expiry</td>
                                @endif
                                <td class="px-4 py-3">{{ $plan->sort_order }}</td>
                                <td class="px-4 py-3">{{ $plan->is_active ? 'Active' : 'Inactive' }}</td>
                                <td class="px-4 py-3">
                                    <a href="{{ route('admin.plans.edit', $plan->id) }}" class="px-3 py-1 bg-yellow-400 text-white rounded hover:bg-yellow-500 transition text-xs font-semibold">Edit</a>
                                    <form action="{{ route('admin.plans.destroy', $plan->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Are you sure?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition text-xs font-semibold">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
@endsection