@extends('layout')
@section('title', 'Catalogue ' . $categorie->nom)
@section('content')

    <div class="pagetitle">
        <h1>@yield('title')</h1>
    </div><!-- End Page Title -->

    <section class="section contact">
        <div class="row gy-4">
            <div class="col-xl-12">
                <div class="card p-4">
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if (isset($modeles) && $modeles->count() > 0)
                        <div class="row">
                            @foreach ($modeles as $modele)
                                <div class="col-md-4">
                                    <div class="card">
                                        <img src="{{ asset('storage/modeles/' . $modele->image) }}" alt=""
                                            style="cursor: pointer;" class="card-img-top img-fluid"
                                            style="width: 100%; height: auto;" data-bs-toggle="modal"
                                            data-bs-target="#modal{{ $modele->id }}">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <h5 class="card-title mb-0">{{ $modele->nom }}</h5>
                                                <form
                                                    action="{{ route(session('selection') && array_key_exists($modele->id, session('selection')) ? 'supprimer.selection' : 'demande.devis') }}"
                                                    method="POST">
                                                    @csrf
                                                    <input type="hidden" name="modele_id" value="{{ $modele->id }}">
                                                    <button type="submit"
                                                        class="btn-sm btn {{ session('selection') && array_key_exists($modele->id, session('selection')) ? 'btn-danger' : 'btn-primary' }}">
                                                        {{ session('selection') && array_key_exists($modele->id, session('selection')) ? 'Supprimer de ma sélection' : 'Demander un devis' }}
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Modal -->
                                <div class="modal fade" id="modal{{ $modele->id }}" tabindex="-1"
                                    aria-labelledby="modalLabel{{ $modele->id }}" aria-hidden="true">
                                    <div class="modal-dialog modal-xl">
                                        <!-- Ajout de la classe modal-lg pour une fenêtre modale plus grande -->
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <div style="display:none;">
                                                    <h5 class="modal-title modele-prix" id="modalLabel{{ $modele->id }}">
                                                        {{ $modele->prix }}</h5><br>
                                                    <h5 class="modal-title modele-marge"
                                                        id="modalLabel{{ $modele->id }}">
                                                        {{ $modele->marge }}</h5>
                                                </div>
                                                <h5 class="modal-title modele-name" id="modalLabel{{ $modele->id }}">
                                                    {{ $modele->nom }}</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body text-center">
                                                <img src="{{ asset('storage/modeles/' . $modele->image) }}"
                                                    alt="{{ $modele->nom }}" class="img-fluid"
                                                    style="max-height: 70vh; width: auto;">
                                            </div>

                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Fermer</button>
                                                <!-- Dans votre vue -->
                                                <form
                                                    action="{{ route(session('selection') && array_key_exists($modele->id, session('selection')) ? 'supprimer.selection' : 'demande.devis') }}"
                                                    method="POST">
                                                    @csrf
                                                    <input type="hidden" name="modele_id" value="{{ $modele->id }}">
                                                    <button type="submit"
                                                        class="btn {{ session('selection') && array_key_exists($modele->id, session('selection')) ? 'btn-danger' : 'btn-primary' }}">
                                                        {{ session('selection') && array_key_exists($modele->id, session('selection')) ? 'Supprimer de ma sélection' : 'Demander un devis' }}
                                                    </button>
                                                </form>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p>Aucun modèle trouvé pour cette catégorie.</p>
                    @endif

                    @if (isset($message))
                        <p>{{ $message }}</p>
                    @endif
                </div>
            </div>
        </div>
    </section>


@endsection