@extends('back.layout.app')
@section('title', config('app.name') . ' - Contacts')

@php $breadcrumb = 'crm.contacts'; @endphp

@section('content')

<div class="kt-container-fixed">
    <div class="flex flex-wrap items-center lg:items-end justify-between gap-5 pb-7.5">
        <div class="flex flex-col justify-center gap-2">
            <h1 class="text-xl font-medium leading-none text-mono">Contacts</h1>
            <div class="flex items-center gap-2 text-sm font-normal text-secondary-foreground">
                {{ $clientContacts->count() + $prospectContacts->count() + $mediaContacts->count() }} contact(s) au total
            </div>
        </div>
    </div>
</div>

<div class="kt-container-fixed flex flex-col gap-5">

    {{-- ===== ONGLETS ===== --}}
    <div class="kt-tabs kt-tabs-line" data-kt-tabs="true">
        <button class="kt-tab-toggle active py-3 flex items-center gap-2"
            data-kt-tab-toggle="#tab_contacts_clients">
            <i class="ki-outline ki-user-tick text-base"></i>
            Clients
            <span class="kt-badge kt-badge-xs kt-badge-primary">{{ $clientContacts->count() }}</span>
        </button>
        <button class="kt-tab-toggle py-3 flex items-center gap-2"
            data-kt-tab-toggle="#tab_contacts_prospects">
            <i class="ki-outline ki-user text-base"></i>
            Prospects
            <span class="kt-badge kt-badge-xs kt-badge-warning">{{ $prospectContacts->count() }}</span>
        </button>
        <button class="kt-tab-toggle py-3 flex items-center gap-2"
            data-kt-tab-toggle="#tab_contacts_medias">
            <i class="ki-outline ki-notepad text-base"></i>
            Médias
            <span class="kt-badge kt-badge-xs kt-badge-info">{{ $mediaContacts->count() }}</span>
        </button>
    </div>

    {{-- ===== ONGLET CLIENTS ===== --}}
    <div id="tab_contacts_clients"
        x-data="{ c: { id:'', firstname:'', lastname:'', email:'', phone:'', job:'' } }">

        <div class="kt-card">
            <div class="kt-card-header min-h-14">
                <input type="text" placeholder="{{ __('ui.datatable.search') }}" class="kt-input sm:w-48"
                    data-kt-datatable-search="#dt_contacts_clients" />
                <div class="ms-auto">
                    @can('export-contacts')
                    <a href="{{ route('admin.crm.contacts.export.clients') }}">
                        <button type="button" class="kt-btn kt-btn-outline text-green-600">
                            <i class="ki-outline ki-exit-down text-green-600"></i>
                            Export Excel
                        </button>
                    </a>
                    @endcan
                </div>
            </div>

            <div id="dt_contacts_clients" class="kt-card-table"
                data-kt-datatable="true"
                data-kt-datatable-page-size="20"
                data-kt-datatable-state-save="false"
                data-kt-datatable-info="{{ __('ui.datatable.info') }}"
                data-kt-datatable-info-empty="{{ __('ui.datatable.info_empty') }}">
                <div class="kt-table-wrapper kt-scrollable">
                    <table class="kt-table" data-kt-datatable-table="true">
                        <thead>
                            <tr>
                                <th scope="col" class="w-[220px]" data-kt-datatable-column="contact">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Contact</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-52" data-kt-datatable-column="email">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Email</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-36" data-kt-datatable-column="phone">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Téléphone</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-44" data-kt-datatable-column="customer">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Client</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-20" data-kt-datatable-column="actions"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($clientContacts as $contact)
                            <tr>
                                <td data-kt-datatable-value="{{ $contact->lastname }} {{ $contact->firstname }}">
                                    <div class="flex flex-col gap-0.5">
                                        <div class="flex items-center gap-2">
                                            <span class="text-[13px] font-medium text-mono">{{ $contact->firstname }} {{ $contact->lastname }}</span>
                                            @if ($contact->user_id)
                                                <span class="kt-badge kt-badge-xs kt-badge-success">Accès portail</span>
                                            @endif
                                        </div>
                                        @if ($contact->job)
                                            <span class="text-xs text-gray-400">{{ $contact->job }}</span>
                                        @endif
                                    </div>
                                </td>
                                <td data-kt-datatable-value="{{ $contact->email }}">
                                    @if ($contact->email)
                                        <a href="mailto:{{ $contact->email }}" class="text-xs text-primary hover:underline">{{ $contact->email }}</a>
                                    @else
                                        <span class="text-xs text-secondary-foreground">—</span>
                                    @endif
                                </td>
                                <td data-kt-datatable-value="{{ $contact->phone }}">
                                    <span class="text-xs text-secondary-foreground font-semibold uppercase">{{ $contact->phone ?: '—' }}</span>
                                </td>
                                <td data-kt-datatable-value="{{ $contact->customer?->name }}">
                                    @if ($contact->customer)
                                        <a href="{{ route('admin.crm.clients.show', $contact->customer) }}" class="kt-badge kt-badge-xs kt-badge-outline kt-badge-primary hover:opacity-80">{{ $contact->customer->name }}</a>
                                    @else
                                        <span class="text-xs text-secondary-foreground">—</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <span class="inline-flex gap-2">
                                        @can('edit-contacts')
                                        <button type="button"
                                            class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                            @click="c = { id: '{{ $contact->id }}', firstname: '{{ addslashes($contact->firstname) }}', lastname: '{{ addslashes($contact->lastname) }}', email: '{{ $contact->email }}', phone: '{{ $contact->phone }}', job: '{{ addslashes($contact->job) }}' }; $nextTick(() => KTDrawer.getInstance(document.querySelector('#drawer_edit_customer_contact'))?.show())"
                                            data-kt-tooltip="#tt_edit_cc_{{ $contact->id }}"
                                            data-kt-tooltip-placement="bottom">
                                            <i class="ki-outline ki-pencil text-primary"></i>
                                        </button>
                                        <div id="tt_edit_cc_{{ $contact->id }}" class="kt-tooltip">Modifier</div>
                                        @endcan
                                        @if ($contact->user_id)
                                        @can('revoke-portal')
                                        <button type="button"
                                            class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline hover:text-destructive hover:border-destructive"
                                            data-kt-modal-toggle="#modal_confirm_portal"
                                            data-confirm-url="{{ route('admin.crm.customer-contacts.portal.revoke', $contact) }}"
                                            data-confirm-name="{{ $contact->firstname }} {{ $contact->lastname }}"
                                            data-confirm-method="DELETE"
                                            data-kt-tooltip="#tt_revoke_cc_{{ $contact->id }}"
                                            data-kt-tooltip-placement="bottom">
                                            <i class="ki-outline ki-shield-cross text-destructive"></i>
                                        </button>
                                        <div id="tt_revoke_cc_{{ $contact->id }}" class="kt-tooltip">Retirer l'accès portail</div>
                                        @endcan
                                        @endif
                                        @can('edit-contacts')
                                        <button type="button"
                                            class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline hover:text-destructive hover:border-destructive"
                                            data-kt-modal-toggle="#modal_confirm_delete"
                                            data-confirm-url="{{ route('admin.crm.customer-contacts.destroy', $contact) }}"
                                            data-confirm-name="{{ $contact->firstname }} {{ $contact->lastname }}"
                                            data-kt-tooltip="#tt_del_cc_{{ $contact->id }}"
                                            data-kt-tooltip-placement="bottom">
                                            <i class="ki-outline ki-trash text-destructive"></i>
                                        </button>
                                        <div id="tt_del_cc_{{ $contact->id }}" class="kt-tooltip">Supprimer</div>
                                        @endcan
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="kt-datatable-toolbar">
                    <div class="kt-datatable-length">
                        {{ __('ui.datatable.show') }}<select class="kt-select kt-select-sm w-16" name="perpage"
                            data-kt-datatable-size="true"></select>{{ __('ui.datatable.per_page') }}
                    </div>
                    <div class="kt-datatable-info">
                        <span data-kt-datatable-info="true"></span>
                        <div class="kt-datatable-pagination" data-kt-datatable-pagination="true"></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Drawer édition contact client --}}
        <div id="drawer_edit_customer_contact"
            class="kt-drawer kt-drawer-end hidden w-full max-w-[500px]"
            data-kt-drawer="true">
            <div class="kt-drawer-header">
                <h3 class="kt-drawer-title">Modifier le contact</h3>
                <button class="kt-drawer-close" data-kt-drawer-dismiss="#drawer_edit_customer_contact">
                    <i class="ki-outline ki-cross text-lg"></i>
                </button>
            </div>
            <div class="kt-drawer-content kt-scrollable p-5">
                <form id="form_edit_customer_contact" method="POST"
                    x-bind:action="`{{ url('admin/crm/customer-contacts') }}/${c.id}`"
                    class="flex flex-col gap-5">
                    @csrf
                    @method('PUT')
                    <div class="grid grid-cols-2 gap-4">
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">Prénom</label>
                            <input name="firstname" type="text" class="kt-input" x-model="c.firstname" autocomplete="off">
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">Nom</label>
                            <input name="lastname" type="text" class="kt-input" x-model="c.lastname" autocomplete="off">
                        </div>
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Email</label>
                        <input name="email" type="email" class="kt-input" x-model="c.email" autocomplete="off">
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Téléphone</label>
                        <input name="phone" type="tel" class="kt-input" x-model="c.phone" autocomplete="off">
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Poste / Fonction</label>
                        <input name="job" type="text" class="kt-input" x-model="c.job" autocomplete="off">
                    </div>
                </form>
            </div>
            <div class="kt-drawer-footer justify-end gap-3">
                <button type="button" class="kt-btn kt-btn-ghost kt-btn-destructive"
                    data-kt-drawer-dismiss="#drawer_edit_customer_contact">
                    {{ __('ui.actions.cancel') }}
                </button>
                <x-ui.loading-button type="submit" form="form_edit_customer_contact"
                    class="kt-btn-primary" loadingText="{{ __('ui.states.saving') }}">
                    {{ __('ui.actions.save') }}
                </x-ui.loading-button>
            </div>
        </div>
    </div>

    {{-- ===== ONGLET PROSPECTS ===== --}}
    <div id="tab_contacts_prospects" class="hidden"
        x-data="{ c: { id:'', firstname:'', lastname:'', email:'', phone:'', job:'' } }">

        <div class="kt-card">
            <div class="kt-card-header min-h-14">
                <input type="text" placeholder="{{ __('ui.datatable.search') }}" class="kt-input sm:w-48"
                    data-kt-datatable-search="#dt_contacts_prospects" />
                <div class="ms-auto">
                    @can('export-contacts')
                    <a href="{{ route('admin.crm.contacts.export.prospects') }}">
                        <button type="button" class="kt-btn kt-btn-outline text-green-600">
                            <i class="ki-outline ki-exit-down text-green-600"></i>
                            Export Excel
                        </button>
                    </a>
                    @endcan
                </div>
            </div>

            <div id="dt_contacts_prospects" class="kt-card-table"
                data-kt-datatable="true"
                data-kt-datatable-page-size="20"
                data-kt-datatable-state-save="false"
                data-kt-datatable-info="{{ __('ui.datatable.info') }}"
                data-kt-datatable-info-empty="{{ __('ui.datatable.info_empty') }}">
                <div class="kt-table-wrapper kt-scrollable">
                    <table class="kt-table" data-kt-datatable-table="true">
                        <thead>
                            <tr>
                                <th scope="col" class="w-[220px]" data-kt-datatable-column="contact">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Contact</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-52" data-kt-datatable-column="email">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Email</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-36" data-kt-datatable-column="phone">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Téléphone</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-44" data-kt-datatable-column="customer">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Prospect</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-20" data-kt-datatable-column="actions"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($prospectContacts as $contact)
                            <tr>
                                <td data-kt-datatable-value="{{ $contact->lastname }} {{ $contact->firstname }}">
                                    <div class="flex flex-col gap-0.5">
                                        <div class="flex items-center gap-2">
                                            <span class="text-[13px] font-medium text-mono">{{ $contact->firstname }} {{ $contact->lastname }}</span>
                                            @if ($contact->user_id)
                                                <span class="kt-badge kt-badge-xs kt-badge-success">Accès portail</span>
                                            @endif
                                        </div>
                                        @if ($contact->job)
                                            <span class="text-xs text-gray-400">{{ $contact->job }}</span>
                                        @endif
                                    </div>
                                </td>
                                <td data-kt-datatable-value="{{ $contact->email }}">
                                    @if ($contact->email)
                                        <a href="mailto:{{ $contact->email }}" class="text-xs text-primary hover:underline">{{ $contact->email }}</a>
                                    @else
                                        <span class="text-xs text-secondary-foreground">—</span>
                                    @endif
                                </td>
                                <td data-kt-datatable-value="{{ $contact->phone }}">
                                    <span class="text-xs text-secondary-foreground font-semibold uppercase">{{ $contact->phone ?: '—' }}</span>
                                </td>
                                <td data-kt-datatable-value="{{ $contact->customer?->name }}">
                                    @if ($contact->customer)
                                        <a href="{{ route('admin.crm.prospects.show', $contact->customer) }}" class="kt-badge kt-badge-xs kt-badge-outline kt-badge-warning hover:opacity-80">{{ $contact->customer->name }}</a>
                                    @else
                                        <span class="text-xs text-secondary-foreground">—</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    @can('edit-contacts')
                                    <span class="inline-flex gap-2">
                                        <button type="button"
                                            class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                            @click="c = { id: '{{ $contact->id }}', firstname: '{{ addslashes($contact->firstname) }}', lastname: '{{ addslashes($contact->lastname) }}', email: '{{ $contact->email }}', phone: '{{ $contact->phone }}', job: '{{ addslashes($contact->job) }}' }; $nextTick(() => KTDrawer.getInstance(document.querySelector('#drawer_edit_prospect_contact'))?.show())"
                                            data-kt-tooltip="#tt_edit_pc_{{ $contact->id }}"
                                            data-kt-tooltip-placement="bottom">
                                            <i class="ki-outline ki-pencil text-primary"></i>
                                        </button>
                                        <div id="tt_edit_pc_{{ $contact->id }}" class="kt-tooltip">Modifier</div>
                                        <button type="button"
                                            class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline hover:text-destructive hover:border-destructive"
                                            data-kt-modal-toggle="#modal_confirm_delete"
                                            data-confirm-url="{{ route('admin.crm.customer-contacts.destroy', $contact) }}"
                                            data-confirm-name="{{ $contact->firstname }} {{ $contact->lastname }}"
                                            data-kt-tooltip="#tt_del_pc_{{ $contact->id }}"
                                            data-kt-tooltip-placement="bottom">
                                            <i class="ki-outline ki-trash text-destructive"></i>
                                        </button>
                                        <div id="tt_del_pc_{{ $contact->id }}" class="kt-tooltip">Supprimer</div>
                                    </span>
                                    @endcan
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="kt-datatable-toolbar">
                    <div class="kt-datatable-length">
                        {{ __('ui.datatable.show') }}<select class="kt-select kt-select-sm w-16" name="perpage"
                            data-kt-datatable-size="true"></select>{{ __('ui.datatable.per_page') }}
                    </div>
                    <div class="kt-datatable-info">
                        <span data-kt-datatable-info="true"></span>
                        <div class="kt-datatable-pagination" data-kt-datatable-pagination="true"></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Drawer édition contact prospect --}}
        <div id="drawer_edit_prospect_contact"
            class="kt-drawer kt-drawer-end hidden w-full max-w-[500px]"
            data-kt-drawer="true">
            <div class="kt-drawer-header">
                <h3 class="kt-drawer-title">Modifier le contact</h3>
                <button class="kt-drawer-close" data-kt-drawer-dismiss="#drawer_edit_prospect_contact">
                    <i class="ki-outline ki-cross text-lg"></i>
                </button>
            </div>
            <div class="kt-drawer-content kt-scrollable p-5">
                <form id="form_edit_prospect_contact" method="POST"
                    x-bind:action="`{{ url('admin/crm/customer-contacts') }}/${c.id}`"
                    class="flex flex-col gap-5">
                    @csrf
                    @method('PUT')
                    <div class="grid grid-cols-2 gap-4">
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">Prénom</label>
                            <input name="firstname" type="text" class="kt-input" x-model="c.firstname" autocomplete="off">
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">Nom</label>
                            <input name="lastname" type="text" class="kt-input" x-model="c.lastname" autocomplete="off">
                        </div>
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Email</label>
                        <input name="email" type="email" class="kt-input" x-model="c.email" autocomplete="off">
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Téléphone</label>
                        <input name="phone" type="tel" class="kt-input" x-model="c.phone" autocomplete="off">
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Poste / Fonction</label>
                        <input name="job" type="text" class="kt-input" x-model="c.job" autocomplete="off">
                    </div>
                </form>
            </div>
            <div class="kt-drawer-footer justify-end gap-3">
                <button type="button" class="kt-btn kt-btn-ghost kt-btn-destructive"
                    data-kt-drawer-dismiss="#drawer_edit_prospect_contact">
                    {{ __('ui.actions.cancel') }}
                </button>
                <x-ui.loading-button type="submit" form="form_edit_prospect_contact"
                    class="kt-btn-primary" loadingText="{{ __('ui.states.saving') }}">
                    {{ __('ui.actions.save') }}
                </x-ui.loading-button>
            </div>
        </div>
    </div>

    {{-- ===== ONGLET MÉDIAS ===== --}}
    <div id="tab_contacts_medias" class="hidden"
        x-data="{ c: { id:'', firstname:'', lastname:'', email:'', phone:'', gsm:'', job:'' } }">

        <div class="kt-card">
            <div class="kt-card-header min-h-14">
                <input type="text" placeholder="{{ __('ui.datatable.search') }}" class="kt-input sm:w-48"
                    data-kt-datatable-search="#dt_contacts_medias" />
                <div class="ms-auto">
                    @can('export-contacts')
                    <a href="{{ route('admin.crm.contacts.export.medias') }}">
                        <button type="button" class="kt-btn kt-btn-outline text-green-600">
                            <i class="ki-outline ki-exit-down text-green-600"></i>
                            Export Excel
                        </button>
                    </a>
                    @endcan
                </div>
            </div>

            <div id="dt_contacts_medias" class="kt-card-table"
                data-kt-datatable="true"
                data-kt-datatable-page-size="20"
                data-kt-datatable-state-save="false"
                data-kt-datatable-info="{{ __('ui.datatable.info') }}"
                data-kt-datatable-info-empty="{{ __('ui.datatable.info_empty') }}">
                <div class="kt-table-wrapper kt-scrollable">
                    <table class="kt-table" data-kt-datatable-table="true">
                        <thead>
                            <tr>
                                <th scope="col" class="w-[220px]" data-kt-datatable-column="contact">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Contact</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-48" data-kt-datatable-column="email">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Email</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-32" data-kt-datatable-column="phone">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Tél.</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-32" data-kt-datatable-column="gsm">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Mobile</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" data-kt-datatable-column="medias">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Médias</span></span>
                                </th>
                                <th scope="col" class="w-20" data-kt-datatable-column="actions"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($mediaContacts as $contact)
                            @php $mediasStr = $contact->medias->pluck('name')->join(', '); @endphp
                            <tr>
                                <td data-kt-datatable-value="{{ $contact->lastname }} {{ $contact->firstname }}">
                                    <div class="flex flex-col">
                                        <span class="text-[13px] font-medium text-mono">{{ $contact->firstname }} {{ $contact->lastname }}</span>
                                        @if ($contact->job)
                                            <span class="text-xs text-gray-400">{{ $contact->job }}</span>
                                        @endif
                                    </div>
                                </td>
                                <td data-kt-datatable-value="{{ $contact->email }}">
                                    @if ($contact->email)
                                        <a href="mailto:{{ $contact->email }}" class="text-xs text-primary hover:underline">{{ $contact->email }}</a>
                                    @else
                                        <span class="text-xs text-secondary-foreground">—</span>
                                    @endif
                                </td>
                                <td data-kt-datatable-value="{{ $contact->phone }}">
                                    <span class="text-xs text-secondary-foreground font-semibold uppercase">{{ $contact->phone ?: '—' }}</span>
                                </td>
                                <td data-kt-datatable-value="{{ $contact->gsm }}">
                                    <span class="text-xs text-secondary-foreground font-semibold uppercase">{{ $contact->gsm ?: '—' }}</span>
                                </td>
                                <td data-kt-datatable-value="{{ $mediasStr }}">
                                    <div class="flex flex-wrap gap-1">
                                        @forelse ($contact->medias as $media)
                                            <a href="{{ route('admin.crm.media.show', $media) }}" class="kt-badge kt-badge-xs kt-badge-outline kt-badge-info hover:opacity-80">{{ $media->name }}</a>
                                        @empty
                                            <span class="text-xs text-secondary-foreground">—</span>
                                        @endforelse
                                    </div>
                                </td>
                                <td class="text-end">
                                    @can('edit-contacts')
                                    <span class="inline-flex gap-2">
                                        <button type="button"
                                            class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                            @click="c = { id: '{{ $contact->id }}', firstname: '{{ addslashes($contact->firstname) }}', lastname: '{{ addslashes($contact->lastname) }}', email: '{{ $contact->email }}', phone: '{{ $contact->phone }}', gsm: '{{ $contact->gsm }}', job: '{{ addslashes($contact->job) }}' }; $nextTick(() => KTDrawer.getInstance(document.querySelector('#drawer_edit_media_contact'))?.show())"
                                            data-kt-tooltip="#tt_edit_mc_{{ $contact->id }}"
                                            data-kt-tooltip-placement="bottom">
                                            <i class="ki-outline ki-pencil text-primary"></i>
                                        </button>
                                        <div id="tt_edit_mc_{{ $contact->id }}" class="kt-tooltip">Modifier</div>
                                        <button type="button"
                                            class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline hover:text-destructive hover:border-destructive"
                                            data-kt-modal-toggle="#modal_confirm_delete"
                                            data-confirm-url="{{ route('admin.crm.contacts.destroy', $contact) }}"
                                            data-confirm-name="{{ $contact->firstname }} {{ $contact->lastname }}"
                                            data-kt-tooltip="#tt_del_mc_{{ $contact->id }}"
                                            data-kt-tooltip-placement="bottom">
                                            <i class="ki-outline ki-trash text-destructive"></i>
                                        </button>
                                        <div id="tt_del_mc_{{ $contact->id }}" class="kt-tooltip">Supprimer</div>
                                    </span>
                                    @endcan
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="kt-datatable-toolbar">
                    <div class="kt-datatable-length">
                        {{ __('ui.datatable.show') }}<select class="kt-select kt-select-sm w-16" name="perpage"
                            data-kt-datatable-size="true"></select>{{ __('ui.datatable.per_page') }}
                    </div>
                    <div class="kt-datatable-info">
                        <span data-kt-datatable-info="true"></span>
                        <div class="kt-datatable-pagination" data-kt-datatable-pagination="true"></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Drawer édition contact média --}}
        <div id="drawer_edit_media_contact"
            class="kt-drawer kt-drawer-end hidden w-full max-w-[500px]"
            data-kt-drawer="true">
            <div class="kt-drawer-header">
                <h3 class="kt-drawer-title">Modifier le contact</h3>
                <button class="kt-drawer-close" data-kt-drawer-dismiss="#drawer_edit_media_contact">
                    <i class="ki-outline ki-cross text-lg"></i>
                </button>
            </div>
            <div class="kt-drawer-content kt-scrollable p-5">
                <form id="form_edit_media_contact" method="POST"
                    x-bind:action="`{{ url('admin/crm/contacts') }}/${c.id}`"
                    class="flex flex-col gap-5">
                    @csrf
                    @method('PUT')
                    <div class="grid grid-cols-2 gap-4">
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">Prénom</label>
                            <input name="firstname" type="text" class="kt-input" x-model="c.firstname" autocomplete="off">
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">Nom</label>
                            <input name="lastname" type="text" class="kt-input" x-model="c.lastname" autocomplete="off">
                        </div>
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Email</label>
                        <input name="email" type="email" class="kt-input" x-model="c.email" autocomplete="off">
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">Téléphone</label>
                            <input name="phone" type="tel" class="kt-input" x-model="c.phone" autocomplete="off">
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">Mobile</label>
                            <input name="gsm" type="tel" class="kt-input" x-model="c.gsm" autocomplete="off">
                        </div>
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Poste / Fonction</label>
                        <input name="job" type="text" class="kt-input" x-model="c.job" autocomplete="off">
                    </div>
                </form>
            </div>
            <div class="kt-drawer-footer justify-end gap-3">
                <button type="button" class="kt-btn kt-btn-ghost kt-btn-destructive"
                    data-kt-drawer-dismiss="#drawer_edit_media_contact">
                    {{ __('ui.actions.cancel') }}
                </button>
                <x-ui.loading-button type="submit" form="form_edit_media_contact"
                    class="kt-btn-primary" loadingText="{{ __('ui.states.saving') }}">
                    {{ __('ui.actions.save') }}
                </x-ui.loading-button>
            </div>
        </div>
    </div>

</div>

@endsection