@extends('layouts.app')

@section('title', 'Devis / Prestation - EquitAssistance')
@section('meta_description', 'Effectuez votre simulation Equitassistance en ligne, sans engagement. Recevez votre devis par email et souscrivez en ligne directement si vous le souhaitez')
@section('robots', 'index follow')

@push('scripts')
    <script src="{{ asset('assets/js/ville.js') }}"></script>
@endpush

@section('content')
    <div class="page-header parallaxie">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="page-header-box">
                        <h1 class="" data-cursor="-opaque">Devis Trans'Equides</h1>
                        <nav class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ url('/') }}">Accueil</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Devis Trans'Equides</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-contact-us">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12">
                    <div class="contact-information">
                        <div class="section-title">
                            <p class="wow fadeInUp">Devis</p>
                            <h2>Votre devis gratuit Trans'Equides </h2>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    @error('garantie')
                        <div class="alert alert-danger my-3">{{ $message }}</div>
                    @enderror
                    <form id="contactForm" action="{{ route('devis.transequide.step2') }}" method="POST" data-toggle="validator" class="contact-us-form wow fadeInUp" data-wow-delay="0.5s">
                        @csrf
                        <input type="text" name="website" class="d-none" tabindex="-1" autocomplete="off">

                        <div class="mb-5">
                            <p class="title-devis">Etape 1 :</p>
                            <div class="section-title mb-2">
                                <p class="wow fadeInUp mt-1" data-wow-delay="0.25s">Vos coordonnées</p>
                            </div>
                            <div class="contact-form">
                                <div class="row">
                                    <div class="form-group col-md-6 mb-3">
                                        <input type="text" name="nom" class="form-control" id="nom" placeholder="Nom" value="{{ old('nom') }}" required>
                                        <div class="help-block with-errors"></div>
                                        @error('nom')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="form-group col-md-6 mb-3">
                                        <input type="text" name="prenom" class="form-control" id="prenom" placeholder="Prénom" value="{{ old('prenom') }}" required>
                                        <div class="help-block with-errors"></div>
                                        @error('prenom')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="form-group col-md-6 mb-3">
                                        <input type="text" name="adresse" class="form-control" id="adresse" placeholder="Adresse" value="{{ old('adresse') }}" required>
                                        <div class="help-block with-errors"></div>
                                        @error('adresse')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="form-group col-md-2 mb-3">
                                        <input type="text" name="cp" class="form-control" id="cp" placeholder="Code postal" value="{{ old('cp') }}" required>
                                        <div class="help-block with-errors"></div>
                                        @error('cp')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="form-group col-md-4 mb-3">
                                        <input type="text" name="ville" class="form-control" id="ville" placeholder="Ville" value="{{ old('ville') }}" required>
                                        <div class="help-block with-errors"></div>
                                        @error('ville')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="position-relative">
                                            <ul class="list-group custom-list" id="listLocation">
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="form-select-devis">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="type_client" id="particulier" value="part" {{ old('type_client', 'part') == 'part' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="particulier">
                                                    Particulier
                                                </label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="type_client" id="professionnel" value="pro1" {{ old('type_client', 'part') == 'pro1' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="professionnel">
                                                    Professionnel
                                                </label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="type_client" id="proTransport" value="pro2" {{ old('type_client', 'part') == 'pro2' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="proTransport">
                                                    Pro du transport
                                                </label>
                                            </div>
                                            @error('type_client')
                                            <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="form-group col-md-2 mb-3">
                                        <input type="text" name="phone" class="form-control" id="phone" placeholder="Téléphone"value="{{ old('phone') }}" required>
                                        <div class="help-block with-errors"></div>
                                        @error('phone')
                                        <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="form-group col-md-4 mb-3">
                                        <input type="email" name="email" class="form-control" id="email" placeholder="Email"value="{{ old('email') }}" required>
                                        <div class="help-block with-errors"></div>
                                        @error('email')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="form-group col-md-12 mb-3">
                                        <textarea name="message" class="form-control" id="message" rows="4" placeholder="Message">{{ old('message') }}</textarea>
                                        <div class="help-block with-errors"></div>
                                        @error('message')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <p class="title-devis">Etape 2 :</p>
                            <div class="section-title mb-2">
                                <p class="wow fadeInUp mt-1" data-wow-delay="0.25s">Choisissez votre formule (1 choix maximum)</p>
                            </div>
                            <div class="contact-form">
                                <div class="row">
                                    <div class="col-12 d-flex flex-wrap row-gap-3 mb-5">
                                        <div class="custom-accordion our-faq-section page-faq-accordion w-100" id="assistance_pane_accident">
                                            <div class="faq-accordion" id="accordion">
                                                @foreach($listeGaranties as $index => $garantie)
                                                <div class="accordion-item wow fadeInUp">
                                                    <div class="accordion-header" id="heading{{ $garantie['id'] }}">
                                                        <div class="accordion-button collapsed">
                                                            <div class="container-fluid">
                                                                <div class="row">
                                                                    <div class="col-12 col-sm-10 d-flex align-items-center order-0">
                                                                        <input class="form-check-input mt-0 me-3" type="radio" name="garantie" id="garantie{{ $garantie['id'] }}" value="{{ $garantie['id'] }}" {{ old('garantie') == $garantie['id'] ? 'checked' : '' }}>
                                                                        <label for="garantie{{ $garantie['id'] }}" class="form-check-label me-3 label-devis">
                                                                            Garantie n°{{ $index + 1 }} : {{ $garantie['libelle'] }}
                                                                        </label>
                                                                    </div>
                                                                    <div class="col-12 col-md-2 d-flex order-2 order-md-1">
                                                                        <button class="collapsed btn-default fs-14 fw-normal w-auto py-2 px-3 ms-auto btn-more-devis" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $garantie['id'] }}" aria-expanded="false" aria-controls="collapse{{ $garantie['id'] }}">
                                                                            Détails
                                                                        </button>
                                                                    </div>
                                                                    @if($garantie['id'] === 5)
                                                                    <div class="col-sm-12 order-1 order-md-2">
                                                                        <div class="form-check my-3 d-flex align-items-center ms-5">
                                                                            <input class="form-check-input me-3" type="checkbox" id="option_comp1" name="option_comp1">
                                                                            <label class="form-check-label" for="option_comp1">
                                                                                <strong>Option Complémentaire</strong> — <small>Dommages aménagements intérieurs (sauf si déjà garantis dans le contrat automobile)</small>
                                                                            </label>
                                                                        </div>
                                                                    </div>
                                                                    @endif
                                                                    @if($garantie['id'] === 6)
                                                                    <div class="col-sm-12 order-1 order-md-2">
                                                                        <div class="form-check my-3 d-flex align-items-center ms-5">
                                                                            <input class="form-check-input me-3" type="checkbox" id="option_comp2" name="option_comp2">
                                                                            <label class="form-check-label" for="option_comp2">
                                                                                <strong>Option Complémentaire</strong> — <small>Dommages aménagements intérieurs 5000 €</small>
                                                                            </label>
                                                                        </div>
                                                                    </div>
                                                                    @endif
                                                                    
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div id="collapse{{ $garantie['id'] }}" class="accordion-collapse collapse" aria-labelledby="heading{{ $garantie['id'] }}" data-bs-parent="#accordion">
                                                        <div class="accordion-body accordion-devis">
                                                            <p>{{ $garantie['description'] }}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <button type="submit" class="btn-default">Obtenir mon devis et / ou souscrire en ligne</button>
                                        <div id="msgSubmit" class="h3 hidden"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="col-12">
                    <div class="contact-information">
                        <div class="my-5">
                            <p class="wow fadeInUp" data-wow-delay="0.2s">
                                Effectuez gratuitement votre simulation et recevez directement votre devis pour le produit Equitassistance de votre
                                choix. Vous aurez ensuite la possibilité de souscrire en ligne selon votre simulation si vous souhaitez obtenir au plus tôt l'assistance de notre réseau pour la sécurité de votre cheval,
                                ou de vos chevaux en van/remorque ou votre camion ! Si des conseils ou infos vous sont utiles, appelez nos spécialistes pour vous orienter. Ils vous détailleront aussi nos
                                offres assurances EQUITRANS exclusives et très spécifiques.
                            </p>
                        </div>

                        @include('partials.coordonnees')
                    </div>
                </div>

            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            const garantie = document.querySelector('input[name="garantie"]:checked')?.value;
            let erreur = null;

            if (garantie === '3') {
                const nb = document.querySelector('select[name="nombre_chevaux_garantie3"]').value;
                if (!nb) {
                    erreur = "Veuillez indiquer le nombre de chevaux pour la garantie 3.";
                }
            }

            if (garantie === '4') {
                const nb = document.querySelector('select[name="nombre_chevaux_garantie4"]').value;
                if (!nb) {
                    erreur = "Veuillez indiquer le nombre de chevaux pour la garantie 4.";
                }
            }

            if (erreur) {
                e.preventDefault();
                alert(erreur);
            }
        });
    </script>
@endpush