@extends('admin.layout.master')



@section('css')

    <link rel="stylesheet" type="text/css" href="{{ asset('admin/app-assets/vendors/css/extensions/sweetalert2.min.css') }}">

    <link rel="stylesheet" type="text/css" href="{{ asset('admin/index_page.css') }}">

@endsection



@section('content')

@php

    $assignmentTabValues = [
        'all'        => '',
        'assigned'   => 'assigned',
        'unassigned' => 'unassigned',
    ];

    $activeAssignmentTab = $activeAssignmentTab ?? 'all';

    $activeStatusTab = $activeStatusTab ?? '';

    $assignmentCounts = $assignmentCounts ?? ['all' => 0, 'assigned' => 0, 'unassigned' => 0];

    $statusCounts = $statusCounts ?? [];

    $statusTabs = array_merge(
        ['' => __('admin.all')],
        collect(App\Enums\ScooterStatus::toArray())
            ->reject(fn ($status) => $status === App\Enums\ScooterStatus::OUT_OF_SERVICE)
            ->mapWithKeys(fn ($status) => [$status => __('apis.scooter_status.' . $status)])
            ->all()
    );

@endphp



<div class="content-body">



    <ul class="nav nav-tabs mb-2 scooter-assignment-tabs">

        @foreach (['all' => 'primary', 'assigned' => 'success', 'unassigned' => 'warning'] as $tab => $color)
            <li class="nav-item">
                <a class="nav-link scooter-assignment-tab {{ $activeAssignmentTab === $tab ? 'active' : '' }}"
                    href="#"
                    data-tab="{{ $tab }}"
                    role="tab">
                    @if ($tab === 'all')
                        {{ __('admin.all') }}
                    @elseif ($tab === 'assigned')
                        {{ __('admin.assigned_scooters') }}
                    @else
                        {{ __('admin.not_assigned_scooters') }}
                    @endif
                    <span class="badge badge-{{ $color }} ml-25">{{ $assignmentCounts[$tab] ?? 0 }}</span>
                </a>
            </li>
        @endforeach

    </ul>



    <input type="hidden"

        id="assignment_filter"

        name="assignment"

        class="search-input"

        value="{{ $assignmentTabValues[$activeAssignmentTab] ?? '' }}">



    <ul class="nav nav-tabs mb-2 scooter-status-tabs">

        @foreach ($statusTabs as $statusValue => $statusLabel)

            @php

                $tabColor = match ($statusValue) {

                    '' => 'primary',

                    App\Enums\ScooterStatus::ACTIVE => 'success',

                    App\Enums\ScooterStatus::IN_RIDE => 'info',

                    App\Enums\ScooterStatus::MAINTENANCE => 'warning',

                    App\Enums\ScooterStatus::INACTIVE => 'secondary',

                    default => 'light',

                };

            @endphp

            <li class="nav-item">

                <a class="nav-link scooter-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

            addbutton="{{ route('admin.scooters.create') }}"

            addpermission="admin.scooters.create"

            deletebutton="{{ route('admin.scooters.deleteAll') }}"

            deletepermission="admin.scooters.deleteAll"

        />



        <x-admin.filter :searchArray="[

            'code' => ['input_type' => 'text', 'input_name' => __('admin.scooter_code')],

        ]" />

    </div>



    <div class="table_content_append"></div>

</div>

@endsection



@section('js')

    <script src="{{ asset('admin/app-assets/vendors/js/extensions/sweetalert2.all.min.js') }}"></script>

    <script src="{{ asset('admin/app-assets/js/scripts/extensions/sweet-alerts.js') }}"></script>



    @include('admin.shared.deleteAll')

    @include('admin.shared.deleteOne')

    @include('admin.shared.filter_js', ['index_route' => url('admin/scooters')])

    <script>

        function sendScooterLockCommand(id, action) {

            const url = action === 'lock'
                ? '{{ url('admin/scooters') }}/' + id + '/lock'
                : '{{ url('admin/scooters') }}/' + id + '/unlock';

            Swal.fire({
                title: "{{ __('admin.are_you_want_to_continue') }}",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: "{{ __('admin.confirm') }}",
                confirmButtonClass: 'btn btn-primary',
                cancelButtonText: "{{ __('admin.cancel') }}",
                cancelButtonClass: 'btn btn-danger ml-1',
                buttonsStyling: false,
            }).then((result) => {
                if (!result.value) {
                    return;
                }

                $.ajax({
                    type: 'post',
                    url: url,
                    dataType: 'json',
                    success: function(response) {
                        if (response.key === 'unauthorized') {
                            Swal.fire({
                                position: 'top-start',
                                type: 'warning',
                                title: response.msg || "{{ __('auth.not_authorized') }}",
                                showConfirmButton: false,
                                timer: 2000,
                                buttonsStyling: false,
                            });
                            return;
                        }

                        Swal.fire({
                            position: 'top-start',
                            type: 'success',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 1500,
                            buttonsStyling: false,
                        });
                    },
                    error: function(xhr) {
                        const json = xhr.responseJSON || {};
                        Swal.fire({
                            position: 'top-start',
                            type: 'warning',
                            title: json.message || json.msg || xhr.statusText,
                            showConfirmButton: false,
                            timer: 2000,
                            buttonsStyling: false,
                        });
                    }
                });
            });
        }

        $(document).on('click', '.lock-scooter', function(e) {
            e.preventDefault();
            sendScooterLockCommand($(this).data('id'), 'lock');
        });

        $(document).on('click', '.unlock-scooter', function(e) {
            e.preventDefault();
            sendScooterLockCommand($(this).data('id'), 'unlock');
        });

    </script>

    <script>

        $(document).ready(function() {

            const assignmentStatusMap = @json($assignmentTabValues);



            $(document).on('click', '.scooter-assignment-tab', function(e) {

                e.preventDefault();



                $('.scooter-assignment-tab').removeClass('active');

                $(this).addClass('active');

                $('#assignment_filter').val(assignmentStatusMap[$(this).data('tab')]);

                $('.scooter-status-tab').removeClass('active');
                $('.scooter-status-tab[data-status=""]').addClass('active');
                $('#status_filter').val('');

                getData({ searchArray: searchArray() });

            });



            $(document).on('click', '.scooter-status-tab', function(e) {

                e.preventDefault();



                $('.scooter-status-tab').removeClass('active');

                $(this).addClass('active');

                $('#status_filter').val($(this).data('status'));

                getData({ searchArray: searchArray() });

            });

        });

    </script>

@endsection