@extends('back.layout.app')
@section('title', config('app.name') . ' - ' . $customer->name)

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

@push('styles')
<style>
.channel-stats-bg { background-image: url("{{ asset('assets/media/images/2600x1200/bg-3.png') }}"); background-size: cover; background-position: center; }
.dark .channel-stats-bg { background-image: url("{{ asset('assets/media/images/2600x1200/bg-3-dark.png') }}"); }
</style>
@endpush

@section('content')

<div class="kt-container-fixed">
    <div class="flex flex-wrap items-center justify-between gap-5 pb-7.5">
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.crm.clients') }}" class="kt-btn kt-btn-sm kt-btn-icon kt-btn-ghost">
                <i class="ki-outline ki-arrow-left"></i>
            </a>
            <div>
                <h1 class="text-xl font-medium leading-none text-mono">{{ $customer->name }}</h1>
                <span class="kt-badge kt-badge-sm kt-badge-success kt-badge-outline">Client</span>
            </div>
        </div>
        @can('edit-clients')
        <div class="flex items-center gap-2">
            <button type="button"
                class="kt-btn kt-btn-sm kt-btn-outline"
                data-kt-drawer-toggle="#drawer_edit_client">
                <i class="ki-outline ki-pencil text-primary"></i>
                Modifier
            </button>
        </div>
        @endcan
    </div>
</div>

<div class="kt-container-fixed">
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-5 lg:gap-7.5">

        {{-- ====== COLONNE GAUCHE ====== --}}
        <div class="col-span-1 flex flex-col gap-5">

            {{-- Carte contacts --}}
            <div class="kt-card">
                <div class="kt-card-header">
                    <div class="kt-card-heading">
                        <h2 class="kt-card-title">Contact</h2>
                    </div>
                    <div class="kt-card-toolbar">
                        @can('edit-clients')
                        <button type="button" class="kt-btn kt-btn-icon kt-btn-ghost"
                            data-kt-modal-toggle="#modal_create_contact">
                            <i class="ki-outline ki-plus-circle"></i>
                        </button>
                        @endcan
                    </div>
                </div>
                <div class="kt-card-content pb-4">
                    @if ($customer->contact->isEmpty())
                    <div class="kt-alert kt-alert-light kt-alert-primary kt-alert-sm">
                        <div class="kt-alert-title">Aucun contact associé.</div>
                    </div>
                    @else
                    <div class="grid gap-2.5">
                        @foreach ($customer->contact as $contact)
                        <div class="flex items-center gap-3">
                            <div class="flex items-center grow gap-2.5">
                                <div class="flex flex-col">
                                    <div class="text-sm font-semibold text-dark leading-none mb-2 flex items-center gap-2">
                                        {{ $contact->firstname }} {{ $contact->lastname }}
                                        @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="kt-badge kt-badge-xs kt-badge-outline kt-badge-info rounded-full mb-2 self-start">{{
                                        $contact->job }}</span>
                                    @endif
                                    @if ($contact->phone)
                                    <span class="text-xs text-secondary-foreground mb-1">{{ $contact->phone }}</span>
                                    @endif
                                    @if ($contact->email)
                                    <a href="mailto:{{ $contact->email }}" class="text-xs text-primary">{{
                                        $contact->email }}</a>
                                    @endif
                                </div>
                            </div>
                            <div class="kt-menu" data-kt-menu="true">
                                <div class="kt-menu-item kt-menu-item-dropdown" data-kt-menu-item-offset="0, 10px"
                                    data-kt-menu-item-placement="bottom-end"
                                    data-kt-menu-item-placement-rtl="bottom-start" data-kt-menu-item-toggle="dropdown"
                                    data-kt-menu-item-trigger="click">
                                    <button class="kt-menu-toggle kt-btn kt-btn-sm kt-btn-icon kt-btn-outline">
                                        <i class="ki-filled ki-dots-vertical text-lg"></i>
                                    </button>
                                    <div class="kt-menu-dropdown kt-menu-default w-full max-w-[200px]"
                                        data-kt-menu-dismiss="true">
                                        @can('edit-contacts')
                                        <div class="kt-menu-item">
                                            <button type="button" class="kt-menu-link w-full text-start"
                                                data-kt-modal-toggle="#modal_edit_contact_{{ $contact->id }}">
                                                <span class="kt-menu-icon"><i class="ki-outline ki-pencil text-primary"></i></span>
                                                <span class="kt-menu-title">Modifier</span>
                                            </button>
                                        </div>
                                        @endcan
                                        @if (!$contact->user_id)
                                        @can('grant-portal')
                                        <div class="kt-menu-item">
                                            <button type="button" class="kt-menu-link w-full text-start"
                                                data-kt-modal-toggle="#modal_confirm_portal"
                                                data-confirm-url="{{ route('admin.crm.customer-contacts.portal.grant', $contact) }}"
                                                data-confirm-name="{{ $contact->firstname }} {{ $contact->lastname }}"
                                                data-confirm-method="POST">
                                                <span class="kt-menu-icon"><i class="ki-outline ki-shield-tick text-success"></i></span>
                                                <span class="kt-menu-title">Donner accès portail</span>
                                            </button>
                                        </div>
                                        @endcan
                                        @else
                                        @can('revoke-portal')
                                        <div class="kt-menu-item">
                                            <button type="button" class="kt-menu-link w-full text-start"
                                                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">
                                                <span class="kt-menu-icon"><i class="ki-outline ki-shield-cross text-destructive"></i></span>
                                                <span class="kt-menu-title text-destructive">Retirer accès portail</span>
                                            </button>
                                        </div>
                                        @endcan
                                        @endif
                                        @can('edit-clients')
                                        <div class="kt-menu-item">
                                            <button type="button" class="kt-menu-link w-full text-start"
                                                data-kt-modal-toggle="#modal_confirm_delete"
                                                data-confirm-url="{{ route('admin.crm.customer-contacts.destroy', $contact) }}"
                                                data-confirm-name="{{ $contact->firstname }} {{ $contact->lastname }}">
                                                <span class="kt-menu-icon"><i
                                                        class="ki-outline ki-trash text-destructive"></i></span>
                                                <span class="kt-menu-title text-destructive">Supprimer</span>
                                            </button>
                                        </div>
                                        @endcan
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if (!$loop->last)
                        <div class="border-t border-input border-dashed mb-2"></div>
                        @endif
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>

            {{-- Carte facturation --}}
            <div class="kt-card">
                <div class="kt-card-header">
                    <div class="kt-card-heading">
                        <h2 class="kt-card-title">Informations Facturation</h2>
                    </div>
                    @can('edit-clients')
                    <div class="kt-card-toolbar">
                        <button type="button" class="kt-btn kt-btn-icon kt-btn-ghost"
                            data-kt-drawer-toggle="#drawer_edit_facturation" data-kt-tooltip="#tt_edit_facturation"
                            data-kt-tooltip-placement="bottom">
                            <i class="ki-outline ki-pencil text-primary"></i>
                        </button>
                        <div id="tt_edit_facturation" class="kt-tooltip">Modifier</div>
                    </div>
                    @endcan
                </div>
                <div class="kt-card-content pb-4 flex flex-col gap-4">

                    {{-- Nom & Adresse --}}
                    <div class="flex flex-col gap-1">
                        <span class="text-sm font-semibold text-primary">Nom &amp; Adresse</span>
                        <div class="flex flex-col text-sm text-secondary-foreground mt-1 gap-0.5">
                            @if ($customer->billing_name)
                            <span class="font-semibold text-mono">{{ $customer->billing_name }}</span>
                            @endif
                            @if ($customer->billing_adress_1)
                            <span>{{ $customer->billing_adress_1 }}@if($customer->billing_adress_2)@endif</span>
                            @endif
                            @if ($customer->billing_adress_2)
                            <span>{{ $customer->billing_adress_2 }}</span>
                            @endif
                            @if ($customer->billing_zipcode || $customer->billing_city)
                            <span>{{ $customer->billing_zipcode }} {{ $customer->billing_city }}</span>
                            @endif
                            @if ($customer->billing_country)
                            <span>{{ $customer->billing_country }}</span>
                            @endif
                            @if (!$customer->billing_name && !$customer->billing_adress_1)
                            <span class="text-xs italic">n/a</span>
                            @endif
                        </div>
                    </div>

                    <div class="border-t border-input border-dashed"></div>

                    {{-- Contact --}}
                    <div class="flex flex-col gap-1">
                        <span class="text-sm font-semibold text-primary">Contact</span>
                        <div class="flex flex-col text-sm text-secondary-foreground mt-1 gap-0.5">
                            @if ($customer->billing_contact)
                            <span>{{ $customer->billing_contact }}</span>
                            @endif
                            @if ($customer->billing_phone)
                            <span>{{ $customer->billing_phone }}</span>
                            @endif
                            @if ($customer->billing_email)
                            <a href="mailto:{{ $customer->billing_email }}"
                                class="text-xs text-primary hover:underline">{{ $customer->billing_email }}</a>
                            @endif
                            @if (!$customer->billing_contact && !$customer->billing_phone && !$customer->billing_email)
                            <span class="text-xs italic">n/a</span>
                            @endif
                        </div>
                    </div>

                    <div class="border-t border-input border-dashed"></div>

                    {{-- Légal --}}
                    <div class="flex flex-col gap-1">
                        <span class="text-sm font-semibold text-primary">Légal</span>
                        <div class="mt-1">
                            <div class="flex items-center justify-between flex-wrap my-2.5 gap-2">
                                <span class="text-xs text-secondary-foreground uppercase font-semibold">TVA
                                    Intracommunautaire :</span>
                                @if ($customer->vat_number)
                                <span class="kt-badge kt-badge-xs kt-badge-outline">{{ $customer->vat_number }}</span>
                                @else
                                <span class="text-xs text-secondary-foreground">n/a</span>
                                @endif
                            </div>
                            <div class="border-t border-input border-dashed mb-3.5"></div>

                            <div class="flex items-center justify-between flex-wrap my-2.5 gap-2">
                                <span class="text-xs text-secondary-foreground uppercase font-semibold">SIREN/SIRET
                                    :</span>
                                @if ($customer->siren)
                                <span class="kt-badge kt-badge-xs kt-badge-outline">{{ $customer->siren }}</span>
                                @else
                                <span class="text-xs text-secondary-foreground">n/a</span>
                                @endif
                            </div>
                            <div class="border-t border-input border-dashed mb-3.5"></div>

                            <div class="flex items-center justify-between flex-wrap my-2.5 gap-2">
                                <span class="text-xs text-secondary-foreground uppercase font-semibold">RCS :</span>
                                @if ($customer->rcs)
                                <span class="kt-badge kt-badge-xs kt-badge-outline">{{ $customer->rcs }}</span>
                                @else
                                <span class="text-xs text-secondary-foreground">n/a</span>
                                @endif
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>

        {{-- ====== COLONNE DROITE ====== --}}
        <div class="xl:col-span-2 flex flex-col gap-5">

            {{-- Widgets --}}
            <div class="grid grid-cols-3 gap-5">
                <div class="kt-card">
                    <div class="flex flex-col gap-1 p-5 channel-stats-bg rounded-xl h-full">
                        <span class="text-2xl font-semibold text-mono">{{ $customer->operations_count }}</span>
                        <span class="text-sm font-normal text-secondary-foreground">Opérations</span>
                    </div>
                </div>
                <div class="kt-card">
                    <div class="flex flex-col gap-1 p-5 channel-stats-bg rounded-xl h-full">
                        <span class="text-2xl font-semibold text-mono">{{ $customer->plan_media_proposals_count }}</span>
                        <span class="text-sm font-normal text-secondary-foreground">Plans Média</span>
                    </div>
                </div>
                <div class="kt-card">
                    <div class="flex flex-col gap-1 p-5 channel-stats-bg rounded-xl h-full">
                        <span class="text-2xl font-semibold text-mono">{{ number_format($customer->operations_sum_total_price ?? 0, 0, ',', ' ') }} €</span>
                        <span class="text-sm font-normal text-secondary-foreground">Total CA</span>
                    </div>
                </div>
            </div>

            {{-- Onglets --}}
            <div class="kt-card">
                <div class="kt-card-header border-b-0 pb-0 pt-5 px-5 flex items-end justify-between gap-4">
                    <div class="kt-tabs kt-tabs-line" data-kt-tabs="true">
                        <button class="kt-tab-toggle active py-3 font-medium" data-kt-tab-toggle="#tab_client_suivi">
                            Suivi &amp; Rappels
                        </button>
                        <button class="kt-tab-toggle py-3 font-medium" data-kt-tab-toggle="#tab_client_operations">
                            Opérations
                        </button>
                        <button class="kt-tab-toggle py-3 font-medium" data-kt-tab-toggle="#tab_client_planmedia">
                            Plan Média
                        </button>
                    </div>

                    {{-- Quick actions --}}
                    <div class="kt-menu pb-3" data-kt-menu="true">
                        <div class="kt-menu-item kt-menu-item-dropdown" data-kt-menu-item-offset="0, 10px"
                            data-kt-menu-item-placement="bottom-end" data-kt-menu-item-toggle="dropdown"
                            data-kt-menu-item-trigger="click">
                            <button class="kt-menu-toggle kt-btn kt-btn-sm kt-btn-outline">
                                Action
                                <i class="ki-outline ki-down text-xs"></i>
                            </button>
                            <div class="kt-menu-dropdown kt-menu-default w-[185px]" data-kt-menu-dismiss="true">
                                <div class="kt-menu-item">
                                    <button type="button" class="kt-menu-link w-full text-start" data-kt-modal-toggle="#modal_add_reminder">
                                        <span class="kt-menu-title">Créer un rappel</span>
                                    </button>
                                </div>
                                <div class="kt-menu-item">
                                    <button type="button" class="kt-menu-link w-full text-start" data-kt-modal-toggle="#modal_add_tracking">
                                        <span class="kt-menu-title">Écrire une note</span>
                                    </button>
                                </div>
                                <div class="kt-menu-item">
                                    <a href="{{ route('admin.operations.create', ['customer_id' => $customer->id]) }}"
                                        class="kt-menu-link w-full text-start">
                                        <span class="kt-menu-title">Créer une opération</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Suivi & Rappels --}}
                <div id="tab_client_suivi" class="flex flex-col gap-5 p-5">

                    @if ($timeline->isEmpty())
                        <div class="kt-alert kt-alert-light kt-alert-info kt-alert-sm">
                            <div class="kt-alert-title">Aucune activité pour ce client.</div>
                        </div>
                    @else
                        <div class="flex flex-col">
                            @foreach ($timeline as $entry)
                            @php
                                $item  = $entry['item'];
                                $done  = $entry['type'] === 'reminder' && $item->is_done;
                            @endphp
                            <div class="flex items-start relative {{ $done ? 'opacity-50' : '' }}">
                                @if (!$loop->last)
                                    <div class="w-9 start-0 top-9 absolute bottom-0 rtl:-translate-x-1/2 translate-x-1/2 border-s border-s-input"></div>
                                @endif

                                <div class="flex items-center justify-center shrink-0 rounded-full bg-accent/60 border border-input size-9 text-secondary-foreground">
                                    <i class="text-base {{ $entry['type'] === 'reminder' ? 'ki-outline ki-notification text-violet-500' : 'ki-outline ki-messages text-primary' }}"></i>
                                </div>
                                <div class="ps-2.5 {{ !$loop->last ? 'mb-7' : '' }} text-base grow">
                                    <div class="flex items-start justify-between gap-2">
                                        <div class="flex flex-col gap-0.5">

                                            @if ($entry['type'] === 'reminder')
                                                <span class="text-sm font-semibold text-foreground {{ $done ? 'line-through' : '' }}">
                                                    {{ $item->note ?: 'Rappel' }}
                                                </span>
                                                <span class="text-xs text-secondary-foreground">
                                                    <span class="kt-badge kt-badge-xs {{ $done ? 'kt-badge-mono' : 'kt-badge-warning' }} me-1">{{ $item->alert_date }}</span>
                                                    @if ($done && $item->doer)
                                                        · fait par {{ $item->doer->firstname }}
                                                    @elseif ($item->owner)
                                                        · {{ $item->owner->firstname }}
                                                    @endif
                                                </span>
                                            @else
                                                <p class="text-sm text-foreground">{{ $item->comment }}</p>
                                                <span class="text-xs text-secondary-foreground">
                                                    {{ $item->created_at }}
                                                    @if ($item->user) · {{ $item->user->firstname }} @endif
                                                </span>
                                            @endif

                                        </div>

                                        <div class="flex items-center gap-1 shrink-0">
                                            @if ($entry['type'] === 'reminder' && !$done)
                                                <form method="POST" action="{{ route('admin.crm.clients.reminders.done', $item) }}">
                                                    @csrf @method('PATCH')
                                                    <button type="submit" class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                                        data-kt-tooltip="#tt_done_{{ $item->id }}" data-kt-tooltip-placement="bottom">
                                                        <i class="ki-outline ki-check"></i>
                                                    </button>
                                                    <div id="tt_done_{{ $item->id }}" class="kt-tooltip">Marquer fait</div>
                                                </form>
                                            @endif
                                            @if ($entry['type'] === 'reminder' && !$done)
                                                <button type="button" class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                                    data-kt-modal-toggle="#modal_confirm_delete"
                                                    data-confirm-url="{{ route('admin.crm.clients.reminders.destroy', $item) }}"
                                                    data-confirm-name="ce rappel du {{ $item->alert_date }}">
                                                    <i class="ki-outline ki-trash text-destructive"></i>
                                                </button>
                                            @elseif ($entry['type'] === 'tracking')
                                                <form method="POST" action="{{ route('admin.crm.clients.tracking.destroy', [$customer, $item]) }}">
                                                    @csrf @method('DELETE')
                                                    <button type="submit" class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline">
                                                        <i class="ki-outline ki-trash text-destructive"></i>
                                                    </button>
                                                </form>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @endif

                </div>

                {{-- Opérations --}}
                <div id="tab_client_operations" class="hidden">
                    @include('back.modules.crm.partials.operations-table')
                </div>

                {{-- Plan Média --}}
                <div id="tab_client_planmedia" class="hidden">
                    @include('back.modules.crm.clients.partials.tab_planmedia')
                </div>

            </div>

        </div>

    </div>
</div>

{{-- ====== DRAWER EDIT INFORMATIONS GÉNÉRALES ====== --}}
<div id="drawer_edit_client"
    class="kt-drawer kt-drawer-end hidden w-full max-w-[600px]"
    data-kt-drawer="true">
    <div class="kt-drawer-header">
        <h3 class="kt-drawer-title">Informations Générales</h3>
        <button class="kt-drawer-close" data-kt-drawer-dismiss="#drawer_edit_client">
            <i class="ki-outline ki-cross text-lg"></i>
        </button>
    </div>
    <div class="kt-drawer-content kt-scrollable p-5">
        <form id="form_edit_client" method="POST"
            action="{{ route('admin.crm.clients.update', $customer) }}"
            class="flex flex-col gap-5">
            @csrf
            @method('PUT')

            <div class="flex flex-col gap-1">
                <label class="kt-label mb-2">Nom du client <span class="text-destructive">*</span></label>
                <input name="name" type="text" class="kt-input"
                    value="{{ old('name', $customer->name) }}" autocomplete="off">
            </div>

            <div class="flex flex-col gap-1">
                <label class="kt-label mb-2">Commercial</label>
                <select name="user_id" class="kt-select" data-kt-select="true"
                    data-kt-select-placeholder="Choisissez un commercial">
                    <option value=""></option>
                    @foreach ($users as $user)
                        <option value="{{ $user->id }}" {{ $customer->user_id == $user->id ? 'selected' : '' }}>
                            {{ $user->firstname }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">Secteur Activité</label>
                    <select name="activity_id" class="kt-select" data-kt-select="true"
                        data-kt-select-placeholder="Secteur">
                        <option value=""></option>
                        @foreach ($activities as $activity)
                            <option value="{{ $activity->id }}" {{ $customer->activity_id == $activity->id ? 'selected' : '' }}>
                                {{ $activity->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">Thème</label>
                    <select name="theme_id" class="kt-select" data-kt-select="true"
                        data-kt-select-placeholder="Thème">
                        <option value=""></option>
                        @foreach ($themes as $theme)
                            <option value="{{ $theme->id }}" {{ $customer->theme_id == $theme->id ? 'selected' : '' }}>
                                {{ $theme->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="flex flex-col gap-1">
                <label class="kt-label mb-2">Adresse</label>
                <input name="adress_1" type="text" class="kt-input mb-2"
                    value="{{ old('adress_1', $customer->adress_1) }}"
                    placeholder="Adresse ligne 1" autocomplete="off">
                <input name="adress_2" type="text" class="kt-input"
                    value="{{ old('adress_2', $customer->adress_2) }}"
                    placeholder="Adresse ligne 2 (optionnel)" autocomplete="off">
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">Code Postal</label>
                    <input name="zipcode" type="text" class="kt-input"
                        value="{{ old('zipcode', $customer->zipcode) }}" autocomplete="off">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">Ville</label>
                    <input name="city" type="text" class="kt-input"
                        value="{{ old('city', $customer->city) }}" autocomplete="off">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">Pays</label>
                    <input name="country" type="text" class="kt-input"
                        value="{{ old('country', $customer->country) }}" 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"
                        value="{{ old('phone', $customer->phone) }}" autocomplete="off">
                </div>
            </div>

            <div class="flex flex-col gap-1">
                <label class="kt-label mb-2">Commentaires</label>
                <textarea name="comment" rows="4" class="kt-textarea">{{ old('comment', $customer->comment) }}</textarea>
            </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_client">
            {{ __('ui.actions.cancel') }}
        </button>
        <x-ui.loading-button type="submit" form="form_edit_client"
            class="kt-btn-primary" loadingText="{{ __('ui.states.saving') }}">
            {{ __('ui.actions.save') }}
        </x-ui.loading-button>
    </div>
</div>

{{-- ====== DRAWER EDIT FACTURATION ====== --}}
<div id="drawer_edit_facturation" class="kt-drawer kt-drawer-end hidden w-full max-w-[600px]" data-kt-drawer="true">
    <div class="kt-drawer-header">
        <h3 class="kt-drawer-title">Informations Facturation</h3>
        <button class="kt-drawer-close" data-kt-drawer-dismiss="#drawer_edit_facturation">
            <i class="ki-outline ki-cross text-lg"></i>
        </button>
    </div>
    <div class="kt-drawer-content kt-scrollable p-5">
        <form id="form_edit_facturation" method="POST" action="{{ route('admin.crm.clients.facturation', $customer) }}"
            class="flex flex-col gap-5">
            @csrf
            @method('PUT')

            <div class="flex flex-col gap-1">
                <label class="kt-label mb-2">Nom facturation</label>
                <input name="billing_name" type="text" class="kt-input"
                    value="{{ old('billing_name', $customer->billing_name) }}" autocomplete="off">
            </div>
            <div class="flex flex-col gap-1">
                <label class="kt-label mb-2">Adresse</label>
                <input name="billing_adress_1" type="text" class="kt-input mb-2"
                    value="{{ old('billing_adress_1', $customer->billing_adress_1) }}" placeholder="Adresse ligne 1"
                    autocomplete="off">
                <input name="billing_adress_2" type="text" class="kt-input"
                    value="{{ old('billing_adress_2', $customer->billing_adress_2) }}"
                    placeholder="Adresse ligne 2 (optionnel)" autocomplete="off">
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">Code Postal</label>
                    <input name="billing_zipcode" type="text" class="kt-input"
                        value="{{ old('billing_zipcode', $customer->billing_zipcode) }}" autocomplete="off">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">Ville</label>
                    <input name="billing_city" type="text" class="kt-input"
                        value="{{ old('billing_city', $customer->billing_city) }}" autocomplete="off">
                </div>
            </div>
            <div class="flex flex-col gap-1">
                <label class="kt-label mb-2">Pays</label>
                <input name="billing_country" type="text" class="kt-input"
                    value="{{ old('billing_country', $customer->billing_country) }}" autocomplete="off">
            </div>

            <div class="flex flex-col gap-1">
                <label class="kt-label mb-2">Contact facturation</label>
                <input name="billing_contact" type="text" class="kt-input"
                    value="{{ old('billing_contact', $customer->billing_contact) }}" 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="billing_phone" type="tel" class="kt-input"
                        value="{{ old('billing_phone', $customer->billing_phone) }}" autocomplete="off">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">Email</label>
                    <input name="billing_email" type="email" class="kt-input"
                        value="{{ old('billing_email', $customer->billing_email) }}" autocomplete="off">
                </div>
            </div>

            <div class="flex flex-col gap-1">
                <label class="kt-label mb-2">TVA Intracommunautaire</label>
                <input name="vat_number" type="text" class="kt-input"
                    value="{{ old('vat_number', $customer->vat_number) }}" autocomplete="off">
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">SIREN/SIRET</label>
                    <input name="siren" type="text" class="kt-input" value="{{ old('siren', $customer->siren) }}"
                        autocomplete="off">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">RCS</label>
                    <input name="rcs" type="text" class="kt-input" value="{{ old('rcs', $customer->rcs) }}"
                        autocomplete="off">
                </div>
            </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_facturation">
            {{ __('ui.actions.cancel') }}
        </button>
        <x-ui.loading-button type="submit" form="form_edit_facturation" class="kt-btn-primary"
            loadingText="{{ __('ui.states.saving') }}">
            {{ __('ui.actions.save') }}
        </x-ui.loading-button>
    </div>
</div>

{{-- ====== MODAL CRÉATION CONTACT ====== --}}
<div id="modal_create_contact" class="kt-modal kt-modal-center hidden" data-kt-modal="true">
    <div class="kt-modal-content max-w-[500px] w-full">
        <div class="kt-modal-header">
            <h3 class="kt-modal-title">Ajouter un contact</h3>
            <button type="button" class="kt-modal-close" aria-label="Close modal" data-kt-modal-dismiss="#modal_create_contact">
                <i class="ki-outline ki-cross text-lg"></i>
            </button>
        </div>
        <form method="POST" action="{{ route('admin.crm.clients.contacts.store', $customer) }}">
            @csrf
            <div class="kt-modal-body flex flex-col gap-4">
                <div class="grid grid-cols-2 gap-4">
                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Prénom <span class="text-destructive">*</span></label>
                        <input name="firstname" type="text" class="kt-input" autocomplete="off">
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Nom <span class="text-destructive">*</span></label>
                        <input name="lastname" type="text" class="kt-input" 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" 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" 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" autocomplete="off">
                </div>
            </div>
            <div class="kt-modal-footer justify-end gap-3">
                <button type="button" class="kt-btn kt-btn-ghost kt-btn-destructive"
                    data-kt-modal-dismiss="#modal_create_contact">
                    {{ __('ui.actions.cancel') }}
                </button>
                <x-ui.loading-button type="submit" class="kt-btn-primary" loadingText="{{ __('ui.states.saving') }}">
                    {{ __('ui.actions.create') }}
                </x-ui.loading-button>
            </div>
        </form>
    </div>
</div>

{{-- ====== MODALS ÉDITION CONTACTS ====== --}}
@foreach ($customer->contact as $contact)
<div id="modal_edit_contact_{{ $contact->id }}" class="kt-modal kt-modal-center hidden" data-kt-modal="true">
    <div class="kt-modal-content max-w-[500px] w-full">
        <div class="kt-modal-header">
            <h3 class="kt-modal-title">Modifier le contact</h3>
            <button class="kt-modal-close" data-kt-modal-dismiss="#modal_edit_contact_{{ $contact->id }}">
                <i class="ki-outline ki-cross text-lg"></i>
            </button>
        </div>
        <form method="POST" action="{{ route('admin.crm.customer-contacts.update', $contact) }}">
            @csrf
            @method('PUT')
            <div class="kt-modal-body flex flex-col gap-4">
                <div class="grid grid-cols-2 gap-4">
                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Prénom <span class="text-destructive">*</span></label>
                        <input name="firstname" type="text" class="kt-input"
                            value="{{ old('firstname', $contact->firstname) }}" autocomplete="off">
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Nom <span class="text-destructive">*</span></label>
                        <input name="lastname" type="text" class="kt-input"
                            value="{{ old('lastname', $contact->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" value="{{ old('email', $contact->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" value="{{ old('phone', $contact->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" value="{{ old('job', $contact->job) }}"
                        autocomplete="off">
                </div>
            </div>
            <div class="kt-modal-footer justify-end gap-3">
                <button type="button" class="kt-btn kt-btn-ghost kt-btn-destructive"
                    data-kt-modal-dismiss="#modal_edit_contact_{{ $contact->id }}">
                    {{ __('ui.actions.cancel') }}
                </button>
                <x-ui.loading-button type="submit" class="kt-btn-primary" loadingText="{{ __('ui.states.saving') }}">
                    {{ __('ui.actions.save') }}
                </x-ui.loading-button>
            </div>
        </form>
    </div>
</div>
@endforeach

{{-- ====== MODAL AJOUT RAPPEL ====== --}}
<div id="modal_add_reminder" class="kt-modal kt-modal-center hidden" data-kt-modal="true">
    <div class="kt-modal-content max-w-[480px] w-full">
        <div class="kt-modal-header">
            <h3 class="kt-modal-title">Créer un rappel</h3>
            <button type="button" class="kt-modal-close" aria-label="Close modal" data-kt-modal-dismiss="#modal_add_reminder">
                <i class="ki-outline ki-cross text-lg"></i>
            </button>
        </div>
        <form method="POST" action="{{ route('admin.crm.clients.reminders.store', $customer) }}">
            @csrf
            <div class="kt-modal-body flex flex-col gap-4">
                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">Date du rappel <span class="text-destructive">*</span></label>
                    <x-ui.date-input name="alert_date" class="w-44" :required="true" />
                </div>
                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">Message</label>
                    <input type="text" name="note" class="kt-input" autocomplete="off">
                </div>
            </div>
            <div class="kt-modal-footer justify-end gap-3">
                <button type="button" class="kt-btn kt-btn-ghost kt-btn-destructive" data-kt-modal-dismiss="#modal_add_reminder">
                    {{ __('ui.actions.cancel') }}
                </button>
                <x-ui.loading-button type="submit" class="kt-btn-primary" loadingText="{{ __('ui.states.saving') }}">
                    {{ __('ui.actions.save') }}
                </x-ui.loading-button>
            </div>
        </form>
    </div>
</div>

{{-- ====== MODAL AJOUT NOTE ====== --}}
<div id="modal_add_tracking" class="kt-modal kt-modal-center hidden" data-kt-modal="true">
    <div class="kt-modal-content max-w-[500px] w-full">
        <div class="kt-modal-header">
            <h3 class="kt-modal-title">Ajouter une note de suivi</h3>
            <button type="button" class="kt-modal-close" aria-label="Close modal" data-kt-modal-dismiss="#modal_add_tracking">
                <i class="ki-outline ki-cross text-lg"></i>
            </button>
        </div>
        <form method="POST" action="{{ route('admin.crm.clients.tracking.store', $customer) }}">
            @csrf
            <div class="kt-modal-body">
                <textarea name="comment" rows="4" class="kt-textarea w-full" placeholder="Votre note..." required></textarea>
            </div>
            <div class="kt-modal-footer justify-end gap-3">
                <button type="button" class="kt-btn kt-btn-ghost kt-btn-destructive" data-kt-modal-dismiss="#modal_add_tracking">
                    {{ __('ui.actions.cancel') }}
                </button>
                <x-ui.loading-button type="submit" class="kt-btn-primary" loadingText="{{ __('ui.states.saving') }}">
                    {{ __('ui.actions.save') }}
                </x-ui.loading-button>
            </div>
        </form>
    </div>
</div>

@endsection