@php
$statusColors = [
    'waiting_deal'             => 'kt-badge-destructive',
    'waiting_signature'        => 'kt-badge-primary',
    'signature_reminder'       => 'kt-badge-warning',
    'waiting_element'          => 'kt-badge-warning',
    'requested_elements'       => 'kt-badge-success',
    'waiting_draft'            => 'kt-badge-warning',
    'draft_reminder'           => 'kt-badge-warning',
    'waiting_draft_walidation' => 'kt-badge-warning',
    'waiting_proof'            => 'kt-badge-info',
    'waiting_billing'          => 'kt-badge-warning',
    'billing_done'             => 'kt-badge-success',
    'wining_list_receipt'      => 'kt-badge-success',
    'proof_sended'             => 'kt-badge-success',
    'on_reclamation'           => 'kt-badge-destructive',
    'closed'                   => 'kt-badge-mono',
];

$tabs = $tabs ?? [];
@endphp

<div>
    {{-- Header --}}
    <div class="kt-modal-header py-4 px-5">
        <i class="ki-outline ki-magnifier text-muted-foreground text-xl"></i>
        <input
            wire:model.live.debounce.300ms="query"
            class="kt-input kt-input-ghost"
            placeholder="Rechercher une opération, un client, un contact..."
            type="text"
            autocomplete="off"
        />
        <button class="kt-btn kt-btn-sm kt-btn-icon kt-btn-dim shrink-0" data-kt-modal-dismiss="true">
            <i class="ki-filled ki-cross"></i>
        </button>
    </div>

    {{-- Body --}}
    <div class="kt-modal-body p-0 pb-5">

        @if ($hasResults && count($tabs) > 0)

        {{-- Tabs --}}
        <div class="kt-tabs kt-tabs-line justify-between px-5 mb-2.5" data-kt-tabs="true">
            <div class="flex items-center gap-5">
                @foreach ($tabs as $tab)
                <button type="button"
                    wire:click="setTab('{{ $tab }}')"
                    data-kt-tab-toggle="#search_tab_{{ $tab }}"
                    class="kt-tab-toggle py-5 {{ $tab === $activeTab ? 'active' : '' }}">
                    @if ($tab === 'operations') Opérations @endif
                    @if ($tab === 'customers') Clients & Prospects @endif
                    @if ($tab === 'contacts') Contacts @endif
                    @if ($tab === 'medias') Médias @endif
                    <span class="kt-badge kt-badge-xs ms-1 {{ $tab === $activeTab ? 'kt-badge-primary' : 'kt-badge-mono' }}">
                        {{ $results[$tab]->count() }}
                    </span>
                </button>
                @endforeach
            </div>
        </div>

        {{-- Panels --}}
        <div class="kt-scrollable-y-auto" data-kt-scrollable="true" data-kt-scrollable-max-height="auto" data-kt-scrollable-offset="300px">

            @if (!empty($results['operations']) && $results['operations']->isNotEmpty())
            <div id="search_tab_operations" class="{{ $activeTab !== 'operations' ? 'hidden' : '' }}">
                @include('livewire.back.layouts.shared.modals.partials.operations-list', [
                    'operations'   => $results['operations'],
                    'statusColors' => $statusColors,
                ])
            </div>
            @endif

            @if (!empty($results['customers']) && $results['customers']->isNotEmpty())
            <div id="search_tab_customers" class="{{ $activeTab !== 'customers' ? 'hidden' : '' }}">
                @include('livewire.back.layouts.shared.modals.partials.customers-list', [
                    'customers' => $results['customers'],
                ])
            </div>
            @endif

            @if (!empty($results['contacts']) && $results['contacts']->isNotEmpty())
            <div id="search_tab_contacts" class="{{ $activeTab !== 'contacts' ? 'hidden' : '' }}">
                @include('livewire.back.layouts.shared.modals.partials.contacts-list', [
                    'contacts' => $results['contacts'],
                ])
            </div>
            @endif

            @if (!empty($results['medias']) && $results['medias']->isNotEmpty())
            <div id="search_tab_medias" class="{{ $activeTab !== 'medias' ? 'hidden' : '' }}">
                @include('livewire.back.layouts.shared.modals.partials.medias-list', [
                    'medias' => $results['medias'],
                ])
            </div>
            @endif
        </div>

        @elseif (strlen(trim($query)) < 2)

        {{-- État initial --}}
        <div class="kt-scrollable-y-auto" data-kt-scrollable="true" data-kt-scrollable-max-height="auto" data-kt-scrollable-offset="200px">
            <div class="flex flex-col text-center py-9 gap-5">
                <div class="flex justify-center">
                    <img alt="" class="dark:hidden max-h-[113px]" src="{{ asset('assets/media/illustrations/33.svg') }}" />
                    <img alt="" class="light:hidden max-h-[113px]" src="{{ asset('assets/media/illustrations/33-dark.svg') }}" />
                </div>
                <div class="flex flex-col gap-1.5">
                    <h3 class="text-base font-semibold text-mono text-center">Commencez à taper...</h3>
                    <span class="text-sm font-medium text-center text-secondary-foreground">
                        Recherchez dans les opérations, clients, contacts et médias.
                    </span>
                </div>
            </div>
        </div>

        @else

        {{-- Aucun résultat --}}
        <div class="kt-scrollable-y-auto" data-kt-scrollable="true" data-kt-scrollable-max-height="auto" data-kt-scrollable-offset="200px">
            <div class="flex flex-col text-center py-9 gap-5">
                <div class="flex justify-center">
                    <img alt="" class="dark:hidden max-h-[113px]" src="{{ asset('assets/media/illustrations/33.svg') }}" />
                    <img alt="" class="light:hidden max-h-[113px]" src="{{ asset('assets/media/illustrations/33-dark.svg') }}" />
                </div>
                <div class="flex flex-col gap-1.5">
                    <h3 class="text-base font-semibold text-mono text-center">Aucun résultat</h3>
                    <span class="text-sm font-medium text-center text-secondary-foreground">
                        Aucun résultat pour « {{ $query }} »
                    </span>
                </div>
            </div>
        </div>

        @endif

    </div>
</div>