@extends('layouts.admin')

@section('header', 'Packages Management')

@section('content')
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <!-- Toolbar -->
        <div class="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
            <h3 class="text-lg font-semibold text-gray-700">Available Packages</h3>
            <a href="{{ route('admin.packages.create') }}"
                class="inline-flex items-center justify-center px-4 py-2 bg-indigo-600 border border-transparent rounded-lg font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 shadow-sm">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                </svg>
                Add Package
            </a>
        </div>

        <!-- content -->
        <div class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($packages as $package)
                <div
                    class="border border-gray-200 rounded-xl p-6 hover:shadow-lg transition-shadow duration-300 flex flex-col h-full relative group bg-white">
                    <div
                        class="absolute top-4 right-4 flex space-x-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                        <a href="{{ route('admin.packages.edit', $package->id) }}" class="text-gray-400 hover:text-indigo-600">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z">
                                </path>
                            </svg>
                        </a>
                        <form action="{{ route('admin.packages.destroy', $package->id) }}" method="POST" class="inline-block">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-gray-400 hover:text-red-600 delete-confirm">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                                    </path>
                                </svg>
                            </button>
                        </form>
                    </div>

                    <h4 class="text-xl font-bold text-gray-900 mb-2">{{ $package->name }}</h4>
                    <p class="text-gray-500 text-sm mb-4 flex-grow">{{ $package->description }}</p>

                    <div class="mb-6">
                        <span class="text-3xl font-extrabold text-gray-900">${{ $package->price }}</span>
                        <span class="text-gray-500 text-sm">
                            /
                            {{ $package->billing_period }}
                        </span>
                        <div class="mt-2 text-xs font-semibold text-gray-400 uppercase tracking-widest">
                            {{ $package->notes_limit == 0 ? 'Unlimited Notes' : $package->notes_limit . ' Notes / Cycle' }}
                        </div>
                    </div>

                    <ul class="space-y-3 mb-6">
                        @foreach($package->features as $feature)
                            <li class="flex items-start">
                                <svg class="h-5 w-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span class="text-sm text-gray-600">{{ $feature->feature }}</span>
                            </li>
                        @endforeach
                    </ul>

                    <div class="mt-auto pt-4 border-t border-gray-100 text-center">
                        <span
                            class="inline-block bg-indigo-50 text-indigo-700 text-xs px-2 py-1 rounded-full uppercase font-semibold tracking-wide">
                            {{ $package->billing_cycle }}
                        </span>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection