@extends('admin.layout.master')
@section('css')
<link rel="stylesheet" href="{{ asset('admin/index_page.css') }}">
@endsection
@section('content')
@php
    $activeStatusTab = $activeStatusTab ?? '';
    $statusCounts = $statusCounts ?? [];
    $statusTabs = array_merge(
        ['' => __('admin.all')],
        collect(App\Enums\RideStatus::toArray())->mapWithKeys(fn ($status) => [$status => __('apis.ride_status.' . $status)])->all()
    );
@endphp
<div class="content-body">
    <ul class="nav nav-tabs mb-2 ride-status-tabs">
        @foreach ($statusTabs as $statusValue => $statusLabel)
            @php
                $tabColor = match ($statusValue) {
                    '' => 'primary',
                    App\Enums\RideStatus::SCANNING => 'info',
                    App\Enums\RideStatus::ACTIVE => 'success',
                    App\Enums\RideStatus::ENDING => 'info',
                    App\Enums\RideStatus::COMPLETED => 'primary',
                    App\Enums\RideStatus::CANCELLED => 'danger',
                    default => 'light',
                };
            @endphp
            <li class="nav-item">
                <a class="nav-link ride-status-tab {{ $activeStatusTab === $statusValue ? 'active' : '' }}"
                    href="#"
                    data-status="{{ $statusValue }}"
                    role="tab">
                    {{ $statusLabel }}
                    <span class="badge badge-{{ $tabColor }} ml-25">{{ $statusCounts[$statusValue] ?? 0 }}</span>
                </a>
            </li>
        @endforeach
    </ul>

    <input type="hidden"
        id="status_filter"
        name="status"
        class="search-input"
        value="{{ $activeStatusTab }}">

    <div class="mb-1 d-flex justify-content-between m-0">
        <x-admin.buttons extrabuttons="true">
            <x-slot name="extrabuttonsdiv">
                @haspermission('admin.master-export')
                <a class="btn bg-gradient-info mr-1 mb-1 waves-effect waves-light"
                    href="{{ url(route('admin.master-export', 'Ride')) }}"><i class="fa fa-file-excel-o"></i>
                    {{ __('admin.export') }}</a>
                @endhaspermission
            </x-slot>
        </x-admin.buttons>

        <x-admin.filter datefilter="true" />
    </div>

    <div class="table_content_append"></div>
</div>
@endsection
@section('js')
@include('admin.shared.filter_js', ['index_route' => route('admin.rides.index'), 'defer_initial_load' => true])
<script>
    $(document).ready(function() {
        const statusTab = new URLSearchParams(window.location.search).get('status_tab') || '';

        if (statusTab !== '') {
            $('.ride-status-tab').removeClass('active');
            $('.ride-status-tab[data-status="' + statusTab + '"]').addClass('active');
            $('#status_filter').val(statusTab);
        }

        getData({ searchArray: searchArray() });

        $(document).on('click', '.ride-status-tab', function(e) {
            e.preventDefault();

            $('.ride-status-tab').removeClass('active');
            $(this).addClass('active');
            $('#status_filter').val($(this).data('status'));
            getData({ searchArray: searchArray() });
        });
    });
</script>
@endsection