@php
    $canLotsWrite = $canLotsWrite ?? auth()->user()->canAccessPartnerLotsWrite();
    $canProgramsWrite = auth()->user()->canAccessPartnerProgramsWrite();

    $priceableAnnexes = $program->annexes()
        ->with(['parentProduct.states', 'prices', 'surfaces', 'states'])
        ->get()
        ->filter(fn ($annexe) => $annexe->type && $annexe->type->priceable())
        ->sortBy('id')
        ->values();

    $annexeTypes = \App\Enums\ProductType::priceableAnnexeTypes();
@endphp

<div class="mb-3 d-flex flex-wrap align-items-center gap-2">
    <span id="program-annexes-count-label" class="text-navigo text-16 text-dark fw-bold me-2">{{ $priceableAnnexes->count() }} {{ $priceableAnnexes->count() > 1 ? 'annexes' : 'annexe' }}</span>

    <x-filters.multi-select-dropdown
        id="annexe-type-filter"
        label="Tous les types d'annexes"
        name="annexe_type"
        :options="collect($annexeTypes)->map(fn ($annexeType) => ['value' => $annexeType->value, 'label' => $annexeType->label(), 'attrs' => ['data-filter-group' => 'type']])->values()->all()"
        :selected="[]"
        wrapperClass="filter-wrap-13"
        menuClass="filter-menu-wide"
        buttonClass="form-select form-select-sm text-start d-flex align-items-center justify-content-between"
        inputClass="form-check-input mt-0 fiscalite-filter-checkbox annexe-multi-filter"
    />

    <x-filters.multi-select-dropdown
        id="annexe-status-filter"
        label="Tous les statuts"
        name="annexe_status"
        :options="collect(\App\Enums\ProductState::selectableCases())->map(fn ($state) => ['value' => $state->value, 'label' => $state->label(), 'attrs' => ['data-filter-group' => 'status']])->values()->all()"
        :selected="[]"
        wrapperClass="filter-wrap-11"
        buttonClass="form-select form-select-sm text-start d-flex align-items-center justify-content-between"
        inputClass="form-check-input mt-0 fiscalite-filter-checkbox annexe-multi-filter"
    />

    <x-filters.multi-select-dropdown
        id="annexe-link-filter"
        label="Libre & rattaché"
        name="annexe_link"
        :options="[['value' => 'linked', 'label' => 'Rattachée uniquement', 'attrs' => ['data-filter-group' => 'link']], ['value' => 'unlinked', 'label' => 'Libre uniquement', 'attrs' => ['data-filter-group' => 'link']]]"
        :selected="[]"
        wrapperClass="w-auto"
        menuClass="w-auto"
        optionLabelClass="text-nowrap"
        buttonClass="form-select form-select-sm text-start text-nowrap d-flex align-items-center justify-content-between"
        inputClass="form-check-input mt-0 fiscalite-filter-checkbox annexe-multi-filter"
    />

    @if($canProgramsWrite)
        <button type="button" class="btn btn-md btn-success btn-height-44 d-inline-flex align-items-center flex-shrink-0" data-bs-toggle="modal" data-bs-target="#add-annexe-priceable-modal">
            <span class="icon-circle-plus icon icon-16 text-white align-items-center justify-content-center mx-auto me-1"></span> Ajouter une annexe
        </button>
    @endif
</div>
<div id="annexes-active-filters" class="d-flex flex-wrap gap-2 mb-3"></div>

<div class="table-responsive">
    <table class="table-personnalisee table-hover align-middle mb-0">
        <thead class="table-light">
            <tr>
                <th>
                    <button type="button" class="annexe-sort-trigger text-decoration-none text-dark lots-sort-link bg-transparent border-0 p-0" data-sort-key="type">
                        <span class="lots-sort-icon icon icon-chevrons-up-down text-muted align-items-center justify-content-center mx-auto me-1"></span>Type d'annexe
                    </button>
                </th>
                <th>
                    <button type="button" class="annexe-sort-trigger text-decoration-none text-dark lots-sort-link bg-transparent border-0 p-0" data-sort-key="number">
                        <span class="lots-sort-icon icon icon-chevrons-up-down text-muted align-items-center justify-content-center mx-auto me-1"></span>Numéro
                    </button>
                </th>
                <th>
                    <button type="button" class="annexe-sort-trigger text-decoration-none text-dark lots-sort-link bg-transparent border-0 p-0" data-sort-key="surface">
                        <span class="lots-sort-icon icon icon-chevrons-up-down text-muted align-items-center justify-content-center mx-auto me-1"></span>Surface
                    </button>
                </th>
                <th>
                    <button type="button" class="annexe-sort-trigger text-decoration-none text-dark lots-sort-link bg-transparent border-0 p-0" data-sort-key="linked">
                        <span class="lots-sort-icon icon icon-chevrons-up-down text-muted align-items-center justify-content-center mx-auto me-1"></span>Rattachement
                    </button>
                </th>
                <th>
                    <button type="button" class="annexe-sort-trigger text-decoration-none text-dark lots-sort-link bg-transparent border-0 p-0" data-sort-key="price">
                        <span class="lots-sort-icon icon icon-chevrons-up-down text-muted align-items-center justify-content-center mx-auto me-1"></span>Prix TTC
                    </button>
                </th>
                <th>
                    <button type="button" class="annexe-sort-trigger text-decoration-none text-dark lots-sort-link bg-transparent border-0 p-0" data-sort-key="status">
                        <span class="lots-sort-icon icon icon-chevrons-up-down text-muted align-items-center justify-content-center mx-auto me-1"></span>Statut
                    </button>
                </th>
                <th style="width: 240px;"></th>
            </tr>
        </thead>
        <tbody id="annexes-table-body">
            @forelse($priceableAnnexes as $annexe)
                @php
                    $parentLot = $annexe->parentProduct;
                    $state = $annexe->current_state;
                    $surface = $annexe->surfaces->first();
                    $ttcPrice = $annexe->prices->firstWhere('type', \App\Enums\PriceTypeAnnexe::PRIX_TTC->value);
                    $allPrices = $annexe->prices->sortBy('type')->values();
                    $canDetach = $parentLot && $state === \App\Enums\ProductState::LIBRE && $parentLot->current_state === \App\Enums\ProductState::LIBRE;
                    $annexeSalePriceTypesForInclude = [
                        \App\Enums\PriceTypeAnnexe::PRIX_TTC->value,
                        \App\Enums\PriceTypeAnnexe::PRIX_TVA_5_5->value,
                        \App\Enums\PriceTypeAnnexe::PRIX_TVA_10->value,
                        \App\Enums\PriceTypeAnnexe::PRIX_HT->value,
                    ];
                    $isAnnexeIncludedInLotPrice = $annexe->prices->first(fn ($p) => in_array($p->type, $annexeSalePriceTypesForInclude, true) && $p->read_only) ? true : false;
                    $parentLotTtcPrice = $parentLot?->prices?->firstWhere('type', \App\Enums\PriceType::PRIX_TTC->value);
                    try {
                        $parentLotTypeLabel = $parentLot?->type ? $parentLot->type->label() : '';
                    } catch (\Throwable $e) {
                        $parentLotTypeLabel = '';
                    }
                    $annexeSurfaceLabel = $surface ? (fmod((float) $surface->value, 1.0) === 0.0 ? number_format((float) $surface->value, 0, ',', ' ') : number_format((float) $surface->value, 2, ',', ' ')).' m²' : '';
                @endphp
                <tr
                    data-annexe-id="{{ $annexe->id }}"
                    data-annexe-type="{{ $annexe->type?->value ?? '' }}"
                    data-annexe-type-label="{{ strtolower($annexe->type?->label() ?? '') }}"
                    data-annexe-status="{{ $state?->value ?? '' }}"
                    data-annexe-status-label="{{ strtolower($state?->label() ?? '') }}"
                    data-annexe-linked="{{ $parentLot ? '1' : '0' }}"
                    data-annexe-number="{{ strtolower($annexe->number ?? '') }}"
                    data-annexe-surface="{{ $surface ? (float) $surface->value : -1 }}"
                    data-annexe-price="{{ $ttcPrice ? (float) $ttcPrice->value : -1 }}"
                >
                    <td>
                        <span class="text-navigo text-medium text-dark text-14">
                            {{ $annexe->type?->label() ?? 'Type inconnu' }}
                        </span>
                    </td>
                    <td>
                        <span class="text-navigo text-grey text-dark text-14">{{ $annexe->number ?: '—' }}</span>
                    </td>
                    <td>
                        <span class="text-navigo text-grey text-dark text-14">
                            @if($surface)
                                {{ fmod((float) $surface->value, 1.0) === 0.0 ? number_format((float) $surface->value, 0, ',', ' ') : number_format((float) $surface->value, 2, ',', ' ') }} m²
                            @else
                                —
                            @endif
                        </span>
                    </td>
                    <td>
                        @if($parentLot)
                            <div class="d-flex align-items-center gap-2">
                                <span class="badge text-bg-light">Lot {{ $parentLot->number }}</span>
                                @if($canProgramsWrite)
                                    @if($canDetach)
                                        <button
                                            type="button"
                                            class="btn btn-sm btn-outline-secondary text-navigo text-dark text-12 js-annexe-detach-btn"
                                            data-annexe-id="{{ $annexe->id }}"
                                            data-parent-lot-id="{{ $parentLot->id }}"
                                            data-annexe-type="{{ $annexe->type ? $annexe->type->label() : 'Type inconnu' }}"
                                            data-annexe-number="{{ $annexe->number ?? '' }}"
                                            data-parent-lot-number="{{ $parentLot->number }}"
                                            data-detach-url="{{ route('partner.annexe.detach', ['program' => $program->token, 'annexe' => $annexe->id, 'lot' => $parentLot->token]) }}"
                                            data-annexe-surface="{{ $annexeSurfaceLabel }}"
                                            data-annexe-included-in-lot="{{ $isAnnexeIncludedInLotPrice ? '1' : '0' }}"
                                            data-parent-lot-type="{{ $parentLotTypeLabel }}"
                                            data-parent-lot-price="{{ $parentLotTtcPrice ? number_format((float) $parentLotTtcPrice->value, 0, ',', ' ') . ' €' : '' }}"
                                            data-annexe-price="{{ $ttcPrice ? number_format((float) $ttcPrice->value, 0, ',', ' ') . ' €' : '' }}"
                                        >
                                            <span class="icon-unlink icon icon-16 text-grey align-items-center justify-content-center mx-auto me-1"></span>Détacher
                                        </button>
                                    @else
                                        <button
                                            type="button"
                                            class="btn btn-sm btn-outline-secondary text-navigo text-dark text-12 js-annexe-cannot-detach-btn"
                                            data-annexe-type="{{ $annexe->type ? $annexe->type->label() : 'Type inconnu' }}"
                                            data-annexe-number="{{ $annexe->number ?? '' }}"
                                            data-annexe-state-label="{{ $annexe->current_state->label() }}"
                                            data-annexe-state-bg-color="{{ $annexe->current_state->bgColor() }}"
                                            data-annexe-state-icon="{{ $annexe->current_state->icon() }}"
                                            data-parent-lot-number="{{ $parentLot->number }}"
                                            data-parent-lot-state-label="{{ $parentLot->current_state->label() }}"
                                            data-parent-lot-state-bg-color="{{ $parentLot->current_state->bgColor() }}"
                                            data-parent-lot-state-icon="{{ $parentLot->current_state->icon() }}"
                                            data-parent-lot-type="{{ $parentLotTypeLabel }}"
                                            data-annexe-type-color="{{ $annexe->type ? $annexe->type->color() : 'secondary' }}"
                                            data-annexe-type-icon="{{ $annexe->type ? $annexe->type->icon() : 'fas fa-box' }}"
                                        >
                                            <span class="icon-unlink icon icon-16 text-grey align-items-center justify-content-center mx-auto me-1"></span>Détacher
                                        </button>
                                    @endif
                                @endif
                            </div>
                        @else
                            @if($state === \App\Enums\ProductState::LIBRE && $canProgramsWrite)
                                <button
                                    type="button"
                                    class="btn btn-sm btn-outline-secondary text-navigo text-dark text-12 js-annexe-attach-btn"
                                    data-annexe-id="{{ $annexe->id }}"
                                    data-annexe-type="{{ $annexe->type ? $annexe->type->label() : 'Type inconnu' }}"
                                    data-annexe-number="{{ $annexe->number ?? '' }}"
                                    data-annexe-type-color="{{ $annexe->type ? $annexe->type->color() : '#6c757d' }}"
                                    data-annexe-type-icon="{{ $annexe->type ? $annexe->type->icon() : 'fas fa-box' }}"
                                    data-attach-url="{{ route('partner.annexe.attach', ['program' => $program->token, 'annexe' => $annexe->id]) }}"
                                >
                                    <span class="icon-link icon icon-16 text-grey align-items-center justify-content-center mx-auto me-1"></span>Rattacher le lot
                                </button>
                            @else
                                <span class="text-muted">Non rattachée</span>
                            @endif
                        @endif
                    </td>
                    <td>
                        <span class="text-navigo text-medium text-dark text-14">
                            {{ $ttcPrice ? number_format((float) $ttcPrice->value, 0, ',', ' ') . ' €' : '—' }}
                        </span>
                    </td>
                    <td>
                        <span class="badge badge-{{ $state->bgColor() }}">
                            <span class="status-dot me-1"></span>{{ $state->label() }}
                        </span>
                    </td>
                    <td>
                        <div class="d-flex justify-content-end gap-2">
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#annexe-prices-detail-modal-{{ $annexe->id }}">
                                Détails des prix
                            </button>
                            @if($parentLot)
                                <a href="{{ route('partner.lot.show', ['program' => $program->token, 'lot' => $parentLot->token]) }}" class="btn btn-sm btn-outline-secondary" title="Voir le lot">
                                    <span class="icon-eye icon icon-16 text-grey align-items-center justify-content-center mx-auto"></span>
                                </a>
                            @else
                                <button type="button" class="btn btn-sm btn-outline-secondary" disabled title="Aucun lot rattaché">
                                    <span class="icon-eye icon icon-16 text-grey align-items-center justify-content-center mx-auto"></span>
                                </button>
                            @endif
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="text-center py-5">
                        <i class="fas fa-warehouse fa-3x text-primary mb-3"></i>
                        <h5 class="mb-1">Aucune annexe</h5>
                        <p class="text-muted mb-0">Ce programme ne contient pas encore d'annexe vendable.</p>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

@foreach($priceableAnnexes as $annexe)
    @php
        $annexeSalePrices = $annexe->prices->filter(fn ($price) => in_array($price->type, [
            \App\Enums\PriceTypeAnnexe::PRIX_TTC->value,
            \App\Enums\PriceTypeAnnexe::PRIX_TVA_5_5->value,
            \App\Enums\PriceTypeAnnexe::PRIX_TVA_10->value,
            \App\Enums\PriceTypeAnnexe::PRIX_HT->value,
        ], true));
        $annexeRentalPrices = $annexe->prices->filter(fn ($price) => in_array($price->type, [
            \App\Enums\PriceTypeLoyer::MENSUEL_TTC->value,
            \App\Enums\PriceTypeLoyer::MENSUEL_HT->value,
            \App\Enums\PriceTypeLoyer::MENSUEL_DENORMANDIE_TTC->value,
            \App\Enums\PriceTypeLoyer::MENSUEL_DENORMANDIE_HT->value,
            \App\Enums\PriceTypeLoyer::MENSUEL_PLAFONNE_DISPOSITIF_FISCAL->value,
            \App\Enums\PriceTypeLoyer::MENSUEL_SOCIAL_JEAN_BRUN->value,
            \App\Enums\PriceTypeLoyer::MENSUEL_TRES_SOCIAL_JEAN_BRUN->value,
        ], true));
    @endphp
    <div class="modal fade" id="annexe-prices-detail-modal-{{ $annexe->id }}" tabindex="-1" aria-labelledby="annexe-prices-detail-modal-label-{{ $annexe->id }}" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title text-18" id="annexe-prices-detail-modal-label-{{ $annexe->id }}">Détails des prix</h5>
                        <div class="text-muted">Liste des prix de vente et estimation du prix à la location de l'annexe</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <h6 class="h6-line text-navigo text-12 text-primary mb-3 text-uppercase"><span>Prix de vente</span></h6>
                    <div class="d-flex flex-column gap-2 mb-4">
                        @forelse($annexeSalePrices as $salePrice)
                            <div class="d-flex align-items-center justify-content-between bg-light rounded-3 px-3 py-2">
                                <span class="fw-bold">Prix {{ $salePrice->type_enum?->label() ?? $salePrice->type }}</span>
                                <span>{{ number_format((float) $salePrice->value, 0, ',', ' ') }} €</span>
                            </div>
                        @empty
                            <div class="text-muted">Aucun prix de vente renseigné.</div>
                        @endforelse
                    </div>

                    <h6 class="h6-line text-navigo text-12 text-primary mb-3 text-uppercase"><span>Prix de location</span></h6>
                    <div class="d-flex flex-column gap-2">
                        @forelse($annexeRentalPrices as $rentalPrice)
                            <div class="d-flex align-items-center justify-content-between bg-light rounded-3 px-3 py-2">
                                <span class="fw-bold">Prix {{ $rentalPrice->type_enum?->label() ?? $rentalPrice->type }}</span>
                                <span>{{ number_format((float) $rentalPrice->value, 0, ',', ' ') }} €/mois</span>
                            </div>
                        @empty
                            <div class="text-muted">Aucun prix de location renseigné.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

@if($canProgramsWrite)
<div class="modal fade" id="add-annexe-priceable-modal" tabindex="-1" aria-labelledby="add-annexe-priceable-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{ route('partner.annexe.store', ['program' => $program->token]) }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title text-18 text-primary" id="add-annexe-priceable-modal-label">Ajouter une annexe</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3 mb-3">
                        <div class="col-12">
                            <span class="form-label d-block fw-bold mb-2 text-14">Quel type d'annexe souhaitez-vous ajouter ?</span>
                            <div class="btn-group contrat-type-checkboxes" role="group" aria-label="Type d'annexe">
                                @foreach(\App\Enums\ProductType::annexeStockageTypes() as $typeCase)
                                    <input type="radio" class="btn-check" name="type" id="program-stock-annexe-{{ $program->id }}-{{ $typeCase->value }}" value="{{ $typeCase->value }}" {{ old('type', \App\Enums\ProductType::PARKING->value) === $typeCase->value ? 'checked' : '' }} required>
                                    <label class="btn btn-outline-dark fw-bold text-14" for="program-stock-annexe-{{ $program->id }}-{{ $typeCase->value }}"><i class="{{ $typeCase->icon() }} me-1"></i> {{ $typeCase->label() }}</label>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <h6 class="h6-line text-navigo text-12 text-primary mt-4 mb-3 text-uppercase"><span>Prix de vente de l'annexe</span></h6>
                    <div class="row g-3 mb-3">
                        <div class="col-md-3">
                            <label for="program-prix-ttc-{{ $program->id }}" class="form-label fw-bold">Prix TTC</label>
                            <input type="number" name="prix_ttc" id="program-prix-ttc-{{ $program->id }}" class="form-control" value="{{ old('prix_ttc', 0) }}" min="0" step="0.01">
                        </div>
                        <div class="col-md-3">
                            <label for="program-prix-tva-55-{{ $program->id }}" class="form-label fw-bold">Prix TTC avec TVA à 5,5%</label>
                            <input type="number" name="prix_tva_5_5" id="program-prix-tva-55-{{ $program->id }}" class="form-control" value="{{ old('prix_tva_5_5', 0) }}" min="0" step="0.01">
                        </div>
                        <div class="col-md-3">
                            <label for="program-prix-ht-{{ $program->id }}" class="form-label fw-bold">Prix Hors Taxes</label>
                            <input type="number" name="prix_ht" id="program-prix-ht-{{ $program->id }}" class="form-control" value="{{ old('prix_ht', 0) }}" min="0" step="0.01">
                        </div>
                    </div>

                    <h6 class="h6-line text-navigo text-12 text-primary mt-4 mb-3 text-uppercase"><span>Informations relatives à l'annexe</span></h6>
                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label for="program-surface-totale-stock-{{ $program->id }}" class="form-label fw-bold">Surface totale (m²)</label>
                            <input type="number" name="surface_totale" id="program-surface-totale-stock-{{ $program->id }}" class="form-control" value="{{ old('surface_totale', 0) }}" min="0" step="0.01" required>
                        </div>
                        <div class="col-md-4">
                            <label for="program-prix-loyer-marche-{{ $program->id }}" class="form-label fw-bold">Prix loyer marché (/mois)</label>
                            <input type="number" name="prix_loyer_marche" id="program-prix-loyer-marche-{{ $program->id }}" class="form-control" value="{{ old('prix_loyer_marche', 0) }}" min="0" step="0.01">
                        </div>
                        <div class="col-md-4">
                            <span class="form-label d-block fw-bold mb-2">L'annexe est comprise dans le prix du lot ?</span>
                            <div class="btn-group contrat-type-checkboxes" role="group" aria-label="Annexe comprise dans le prix du lot">
                                <input type="radio" class="btn-check" name="included_in_lot" id="program-included-lot-oui-{{ $program->id }}" value="1" {{ old('included_in_lot', '0') === '1' ? 'checked' : '' }}>
                                <label class="btn btn-outline-dark fw-bold text-14" for="program-included-lot-oui-{{ $program->id }}">Oui</label>
                                <input type="radio" class="btn-check" name="included_in_lot" id="program-included-lot-non-{{ $program->id }}" value="0" {{ old('included_in_lot', '0') === '0' ? 'checked' : '' }}>
                                <label class="btn btn-outline-dark fw-bold text-14" for="program-included-lot-non-{{ $program->id }}">Non</label>
                            </div>
                        </div>
                    </div>

                    <h6 class="h6-line text-navigo text-12 text-primary mt-4 mb-3 text-uppercase"><span>Rattachement</span></h6>
                    <div class="row g-3">
                        <div class="col-12">
                            <label for="program-annexe-lot-id-{{ $program->id }}" class="form-label fw-bold">A quel lot est rattachée cette annexe ?</label>
                            <div class="dropdown annexe-lot-dropdown" data-annexe-lot-dropdown>
                                <input type="hidden" name="lot_id" id="program-annexe-lot-id-{{ $program->id }}" value="{{ old('lot_id') }}">
                                <button
                                    class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex align-items-center justify-content-between annexe-lot-dropdown-button"
                                    type="button"
                                    data-bs-toggle="dropdown"
                                    aria-expanded="false"
                                    data-placeholder="Sélectionnez un lot"
                                >
                                    <span class="annexe-lot-dropdown-label">Sélectionnez un lot</span>
                                </button>
                                <ul class="dropdown-menu w-100 annexe-lot-dropdown-menu">
                                    @foreach($program->lots as $lotOption)
                                        @php
                                            try {
                                                $lotOptionTypeLabel = $lotOption->type ? $lotOption->type->label() : null;
                                            } catch (\Throwable $e) {
                                                $lotOptionTypeLabel = null;
                                            }
                                            $lotOptionSurface = $lotOption->surface;
                                            $lotOptionTtcPrice = $lotOption->prices->firstWhere('type', \App\Enums\PriceType::PRIX_TTC->value);
                                            $lotOptionPriceValue = $lotOptionTtcPrice?->value ?? $lotOption->prices->first()?->value;
                                            $lotOptionMeta = collect([
                                                $lotOptionTypeLabel,
                                                $lotOptionSurface !== null ? number_format((float) $lotOptionSurface, 0, ',', ' ') . ' m²' : null,
                                                $lotOptionPriceValue !== null ? number_format((float) $lotOptionPriceValue, 0, ',', ' ') . '€' : null,
                                            ])->filter()->implode(' | ');
                                        @endphp
                                        <li>
                                            <button
                                                type="button"
                                                class="dropdown-item annexe-lot-dropdown-item"
                                                data-value="{{ $lotOption->id }}"
                                                data-label="LOT {{ $lotOption->number }}"
                                                data-meta="{{ $lotOptionMeta }}"
                                            >
                                                <span class="annexe-lot-option-main">LOT {{ $lotOption->number }}</span>
                                                @if($lotOptionMeta !== '')
                                                    <span class="annexe-lot-option-separator" aria-hidden="true"></span>
                                                    <span class="annexe-lot-option-meta">{{ $lotOptionMeta }}</span>
                                                @endif
                                            </button>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-flex flex-row flex-wrap gap-2 justify-content-start">
                    <button type="button" class="btn btn-outline-secondary text-dark" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-success">Enregistrer</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    function updateAnnexeLotDropdownLabel(dropdown, label, meta, isPlaceholder) {
        var button = dropdown.querySelector('.annexe-lot-dropdown-button');
        if (!button) return;
        if (isPlaceholder) {
            button.innerHTML = '<span class="annexe-lot-dropdown-label">' + label + '</span>';
            return;
        }
        var metaHtml = meta ? '<span class="annexe-lot-option-separator" aria-hidden="true"></span><span class="annexe-lot-option-meta">' + meta + '</span>' : '';
        button.innerHTML = '<span class="annexe-lot-button-content"><span class="annexe-lot-option-main">' + label + '</span>' + metaHtml + '</span>';
    }

    function initAnnexeLotDropdown(dropdown) {
        if (!dropdown) return;
        var hiddenInput = dropdown.querySelector('input[type="hidden"][name="lot_id"]');
        var button = dropdown.querySelector('.annexe-lot-dropdown-button');
        var options = Array.from(dropdown.querySelectorAll('.annexe-lot-dropdown-item'));
        if (!hiddenInput || !button || options.length === 0) return;

        var placeholder = button.dataset.placeholder || 'Sélectionnez un lot';
        var selectedOption = options.find(function (opt) {
            return opt.dataset.value === hiddenInput.value;
        });

        if (selectedOption) {
            updateAnnexeLotDropdownLabel(dropdown, selectedOption.dataset.label || '', selectedOption.dataset.meta || '', false);
        } else {
            updateAnnexeLotDropdownLabel(dropdown, placeholder, '', true);
        }

        options.forEach(function (option) {
            option.addEventListener('click', function () {
                hiddenInput.value = option.dataset.value || '';
                updateAnnexeLotDropdownLabel(dropdown, option.dataset.label || '', option.dataset.meta || '', false);
                options.forEach(function (el) { el.classList.remove('active'); });
                option.classList.add('active');
                bootstrap.Dropdown.getInstance(button)?.hide();
            });
        });
    }

    document.querySelectorAll('[data-annexe-lot-dropdown]').forEach(function (dropdown) {
        initAnnexeLotDropdown(dropdown);
    });

    var activeFiltersWrap = document.getElementById('annexes-active-filters');
    var annexesCountLabel = document.getElementById('program-annexes-count-label');
    var multiFilterInputs = Array.from(document.querySelectorAll('.annexe-multi-filter'));
    var tableBody = document.getElementById('annexes-table-body');
    var rows = document.querySelectorAll('#annexes-table-body tr[data-annexe-id]');
    var sortButtons = document.querySelectorAll('.annexe-sort-trigger');
    var activeSortKey = 'number';
    var activeSortDir = 'asc';

    function getSortValue(row, key) {
        if (key === 'type') return row.dataset.annexeTypeLabel || '';
        if (key === 'number') return row.dataset.annexeNumber || '';
        if (key === 'surface') return parseFloat(row.dataset.annexeSurface || '-1');
        if (key === 'linked') return parseInt(row.dataset.annexeLinked || '0', 10);
        if (key === 'price') return parseFloat(row.dataset.annexePrice || '-1');
        if (key === 'status') return row.dataset.annexeStatusLabel || '';
        return '';
    }

    function applyAnnexeSort() {
        if (!tableBody || rows.length === 0) return;
        var sortableRows = Array.from(rows);
        sortableRows.sort(function (a, b) {
            var av = getSortValue(a, activeSortKey);
            var bv = getSortValue(b, activeSortKey);
            var cmp = 0;
            if (typeof av === 'number' && typeof bv === 'number') {
                cmp = av - bv;
            } else {
                cmp = String(av).localeCompare(String(bv), 'fr', { numeric: true, sensitivity: 'base' });
            }
            return activeSortDir === 'asc' ? cmp : -cmp;
        });

        sortableRows.forEach(function (row) {
            tableBody.appendChild(row);
            var detailsRow = document.getElementById('annexe-prices-' + row.dataset.annexeId);
            if (detailsRow) {
                tableBody.appendChild(detailsRow);
            }
        });
    }

    function refreshSortIcons() {
        sortButtons.forEach(function (btn) {
            var icon = btn.querySelector('.lots-sort-icon');
            if (!icon) return;
            if ((btn.dataset.sortKey || '') === activeSortKey) {
                icon.className = 'lots-sort-icon icon icon-chevron-' + (activeSortDir === 'asc' ? 'up' : 'down') + ' text-black align-items-center justify-content-center mx-auto me-1';
            } else {
                icon.className = 'lots-sort-icon icon icon-chevrons-up-down text-muted align-items-center justify-content-center mx-auto me-1';
            }
        });
    }

    function getCheckedFilterValues(group) {
        return multiFilterInputs
            .filter(function (input) {
                return input.dataset.filterGroup === group && input.checked;
            })
            .map(function (input) {
                return input.value;
            });
    }

    function uncheckFilterValue(group, value) {
        var input = multiFilterInputs.find(function (el) {
            return el.dataset.filterGroup === group && el.value === value;
        });
        if (input) {
            input.checked = false;
        }
    }

    function renderActiveFilterBadges(filters) {
        if (!activeFiltersWrap) return;
        var badges = [];
        var badgeClass = 'badge badge-grey py-2 px-3 text-navigo text-12 text-grey border-0 annexe-remove-filter';

        filters.types.forEach(function (value) {
            var input = multiFilterInputs.find(function (el) { return el.dataset.filterGroup === 'type' && el.value === value; });
            var label = input ? (input.parentElement.querySelector('span')?.textContent || value) : value;
            badges.push({ group: 'type', value: value, label: label.trim() });
        });
        filters.statuses.forEach(function (value) {
            var input = multiFilterInputs.find(function (el) { return el.dataset.filterGroup === 'status' && el.value === value; });
            var label = input ? (input.parentElement.querySelector('span')?.textContent || value) : value;
            badges.push({ group: 'status', value: value, label: label.trim() });
        });
        filters.links.forEach(function (value) {
            var input = multiFilterInputs.find(function (el) { return el.dataset.filterGroup === 'link' && el.value === value; });
            var label = input ? (input.parentElement.querySelector('span')?.textContent || value) : value;
            badges.push({ group: 'link', value: value, label: label.trim() });
        });

        activeFiltersWrap.innerHTML = badges.map(function (b) {
            return '<button type="button" class="' + badgeClass + '" data-filter-group="' + b.group + '" data-filter-value="' + b.value + '">' +
                '<span>' + b.label + '</span>' +
                '<span class="icon-x icon icon-14 text-grey align-items-center justify-content-center ms-1"></span>' +
                '</button>';
        }).join('');
    }

    function applyAnnexeFilters() {
        var types = getCheckedFilterValues('type');
        var statuses = getCheckedFilterValues('status');
        var links = getCheckedFilterValues('link');

        rows.forEach(function (row) {
            var rowType = row.dataset.annexeType || '';
            var rowStatus = row.dataset.annexeStatus || '';
            var rowLinked = row.dataset.annexeLinked || '0';

            var okType = types.length === 0 || types.includes(rowType);
            var okStatus = statuses.length === 0 || statuses.includes(rowStatus);
            var okLink = links.length === 0 || links.some(function (linkValue) {
                return (linkValue === 'linked' && rowLinked === '1')
                    || (linkValue === 'unlinked' && rowLinked === '0');
            });

            row.classList.toggle('d-none', !(okType && okStatus && okLink));

        });

        var visibleRowsCount = Array.from(rows).filter(function (row) {
            return !row.classList.contains('d-none');
        }).length;

        var emptyRow = document.getElementById('annexes-empty-filter-row');
        if (!emptyRow) {
            emptyRow = document.createElement('tr');
            emptyRow.id = 'annexes-empty-filter-row';
            emptyRow.innerHTML = '<td colspan="7" class="text-center py-4 text-muted">Aucune annexe ne correspond aux filtres.</td>';
        }
        if (tableBody) {
            if (visibleRowsCount === 0) {
                tableBody.appendChild(emptyRow);
            } else if (emptyRow.parentNode) {
                emptyRow.parentNode.removeChild(emptyRow);
            }
        }

        if (annexesCountLabel) {
            annexesCountLabel.textContent = visibleRowsCount + ' ' + (visibleRowsCount > 1 ? 'annexes' : 'annexe');
        }

        renderActiveFilterBadges({ types: types, statuses: statuses, links: links });
    }

    multiFilterInputs.forEach(function (el) {
        el.addEventListener('change', applyAnnexeFilters);
    });

    if (activeFiltersWrap) {
        activeFiltersWrap.addEventListener('click', function (e) {
            var btn = e.target.closest('.annexe-remove-filter');
            if (!btn) return;
            var group = btn.dataset.filterGroup;
            var value = btn.dataset.filterValue || '';
            uncheckFilterValue(group, value);
            applyAnnexeFilters();
        });
    }

    sortButtons.forEach(function (btn) {
        btn.addEventListener('click', function () {
            var nextKey = btn.dataset.sortKey || 'number';
            if (activeSortKey === nextKey) {
                activeSortDir = activeSortDir === 'asc' ? 'desc' : 'asc';
            } else {
                activeSortKey = nextKey;
                activeSortDir = 'asc';
            }
            applyAnnexeSort();
            refreshSortIcons();
        });
    });

    document.querySelectorAll('.js-annexe-detach-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            showDetachAnnexeModal(
                parseInt(btn.dataset.annexeId, 10),
                parseInt(btn.dataset.parentLotId, 10),
                btn.dataset.annexeType || 'Type inconnu',
                btn.dataset.annexeNumber || '',
                btn.dataset.parentLotNumber || '',
                btn.dataset.detachUrl || '',
                'program_annexes',
                btn.dataset.annexeSurface || '',
                btn.dataset.annexeIncludedInLot || '0',
                btn.dataset.parentLotType || '',
                btn.dataset.parentLotPrice || '',
                btn.dataset.annexePrice || ''
            );
        });
    });

    document.querySelectorAll('.js-annexe-cannot-detach-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            showCannotDetachAnnexeModal(
                btn.dataset.annexeType || 'Type inconnu',
                btn.dataset.annexeNumber || '',
                btn.dataset.annexeStateLabel || '',
                btn.dataset.annexeStateBgColor || '',
                btn.dataset.annexeStateIcon || '',
                btn.dataset.parentLotNumber || '',
                btn.dataset.parentLotStateLabel || '',
                btn.dataset.parentLotStateBgColor || '',
                btn.dataset.parentLotStateIcon || '',
                btn.dataset.annexeTypeColor || 'secondary',
                btn.dataset.annexeTypeIcon || 'fas fa-box',
                btn.dataset.parentLotType || ''
            );
        });
    });

    document.querySelectorAll('.js-annexe-attach-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            showAttachAnnexeModal(
                parseInt(btn.dataset.annexeId, 10),
                btn.dataset.annexeType || 'Type inconnu',
                btn.dataset.annexeNumber || '',
                btn.dataset.annexeTypeColor || '#6c757d',
                btn.dataset.annexeTypeIcon || 'fas fa-box',
                btn.dataset.attachUrl || ''
            );
        });
    });

    applyAnnexeSort();
    refreshSortIcons();
    applyAnnexeFilters();
});
</script>
@endpush