{{-- resources/views/devis-transequide-etape2.blade.php --}}
@extends('layouts.app')
@section('title','Finalisation du devis - EquitAssistance')
@section('robots','noindex,nofollow')

@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 py-4 contact-us-form wow fadeInUp">
            <h1 class="mb-3">Devis en ligne Trans'Equides — Etape 2</h1>

            {{-- Récap rapide --}}
            <div>
                <p class="mb-1"><strong>Nom :</strong> {{ $data['nom'] }} {{ $data['prenom'] }}</p>
                <p class="mb-1"><strong>Email :</strong> {{ $data['email'] }}</p>
                <p class="mb-1"><strong>Garantie :</strong> n°{{ $data['garantie'] }}</p>
                @if(!empty($data['optionlocation']))
                    <p class="mb-0"><strong>Option complémentaire :</strong> Oui</p>
                @endif
            </div>

            <hr class="my-4">

            <form method="POST" action="{{ route('devis.transequide.finalize') }}" class="contact-form" id="formFinal">
                @csrf

                {{-- Repasser toutes les infos de l’étape 1 --}}
                @foreach($data as $k => $v)
                    @if(is_scalar($v))
                        <input type="hidden" name="{{ $k }}" value="{{ $v }}">
                    @endif
                @endforeach

                <div class="row">
                    <div class="form-group col-md-6 mb-4">
                        <label class="form-label">Marque du véhicule*</label>
                        <input type="text" name="marque_vehicule" class="form-control" value="{{ old('marque_vehicule') }}" placeholder="Marque du véhicule">
                        @error('marque_vehicule')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-group col-md-6 mb-4">
                        <label class="form-label">N° immatriculation*</label>
                        <input type="text" name="numero_immatriculation" class="form-control" value="{{ old('numero_immatriculation') }}" placeholder="Immatriculation">
                        @error('numero_immatriculation')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-group col-md-6 mb-4">
                        <label class="form-label">Type de véhicule*</label>
                        <input type="text" name="type_vehicule" class="form-control" value="{{ old('type_vehicule') }}" placeholder="Type de véhicule">
                        @error('type_vehicule')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-group col-md-6 mb-4">
                        <label class="form-label">Date de mise en circulation*</label>
                        <input type="date" name="date_mise_en_circulation" class="form-control" value="{{ old('date_mise_en_circulation') }}">
                        @error('date_mise_en_circulation')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-group col-md-6 mb-4">
                        <label class="form-label">Propriétaire*</label>
                        <input type="text" name="proprietaire" class="form-control" value="{{ old('proprietaire') }}" placeholder="Nom du propriétaire">
                        @error('proprietaire')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-group col-md-6 mb-4">
                        <label class="form-label">Capital à assurer*</label>
                        <div class="form-group">
                            <select class="form-select" name="capital_assure" id="capital_assure">
                                <option value="" {{ old('capital_assure')==='' ? 'selected' : '' }}>Choisir un montant</option>
                                <option value="10000" {{ old('capital_assure')==='10000' ? 'selected' : '' }}>10 000 €</option>
                                <option value="15000" {{ old('capital_assure')==='15000' ? 'selected' : '' }}>15 000 €</option>
                                <option value="30000" {{ old('capital_assure')==='30000' ? 'selected' : '' }}>30 000 €</option>
                            </select>
                        </div>
                        @error('capital_assure')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    @switch((int)$data['garantie'])
                        {{-- GARANTIE 1 : - 3.5T --}}
                        @case(5)
                            {{-- Pas de champs spécifiques ici pour le moment --}}
                        @break

                        {{-- GARANTIE 2 : + 3.5T --}}
                        @case(6)
                            <div class="col-md-6 mb-4">
                                <label class="form-label">Nombre de places chevaux*</label>
                                <input type="number" min="1" name="nombre_chevaux" class="form-control" value="{{ old('nombre_chevaux') }}" placeholder="Nombre de chevaux">
                                @error('nombre_chevaux')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            @break
                    @endswitch
                </div>

                {{-- Zone 2 --}}
                <div class="form-check mb-4">
                    <input class="form-check-input" type="checkbox" id="zone2visu" {{ !empty($data['zone2']) ? 'checked' : '' }}>
                    <label class="form-check-label" for="zone2visu">
                        <strong>Zone 2</strong> — France pays limitrophes + Pays-Bas + Portugal + Royaume-Uni + Corse
                    </label>
                </div>
                <input type="hidden" name="zone2" id="zone2" value="{{ (int)($data['zone2'] ?? 0) }}">

                {{-- Montant dynamique --}}
                <div id="retourzone2" class="small text-muted mb-2"></div>
                <div class="p-3 border mb-4">
                    <strong>Montant de la cotisation :</strong>
                    <span id="montant_garantie_total">{{ number_format($montant, 2, ',', ' ') }}€</span>
                    <div id="details_cotisation" class="mt-2 small text-muted"></div>
                </div>

                <input type="hidden" id="typedl" name="typedl" value="">

                <div class="row g-3">
                    <div class="col-12">
                        <button type="submit" class="btn-default">Recevoir mon devis par email</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const form = document.getElementById('formFinal');
        const zone2Visu = document.getElementById('zone2visu');
        const zone2Hidden = document.getElementById('zone2');
        const montantEl = document.getElementById('montant_garantie_total');
        const retourEl = document.getElementById('retourzone2');

        function setLoading(isLoading, msg = 'Recalcul en cours…') {
            retourEl.textContent = isLoading ? msg : '';
        }

        function recalc(origin = 'auto') {
            setLoading(true);

            const fd = new FormData(form);
            const payload = {
                garantie: fd.get('garantie'),
                zone2: zone2Hidden.value,
                nombre_chevaux: fd.get('nombre_chevaux') || '',
                optionlocation: fd.get('optionlocation') || 0,
                capital_assure: fd.get('capital_assure') || '',
                // si un jour tu veux activer "première année", envoie 1 ici :
                // premiere_annee: '1'
            };

            fetch('{{ route('devis.transequide.tarif') }}', {
                method: 'POST',
                headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json'},
                body: new URLSearchParams(payload)
            })
                .then(r => r.json())
                .then(json => {
                    if (json.ok) {
                        montantEl.textContent = json.montant;

                        if (json.details) {
                            const wrap = document.getElementById('details_cotisation');
                            const ul = document.createElement('ul');
                            ul.classList.add('mb-0');
                            for (const [label, val] of Object.entries(json.details)) {
                                const li = document.createElement('li');
                                li.textContent = `${label} : ${val} €`;
                                ul.appendChild(li);
                            }
                            wrap.innerHTML = '';
                            wrap.appendChild(ul);
                        }

                        retourEl.textContent = '';
                    } else {
                        retourEl.textContent = 'Erreur de recalcul.';
                    }
                })
                .catch(() => {
                    retourEl.textContent = 'Erreur réseau.';
                })
                .finally(() => setLoading(false));
        }


        // Zone 2 -> recalcul immédiat
        zone2Visu.addEventListener('change', () => {
            zone2Hidden.value = zone2Visu.checked ? '1' : '0';
            recalc('zone2');
        });

        document.getElementById('capital_assure').addEventListener('change', () => recalc('capital'));

        // Recalcule dès l’affichage (pour afficher le bon montant si Zone2 déjà cochée)
        document.addEventListener('DOMContentLoaded', () => {
            recalc('auto');
        });
    </script>
@endpush