@extends('layouts.admin')

@section('title', 'Manage Packages')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <h2 class="font-serif text-2xl text-[#0c2340]">Packages</h2>
        <a href="{{ route('admin.packages.create') }}" class="inline-flex items-center gap-2 bg-[#0c2340] text-white px-6 py-2.5 rounded-full hover:bg-[#c9a84c] hover:text-[#0c2340] transition-colors font-medium text-sm">
            <i data-feather="plus" class="w-4 h-4"></i> Add New Package
        </a>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-gray-50/50 border-b border-gray-100 text-xs uppercase tracking-wider text-gray-500 font-semibold">
                        <th class="p-5">Package</th>
                        <th class="p-5">Price</th>
                        <th class="p-5">Duration & Status</th>
                        <th class="p-5">Stats</th>
                        <th class="p-5 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($packages as $package)
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="p-5">
                                <div class="flex items-center gap-4">
                                    <div class="w-16 h-16 rounded-xl bg-gray-100 overflow-hidden shrink-0 border border-gray-200">
                                        @if($package->main_image)
                                            <img src="{{ asset('storage/' . $package->main_image) }}" alt="{{ $package->title }}" class="w-full h-full object-cover">
                                        @else
                                            <div class="w-full h-full flex items-center justify-center text-gray-400">
                                                <i data-feather="image" class="w-6 h-6"></i>
                                            </div>
                                        @endif
                                    </div>
                                    <div>
                                        <div class="font-bold text-[#0c2340] mb-1">{{ $package->title }}</div>
                                        <div class="text-xs text-gray-500 flex items-center gap-1">
                                            <i data-feather="map-pin" class="w-3 h-3"></i> {{ $package->destination }}
                                            <span class="mx-1">&bull;</span>
                                            {{ ucfirst($package->category) }}
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="p-5">
                                <div class="font-bold text-[#0c2340]">{{ $package->formatted_price }}</div>
                                @if($package->has_discount)
                                    <div class="text-xs text-green-600 font-medium">Sale: {{ $package->formatted_discount_price }}</div>
                                @endif
                            </td>
                            <td class="p-5">
                                <div class="text-sm text-gray-600 mb-2"><i data-feather="clock" class="w-3.5 h-3.5 inline mr-1 text-gray-400"></i>{{ $package->duration_days }} Days</div>
                                @if($package->is_active)
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
                                @else
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Inactive</span>
                                @endif
                            </td>
                            <td class="p-5">
                                <div class="text-sm text-gray-600 mb-1">
                                    <span class="font-semibold text-[#0c2340]">{{ $package->bookings_count ?? 0 }}</span> Bookings
                                </div>
                                <div class="text-xs text-gray-500">{{ $package->available_slots_count ?? 'N/A' }} slots left</div>
                            </td>
                            <td class="p-5 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <a href="{{ route('packages.show', $package->slug) }}" target="_blank" class="p-2 text-gray-400 hover:text-blue-600 transition-colors rounded-lg hover:bg-blue-50" title="View on site">
                                        <i data-feather="external-link" class="w-4 h-4"></i>
                                    </a>
                                    <a href="{{ route('admin.packages.edit', $package->id) }}" class="p-2 text-gray-400 hover:text-[#c9a84c] transition-colors rounded-lg hover:bg-yellow-50" title="Edit">
                                        <i data-feather="edit-2" class="w-4 h-4"></i>
                                    </a>
                                    <form action="{{ route('admin.packages.delete', $package->id) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this package?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="p-2 text-gray-400 hover:text-red-600 transition-colors rounded-lg hover:bg-red-50" title="Delete">
                                            <i data-feather="trash-2" class="w-4 h-4"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="p-8 text-center text-gray-500">
                                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 mb-4">
                                    <i data-feather="map" class="w-6 h-6 text-gray-400"></i>
                                </div>
                                <p>No packages found.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($packages->hasPages())
            <div class="p-5 border-t border-gray-100">
                {{ $packages->links() }}
            </div>
        @endif
    </div>
</div>
@endsection
