@php
    // Filtrer uniquement les produits catégorie 'annexe' qui sont priceable
    $priceableAnnexes = $program->annexes()->get()->filter(function($annexe) {
        return $annexe->type && $annexe->type->priceable();
    });
@endphp

<div class="alert alert-info">
    <i class="fas fa-warehouse me-2"></i>
    <strong>Gestion des annexes du programme</strong> - Vue d'ensemble des annexes payantes et louables (parking, garage, cave)
</div>

<!-- Formulaire d'ajout d'annexe indépendante -->
<div class="card mb-4 border-success">
    <div class="card-header bg-success text-black">
        <h6 class="mb-0">
            <i class="fas fa-plus-circle me-2"></i>Ajouter une annexe indépendante
        </h6>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('partner.annexe.store', ['application' => $application, 'program' => $program]) }}" id="annexe-form">
            @csrf
            <div class="row g-3">
                <!-- Type d'annexe -->
                <div class="col-md-4">
                    <label class="form-label fw-bold">
                        <i class="fas fa-tag me-1 text-primary"></i>
                        Type d'annexe
                        <span class="text-danger">*</span>
                    </label>
                    <select name="type" id="annexe-type-select" class="form-select" required onchange="toggleAnnexePriceSections()">
                        <option value="">-- Sélectionner --</option>
                        @foreach(\App\Enums\ProductType::priceableAnnexeTypes() as $annexeType)
                                <option value="{{ $annexeType->value }}"
                                        data-priceable="{{ $annexeType->priceable() ? '1' : '0' }}"
                                        data-rentable="{{ $annexeType->rentable() ? '1' : '0' }}">
                                    {{ $annexeType->label() }}
                                </option>
                        @endforeach
                    </select>
                </div>

                <!-- Numéro -->
                <div class="col-md-4">
                    <label class="form-label fw-bold">
                        <i class="fas fa-hashtag me-1 text-info"></i>
                        Numéro
                    </label>
                    <input type="text" name="number" class="form-control" placeholder="Ex: P01, G15...">
                </div>

                <!-- Surface -->
                <div class="col-md-4">
                    <label class="form-label fw-bold">
                        <i class="fas fa-ruler-combined me-1 text-warning"></i>
                        Surface (m²)
                    </label>
                    <input type="number" name="surface" class="form-control" step="0.01" min="0" placeholder="0.00">
                </div>
            </div>

            <!-- Section Prix de vente -->
            <div id="sale-prices-section" class="mt-4" style="display: none;">
                <h6 class="text-primary mb-3">
                    <i class="fas fa-euro-sign me-2"></i>Prix de vente
                </h6>
                <div id="sale-prices-container"></div>
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="addAnnexeSalePrice()">
                    <i class="fas fa-plus me-1"></i>Ajouter un prix de vente
                </button>
            </div>

            <!-- Section Prix de loyer -->
            <div id="rental-prices-section" class="mt-4" style="display: none;">
                <h6 class="text-primary mb-3">
                    <i class="fas fa-home me-2"></i>Prix de loyer
                </h6>
                <div id="rental-prices-container"></div>
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="addAnnexeRentalPrice()">
                    <i class="fas fa-plus me-1"></i>Ajouter un prix de loyer
                </button>
            </div>

            <!-- Bouton -->
            <div class="mt-4">
                <button type="submit" class="btn btn-success">
                    <i class="fas fa-plus me-2"></i>Créer l'annexe indépendante
                </button>
                <small class="text-muted ms-3">
                    <i class="fas fa-info-circle me-1"></i>
                    Cette annexe sera créée sans être rattachée à un lot spécifique
                </small>
            </div>
        </form>
    </div>
</div>

@if($priceableAnnexes->count() > 0)
<div class="card">
    <div class="card-header bg-light">
        <div class="d-flex justify-content-between align-items-center">
            <h6 class="mb-0">
                <i class="fas fa-list me-2"></i>Liste des annexes payantes
            </h6>
            <span class="badge bg-primary">{{ $priceableAnnexes->count() }} annexe(s)</span>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th style="width: 12%;">Type</th>
                        <th style="width: 10%;">Numéro</th>
                        <th style="width: 9%;">Surface</th>
                        <th style="width: 12%;">Prix vente</th>
                        <th style="width: 12%;">Prix loyer</th>
                        <th style="width: 10%;">État</th>
                        <th style="width: 18%;">Lot rattaché</th>
                        <th style="width: 7%;" class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($priceableAnnexes->sortBy('id') as $annexe)
                    <tr>
                        <td>
                            @php
                                try {
                                    $annexeType = $annexe->type;
                                    $annexeTypeValid = $annexeType && $annexeType !== \App\Enums\ProductType::NON_DEFINI;
                                } catch (\Throwable $e) {
                                    $annexeType = null;
                                    $annexeTypeValid = false;
                                }
                            @endphp
                            @if($annexeTypeValid)
                                <span class="badge" style="background-color: {{ $annexeType->color() }}">
                                    <i class="{{ $annexeType->icon() }} me-1"></i>
                                    {{ $annexeType->label() }}
                                </span>
                            @else
                                <span class="text-muted fst-italic">Non défini</span>
                            @endif
                        </td>
                        <td>
                            @if($annexe->number)
                                <span class="badge bg-info">{{ $annexe->number }}</span>
                            @else
                                <span class="text-muted fst-italic">-</span>
                            @endif
                            @if(auth()->user() && auth()->user()->isRole('ROLE_DEVELOPER'))
                                <span class="badge bg-secondary ms-1">#{{ $annexe->id }}</span>
                            @endif
                        </td>
                        <td>
                            @if($annexe->surfaces->count() > 0)
                                @foreach($annexe->surfaces as $surface)
                                    <div>
                                        <i class="fas fa-ruler-combined me-1 text-primary"></i>
                                        <strong>
                                            @php
                                                $surfaceValue = $surface->value;
                                                // Si pas de centimes, afficher sans décimales
                                                if (floor($surfaceValue) == $surfaceValue) {
                                                    echo number_format($surfaceValue, 0, ',', ' ');
                                                } else {
                                                    echo number_format($surfaceValue, 2, ',', ' ');
                                                }
                                            @endphp
                                            m²
                                        </strong>
                                    </div>
                                @endforeach
                            @else
                                <span class="text-muted fst-italic">-</span>
                            @endif
                        </td>
                        <td>
                            @php
                                $salePrices = $annexe->prices->filter(function($price) {
                                    return in_array($price->type, ['prix_ht', 'prix_ttc', 'prix_tva_5_5', 'prix_tva_10']);
                                });
                            @endphp
                            @if($salePrices->count() > 0)
                                @foreach($salePrices as $price)
                                    <div class="mb-1">
                                        <small class="text-muted d-block">{{ $price->type }}</small>
                                        <strong>
                                            @php
                                                $priceValue = $price->value;
                                                if (floor($priceValue) == $priceValue) {
                                                    echo number_format($priceValue, 0, ',', ' ');
                                                } else {
                                                    echo number_format($priceValue, 2, ',', ' ');
                                                }
                                            @endphp
                                            €
                                        </strong>
                                    </div>
                                @endforeach
                            @else
                                <span class="text-muted fst-italic">-</span>
                            @endif
                        </td>
                        <td>
                            @php
                                $rentalPrices = $annexe->prices->filter(function($price) {
                                    return in_array($price->type, ['mensuel_garage', 'mensuel_parking', 'mensuel_ttc', 'mensuel_ht', 'mensuel_denormandie_ttc', 'mensuel_denormandie_ht']);
                                });
                            @endphp
                            @if($rentalPrices->count() > 0)
                                @foreach($rentalPrices as $price)
                                    <div class="mb-1">
                                        <small class="text-muted d-block">{{ $price->type }}</small>
                                        <strong>
                                            @php
                                                $priceValue = $price->value;
                                                if (floor($priceValue) == $priceValue) {
                                                    echo number_format($priceValue, 0, ',', ' ');
                                                } else {
                                                    echo number_format($priceValue, 2, ',', ' ');
                                                }
                                            @endphp
                                            €/mois
                                        </strong>
                                    </div>
                                @endforeach
                            @else
                                <span class="text-muted fst-italic">-</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge {{ $annexe->current_state->bgColor() }}">
                                <i class="fas {{ $annexe->current_state->icon() }} me-1"></i>
                                {{ $annexe->current_state->label() }}
                            </span>
                        </td>
                        <td>
                            @php
                                // Si l'annexe a un product_id, récupérer le lot parent
                                $parentLot = $annexe->product_id ? \App\Models\Product::find($annexe->product_id) : null;
                            @endphp
                            @if($parentLot)
                                <a href="{{ route('partner.lot.show', ['application' => $application, 'program' => $program, 'lot' => $parentLot]) }}"
                                   class="badge bg-primary text-white text-decoration-none me-1 mb-1"
                                   data-bs-toggle="tooltip"
                                   title="Voir le lot {{ $parentLot->number }}">
                                    <i class="fas fa-home me-1"></i>Lot {{ $parentLot->number }}
                                </a>
                            @else
                                <span class="badge bg-warning text-white">
                                    <i class="fas fa-exclamation-triangle me-1"></i>Non rattachée
                                </span>
                            @endif
                        </td>
                        <td class="text-end">
                            @php
                                $parentLot = $annexe->product_id ? \App\Models\Product::find($annexe->product_id) : null;
                            @endphp
                            @if($parentLot)
                                <a href="{{ route('partner.lot.edit', ['application' => $application, 'program' => $program, 'lot' => $parentLot]) }}"
                                   class="btn btn-sm btn-outline-primary me-1"
                                   data-bs-toggle="tooltip"
                                   title="Modifier via le lot {{ $parentLot->number }}">
                                    <i class="fas fa-edit"></i>
                                </a>
                                @php
                                    // Vérifier si l'annexe et le lot sont tous les deux libres
                                    $canDetach = $annexe->current_state == \App\Enums\ProductState::LIBRE &&
                                                 $parentLot->current_state == \App\Enums\ProductState::LIBRE;
                                @endphp
                                @if($canDetach)
                                    <button type="button"
                                            class="btn btn-sm btn-outline-warning"
                                            onclick="showDetachAnnexeModal(
                                                {{ $annexe->id }},
                                                {{ $parentLot->id }},
                                                '{{ $annexe->type ? $annexe->type->label() : 'Type inconnu' }}',
                                                '{{ $annexe->number ?? '' }}',
                                                '{{ $parentLot->number }}',
                                                '{{ route('partner.annexe.detach', ['application' => $application, 'program' => $program, 'annexe' => $annexe, 'lot' => $parentLot]) }}'
                                            )"
                                            data-bs-toggle="tooltip"
                                            title="Détacher du lot {{ $parentLot->number }}">
                                        <i class="fas fa-unlink"></i>
                                    </button>
                                @else
                                    <button type="button"
                                            class="btn btn-sm btn-outline-secondary"
                                            onclick="showCannotDetachAnnexeModal(
                                                '{{ $annexe->type ? $annexe->type->label() : 'Type inconnu' }}',
                                                '{{ $annexe->number ?? '' }}',
                                                '{{ $annexe->current_state->label() }}',
                                                '{{ $annexe->current_state->color() }}',
                                                '{{ $annexe->current_state->icon() }}',
                                                '{{ $parentLot->number }}',
                                                '{{ $parentLot->current_state->label() }}',
                                                '{{ $parentLot->current_state->color() }}',
                                                '{{ $parentLot->current_state->icon() }}',
                                                '{{ $annexe->type ? $annexe->type->color() : 'secondary' }}',
                                                '{{ $annexe->type ? $annexe->type->icon() : 'fas fa-box' }}'
                                            )"
                                            data-bs-toggle="tooltip"
                                            title="Impossible de détacher (annexe ou lot non libre)">
                                        <i class="fas fa-ban"></i>
                                    </button>
                                @endif
                            @else
                                @if($annexe->current_state == \App\Enums\ProductState::LIBRE)
                                    <button type="button"
                                            class="btn btn-sm btn-outline-success"
                                            onclick="showAttachAnnexeModal(
                                                {{ $annexe->id }},
                                                '{{ $annexe->type ? $annexe->type->label() : 'Type inconnu' }}',
                                                '{{ $annexe->number ?? '' }}',
                                                '{{ $annexe->type ? $annexe->type->color() : '#6c757d' }}',
                                                '{{ $annexe->type ? $annexe->type->icon() : 'fas fa-box' }}',
                                                '{{ route('partner.annexe.attach', ['application' => $application, 'program' => $program, 'annexe' => $annexe]) }}'
                                            )"
                                            data-bs-toggle="tooltip"
                                            title="Rattacher à un lot libre">
                                        <i class="fas fa-link"></i>
                                    </button>
                                @else
                                    <button type="button"
                                            class="btn btn-sm btn-outline-secondary"
                                            disabled
                                            data-bs-toggle="tooltip"
                                            title="L'annexe doit être libre pour être rattachée">
                                        <i class="fas fa-link"></i>
                                    </button>
                                @endif
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-footer bg-light">
        <div class="row">
            <div class="col-md-4">
                <div class="d-flex align-items-center">
                    <i class="fas fa-chart-bar me-2 text-primary"></i>
                    <div>
                        <small class="text-muted d-block">Total annexes payantes</small>
                        <strong>{{ $priceableAnnexes->count() }}</strong>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="d-flex align-items-center">
                    <i class="fas fa-link me-2 text-success"></i>
                    <div>
                        <small class="text-muted d-block">Annexes rattachées</small>
                        <strong>{{ $priceableAnnexes->filter(fn($a) => $a->product_id !== null)->count() }}</strong>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="d-flex align-items-center">
                    <i class="fas fa-unlink me-2 text-warning"></i>
                    <div>
                        <small class="text-muted d-block">Annexes orphelines</small>
                        <strong>{{ $priceableAnnexes->filter(fn($a) => $a->product_id === null)->count() }}</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@else
<div class="card">
    <div class="card-body text-center py-5">
        <i class="fas fa-warehouse fa-4x text-muted mb-3"></i>
        <h5 class="text-muted mb-2">Aucune annexe payante</h5>
        <p class="text-muted mb-3">Ce programme ne contient aucune annexe payante (parking, garage, cave) pour le moment.</p>
        <p class="text-muted small">
            <i class="fas fa-info-circle me-1"></i>
            Seules les annexes de type "Parking", "Garage" et "Cave" sont affichées ici car elles sont vendables séparément.
        </p>
        @php
            $allAnnexes = $program->annexes()->get();
        @endphp
        @if($allAnnexes->count() > 0)
        <p class="text-muted small mt-3">
            <i class="fas fa-box me-1"></i>
            Il y a {{ $allAnnexes->count() }} autre(s) annexe(s) non payante(s) (cave, jardin, terrasse, balcon...) dans ce programme.
        </p>
        @endif
    </div>
</div>
@endif

<script>
let salePriceIndex = 0;
let rentalPriceIndex = 0;

function toggleAnnexePriceSections() {
    const selectEl = document.getElementById('annexe-type-select');
    const selectedOption = selectEl.options[selectEl.selectedIndex];

    const isPriceable = selectedOption.getAttribute('data-priceable') === '1';
    const isRentable = selectedOption.getAttribute('data-rentable') === '1';

    const salePricesSection = document.getElementById('sale-prices-section');
    const rentalPricesSection = document.getElementById('rental-prices-section');

    if (isPriceable) {
        salePricesSection.style.display = 'block';
    } else {
        salePricesSection.style.display = 'none';
        document.getElementById('sale-prices-container').innerHTML = '';
        salePriceIndex = 0;
    }

    if (isRentable) {
        rentalPricesSection.style.display = 'block';
    } else {
        rentalPricesSection.style.display = 'none';
        document.getElementById('rental-prices-container').innerHTML = '';
        rentalPriceIndex = 0;
    }
}

function addAnnexeSalePrice() {
    const container = document.getElementById('sale-prices-container');
    const priceRow = document.createElement('div');
    priceRow.className = 'mb-3 p-3 border rounded bg-light';
    priceRow.innerHTML = `
        <div class="row g-2">
            <div class="col-5">
                <label class="form-label">Type</label>
                <select name="sale_prices[${salePriceIndex}][type]" class="form-select">
                    @foreach(\App\Enums\PriceTypeAnnexe::selectableCases() as $priceType)
                    <option value="{{ $priceType->value }}">{{ $priceType->label() }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-5">
                <label class="form-label">Montant (€)</label>
                <input type="number" step="0.01" name="sale_prices[${salePriceIndex}][value]" class="form-control" placeholder="0.00">
            </div>
            <div class="col-2 d-flex align-items-end">
                <button type="button" class="btn btn-danger w-100" onclick="removeAnnexeSalePrice(this)">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        </div>
    `;
    container.appendChild(priceRow);
    salePriceIndex++;
}

function removeAnnexeSalePrice(button) {
    button.closest('.mb-3').remove();
}

function addAnnexeRentalPrice() {
    const container = document.getElementById('rental-prices-container');
    const priceRow = document.createElement('div');
    priceRow.className = 'mb-3 p-3 border rounded bg-light';
    priceRow.innerHTML = `
        <div class="row g-2">
            <div class="col-5">
                <label class="form-label">Type</label>
                <select name="rental_prices[${rentalPriceIndex}][type]" class="form-select">
                    @foreach(\App\Enums\PriceTypeLoyer::selectableCases() as $priceTypeLoyer)
                    <option value="{{ $priceTypeLoyer->value }}">{{ $priceTypeLoyer->label() }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-5">
                <label class="form-label">Montant (€)</label>
                <input type="number" step="0.01" name="rental_prices[${rentalPriceIndex}][value]" class="form-control" placeholder="0.00">
            </div>
            <div class="col-2 d-flex align-items-end">
                <button type="button" class="btn btn-danger w-100" onclick="removeAnnexeRentalPrice(this)">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        </div>
    `;
    container.appendChild(priceRow);
    rentalPriceIndex++;
}

function removeAnnexeRentalPrice(button) {
    button.closest('.mb-3').remove();
}

function deleteOrphanAnnexe(annexeId) {
    if (!confirm('Voulez-vous vraiment supprimer cette annexe orpheline ? Cette action est irréversible.')) {
        return;
    }

    // Vous pouvez implémenter la suppression via AJAX ici
    alert('Fonctionnalité de suppression à implémenter');
}
</script>