@extends('layouts.marketing')

@section('title', __('app.my_bookings') . ' - ' . __('app.pilates'))

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12 w-full">
<div class="mb-8">
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">
                <i class="fas fa-bookmark text-light0 mr-3"></i>
                {{ __('app.my_pilates_bookings') }}
            </h1>
            <p class="text-gray-600 mt-2">{{ __('app.track_your_class_bookings_history') }}</p>
        </div>
        <a href="{{ route('pilates.classes') }}" class="bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-lg">
            <i class="fas fa-plus mr-2"></i>{{ __('app.book_new_class') }}
        </a>
    </div>
</div>

<!-- Tabs -->
<div class="mb-6 bg-white rounded-lg shadow-md overflow-hidden">
    <div class="flex border-b border-gray-200 overflow-x-auto">
        <button onclick="showTab('available')" id="tab-available" class="flex-1 min-w-[140px] px-4 py-4 text-center font-semibold text-primary border-b-2 border-primary bg-primary/5 transition-colors whitespace-nowrap">
            <i class="fas fa-calendar-check mr-2"></i><span class="hidden sm:inline">{{ __('app.available_bookings') }}</span><span class="sm:hidden">{{ __('app.available') }}</span>
            @if(isset($availableBookings) && $availableBookings->total() > 0)
            <span class="ml-2 px-2 py-1 bg-primary text-white rounded-full text-xs">{{ $availableBookings->total() }}</span>
            @endif
        </button>
        <button onclick="showTab('pending')" id="tab-pending" class="flex-1 min-w-[140px] px-4 py-4 text-center font-semibold text-gray-600 hover:text-primary border-b-2 border-transparent hover:border-primary/30 transition-colors whitespace-nowrap">
            <i class="fas fa-clock mr-2"></i><span class="hidden sm:inline">{{ __('app.pending_bookings') }}</span><span class="sm:hidden">{{ __('app.pending') }}</span>
            @if(isset($pendingBookings) && $pendingBookings->total() > 0)
            <span class="ml-2 px-2 py-1 bg-yellow-500 text-white rounded-full text-xs">{{ $pendingBookings->total() }}</span>
            @endif
        </button>
        <button onclick="showTab('cancelled')" id="tab-cancelled" class="flex-1 min-w-[140px] px-4 py-4 text-center font-semibold text-gray-600 hover:text-primary border-b-2 border-transparent hover:border-primary/30 transition-colors whitespace-nowrap">
            <i class="fas fa-times-circle mr-2"></i><span class="hidden sm:inline">{{ __('app.cancelled_bookings') }}</span><span class="sm:hidden">{{ __('app.cancelled') }}</span>
            @if(isset($cancelledBookings) && $cancelledBookings->total() > 0)
            <span class="ml-2 px-2 py-1 bg-red-500 text-white rounded-full text-xs">{{ $cancelledBookings->total() }}</span>
            @endif
        </button>
        <button onclick="showTab('all')" id="tab-all" class="flex-1 min-w-[140px] px-4 py-4 text-center font-semibold text-gray-600 hover:text-primary border-b-2 border-transparent hover:border-primary/30 transition-colors whitespace-nowrap">
            <i class="fas fa-list mr-2"></i><span class="hidden sm:inline">{{ __('app.all_bookings') }}</span><span class="sm:hidden">{{ __('app.all') }}</span>
            @if(isset($allBookingsSorted) && $allBookingsSorted->total() > 0)
            <span class="ml-2 px-2 py-1 bg-gray-500 text-white rounded-full text-xs">{{ $allBookingsSorted->total() }}</span>
            @endif
        </button>
    </div>
</div>

<!-- Available Bookings Cards -->
<div id="tab-content-available" class="tab-content">
    @if(isset($availableBookings) && $availableBookings->count() > 0)
    <div class="mb-4">
        <div class="bg-gradient-to-r from-green-500 to-green-600 px-4 py-3 rounded-t-lg">
            <h2 class="text-lg sm:text-xl font-bold text-white flex items-center justify-between">
                <span class="flex items-center">
                    <i class="fas fa-calendar-check mr-3"></i>{{ __('app.available_bookings') }}
                </span>
                <span class="px-3 py-1 bg-white/20 rounded-full text-sm">{{ $availableBookings->total() }}</span>
            </h2>
        </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
        @foreach($availableBookings as $booking)
        <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 border-l-4 border-green-500">
            <div class="p-5">
                <div class="mb-4">
                    <h3 class="text-lg font-bold text-gray-900 mb-2">{{ $booking->pilatesClass->name }}</h3>
                    <span class="inline-block px-3 py-1 text-xs font-medium rounded-full
                        {{ $booking->pilatesClass->level === 'beginner' ? 'bg-green-100 text-green-800' : '' }}
                        {{ $booking->pilatesClass->level === 'intermediate' ? 'bg-yellow-100 text-yellow-800' : '' }}
                        {{ $booking->pilatesClass->level === 'advanced' ? 'bg-red-100 text-red-800' : '' }}
                        {{ $booking->pilatesClass->level === 'all_levels' ? 'bg-blue-100 text-blue-800' : '' }}">
                        {{ ucfirst($booking->pilatesClass->level) }}
                    </span>
                </div>
                
                <div class="space-y-3 mb-4">
                    <div class="flex items-center text-sm text-gray-700">
                        <i class="far fa-calendar mr-3 text-gray-500 w-5"></i>
                        <div>
                            <div class="font-semibold">{{ $booking->pilatesClass->date->translatedFormat('d.m.Y') }}</div>
                            <div class="text-xs text-gray-500">{{ $booking->pilatesClass->date->translatedFormat('l') }}</div>
                        </div>
                    </div>
                    
                    <div class="flex items-center text-sm text-gray-700">
                        <i class="far fa-clock mr-3 text-gray-500 w-5"></i>
                        <div>
                            @if($booking->pilatesClass->start_time && $booking->pilatesClass->end_time)
                            {{ $booking->pilatesClass->start_time->format('H:i') }} - {{ $booking->pilatesClass->end_time->format('H:i') }}
                            @else
                            -
                            @endif
                        </div>
                    </div>
                    
                    <div class="flex items-center text-sm text-gray-700">
                        <i class="far fa-user mr-3 text-gray-500 w-5"></i>
                        <div>{{ $booking->pilatesClass->instructor->name ?? __('app.no_instructor') }}</div>
                    </div>
                </div>
                
                <div class="pt-4 border-t border-gray-200">
                    @if(auth()->user()->canCancelBooking())
                    <form method="POST" action="{{ route('pilates.bookings.cancel', $booking) }}" class="inline w-full">
                        @csrf
                        <input type="hidden" name="cancellation_reason" value="{{ __('app.user_requested_cancellation') }}">
                        <button type="submit" class="w-full bg-red-50 hover:bg-red-100 text-red-600 px-4 py-2 rounded-lg transition-colors duration-150 text-sm font-medium">
                            <i class="fas fa-times-circle mr-2"></i>{{ __('app.cancel_booking') }}
                        </button>
                    </form>
                    @else
                    <div class="w-full bg-gray-50 text-gray-400 px-4 py-2 rounded-lg text-sm text-center">
                        {{ __('app.cancellation_not_available') }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
        @endforeach
    </div>
    
    <!-- Pagination -->
    @if($availableBookings->lastPage() > 1)
    <div class="mt-6 flex justify-center">
        {{ $availableBookings->appends(['tab' => 'available'])->links() }}
    </div>
    @endif
    @else
    <div class="bg-white rounded-lg shadow-md p-12 text-center">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-green-100 rounded-full mb-6">
            <i class="fas fa-calendar-check text-green-600 text-4xl"></i>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-3">{{ __('app.no_available_bookings') }}</h3>
        <p class="text-gray-600 mb-6">{{ __('app.no_upcoming_confirmed_bookings') }}</p>
        <a href="{{ route('pilates.classes') }}" class="inline-block px-8 py-3 bg-primary text-white rounded-lg font-semibold hover:bg-primary-dark transition-all">
            <i class="fas fa-calendar-plus mr-2"></i>{{ __('app.browse_available_classes') }}
        </a>
    </div>
    @endif
</div>

<!-- Pending Bookings Cards -->
<div id="tab-content-pending" class="tab-content hidden">
    @if(isset($pendingBookings) && $pendingBookings->count() > 0)
    <div class="mb-4">
        <div class="bg-gradient-to-r from-yellow-500 to-yellow-600 px-4 py-3 rounded-t-lg">
            <h2 class="text-lg sm:text-xl font-bold text-white flex items-center justify-between">
                <span class="flex items-center">
                    <i class="fas fa-clock mr-3"></i>{{ __('app.pending_bookings') }}
                </span>
                <span class="px-3 py-1 bg-white/20 rounded-full text-sm">{{ $pendingBookings->total() }}</span>
            </h2>
        </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
        @foreach($pendingBookings as $booking)
        <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 border-l-4 border-yellow-500">
            <div class="p-5">
                <div class="mb-4">
                    <h3 class="text-lg font-bold text-gray-900 mb-2">{{ $booking->pilatesClass->name ?? __('app.deleted_class') }}</h3>
                    <span class="inline-block px-3 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">
                        {{ __('app.pending') }}
                    </span>
                </div>
                
                <div class="space-y-3 mb-4">
                    @if($booking->pilatesClass && $booking->pilatesClass->date)
                    <div class="flex items-center text-sm text-gray-700">
                        <i class="far fa-calendar mr-3 text-gray-500 w-5"></i>
                        <div>
                            <div class="font-semibold">{{ $booking->pilatesClass->date->translatedFormat('d.m.Y') }}</div>
                            <div class="text-xs text-gray-500">{{ $booking->pilatesClass->date->translatedFormat('l') }}</div>
                        </div>
                    </div>
                    @endif
                    
                    @if($booking->pilatesClass && $booking->pilatesClass->start_time && $booking->pilatesClass->end_time)
                    <div class="flex items-center text-sm text-gray-700">
                        <i class="far fa-clock mr-3 text-gray-500 w-5"></i>
                        <div>{{ $booking->pilatesClass->start_time->format('H:i') }} - {{ $booking->pilatesClass->end_time->format('H:i') }}</div>
                    </div>
                    @endif
                    
                    @if($booking->pilatesClass)
                    <div class="flex items-center text-sm text-gray-700">
                        <i class="far fa-user mr-3 text-gray-500 w-5"></i>
                        <div>{{ $booking->pilatesClass->instructor->name ?? __('app.no_instructor') }}</div>
                    </div>
                    @endif
                </div>
                
                <div class="pt-4 border-t border-gray-200">
                    <form method="POST" action="{{ route('pilates.bookings.cancel', $booking) }}" class="inline w-full">
                        @csrf
                        <input type="hidden" name="cancellation_reason" value="{{ __('app.user_requested_cancellation') }}">
                        <button type="submit" class="w-full bg-red-50 hover:bg-red-100 text-red-600 px-4 py-2 rounded-lg transition-colors duration-150 text-sm font-medium">
                            <i class="fas fa-times-circle mr-2"></i>{{ __('app.cancel_booking') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    
    <!-- Pagination -->
    @if($pendingBookings->lastPage() > 1)
    <div class="mt-6 flex justify-center">
        {{ $pendingBookings->appends(['tab' => 'pending'])->links() }}
    </div>
    @endif
    @else
    <div class="bg-white rounded-lg shadow-md p-12 text-center">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-yellow-100 rounded-full mb-6">
            <i class="fas fa-clock text-yellow-600 text-4xl"></i>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-3">{{ __('app.no_pending_bookings') }}</h3>
        <p class="text-gray-600">{{ __('app.no_pending_bookings_description') }}</p>
    </div>
    @endif
</div>

<!-- Cancelled Bookings Cards -->
<div id="tab-content-cancelled" class="tab-content hidden">
    @if(isset($cancelledBookings) && $cancelledBookings->count() > 0)
    <div class="mb-4">
        <div class="bg-gradient-to-r from-red-500 to-red-600 px-4 py-3 rounded-t-lg">
            <h2 class="text-lg sm:text-xl font-bold text-white flex items-center justify-between">
                <span class="flex items-center">
                    <i class="fas fa-times-circle mr-3"></i>{{ __('app.cancelled_bookings') }}
                </span>
                <span class="px-3 py-1 bg-white/20 rounded-full text-sm">{{ $cancelledBookings->total() }}</span>
            </h2>
        </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
        @foreach($cancelledBookings as $booking)
        <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 border-l-4 border-red-500 opacity-75">
            <div class="p-5">
                <div class="mb-4">
                    <h3 class="text-lg font-bold text-gray-900 mb-2">{{ $booking->pilatesClass->name ?? __('app.deleted_class') }}</h3>
                    <span class="inline-block px-3 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800">
                        {{ __('app.cancelled') }}
                    </span>
                </div>
                
                <div class="space-y-3 mb-4">
                    @if($booking->pilatesClass && $booking->pilatesClass->date)
                    <div class="flex items-center text-sm text-gray-600">
                        <i class="far fa-calendar mr-3 text-gray-500 w-5"></i>
                        <div>
                            <div class="font-semibold">{{ $booking->pilatesClass->date->translatedFormat('d.m.Y') }}</div>
                            <div class="text-xs text-gray-500">{{ $booking->pilatesClass->date->translatedFormat('l') }}</div>
                        </div>
                    </div>
                    @endif
                    
                    @if($booking->pilatesClass && $booking->pilatesClass->start_time && $booking->pilatesClass->end_time)
                    <div class="flex items-center text-sm text-gray-600">
                        <i class="far fa-clock mr-3 text-gray-500 w-5"></i>
                        <div>{{ $booking->pilatesClass->start_time->format('H:i') }} - {{ $booking->pilatesClass->end_time->format('H:i') }}</div>
                    </div>
                    @endif
                    
                    @if($booking->pilatesClass)
                    <div class="flex items-center text-sm text-gray-600">
                        <i class="far fa-user mr-3 text-gray-500 w-5"></i>
                        <div>{{ $booking->pilatesClass->instructor->name ?? __('app.no_instructor') }}</div>
                    </div>
                    @endif
                    
                    <div class="flex items-center text-sm text-gray-600">
                        <i class="far fa-calendar-times mr-3 text-gray-500 w-5"></i>
                        <div>
                            @if($booking->cancelled_at)
                            {{ __('app.cancelled_on') }}: {{ $booking->cancelled_at->translatedFormat('d.m.Y H:i') }}
                            @else
                            {{ __('app.cancelled_on') }}: {{ $booking->created_at->translatedFormat('d.m.Y H:i') }}
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    
    <!-- Pagination -->
    @if($cancelledBookings->lastPage() > 1)
    <div class="mt-6 flex justify-center">
        {{ $cancelledBookings->appends(['tab' => 'cancelled'])->links() }}
    </div>
    @endif
    @else
    <div class="bg-white rounded-lg shadow-md p-12 text-center">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-red-100 rounded-full mb-6">
            <i class="fas fa-times-circle text-red-600 text-4xl"></i>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-3">{{ __('app.no_cancelled_bookings') }}</h3>
        <p class="text-gray-600">{{ __('app.no_cancelled_bookings_description') }}</p>
    </div>
    @endif
</div>

<!-- All Bookings Cards -->
<div id="tab-content-all" class="tab-content hidden">
    @if(isset($allBookingsSorted) && $allBookingsSorted->count() > 0)
    <div class="mb-4">
        <div class="bg-gradient-to-r from-gray-600 to-gray-700 px-4 py-3 rounded-t-lg">
            <h2 class="text-lg sm:text-xl font-bold text-white flex items-center justify-between">
                <span class="flex items-center">
                    <i class="fas fa-list mr-3"></i>{{ __('app.all_bookings') }}
                </span>
                <span class="px-3 py-1 bg-white/20 rounded-full text-sm">{{ $allBookingsSorted->total() }}</span>
            </h2>
        </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
        @foreach($allBookingsSorted as $booking)
        <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 border-l-4 
            {{ $booking->status === 'confirmed' ? 'border-green-500' : '' }}
            {{ $booking->status === 'pending' ? 'border-yellow-500' : '' }}
            {{ $booking->status === 'cancelled' ? 'border-red-500 opacity-75' : '' }}">
            <div class="p-5">
                <div class="mb-4">
                    <h3 class="text-lg font-bold text-gray-900 mb-2">{{ $booking->pilatesClass->name ?? __('app.deleted_class') }}</h3>
                    <div class="flex flex-wrap gap-2">
                        <span class="inline-block px-3 py-1 text-xs font-medium rounded-full
                                    @if($booking->status === 'confirmed') bg-green-100 text-green-800
                                    @elseif($booking->status === 'pending') bg-yellow-100 text-yellow-800
                                    @else bg-red-100 text-red-800 @endif">
                                    @if($booking->status === 'confirmed')
                                        {{ __('app.confirmed') }}
                                    @elseif($booking->status === 'pending')
                                        {{ __('app.pending') }}
                                    @elseif($booking->status === 'cancelled')
                                        {{ __('app.cancelled') }}
                                    @else
                                        {{ __('app.completed') }}
                                    @endif
                                </span>
                        <span class="inline-block px-3 py-1 text-xs font-medium rounded-full
                                    @if($booking->payment_status === 'paid') bg-green-100 text-green-800
                                    @elseif($booking->payment_status === 'pending') bg-yellow-100 text-yellow-800
                                    @else bg-red-100 text-red-800 @endif">
                                    @if($booking->payment_status === 'paid')
                                        {{ __('app.paid') }}
                                    @elseif($booking->payment_status === 'pending')
                                        {{ __('app.pending') }}
                                    @elseif($booking->payment_status === 'refunded')
                                        {{ __('app.refunded') }}
                                    @else
                                        {{ __('app.failed') }}
                                    @endif
                                </span>
                    </div>
                </div>
                
                <div class="space-y-3 mb-4">
                    @if($booking->pilatesClass && $booking->pilatesClass->date)
                    <div class="flex items-center text-sm text-gray-700">
                        <i class="far fa-calendar mr-3 text-gray-500 w-5"></i>
                        <div>
                            <div class="font-semibold">{{ $booking->pilatesClass->date->translatedFormat('d.m.Y') }}</div>
                            <div class="text-xs text-gray-500">{{ $booking->pilatesClass->date->translatedFormat('l') }}</div>
                        </div>
                    </div>
                    @endif
                    
                    @if($booking->pilatesClass && $booking->pilatesClass->start_time && $booking->pilatesClass->end_time)
                    <div class="flex items-center text-sm text-gray-700">
                        <i class="far fa-clock mr-3 text-gray-500 w-5"></i>
                        <div>{{ $booking->pilatesClass->start_time->format('H:i') }} - {{ $booking->pilatesClass->end_time->format('H:i') }}</div>
                    </div>
                    @endif
                    
                    @if($booking->pilatesClass)
                    <div class="flex items-center text-sm text-gray-700">
                        <i class="far fa-user mr-3 text-gray-500 w-5"></i>
                        <div>{{ $booking->pilatesClass->instructor->name ?? __('app.no_instructor') }}</div>
                    </div>
                    @endif
                            </div>
                            
                @if($booking->status === 'confirmed' && $booking->pilatesClass && $booking->pilatesClass->date && $booking->pilatesClass->date->isFuture())
                <div class="pt-4 border-t border-gray-200">
                                @if(auth()->user()->canCancelBooking())
                    <form method="POST" action="{{ route('pilates.bookings.cancel', $booking) }}" class="inline w-full">
                                        @csrf
                                        <input type="hidden" name="cancellation_reason" value="{{ __('app.user_requested_cancellation') }}">
                        <button type="submit" class="w-full bg-red-50 hover:bg-red-100 text-red-600 px-4 py-2 rounded-lg transition-colors duration-150 text-sm font-medium">
                            <i class="fas fa-times-circle mr-2"></i>{{ __('app.cancel_booking') }}
                                        </button>
                                    </form>
                                @else
                    <div class="w-full bg-gray-50 text-gray-400 px-4 py-2 rounded-lg text-sm text-center">
                                        {{ __('app.cancellation_not_available') }}
                    </div>
                                @endif
                </div>
                            @elseif($booking->status === 'pending')
                <div class="pt-4 border-t border-gray-200">
                    <form method="POST" action="{{ route('pilates.bookings.cancel', $booking) }}" class="inline w-full">
                                        @csrf
                                        <input type="hidden" name="cancellation_reason" value="{{ __('app.user_requested_cancellation') }}">
                        <button type="submit" class="w-full bg-red-50 hover:bg-red-100 text-red-600 px-4 py-2 rounded-lg transition-colors duration-150 text-sm font-medium">
                            <i class="fas fa-times-circle mr-2"></i>{{ __('app.cancel_booking') }}
                                        </button>
                                    </form>
                                </div>
                            @endif
                </div>
            </div>
        @endforeach
    </div>
    
    <!-- Pagination -->
    @if($allBookingsSorted->lastPage() > 1)
    <div class="mt-6 flex justify-center">
        {{ $allBookingsSorted->appends(['tab' => 'all'])->links() }}
    </div>
    @endif
@else
    <div class="bg-white rounded-lg shadow-md p-12 text-center">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-gray-100 rounded-full mb-6">
            <i class="fas fa-bookmark text-gray-400 text-4xl"></i>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-3">{{ __('app.no_bookings_found') }}</h3>
        <p class="text-gray-600 mb-6">{{ __('app.start_your_fitness_journey') }}</p>
        <a href="{{ route('pilates.classes') }}" class="inline-block px-8 py-3 bg-primary text-white rounded-lg font-semibold hover:bg-primary-dark transition-all">
            <i class="fas fa-calendar-plus mr-2"></i>{{ __('app.browse_available_classes') }}
        </a>
    </div>
@endif
</div>

</div>

@push('scripts')
<script>
function showTab(tabName) {
    // Hide all tab contents
    document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.add('hidden');
    });
    
    // Remove active state from all tabs
    document.querySelectorAll('[id^="tab-"]').forEach(tab => {
        tab.classList.remove('border-primary', 'bg-primary/5', 'text-primary');
        tab.classList.add('border-transparent', 'text-gray-600');
    });
    
    // Show selected tab content
    document.getElementById('tab-content-' + tabName).classList.remove('hidden');
    
    // Add active state to selected tab
    const activeTab = document.getElementById('tab-' + tabName);
    activeTab.classList.remove('border-transparent', 'text-gray-600');
    activeTab.classList.add('border-primary', 'bg-primary/5', 'text-primary');
    
    // Update URL without reload
    const url = new URL(window.location);
    url.searchParams.set('tab', tabName);
    url.searchParams.delete('page'); // Reset to page 1 when switching tabs
    window.history.pushState({}, '', url);
}

// Initialize with current tab from URL or 'available' as default
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const currentTab = urlParams.get('tab') || '{{ $currentTab ?? "available" }}';
    showTab(currentTab);
});
</script>
@endpush
@endsection