@php $formId = 'send_order_' . $operation->id; @endphp

<div id="modal_send_order" class="kt-modal kt-modal-center hidden" data-kt-modal="true">
    <div class="kt-modal-content max-w-[520px] w-full">
        <div class="kt-modal-header">
            <h3 class="kt-modal-title">Envoyer le bon de commande</h3>
            <button type="button" class="kt-modal-close" aria-label="Close modal" data-kt-modal-dismiss="#modal_send_order">
                <i class="ki-outline ki-cross text-lg"></i>
            </button>
        </div>

        <form method="POST" action="{{ route('admin.operations.order.send', $operation) }}">
            @csrf
            <input type="hidden" name="_form_id" value="{{ $formId }}">
            <div class="kt-modal-body flex flex-col gap-5">

                {{-- Destinataires --}}
                <div>
                    <label class="kt-label mb-3">Destinataires <span class="text-destructive">*</span></label>

                    @if ($operation->customercontacts->isEmpty())
                        <div class="kt-alert kt-alert-light kt-alert-warning kt-alert-sm">
                            <div class="kt-alert-title">Aucun contact associé à cette opération.</div>
                        </div>
                    @else
                        <div class="flex flex-col gap-2">
                            @foreach ($operation->customercontacts as $contact)
                            <label class="flex items-center gap-3 p-3 rounded-lg border border-input hover:bg-accent/30 cursor-pointer
                                {{ !$contact->email ? 'opacity-50' : '' }}">
                                <input type="checkbox"
                                    name="contacts[]"
                                    value="{{ $contact->id }}"
                                    class="kt-checkbox"
                                    {{ in_array($contact->id, old('contacts', [])) ? 'checked' : '' }}
                                    {{ !$contact->email ? 'disabled' : '' }}>
                                <div class="flex flex-col gap-0.5">
                                    <span class="text-sm font-medium text-mono">
                                        {{ $contact->firstname }} {{ $contact->lastname }}
                                    </span>
                                    @if ($contact->email)
                                        <span class="text-xs text-secondary-foreground">{{ $contact->email }}</span>
                                    @else
                                        <span class="text-xs text-destructive">Pas d'adresse email</span>
                                    @endif
                                </div>
                            </label>
                            @endforeach
                        </div>
                        @error('contacts')
                            <span class="text-xs text-destructive mt-1 block">{{ $message }}</span>
                        @enderror
                    @endif
                </div>

                {{-- Message --}}
                <div>
                    <label class="kt-label mb-2">Message <span class="text-destructive">*</span></label>
                    <div class="px-3 py-2 text-sm text-secondary-foreground bg-muted/50 border border-input border-b-0 rounded-t-lg">
                        Bonjour [Prénom], <span class="text-xs italic">(ajouté automatiquement)</span>
                    </div>
                    <textarea name="message" rows="5"
                        class="kt-textarea w-full rounded-t-none @error('message') border-destructive @enderror"
                        placeholder="Veuillez trouver ci-joint votre bon de commande...">{{ old('message') }}</textarea>
                    @error('message')
                        <span class="text-xs text-destructive mt-1 block">{{ $message }}</span>
                    @else
                        <span class="text-xs text-secondary-foreground mt-1">Le bon de commande sera joint en pièce jointe.</span>
                    @enderror
                </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_send_order">
                    {{ __('ui.actions.cancel') }}
                </button>
                <x-ui.loading-button type="submit" class="kt-btn-primary" loadingText="Envoi en cours...">
                    <i class="ki-outline ki-paper-plane me-1"></i>
                    Envoyer
                </x-ui.loading-button>
            </div>
        </form>
    </div>
</div>

@if ($errors->any() && old('_form_id') === $formId)
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        KTModal.getInstance(document.querySelector('#modal_send_order')).show();
    });
</script>
@endpush
@endif