@extends('layouts.app')

@section('title', 'Ticket Admin')

@section('content')
<div class="w-full px-6 pt-6" x-data="{
    activeTab: new URLSearchParams(window.location.search).get('tab') || 'agents',
    updateUrlTab(name) {
        const url = new URL(window.location);
        url.searchParams.set('tab', name);
        history.replaceState(null, '', url);
    },
    showAgentModal: false,
    editAgentMode: false,
    agent: { id: null, name: '', address: '', contacts: '' },

    showRouteModal: false,
    editRouteMode: false,
    route: { id: null, airline_id: '', route_type: '', flight_type: '', from_city_id: '', to_city_id: '', return_city_id: '', additional_gap: '', transits: [{ transit_city_id: '', transit_hours: '', transit_minutes: '' }, { transit_city_id: '', transit_hours: '', transit_minutes: '' }] },

    cityModalOpen: false,
    citySaving: false,
    activeSelect: null,
    cityData: { city_name: '', code: '', country: '' },
    cityErrors: {},
    onCitySelectChange(selectKey, event) {
        if (event.target.value === '__add_new__') {
            event.target.value = '';
            const nonRouteKeys = [
                'segments_0_from_city_id', 'segments_0_to_city_id',
                'segments_1_from_city_id', 'segments_1_to_city_id',
                'transit_0_city_id', 'transit_1_city_id'
            ];
            if (!nonRouteKeys.includes(selectKey)) {
                this.route[selectKey] = '';
            }
            this.activeSelect = selectKey;
            this.openCityModal();
        }
    },
    openCityModal() {
        this.cityData = { city_name: '', code: '', country: '' };
        this.cityErrors = {};
        this.cityModalOpen = true;
    },
    closeCityModal() {
        this.cityModalOpen = false;
        this.cityErrors = {};
        this.activeSelect = null;
    },
    saveCity() {
        this.citySaving = true;
        this.cityErrors = {};
        const csrfMeta = document.querySelector('meta[name=&quot;csrf-token&quot;]');
        fetch('{{ route('city-codes.store') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfMeta ? csrfMeta.getAttribute('content') : ''
            },
            body: JSON.stringify(this.cityData)
        })
        .then(async (response) => {
            this.citySaving = false;
            const data = await response.json().catch(() => ({}));
            if (response.status === 422 && data.errors) {
                this.cityErrors = data.errors;
                return;
            }
            if (response.ok && data.success && data.city) {
                this.appendCityToAllSelects(data.city);
                this.closeCityModal();
                if (typeof window.showToast === 'function') {
                    window.showToast('City created successfully', 'success');
                }
                return;
            }
            if (typeof window.showToast === 'function') {
                window.showToast((data && data.message) || 'Failed to create city', 'error');
            }
        })
        .catch(() => {
            this.citySaving = false;
            if (typeof window.showToast === 'function') {
                window.showToast('Failed to create city', 'error');
            }
        });
    },
    appendCityToAllSelects(city) {
        const routeKeys = ['from_city_id', 'to_city_id', 'return_city_id'];
        const segmentKeys = ['segments_0_from_city_id', 'segments_0_to_city_id', 'segments_1_from_city_id', 'segments_1_to_city_id'];
        const transitKeys = ['transit_0_city_id', 'transit_1_city_id'];
        const allKeys = [...routeKeys, ...segmentKeys, ...transitKeys];
        const label = `${city.code} (${city.city_name})`;

        const setActiveValue = (k) => {
            if (routeKeys.includes(k)) {
                this.route[k] = String(city.id);
            } else if (transitKeys.includes(k)) {
                const idx = parseInt(k.split('_')[1], 10);
                this.route.transits[idx].transit_city_id = String(city.id);
            } else {
                const sel = document.getElementById(k);
                if (sel) sel.value = String(city.id);
            }
        };

        allKeys.forEach((k) => {
            const sel = document.getElementById(k);
            if (!sel) return;

            let exists = false;
            for (let i = 0; i < sel.options.length; i++) {
                if (sel.options[i].value === String(city.id)) { exists = true; break; }
            }
            if (exists) {
                if (this.activeSelect === k) setActiveValue(k);
                return;
            }

            const newOpt = document.createElement('option');
            newOpt.value = String(city.id);
            newOpt.text = label;

            let inserted = false;
            for (let i = 0; i < sel.options.length; i++) {
                const opt = sel.options[i];
                if (opt.value === '' || opt.value === '__add_new__') continue;
                if (label.localeCompare(opt.text) < 0) {
                    sel.insertBefore(newOpt, opt);
                    inserted = true;
                    break;
                }
            }
            if (!inserted) {
                const addNewOpt = sel.querySelector('option[value=&quot;__add_new__&quot;]');
                if (addNewOpt) {
                    sel.insertBefore(newOpt, addNewOpt);
                } else {
                    sel.appendChild(newOpt);
                }
            }

            if (this.activeSelect === k) setActiveValue(k);
        });
    }
}">
    <h1 class="text-2xl font-bold text-slate-800 mb-6">Ticket Admin</h1>

    <div class="border-b border-slate-200 mb-6">
        <nav class="-mb-px flex gap-6">
            <button @click="activeTab = 'agents'; updateUrlTab('agents')" :class="{ 'border-blue-500 text-blue-600': activeTab === 'agents', 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300': activeTab !== 'agents' }" class="py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap">
                Ticket Agents
            </button>
            <button @click="activeTab = 'fares'; updateUrlTab('fares')" :class="{ 'border-blue-500 text-blue-600': activeTab === 'fares', 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300': activeTab !== 'fares' }" class="py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap">
                Ticket Fares
            </button>
            <button @click="activeTab = 'routes'; updateUrlTab('routes')" :class="{ 'border-blue-500 text-blue-600': activeTab === 'routes', 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300': activeTab !== 'routes' }" class="py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap">
                Routes
            </button>
        </nav>
    </div>

    @if(session('success'))
        <div class="bg-emerald-50 border border-emerald-200 text-emerald-700 px-4 py-3 rounded-lg mb-4">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-4">
            {{ session('error') }}
        </div>
    @endif

    @if($errors->any())
        <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-4">
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div x-show="activeTab === 'agents'" x-cloak>
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-semibold text-slate-700">Ticket Agents</h2>
            <button @click="editAgentMode = false; agent = { id: null, name: '', address: '', contacts: '' }; showAgentModal = true" class="px-4 py-2 bg-slate-800 text-white rounded-md hover:bg-slate-700 transition text-sm font-medium">
                Add New
            </button>
        </div>

        <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-slate-50 text-slate-600 text-xs font-medium uppercase tracking-wider">
                        <tr>
                            <th class="px-6 py-4 text-left">Name</th>
                            <th class="px-6 py-4 text-left">Address</th>
                            <th class="px-6 py-4 text-left">Contacts</th>
                            <th class="px-6 py-4 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200">
                        @forelse($ticketAgents as $ticketAgent)
                            <tr class="hover:bg-slate-50">
                                <td class="px-6 py-4 text-slate-700 font-medium">{{ $ticketAgent->name }}</td>
                                <td class="px-6 py-4 text-slate-600">{{ $ticketAgent->address ?? '—' }}</td>
                                <td class="px-6 py-4 text-slate-600">{{ $ticketAgent->contacts ?? '—' }}</td>
                                <td class="px-6 py-4 text-right">
                                    <div class="flex items-center justify-end gap-4">
                                        <button @click="editAgentMode = true; agent = { id: {{ $ticketAgent->id }}, name: '{{ $ticketAgent->name }}', address: '{{ $ticketAgent->address ?? '' }}', contacts: '{{ $ticketAgent->contacts ?? '' }}' }; showAgentModal = true" class="text-slate-600 hover:text-slate-800 font-medium text-sm">Edit</button>
                                        <form method="POST" action="{{ route('fare.admin.agent.destroy', $ticketAgent->id) }}" onsubmit="return confirm('Are you sure you want to delete this ticket agent?')" class="inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-600 hover:text-red-800 font-medium text-sm">Delete</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-6 py-12 text-center text-slate-500">
                                    No ticket agents found.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="mt-4 flex justify-center"
             @click.prevent="
                 const el = $event.target.closest('a');
                 if (el && el.href) {
                     const url = new URL(el.href);
                     url.searchParams.set('tab', activeTab);
                     window.location.href = url.toString();
                 }
             ">
            {{ $ticketAgents->appends(request()->query())->links() }}
        </div>
    </div>

    <div x-show="activeTab === 'fares'" x-cloak>
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-semibold text-slate-700">Ticket Fares</h2>
            <a href="{{ route('ticket-fares.create') }}" class="px-4 py-2 bg-slate-800 text-white rounded-md hover:bg-slate-700 transition text-sm font-medium">
                Add New
            </a>
        </div>

        <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden mb-6">
            <form method="GET" action="{{ route('fare.admin') }}" id="filter-form" class="p-4 flex flex-wrap gap-4 items-end">
                <input type="hidden" name="tab" value="fares">
                <div class="flex-1 min-w-[200px]">
                    <label class="block text-sm font-medium text-slate-700 mb-1">Search</label>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by airline..." class="w-full border border-slate-300 rounded-md px-3 py-2 text-sm">
                </div>
                <div class="min-w-[150px]">
                    <label class="block text-sm font-medium text-slate-700 mb-1">Airline</label>
                    <select name="airline_id" class="w-full border border-slate-300 rounded-md px-3 py-2 text-sm">
                        <option value="">All Airlines</option>
                        @foreach($airlines as $airline)
                            <option value="{{ $airline->id }}" {{ request('airline_id') == $airline->id ? 'selected' : '' }}>
                                {{ $airline->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="min-w-[150px]">
                    <label class="block text-sm font-medium text-slate-700 mb-1">Ticket Type</label>
                    <select name="ticket_type" class="w-full border border-slate-300 rounded-md px-3 py-2 text-sm">
                        <option value="">All Types</option>
                        <option value="regular" {{ request('ticket_type') == 'regular' ? 'selected' : '' }}>Regular</option>
                        <option value="offer" {{ request('ticket_type') == 'offer' ? 'selected' : '' }}>Offer</option>
                        <option value="group" {{ request('ticket_type') == 'group' ? 'selected' : '' }}>Group</option>
                    </select>
                </div>
                <div class="min-w-[150px]">
                    <label class="block text-sm font-medium text-slate-700 mb-1">Status</label>
                    <select name="status" class="w-full border border-slate-300 rounded-md px-3 py-2 text-sm">
                        <option value="">Active</option>
                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                        <option value="all" {{ request('status') == 'all' ? 'selected' : '' }}>All</option>
                    </select>
                </div>
                <div>
                    <a href="{{ route('fare.admin', ['tab' => 'fares']) }}" class="px-4 py-2 border border-slate-300 text-slate-700 rounded-md hover:bg-slate-50 transition text-sm font-medium">
                        Clear
                    </a>
                </div>
            </form>
        </div>

        <div id="ticket-fare-table-container">
            <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-slate-50 text-slate-600 text-xs font-medium uppercase tracking-wider">
                            <tr>
                                <th class="px-4 py-3 text-left">#</th>
                                <th class="px-4 py-3 text-left">Airline</th>
                                <th class="px-4 py-3 text-left">Class</th>
                                <th class="px-4 py-3 text-left">Route</th>
                                <th class="px-4 py-3 text-left">Type</th>
                                <th class="px-4 py-3 text-left">Net Fare</th>
                                <th class="px-4 py-3 text-left">Selling Fare</th>
                                <th class="px-4 py-3 text-left">Offer Price</th>
                                <th class="px-4 py-3 text-left">Effective From</th>
                                <th class="px-4 py-3 text-left">Effective To</th>
                                <th class="px-4 py-3 text-left">Ticket Qty</th>
                                <th class="px-4 py-3 text-left">Available Ticket</th>
                                <th class="px-4 py-3 text-left">Created At</th>
                                <th class="px-4 py-3 text-center">Status</th>
                                <th class="px-4 py-3 text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200">
                            @forelse($ticketFares as $fare)
                                <tr class="hover:bg-slate-50">
                                    <td class="px-4 py-3 text-slate-700">{{ $loop->iteration }}</td>
                                    <td class="px-4 py-3 text-slate-700 font-medium">{{ $fare->airline->name ?? '-' }}</td>
                                    <td class="px-4 py-3 text-slate-600">{{ $fare->airlineClass->travelClass->name ?? '-' }}</td>
                                    <td class="px-4 py-3 text-slate-700 font-medium">
                                        @if($fare->route)
                                            @if($fare->route->route_type->value === 'multi_city')
                                                @if($fare->route->multiSegments->count() > 0)
                                                    {{ $fare->route->multiSegments->first()->fromCity->code ?? '-' }}-{{ $fare->route->multiSegments->first()->toCity->code ?? '-' }} ...
                                                @else
                                                    -
                                                @endif
                                            @else
                                                {{ $fare->route->fromCity->code ?? '-' }}-{{ $fare->route->toCity->code ?? '-' }}
                                                @if($fare->route->route_type->value === 'round')
                                                    -{{ $fare->route->returnCity->code ?? '-' }}
                                                @endif
                                            @endif
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td class="px-4 py-3">
                                        @switch($fare->ticket_type->value)
                                            @case('regular')
                                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-slate-100 text-slate-600">Regular</span>
                                                @break
                                            @case('offer')
                                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-700">Offer</span>
                                                @break
                                            @case('group')
                                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-700">Group</span>
                                                @break
                                        @endswitch
                                    </td>
                                    <td class="px-4 py-3 text-slate-700 font-medium">@currency($fare->net_fare, 2)</td>
                                    <td class="px-4 py-3 text-slate-700 font-medium">@currency($fare->selling_fare, 2)</td>
                                    <td class="px-4 py-3 text-slate-600">@if($fare->offer_price)@currency($fare->offer_price, 2)@else-@endif</td>
                                    <td class="px-4 py-3 text-slate-600">{{ $fare->effective_from->format('d/m/Y') }}</td>
                                    <td class="px-4 py-3 text-slate-600">{{ $fare->effective_to->format('d/m/Y') }}</td>
                                    <td class="px-4 py-3 text-slate-600">
                                        @if($fare->ticket_type->value === 'group' && $fare->groupTicket)
                                            {{ $fare->groupTicket->ticket_qty }}
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-slate-600">
                                        @if($fare->ticket_type->value === 'group' && $fare->groupTicket)
                                            {{ max(0, $fare->groupTicket->ticket_qty - ($fare->issued_tickets_count ?? 0)) }}
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-slate-600">{{ $fare->created_at->format('d/m/Y') }}</td>
                                    <td class="px-4 py-3 text-center">
                                        <form method="POST" action="{{ route('ticket-fares.toggle-active', $fare->id) }}">
                                            @csrf
                                            @method('PATCH')
                                            <button type="submit" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors {{ $fare->is_active ? 'bg-emerald-500' : 'bg-slate-300' }}">
                                                <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform {{ $fare->is_active ? 'translate-x-6' : 'translate-x-1' }}"></span>
                                            </button>
                                        </form>
                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ $fare->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700' }}">
                                            {{ $fare->is_active ? 'Active' : 'Inactive' }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-right">
                                        <div class="flex items-center justify-end gap-3">
                                            <a href="{{ route('ticket-fares.show', $fare->id) }}" class="text-slate-600 hover:text-slate-800 font-medium">View</a>
                                            @if(auth()->user()->hasRole('Super Admin') || auth()->user()->hasRole('Ticket Admin'))
                                                <a href="{{ route('ticket-fares.edit', $fare->id) }}?page={{ request('page', 1) }}" class="text-slate-600 hover:text-slate-800 font-medium">Edit</a>
                                                @if($fare->is_locked)
                                                    <span class="text-red-400 cursor-not-allowed" title="In use by packages or passengers">Delete</span>
                                                @else
                                                    <form method="POST" action="{{ route('fare.admin.fare.destroy', $fare->id) }}" onsubmit="return confirm('Are you sure you want to delete this ticket fare?')" class="inline">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="text-red-600 hover:text-red-800 font-medium">Delete</button>
                                                    </form>
                                                @endif
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="15" class="px-4 py-12 text-center text-slate-500">
                                        No ticket fares found.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="mt-4 flex justify-center"
                 @click.prevent="
                     const el = $event.target.closest('a');
                     if (el && el.href) {
                         const url = new URL(el.href);
                         url.searchParams.set('tab', activeTab);
                         window.location.href = url.toString();
                     }
                 ">
                {{ $ticketFares->appends(request()->query())->links() }}
            </div>
        </div>
    </div>

    <div x-show="activeTab === 'routes'" x-cloak>
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-slate-800">Routes</h1>
            <a href="#" @click.prevent="editRouteMode = false; route = { id: null, airline_id: '', route_type: '', flight_type: '', from_city_id: '', to_city_id: '', return_city_id: '', additional_gap: '', transits: [{ transit_city_id: '', transit_hours: '', transit_minutes: '' }, { transit_city_id: '', transit_hours: '', transit_minutes: '' }] }; showRouteModal = true" class="px-4 py-2 bg-slate-800 text-white rounded-md hover:bg-slate-700 transition">
                Add New
            </a>
        </div>

        <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-slate-50 text-slate-600 text-xs font-medium uppercase tracking-wider">
                        <tr>
                            <th class="px-4 py-3 text-left">ID</th>
                            <th class="px-4 py-3 text-left">Airline</th>
                            <th class="px-4 py-3 text-left">Route Type</th>
                            <th class="px-4 py-3 text-left">Flight Type</th>
                            <th class="px-4 py-3 text-left">Route</th>
                            <th class="px-4 py-3 text-left">Transit Info</th>
                            <th class="px-4 py-3 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200">
                        @forelse($routes as $route)
                            <tr class="hover:bg-slate-50">
                                <td class="px-4 py-3 text-slate-700">{{ $route->id }}</td>
                                <td class="px-4 py-3 text-slate-700 font-medium">{{ $route->airline->name ?? '-' }}</td>
                                <td class="px-4 py-3 text-slate-600">
                                    @switch($route->route_type->value)
                                        @case('oneway_inbound') Oneway - Inbound @break
                                        @case('oneway_outbound') Oneway - Outbound @break
                                        @case('round') Round @break
                                        @case('multi_city') Multi City @break
                                        @default {{ $route->route_type->value ?? '-' }}
                                    @endswitch
                                </td>
                                <td class="px-4 py-3">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ $route->flight_type->value === 'transit' ? 'bg-yellow-100 text-yellow-700' : 'bg-slate-100 text-slate-600' }}">
                                        {{ ucfirst($route->flight_type->value ?? '-') }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-slate-700 font-medium">
                                    @if($route->route_type->value === 'multi_city')
                                        @if($route->multiSegments && $route->multiSegments->count() > 0)
                                            {{ $route->multiSegments->first()->fromCity->code ?? '-' }}-{{ $route->multiSegments->first()->toCity->code ?? '-' }} ...
                                        @else
                                            -
                                        @endif
                                    @else
                                        {{ $route->fromCity->code ?? '-' }}-{{ $route->toCity->code ?? '-' }}
                                        @if($route->route_type->value === 'round')
                                            -{{ $route->returnCity->code ?? '-' }}
                                        @endif
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-slate-600">
                                    @if($route->flight_type->value === 'transit' && $route->transits && $route->transits->count() > 0)
                                        @foreach($route->transits as $transit)
                                            @php
                                                $hours = floor($transit->transit_time / 60);
                                                $minutes = $transit->transit_time % 60;
                                            @endphp
                                            <span class="block">{{ $transit->transitCity->code ?? '-' }} ({{ str_pad($hours, 2, '0', STR_PAD_LEFT) }}:{{ str_pad($minutes, 2, '0', STR_PAD_LEFT) }})</span>
                                        @endforeach
                                    @else
                                        -
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-right">
                                    <div class="flex items-center justify-end gap-3">
                                        <a href="{{ route('routes.show', $route->id) }}" class="text-slate-600 hover:text-slate-800 font-medium">View</a>
                                        <button @click="editRouteMode = true; route = { id: {{ $route->id }}, airline_id: '{{ $route->airline_id }}', route_type: '{{ $route->route_type->value }}', flight_type: '{{ $route->flight_type->value }}', from_city_id: '{{ $route->from_city_id ?? '' }}', to_city_id: '{{ $route->to_city_id ?? '' }}', return_city_id: '{{ $route->return_city_id ?? '' }}', additional_gap: '{{ $route->additional_gap ?? '' }}', transits: [{ transit_city_id: '{{ $route->transits[0]->transit_city_id ?? '' }}', transit_hours: '{{ isset($route->transits[0]) ? floor($route->transits[0]->transit_time / 60) : '' }}', transit_minutes: '{{ isset($route->transits[0]) ? $route->transits[0]->transit_time % 60 : '' }}' }, { transit_city_id: '{{ $route->transits[1]->transit_city_id ?? '' }}', transit_hours: '{{ isset($route->transits[1]) ? floor($route->transits[1]->transit_time / 60) : '' }}', transit_minutes: '{{ isset($route->transits[1]) ? $route->transits[1]->transit_time % 60 : '' }}' }] }; showRouteModal = true; toggleRouteFieldsModal('{{ $route->route_type->value }}'); toggleTransitFieldsModal('{{ $route->flight_type->value }}')" class="text-slate-600 hover:text-slate-800 font-medium">Edit</button>
                                        <form method="POST" action="{{ route('routes.destroy', $route->id) }}" onsubmit="return confirm('Are you sure you want to delete this route?')" class="inline">
                                            @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-4 py-12 text-center text-slate-500">
                                    No routes found. <button @click="editRouteMode = false; route = { id: null, airline_id: '', route_type: '', flight_type: '', from_city_id: '', to_city_id: '', return_city_id: '', additional_gap: '', transits: [{ transit_city_id: '', transit_hours: '', transit_minutes: '' }, { transit_city_id: '', transit_hours: '', transit_minutes: '' }] }; showRouteModal = true" class="text-slate-800 underline hover:text-slate-600">Add one?</button>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="mt-4 flex justify-center"
             @click.prevent="
                 const el = $event.target.closest('a');
                 if (el && el.href) {
                     const url = new URL(el.href);
                     url.searchParams.set('tab', activeTab);
                     window.location.href = url.toString();
                 }
             ">
            {{ $routes->appends(request()->query())->links() }}
        </div>
    </div>

    <div x-show="showAgentModal" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div x-show="showAgentModal" x-transition.opacity class="fixed inset-0 bg-black/50" @click="showAgentModal = false"></div>
            <div x-show="showAgentModal" x-transition class="relative bg-white rounded-lg shadow-xl w-full max-w-md p-6 z-10">
                <h3 class="text-lg font-semibold text-slate-800 mb-4" x-text="editAgentMode ? 'Edit Ticket Agent' : 'Add New Ticket Agent'"></h3>
                <form method="POST" :action="editAgentMode ? '/fares/admin/agent/' + agent.id : '{{ route('fare.admin.agent.store') }}'">
                    @csrf
                    <template x-if="editAgentMode">
                        <input type="hidden" name="_method" value="PUT">
                    </template>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Name *</label>
                            <input type="text" name="name" x-model="agent.name" class="w-full border border-slate-300 rounded-md px-3 py-2 text-sm" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Address</label>
                            <textarea name="address" x-model="agent.address" rows="2" class="w-full border border-slate-300 rounded-md px-3 py-2 text-sm"></textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Contacts</label>
                            <input type="text" name="contacts" x-model="agent.contacts" class="w-full border border-slate-300 rounded-md px-3 py-2 text-sm">
                        </div>
                    </div>
                    <div class="flex justify-end gap-3 mt-6">
                        <button type="button" @click="showAgentModal = false" class="px-4 py-2 border border-slate-300 rounded-md text-sm font-medium text-slate-700 hover:bg-slate-50 transition">Cancel</button>
                        <button type="submit" class="px-4 py-2 bg-slate-700 hover:bg-slate-800 text-white rounded-md text-sm font-medium transition" x-text="editAgentMode ? 'Update' : 'Create'"></button>
                    </div>
                </form>
            </div>
        </div>
    </div>



    <div x-show="showRouteModal" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div x-show="showRouteModal" x-transition.opacity class="fixed inset-0 bg-black/50" @click="showRouteModal = false"></div>
            <div x-show="showRouteModal" x-transition class="relative bg-white rounded-lg shadow-xl w-full max-w-3xl p-6 z-10">
                <h3 class="text-lg font-semibold text-slate-800 mb-4" x-text="editRouteMode ? 'Edit Route' : 'Add Route'"></h3>
                <form method="POST" :action="editRouteMode ? '/routes/' + route.id : '{{ route('routes.store') }}'" id="routeFormModal">
                    @csrf
                    <template x-if="editRouteMode">
                        <input type="hidden" name="_method" value="PUT">
                    </template>
                    
                    <div class="grid grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Airline *</label>
                            <select name="airline_id" x-model="route.airline_id" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border" required>
                                <option value="">Select Airline</option>
                                @foreach($airlines as $airline)
                                    <option value="{{ $airline->id }}">{{ $airline->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Route Type *</label>
                            <select name="route_type" x-model="route.route_type" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border" required onchange="toggleRouteFieldsModal(this.value); route.flight_type = ''">
                                <option value="">Select</option>
                                <option value="oneway_inbound">Oneway - Inbound</option>
                                <option value="oneway_outbound">Oneway - Outbound</option>
                                <option value="round">Round</option>
                                <option value="multi_city">Multi City</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Flight Type *</label>
                            <select name="flight_type" x-model="route.flight_type" :disabled="!route.route_type" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border" required onchange="toggleTransitFieldsModal(this.value)">
                                <option value="">Select</option>
                                <option value="direct">Direct</option>
                                <option value="transit">Transit</option>
                            </select>
                        </div>
                    </div>

                    <div id="cityGridModal" class="grid gap-4 mt-4 hidden">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">From *</label>
                            <select id="from_city_id" name="from_city_id" x-model="route.from_city_id" @change="onCitySelectChange('from_city_id', $event)" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border">
                                <option value="">Select</option>
                                <option value="__add_new__">+ Add New City</option>
                                @foreach(\App\Models\CityCode::orderBy('code')->get() as $city)
                                    <option value="{{ $city->id }}">{{ $city->code }} ({{ $city->city_name }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">To *</label>
                            <select id="to_city_id" name="to_city_id" x-model="route.to_city_id" @change="onCitySelectChange('to_city_id', $event)" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border">
                                <option value="">Select</option>
                                <option value="__add_new__">+ Add New City</option>
                                @foreach(\App\Models\CityCode::orderBy('code')->get() as $city)
                                    <option value="{{ $city->id }}">{{ $city->code }} ({{ $city->city_name }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div id="returnFieldModal">
                            <label class="block text-sm font-medium text-slate-700 mb-1">Return To *</label>
                            <select id="return_city_id" name="return_city_id" x-model="route.return_city_id" @change="onCitySelectChange('return_city_id', $event)" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border">
                                <option value="">Select</option>
                                <option value="__add_new__">+ Add New City</option>
                                @foreach(\App\Models\CityCode::orderBy('code')->get() as $city)
                                    <option value="{{ $city->id }}">{{ $city->code }} ({{ $city->city_name }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div id="multiCityFieldsModal" class="hidden mt-4">
                        <h4 class="text-sm font-medium text-slate-600 mb-3 pb-2 border-b border-slate-200">Multi City Segments</h4>
                        <div class="grid grid-cols-2 gap-4 mb-3">
                            <div>
                                <label class="block text-sm text-slate-600 mb-1">Inbound From</label>
                                <select id="segments_0_from_city_id" name="segments[0][from_city_id]" @change="onCitySelectChange('segments_0_from_city_id', $event)" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border">
                                    <option value="">Select</option>
                                    <option value="__add_new__">+ Add New City</option>
                                    @foreach(\App\Models\CityCode::orderBy('code')->get() as $city)
                                        <option value="{{ $city->id }}">{{ $city->code }} ({{ $city->city_name }})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm text-slate-600 mb-1">Inbound To</label>
                                <select id="segments_0_to_city_id" name="segments[0][to_city_id]" @change="onCitySelectChange('segments_0_to_city_id', $event)" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border">
                                    <option value="">Select</option>
                                    <option value="__add_new__">+ Add New City</option>
                                    @foreach(\App\Models\CityCode::orderBy('code')->get() as $city)
                                        <option value="{{ $city->id }}">{{ $city->code }} ({{ $city->city_name }})</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <input type="hidden" name="segments[0][segment_direction]" value="inbound">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm text-slate-600 mb-1">Outbound From</label>
                                <select id="segments_1_from_city_id" name="segments[1][from_city_id]" @change="onCitySelectChange('segments_1_from_city_id', $event)" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border">
                                    <option value="">Select</option>
                                    <option value="__add_new__">+ Add New City</option>
                                    @foreach(\App\Models\CityCode::orderBy('code')->get() as $city)
                                        <option value="{{ $city->id }}">{{ $city->code }} ({{ $city->city_name }})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm text-slate-600 mb-1">Outbound To</label>
                                <select id="segments_1_to_city_id" name="segments[1][to_city_id]" @change="onCitySelectChange('segments_1_to_city_id', $event)" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border">
                                    <option value="">Select</option>
                                    <option value="__add_new__">+ Add New City</option>
                                    @foreach(\App\Models\CityCode::orderBy('code')->get() as $city)
                                        <option value="{{ $city->id }}">{{ $city->code }} ({{ $city->city_name }})</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <input type="hidden" name="segments[1][segment_direction]" value="outbound">
                    </div>

                    <div id="transitFieldsModal" class="hidden grid grid-cols-2 gap-4 mt-4">
                        <div x-show="route.flight_type === 'transit' && (route.route_type === 'oneway_inbound' || route.route_type === 'round' || route.route_type === 'multi_city')">
                            <label class="block text-sm font-medium text-slate-700 mb-1">Transit City (Inbound)</label>
                            <select id="transit_0_city_id" name="transits[0][transit_city_id]" x-model="route.transits[0].transit_city_id" @change="onCitySelectChange('transit_0_city_id', $event)" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border">
                                <option value="">Select</option>
                                <option value="__add_new__">+ Add New City</option>
                                @foreach(\App\Models\CityCode::orderBy('code')->get() as $city)
                                    <option value="{{ $city->id }}">{{ $city->code }} ({{ $city->city_name }})</option>
                                @endforeach
                            </select>
                            <input type="hidden" name="transits[0][route_direction]" value="inbound">
                        </div>
                        <div x-show="route.flight_type === 'transit' && (route.route_type === 'oneway_inbound' || route.route_type === 'round' || route.route_type === 'multi_city')">
                            <label class="block text-sm font-medium text-slate-700 mb-1">Transit Time (Inbound)</label>
                            <div class="flex items-center gap-2">
                                <input type="number" name="transits[0][transit_hours]" x-model="route.transits[0].transit_hours" min="0" max="23" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border" placeholder="HH">
                                <span class="text-slate-500 font-medium">:</span>
                                <input type="number" name="transits[0][transit_minutes]" x-model="route.transits[0].transit_minutes" min="0" max="59" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border" placeholder="MM">
                            </div>
                        </div>
                        <div x-show="route.flight_type === 'transit' && (route.route_type === 'oneway_outbound' || route.route_type === 'round' || route.route_type === 'multi_city')">
                            <label class="block text-sm font-medium text-slate-700 mb-1">Transit City (Outbound)</label>
                            <select id="transit_1_city_id" name="transits[1][transit_city_id]" x-model="route.transits[1].transit_city_id" @change="onCitySelectChange('transit_1_city_id', $event)" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border">
                                <option value="">Select</option>
                                <option value="__add_new__">+ Add New City</option>
                                @foreach(\App\Models\CityCode::orderBy('code')->get() as $city)
                                    <option value="{{ $city->id }}">{{ $city->code }} ({{ $city->city_name }})</option>
                                @endforeach
                            </select>
                            <input type="hidden" name="transits[1][route_direction]" value="outbound">
                        </div>
                        <div x-show="route.flight_type === 'transit' && (route.route_type === 'oneway_outbound' || route.route_type === 'round' || route.route_type === 'multi_city')">
                            <label class="block text-sm font-medium text-slate-700 mb-1">Transit Time (Outbound)</label>
                            <div class="flex items-center gap-2">
                                <input type="number" name="transits[1][transit_hours]" x-model="route.transits[1].transit_hours" min="0" max="23" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border" placeholder="HH">
                                <span class="text-slate-500 font-medium">:</span>
                                <input type="number" name="transits[1][transit_minutes]" x-model="route.transits[1].transit_minutes" min="0" max="59" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border" placeholder="MM">
                            </div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <label class="block text-sm font-medium text-slate-700 mb-1">Additional Gap (Days)</label>
                        <input type="number" name="additional_gap" x-model="route.additional_gap" min="0" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm px-3 py-2 border" placeholder="0">
                    </div>

                    <div class="pt-4 flex items-center gap-4">
                        <button type="submit" class="px-4 py-2 bg-slate-800 text-white rounded-md hover:bg-slate-700 transition" x-text="editRouteMode ? 'Update Route' : 'Create Route'"></button>
                        <button type="button" @click="showRouteModal = false" class="text-slate-600 hover:text-slate-800 text-sm">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @include('partials.city-form-modal')

    <script>
    function toggleRouteFieldsModal(routeTypeValue) {
        const routeType = routeTypeValue || document.querySelector('select[name="route_type"]').value;
        const cityGrid = document.getElementById('cityGridModal');
        const returnField = document.getElementById('returnFieldModal');
        const multiCityFields = document.getElementById('multiCityFieldsModal');

        cityGrid.classList.remove('grid-cols-2', 'grid-cols-3');
        cityGrid.classList.add('hidden');
        returnField.classList.add('hidden');
        multiCityFields.classList.add('hidden');

        if (routeType === 'oneway_inbound' || routeType === 'oneway_outbound') {
            cityGrid.classList.remove('hidden');
            cityGrid.classList.add('grid-cols-2');
            returnField.classList.add('hidden');
        } else if (routeType === 'round') {
            cityGrid.classList.remove('hidden');
            cityGrid.classList.add('grid-cols-3');
            returnField.classList.remove('hidden');
        } else if (routeType === 'multi_city') {
            multiCityFields.classList.remove('hidden');
        }
    }

    function toggleTransitFieldsModal(flightTypeValue) {
        const flightType = flightTypeValue || document.querySelector('select[name="flight_type"]').value;
        const transitFields = document.getElementById('transitFieldsModal');

        if (flightType === 'transit') {
            transitFields.classList.remove('hidden');
        } else {
            transitFields.classList.add('hidden');
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        toggleRouteFieldsModal();
        toggleTransitFieldsModal();
    });
    </script>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var form = document.getElementById('filter-form');
    var container = document.getElementById('ticket-fare-table-container');
    if (!form || !container) return;
    var debounceTimer;

    function fetchFilteredResults() {
        var params = new URLSearchParams(new FormData(form));
        for (var key of params.keys()) {
            if (!params.get(key)) params.delete(key);
        }
        var url = form.action + '?' + params.toString();

        fetch(url, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function (response) {
            return response.text();
        }).then(function (html) {
            var parser = new DOMParser();
            var doc = parser.parseFromString(html, 'text/html');
            var newContent = doc.getElementById('ticket-fare-table-container');
            if (newContent) {
                container.innerHTML = newContent.innerHTML;
                history.replaceState(null, '', url);
            }
        }).catch(function (e) {
            console.error('Auto-filter failed:', e);
        });
    }

    form.querySelectorAll('select').forEach(function (el) {
        el.addEventListener('change', fetchFilteredResults);
    });

    var searchInput = form.querySelector('input[name="search"]');
    if (searchInput) {
        searchInput.addEventListener('input', function () {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(fetchFilteredResults, 400);
        });
    }
});
</script>
@endpush