@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
        $activeTypeTab = $activeTypeTab ?? '';
        $typeCounts = $typeCounts ?? [];
        $typeTabs = array_merge(
            ['' => __('admin.all')],
            collect(App\Enums\ContactType::toArray())->mapWithKeys(
                fn ($type) => [$type => __('apis.contact_type.' . $type)]
            )->all()
        );
        $typeTabColors = [
            '' => 'primary',
            App\Enums\ContactType::TRIP_ISSUE => 'danger',
            App\Enums\ContactType::PAYMENT_ISSUE => 'warning',
            App\Enums\ContactType::DAMAGED_SCOOTER => 'danger',
            App\Enums\ContactType::SUGGESTION => 'info',
            App\Enums\ContactType::GENERAL_INQUIRY => 'primary',
        ];
    @endphp

    <div class="content-body">
        <ul class="nav nav-tabs mb-2 contact-type-tabs">
            @foreach ($typeTabs as $typeValue => $typeLabel)
                <li class="nav-item">
                    <a class="nav-link contact-type-tab {{ $activeTypeTab === $typeValue ? 'active' : '' }}"
                        href="#"
                        data-type="{{ $typeValue }}"
                        role="tab">
                        {{ $typeLabel }}
                        <span class="badge badge-{{ $typeTabColors[$typeValue] ?? 'secondary' }} ml-25">
                            {{ $typeCounts[$typeValue] ?? 0 }}
                        </span>
                    </a>
                </li>
            @endforeach
        </ul>

        <input type="hidden"
            id="type_filter"
            name="type"
            class="search-input"
            value="{{ $activeTypeTab }}">

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

            <x-admin.filter datefilter="true" order="true" :searchArray="[
                'name' => [
                    'input_type' => 'text',
                    'input_name' => __('admin.the_sender_name'),
                ],
                'phone' => [
                    'input_type' => 'text',
                    'input_name' => __('admin.phone'),
                ],
                'email' => [
                    'input_type' => 'text',
                    'input_name' => __('admin.email'),
                ],
            ]" />
        </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/all-contacts'), 'defer_initial_load' => true])
    <script>
        $(document).ready(function() {
            const exportBaseUrl = @json(url(route('admin.master-export', 'Contact')));

            function syncContactExportUrl() {
                const $exportBtn = $('.contact-export-btn');
                if (!$exportBtn.length) {
                    return;
                }

                const params = searchArray();
                const queryString = $.param(params);
                $exportBtn.attr('href', queryString ? exportBaseUrl + '?' + queryString : exportBaseUrl);
            }

            const typeTab = new URLSearchParams(window.location.search).get('type_tab') || '';

            if (typeTab !== '') {
                $('.contact-type-tab').removeClass('active');
                $('.contact-type-tab[data-type="' + typeTab + '"]').addClass('active');
                $('#type_filter').val(typeTab);
            }

            syncContactExportUrl();
            getData({ searchArray: searchArray() });

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

                $('.contact-type-tab').removeClass('active');
                $(this).addClass('active');
                $('#type_filter').val($(this).data('type'));

                const url = new URL(window.location.href);
                const type = $(this).data('type');
                if (type) {
                    url.searchParams.set('type_tab', type);
                } else {
                    url.searchParams.delete('type_tab');
                }
                window.history.replaceState({}, '', url.toString());

                syncContactExportUrl();
                getData({ searchArray: searchArray() });
            });

            $(document).on('change', '.search-input', function() {
                syncContactExportUrl();
            });

            $(document).on('click', '.clean-input', function() {
                setTimeout(syncContactExportUrl, 0);
            });
        });
    </script>
@endsection