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

@php $breadcrumb = 'crm.prospects'; @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.prospects') }}" 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-warning kt-badge-outline">Prospect</span>
            </div>
        </div>
        @can('edit-prospects')
        <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_prospect">
                <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 info --}}
            <div class="kt-card">
                <div class="kt-card-header">
                    <div class="kt-card-heading flex-1 min-w-0">
                        <h2 class="kt-card-title text-primary truncate">{{ $customer->name }}</h2>
                    </div>
                    <div class="kt-card-toolbar flex gap-2">
                        @can('convert-prospects')
                        <button type="button"
                            class="kt-btn kt-btn-sm kt-btn-icon kt-btn-ghost"
                            data-kt-modal-toggle="#modal_convert_prospect"
                            data-kt-tooltip="#tt_convert"
                            data-kt-tooltip-placement="bottom">
                            <i class="ki-outline ki-arrows-circle"></i>
                        </button>
                        <div id="tt_convert" class="kt-tooltip">Convertir en client</div>
                        @endcan
                    </div>
                </div>
                <div class="kt-card-content pb-4">
                    <div class="flex items-center justify-between flex-wrap my-2.5 gap-2">
                        <span class="text-xs text-secondary-foreground uppercase font-semibold">Commercial :</span>
                        @if ($customer->user)
                            <span class="kt-badge kt-badge-xs kt-badge-outline">{{ $customer->user->firstname }}</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">Secteur Activité :</span>
                        @if ($customer->activity)
                            <span class="kt-badge kt-badge-xs kt-badge-outline kt-badge-primary">{{ $customer->activity->name }}</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">Thème :</span>
                        @if ($customer->theme)
                            <span class="kt-badge kt-badge-xs kt-badge-outline kt-badge-info">{{ $customer->theme->name }}</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>

                    @if ($customer->comment)
                    <div class="flex flex-col gap-1.5 my-2.5">
                        <span class="text-xs text-secondary-foreground uppercase font-semibold">Commentaires :</span>
                        <span class="text-xs text-secondary-foreground leading-relaxed">{{ $customer->comment }}</span>
                    </div>
                    @else
                    <div class="flex items-center justify-between flex-wrap my-2.5 gap-2">
                        <span class="text-xs text-secondary-foreground uppercase font-semibold">Commentaires :</span>
                        <span class="text-xs text-secondary-foreground">n/a</span>
                    </div>
                    @endif
                </div>
            </div>

            {{-- 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-prospects')
                        <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">
                                            {{ $contact->firstname }} {{ $contact->lastname }}
                                        </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-ghost">
                                            <i class="ki-filled ki-dots-vertical text-lg"></i>
                                        </button>
                                        <div class="kt-menu-dropdown kt-menu-default w-full max-w-[175px]" 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
                                            @can('edit-prospects')
                                            <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>

        </div>

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

            {{-- Widgets --}}
            <div class="grid grid-cols-2 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">{{ 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>

            <div class="kt-card h-full">

                {{-- Tabs --}}
                <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_suivi">
                            Suivi &amp; Rappels
                        </button>
                        <button class="kt-tab-toggle py-3 font-medium"
                            data-kt-tab-toggle="#tab_propositions">
                            Propositions
                        </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>
                        </div>
                    </div>
                </div>

                {{-- Suivi & Rappels --}}
                <div id="tab_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 prospect.</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' : 'ki-outline ki-messages' }}"></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.prospects.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>
                                                <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.prospects.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.prospects.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>

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

            </div>
        </div>{{-- kt-card --}}

        </div>{{-- xl:col-span-2 --}}

    </div>
</div>

{{-- ====== MODAL CONVERSION CLIENT ====== --}}
<div id="modal_convert_prospect" class="kt-modal kt-modal-center hidden" data-kt-modal="true">
    <div class="kt-modal-content max-w-md">
        <div class="kt-modal-header">
            <h3 class="kt-modal-title">Convertir en client</h3>
            <button type="button" class="kt-modal-close" aria-label="Close modal" data-kt-modal-dismiss="#modal_convert_prospect">
                <i class="ki-outline ki-cross text-lg"></i>
            </button>
        </div>
        <div class="kt-modal-body">
            <p class="text-sm text-secondary-foreground">
                Confirmer la conversion de <strong>{{ $customer->name }}</strong> en client ?
                <br>Cette action est irréversible.
            </p>
        </div>
        <div class="kt-modal-footer justify-end gap-3">
            <button type="button" class="kt-btn kt-btn-outline"
                data-kt-modal-dismiss="#modal_convert_prospect">
                {{ __('ui.actions.cancel') }}
            </button>
            <form method="POST" action="{{ route('admin.crm.prospects.convert', $customer) }}">
                @csrf
                <button type="submit" class="kt-btn kt-btn-success">
                    Convertir
                </button>
            </form>
        </div>
    </div>
</div>

{{-- ====== DRAWER EDIT PROSPECT ====== --}}
<div id="drawer_edit_prospect"
    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">Modifier le prospect</h3>
        <button class="kt-drawer-close" data-kt-drawer-dismiss="#drawer_edit_prospect">
            <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" method="POST"
            action="{{ route('admin.crm.prospects.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 prospect <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="Choisissez un 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">Commentaire</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_prospect">
            {{ __('ui.actions.cancel') }}
        </button>
        <x-ui.loading-button type="submit" form="form_edit_prospect"
            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.prospects.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.prospects.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.prospects.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