@extends('layouts.app')

@php
    use App\Enums\OptionState;
    use App\Enums\PriceType;
    use App\Enums\SurfaceType;
    use App\Enums\TaskState;
@endphp

@section('content')

<div class="container py-3">
    <div class="row mb-4">
        <div class="col-md-8 col-sm-12">
            <h4 class="text-black-or-white">Fiche client</h4>
            <p class="txt-grey m-0 p-0">{{ $client->fullName() }}</p>
        </div>
        <div class="col-md-4 col-sm-12 d-flex justify-content-end align-items-center">
            <a href="{{ route('partenaires.mes-clients.export-pdf', $client) }}" class="btn btn-primary me-2 d-none">
                <i class="fa-regular fa-file-pdf"></i> Exporter en PDF
            </a>
            <a href="{{ route('partenaires.mes-clients') }}" class="btn btn-secondary">
                <i class="fa-regular fa-arrow-left"></i> Retour
            </a>
        </div>
    </div>

    <!-- Bloc 1 - Résumé infos clients -->
    <div class="stat-card mb-4">
        <div class="card-title mb-3 d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center">
                <i class="fa-light fa-user text-primary pe-2"></i>
                <h5 class="text-black-or-white m-0">Informations client</h5>
            </div>
            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modal-edit-client">
                <i class="fa-regular fa-edit"></i> Modifier
            </button>
        </div>
        <div class="bg-grey border-radius-10 p-4">
                        <div class="row">
                            <div class="col-md-6">
                                <ul class="list-unstyled">
                                    <li class="mb-2"><strong class="text-black-or-white">Civilité :</strong> <span class="text-primary">{{ $client->civility?->label() ?? '-' }}</span></li>
                                    <li class="mb-2"><strong class="text-black-or-white">Nom :</strong> <span class="text-primary">{{ $client->lastname ?? '-' }}</span></li>
                                    <li class="mb-2"><strong class="text-black-or-white">Prénom :</strong> <span class="text-primary">{{ $client->firstname ?? '-' }}</span></li>
                                    <li class="mb-2"><strong class="text-black-or-white">Email :</strong> <span class="text-primary">{{ $client->email ?? '-' }}</span></li>
                                    @if($client->birthdate)
                                        <li class="mb-2"><strong class="text-black-or-white">Date de naissance :</strong> <span class="text-primary">{{ $client->birthdate->format('d/m/Y') }}</span></li>
                                    @endif
                                    @if($client->birthplace)
                                        <li class="mb-2"><strong class="text-black-or-white">Lieu de naissance :</strong> <span class="text-primary">{{ $client->birthplace }}</span></li>
                                    @endif
                                    @if($client->phones && $client->phones->count() > 0)
                                        <li class="mb-2"><strong class="text-black-or-white">Téléphone :</strong>
                                            @foreach($client->phones as $phone)
                                                <div class="text-primary">{{ format_phone_display($phone->value) }} <span class="badge bg-secondary">{{ $phone->type?->label() ?? '-' }}</span></div>
                                            @endforeach
                                        </li>
                                    @endif
                                    @if($client->address)
                                        <li class="mb-2"><strong class="text-black-or-white">Adresse :</strong>
                                            <span class="text-primary">
                                                {{ $client->address->line_1 ?? '' }}
                                                @if($client->address->line_2)
                                                    <br>{{ $client->address->line_2 }}
                                                @endif
                                            </span>
                                        </li>
                                        @if($client->address->city)
                                            <li class="mb-2"><strong class="text-black-or-white">Ville :</strong>
                                                <span class="text-primary">{{ $client->address->city }}</span>
                                            </li>
                                        @endif
                                        @if($client->address->zip_code)
                                            <li class="mb-2"><strong class="text-black-or-white">Code postal :</strong>
                                                <span class="text-primary">{{ $client->address->zip_code }}</span>
                                            </li>
                                        @endif
                                    @endif
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <ul class="list-unstyled">
                                    <li class="mb-2"><strong class="text-black-or-white">Date de création du client :</strong>
                                        <span class="text-primary">{{ $clientCreationDate->format('d/m/Y') }}</span>
                                    </li>
                                    <li class="mb-2"><strong class="text-black-or-white">Statut du dernier dossier :</strong>
                                        @if($lastStatus)
                                            <span class="option_statut_{{ $lastStatus->value }}">{{ $lastStatus->label() }}</span>
                                        @else
                                            <span class="text-grey">Aucun dossier</span>
                                        @endif
                                    </li>
                                </ul>
                            </div>
                        </div>
        </div>
    </div>

    <!-- Bloc - Commentaire -->
    <div class="stat-card mb-4">
        <div class="card-title mb-3 d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center">
                <i class="fa-regular fa-comment-dots text-primary pe-2"></i>
                <h5 class="text-black-or-white m-0">Commentaire</h5>
            </div>
            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modal-edit-client-notes">
                <i class="fa-regular fa-edit"></i> Modifier
            </button>
        </div>
        <div class="bg-grey border-radius-10 p-4">
            <div class="col-md-12">
                <p class="text-black-or-white mt-2 mb-0">
                    @if($client->notes)
                        {!! nl2br(e($client->notes)) !!}
                    @else
                        <span class="text-grey">Aucun commentaire</span>
                    @endif
                </p>
            </div>
        </div>
    </div>

    <!-- Bloc 2 - Dossiers actifs -->
    <div class="stat-card mb-4">
        <div class="card-title mb-3 d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center">
                <i class="fa-light fa-folder-open text-primary pe-2"></i>
                <h5 class="text-black-or-white m-0">Dossiers actifs ({{ $dossiersActifs->count() }})</h5>
            </div>
            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modal-add-option">
                <i class="fa-regular fa-plus"></i> Ajouter une option
            </button>
        </div>
        @if($dossiersActifs->count() > 0)
            <div class="table-responsive">
                <table class="table table-hover table-clients">
                    <thead>
                        <tr>
                            <th class="text-black-or-white">Programme</th>
                            <th class="text-black-or-white">Lot</th>
                            <th class="text-black-or-white">Fiscalité associée</th>
                            <th class="text-black-or-white">Typologie</th>
                            <th class="text-black-or-white">Statut du dossier</th>
                            <th class="text-black-or-white">Date pose d'option</th>
                            <th class="text-black-or-white">Date de réservation</th>
                            <th class="text-black-or-white">Prix</th>
                            <th class="text-black-or-white">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($dossiersActifs as $option)
                            @php
                                $lot = $option->product;
                                $program = $lot ? $lot->program : null;
                                $state = $option->state;

                                // Fiscalité
                                $fiscalites = $program ? $program->fiscalites->pluck('type')->map(fn($f) => $f->label())->toArray() : [];
                                $fiscaliteLibelle = !empty($fiscalites) ? implode(', ', $fiscalites) : '-';

                                // Typologie
                                $typologie = $lot && $lot->type ? $lot->type->label() : '-';

                                // Prix
                                $prixTTC = $lot ? $lot->prices->where('type', 'prix_ttc')->first() : null;
                                $prix = $prixTTC ? number_format($prixTTC->value, 0, ',', ' ') . ' €' : '-';

                                // Date de réservation et réservation
                                $dateReservation = null;
                                $reservation = null;
                                $currentTask = null;
                                $workflowStatus = null;

                                if ($state === OptionState::CONFIRMED) {
                                    $reservation = $option->reservation;
                                    if ($reservation) {
                                        $dateReservation = $reservation->created_at;
                                        $currentTask = $reservation->task;
                                        if ($currentTask) {
                                            $workflowStatus = $currentTask->name;
                                        } else {
                                            // Récupérer la tâche courante depuis taskReservations
                                            $currentTaskReservation = $reservation->taskReservations
                                                ->where('state', TaskState::EN_COURS)
                                                ->first();
                                            if ($currentTaskReservation && $currentTaskReservation->task) {
                                                $currentTask = $currentTaskReservation->task;
                                                $workflowStatus = $currentTask->name;
                                            }
                                        }
                                    } else {
                                        $dateReservation = $option->updated_at;
                                    }
                                }
                            @endphp
                            @if($program)
                                <tr>
                                    <td class="text-black-or-white" style="font-size: 0.875rem; padding: 0.5rem 0.75rem; white-space: nowrap;">
                                        @if($program->slug)
                                            <a href="{{ route('programmes.show', $program->slug) }}" class="text-primary text-decoration-none">
                                                {{ $program->name }}
                                            </a>
                                        @else
                                            {{ $program->name }}
                                        @endif
                                    </td>
                                    <td class="text-black-or-white" style="font-size: 0.875rem; padding: 0.5rem 0.75rem; white-space: nowrap;">Lot n°{{ $lot->number ?? '-' }}</td>
                                    <td class="text-black-or-white" style="font-size: 0.875rem; padding: 0.5rem 0.75rem; white-space: nowrap;">{{ $fiscaliteLibelle }}</td>
                                    <td class="text-black-or-white" style="font-size: 0.875rem; padding: 0.5rem 0.75rem; white-space: nowrap;">{{ $typologie }}</td>
                                    <td style="font-size: 0.875rem; padding: 0.5rem 0.75rem; white-space: nowrap;">
                                        @if($state === OptionState::CONFIRMED && $workflowStatus)
                                            <span class="badge bg-warning">{{ $workflowStatus }}</span>
                                        @else
                                            <span class="option_statut_{{ $state->value }}">{{ $state->label() }}</span>
                                        @endif
                                    </td>
                                    <td class="text-black-or-white" style="font-size: 0.875rem; padding: 0.5rem 0.75rem; white-space: nowrap;">{{ $option->created_at->format('d/m/Y') }}</td>
                                    <td class="text-black-or-white" style="font-size: 0.875rem; padding: 0.5rem 0.75rem; white-space: nowrap;">{{ $dateReservation ? $dateReservation->format('d/m/Y') : '-' }}</td>
                                    <td class="text-black-or-white" style="font-size: 0.875rem; padding: 0.5rem 0.75rem; white-space: nowrap;">{{ $prix }}</td>
                                    <td>
                                        @if($state === OptionState::CONFIRMED && $reservation)
                                            <a href="{{ route('reservations.show', $reservation->token) }}" class="btn btn-sm btn-primary">
                                                <i class="fa-regular fa-eye"></i> Voir
                                            </a>
                                        @else
                                            <a href="{{ route('options.index') }}#option_{{ $option->id }}" class="btn btn-sm btn-primary">
                                                <i class="fa-regular fa-eye"></i> Voir
                                            </a>
                                        @endif
                                    </td>
                                </tr>
                            @endif
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="bg-grey border-radius-10 p-4 text-center">
                <p class="text-grey-light">Aucun dossier actif pour ce client</p>
            </div>
        @endif
    </div>

    <!-- Bloc 3 - Historique des ventes -->
    <div class="stat-card mb-4">
        <div class="card-title mb-3 d-flex align-items-center">
            <i class="fa-light fa-history text-primary pe-2"></i>
            <h5 class="text-black-or-white m-0">Historique des ventes ({{ $historiqueVentes->count() }})</h5>
        </div>
        @if($historiqueVentes->count() > 0)
            <div class="table-responsive">
                <table class="table table-hover table-clients">
                    <thead>
                        <tr>
                            <th class="text-black-or-white">Date d'archivage</th>
                            <th class="text-black-or-white">Programme</th>
                            <th class="text-black-or-white">Lot</th>
                            <th class="text-black-or-white">Statut</th>
                            <th class="text-black-or-white">Prix</th>
                            <th class="text-black-or-white">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($historiqueVentes as $option)
                            @php
                                $lot = $option->product;
                                $program = $lot ? $lot->program : null;
                                $state = $option->state;

                                // Prix
                                $prixTTC = $lot ? $lot->prices->where('type', 'prix_ttc')->first() : null;
                                $prix = $prixTTC ? number_format($prixTTC->value, 0, ',', ' ') . ' €' : '-';

                                // Date d'archivage (dernière modification)
                                $dateArchivage = $option->updated_at;
                            @endphp
                            @if($program)
                                <tr>
                                    <td class="text-black-or-white">{{ $dateArchivage->format('d/m/Y') }}</td>
                                    <td class="text-black-or-white">
                                        @if($program->slug)
                                            <a href="{{ route('programmes.show', $program->slug) }}" class="text-primary text-decoration-none">
                                                {{ $program->name }}
                                            </a>
                                        @else
                                            {{ $program->name }}
                                        @endif
                                    </td>
                                    <td class="text-black-or-white">Lot n°{{ $lot->number ?? '-' }}</td>
                                    <td>
                                        <span class="option_statut_{{ $state->value }}">{{ $state->label() }}</span>
                                    </td>
                                    <td class="text-black-or-white">{{ $prix }}</td>
                                    <td>
                                        <a href="{{ route('options.index') }}#option_{{ $option->id }}" class="btn btn-sm btn-primary">
                                            <i class="fa-regular fa-eye"></i> Voir
                                        </a>
                                    </td>
                                </tr>
                            @endif
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="bg-grey border-radius-10 p-4 text-center">
                <p class="text-grey-light">Aucun dossier archivé pour ce client</p>
            </div>
        @endif
    </div>
</div>

<!-- Modal Modifier coordonnées -->
<div class="modal fade" id="modal-edit-client" tabindex="-1" aria-labelledby="modal-edit-client-label" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-edit-client-label">Modifier informations client</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="form-edit-client">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="edit_civility" class="form-label">Civilité</label>
                            <select class="form-control ps-2" id="edit_civility" name="civility">
                                <option value="">Sélectionner</option>
                                @php $civilityValue = $client->civility?->value ?? null; @endphp
                                <option value="M" {{ $civilityValue == 'M' ? 'selected' : '' }}>Monsieur</option>
                                <option value="Mme" {{ $civilityValue == 'Mme' ? 'selected' : '' }}>Madame</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="edit_lastname" class="form-label">Nom</label>
                            <input type="text" class="form-control ps-2" id="edit_lastname" name="lastname" value="{{ $client->lastname ?? '' }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="edit_firstname" class="form-label">Prénom</label>
                            <input type="text" class="form-control ps-2" id="edit_firstname" name="firstname" value="{{ $client->firstname ?? '' }}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="edit_email" class="form-label">Email <span class="text-danger">*</span></label>
                            <input type="email" class="form-control ps-2" id="edit_email" name="email" value="{{ $client->email ?? '' }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <x-phone-inputs :phones="$client->phones ?? []" name="phones" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="edit_birthdate" class="form-label">Date de naissance</label>
                            <input type="date" class="form-control ps-2" id="edit_birthdate" name="birthdate" value="{{ $client->birthdate ? $client->birthdate->format('Y-m-d') : '' }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="edit_birthplace" class="form-label">LIEU DE NAISSANCE</label>
                            <input type="text" class="form-control ps-2" id="edit_birthplace" name="birthplace" value="{{ $client->birthplace ?? '' }}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="edit_address_line_1" class="form-label">Adresse ligne 1</label>
                            <input type="text" class="form-control ps-2" id="edit_address_line_1" name="address_line_1" value="{{ $client->address->line_1 ?? '' }}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="edit_address_line_2" class="form-label">Adresse ligne 2</label>
                            <input type="text" class="form-control ps-2" id="edit_address_line_2" name="address_line_2" value="{{ $client->address->line_2 ?? '' }}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="edit_address_zip_code" class="form-label">Code postal</label>
                            <input type="text" class="form-control ps-2" id="edit_address_zip_code" name="address_zip_code" value="{{ $client->address->zip_code ?? '' }}">
                        </div>
                        <div class="col-md-8 mb-3">
                            <label for="edit_address_city" class="form-label">Ville</label>
                            <input type="text" class="form-control ps-2" id="edit_address_city" name="address_city" value="{{ $client->address->city ?? '' }}">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Modifier commentaire -->
<div class="modal fade" id="modal-edit-client-notes" tabindex="-1" aria-labelledby="modal-edit-client-notes-label" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-edit-client-notes-label">Modifier commentaire</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="form-edit-client-notes">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="edit_client_notes" class="form-label">Commentaire</label>
                            <textarea
                                class="form-control ps-2"
                                id="edit_client_notes"
                                name="notes"
                                rows="6"
                            >{{ $client->notes ?? '' }}</textarea>
                            <div class="alert alert-danger d-none mt-3" id="notes-form-error"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Ajouter option -->
<div class="modal fade" id="modal-add-option" tabindex="-1" aria-labelledby="modal-add-option-label" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-add-option-label">Ajouter une option</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="form-add-option">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="add_option_program" class="form-label">Programme <span class="text-danger">*</span></label>
                        <select class="form-select ps-2" id="add_option_program" name="program_id" required>
                            <option value="">Sélectionner un programme</option>
                            @foreach($currentApplication->programs()->where('is_active', true)->orderBy('name')->get() as $program)
                                <option value="{{ $program->id }}">{{ $program->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="add_option_lot" class="form-label">Lot <span class="text-danger">*</span></label>
                        <select class="form-select ps-2" id="add_option_lot" name="product_id" required disabled>
                            <option value="">Sélectionner d'abord un programme</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">Créer l'option</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal de confirmation de pose d'option -->
<div class="modal fade pt-5" tabindex="-1" role="dialog" id="modal-pose-option-resultat" aria-labelledby="modal-pose-option-resultat" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content col-lg-4 col-md-8 col-12 mx-auto margin-top-modal">
            <div class="row bg-grey border-radius-10">
                <div class="col-12 mx-auto">
                    <div class="modal-header">
                        <h5 class="modal-title text-black-or-white" id="modal-pose-option-resultat-label">Option posée avec succès</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body col-md-10 col-12 p-0 mx-auto">
                        <div class="col-12 mb-4 p-0 pt-2">
                            <div class="text-center text-font-default">
                                <div class="mb-4 double-circle-gold" style="margin: auto;">
                                    <span><i class="fa-solid fa-check"></i></span>
                                </div>
                                <div class="message_1"></div>
                                <p class="text-black-or-white message_2"></p>
                            </div>
                        </div>

                        <div class="col-12"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal de confirmation de pose d'option -->

@push('scripts')
<script>
$(document).ready(function() {
    // Formulaire de modification des coordonnées
    $('#form-edit-client').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
            url: '{{ route("partenaires.mes-clients.update", $client) }}',
            method: 'PUT',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    location.reload();
                }
            },
            error: function(xhr) {
                alert('Erreur lors de la mise à jour : ' + (xhr.responseJSON?.error || 'Erreur inconnue'));
            }
        });
    });

    // Formulaire de modification du commentaire
    $('#form-edit-client-notes').on('submit', function(e) {
        e.preventDefault();

        const $errorBox = $('#notes-form-error');
        $errorBox.addClass('d-none').text('');

        $.ajax({
            url: '{{ route("partenaires.mes-clients.update-notes", $client) }}',
            method: 'PUT',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    $('#modal-edit-client-notes').modal('hide');
                    location.reload();
                }
            },
            error: function(xhr) {
                const message = xhr.responseJSON?.message || xhr.responseJSON?.error || 'Erreur inconnue';
                $errorBox.removeClass('d-none').text(message);
            }
        });
    });

    // Charger les lots quand un programme est sélectionné
    $('#add_option_program').on('change', function() {
        var programId = $(this).val();
        var $lotSelect = $('#add_option_lot');

        if (!programId) {
            $lotSelect.html('<option value="">Sélectionner d\'abord un programme</option>').prop('disabled', true);
            return;
        }

        $.ajax({
            url: '{{ route("ajax.get-lots") }}',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                program_id: programId,
                client_id: parseInt('{{ $client->id }}', 10)
            },
            success: function(response) {
                $lotSelect.html('<option value="">Sélectionner un lot</option>');

                if (response.success && response.lots && response.lots.length > 0) {
                    $.each(response.lots, function(i, lot) {
                        $lotSelect.append('<option value="' + lot.id + '">Lot n°' + (lot.number || lot.id) + ' - ' + lot.type + '</option>');
                    });
                    $lotSelect.prop('disabled', false);
                } else {
                    $lotSelect.html('<option value="">Aucun lot disponible</option>').prop('disabled', true);
                }
            },
            error: function(xhr) {
                var errorMsg = xhr.responseJSON?.error || 'Erreur lors du chargement';
                $lotSelect.html('<option value="">' + errorMsg + '</option>').prop('disabled', true);
            }
        });
    });

    // Formulaire d'ajout d'option
    $('#form-add-option').on('submit', function(e) {
        e.preventDefault();

        var productId = $('#add_option_lot').val();
        if (!productId) {
            alert('Veuillez sélectionner un lot');
            return;
        }

        $.ajax({
            url: '{{ route("partenaires.mes-clients.add-option", $client) }}',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                product_id: productId
            },
            success: function(response) {
                var result = typeof response === 'string' ? JSON.parse(response) : response;

                $('#modal-add-option').modal('hide');

                if (result.success) {
                    // Rétablir l'icône de succès
                    $("#modal-pose-option-resultat .double-circle-gold span").html('<i class="fa-solid fa-check"></i>');
                    $("#modal-pose-option-resultat .double-circle-gold").removeClass('text-danger');

                    // Vérifier si l'option a été automatiquement validée
                    var isAutoValidated = result.is_auto_validated || false;
                    var stateLabel = result.state_label || 'En attente promoteur';
                    var optionState = result.option_state || '';

                    // Vérifier si une date de fin est disponible
                    var hasDateEnd = false;
                    var dateFormatee = '';
                    var dateEndMessage = '';

                    if (result.date_end && result.date_end !== '' && result.date_end !== null) {
                        // Essayer de créer une date et vérifier qu'elle est valide
                        var dateFin = new Date(result.date_end);
                        if (!isNaN(dateFin.getTime())) {
                            hasDateEnd = true;
                            var options = { year: 'numeric', month: 'long', day: 'numeric' };
                            dateFormatee = dateFin.toLocaleDateString('fr-FR', options);
                            dateEndMessage = 'Votre option sera valable jusqu\'au <span id="option_date_fin">' + dateFormatee + "</span>";
                        }
                    }

                    // L'option est "automatiquement validée" seulement si elle est en état VALIDATED (Rank 1)
                    // Si elle est WAITING (Rank 2), elle est en attente, pas validée
                    var isActuallyValidated = isAutoValidated && optionState === 'validated';

                    if (isActuallyValidated) {
                        $("#modal-pose-option-resultat h4").html("Option créée et validée automatiquement");
                        var message1Content = '<div class="p-3 mb-3 text-success border border-success rounded text-center"><i class="fas fa-check-circle me-2"></i>L\'option a été <strong>automatiquement validée</strong></div>';
                        if (hasDateEnd) {
                            message1Content += '<p class="text-primary mt-2">' + dateEndMessage + '</p>';
                        }
                        $("#modal-pose-option-resultat .message_1").html(message1Content);
                    } else if (isAutoValidated && optionState === 'waiting') {
                        // Option en attente (Rank 2 avec auto_validated_option = true)
                        $("#modal-pose-option-resultat h4").html("Option posée avec succès");
                        var message1Content = '<div class="p-3 mb-3 text-info border border-info rounded text-center"><i class="fas fa-clock me-2"></i>L\'option est <strong>en attente</strong> (État: ' + stateLabel + ')</div>';
                        $("#modal-pose-option-resultat .message_1").html(message1Content);
                        $("#modal-pose-option-resultat .message_2").html(
                            "L'option est en attente car une autre option est déjà active sur ce lot. Elle sera automatiquement validée si l'option principale devient inactive."
                        );
                    } else {
                        $("#modal-pose-option-resultat h4").html("Option créée avec succès");
                        $("#modal-pose-option-resultat .message_1").html(hasDateEnd ? dateEndMessage : '');
                        $("#modal-pose-option-resultat .message_2").html(
                            "L'option nécessite une validation manuelle par le promoteur."
                        );
                    }
                } else {
                    // Erreur
                    var errorMessage = result.error || result.message || "Une erreur est survenue lors de la pose d'option.";

                    // Changer l'icône en erreur
                    $("#modal-pose-option-resultat .double-circle-gold span").html('<i class="fa-solid fa-xmark"></i>');
                    $("#modal-pose-option-resultat .double-circle-gold").addClass('text-danger');

                    $("#modal-pose-option-resultat h4").html("Pose d'option impossible");
                    // Utiliser des classes utilitaires au lieu de .alert qui est masquée
                    $("#modal-pose-option-resultat .message_1").html('<div class="p-3 mb-3 text-danger border border-danger rounded text-center"><i class="fas fa-exclamation-triangle me-2"></i>' + errorMessage + '</div>');
                    $("#modal-pose-option-resultat .message_2").html("");
                }

                $("#modal-pose-option-resultat").modal("show");

                // Recharger la page après fermeture de la modal de résultat pour mettre à jour les statuts
                $("#modal-pose-option-resultat").on("hidden.bs.modal", function () {
                    if (result.success) {
                        location.reload();
                    }
                });
            },
            error: function(xhr) {
                var errorMessage = xhr.responseJSON?.error || xhr.responseJSON?.message || 'Erreur inconnue';

                $('#modal-add-option').modal('hide');

                // Changer l'icône en erreur
                $("#modal-pose-option-resultat .double-circle-gold span").html('<i class="fa-solid fa-xmark"></i>');
                $("#modal-pose-option-resultat .double-circle-gold").addClass('text-danger');

                $("#modal-pose-option-resultat h4").html("Pose d'option impossible");
                $("#modal-pose-option-resultat .message_1").html('<div class="p-3 mb-3 text-danger border border-danger rounded text-center"><i class="fas fa-exclamation-triangle me-2"></i>Erreur lors de la création de l\'option : ' + errorMessage + '</div>');
                $("#modal-pose-option-resultat .message_2").html("");
                $("#modal-pose-option-resultat").modal("show");
            }
        });
    });
});
</script>
@endpush

@endsection