@extends('layouts.app')

@section('title', 'Résiliation Contrat - EquitAssistance')
@section('meta_description', 'Remplissez le formulaire en ligne pour demander la résiliation de votre contrat Equitassistance. Traitement rapide et accusé de réception envoyé.')
@section('robots', 'index follow')

@section('content')
    <div class="page-header parallaxie">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="page-header-box">
                        <h1>Résilier mon contrat</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">Résilier mon contrat</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">
                            <h3 class="wow fadeInUp">Résilier mon contrat</h3>
                            <h2>Résilier mon contrat EquitAssistance</h2>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="contact-form">
                        <form id="resiliationForm" action="{{ route('resiliation.verify') }}" method="POST" class="contact-us-form wow fadeInUp" novalidate>
                            @csrf
                            <input type="text" name="website" class="d-none" tabindex="-1" autocomplete="off">

                            <div class="row">
                                <div class="col-12 mb-3">
                                    <span class="d-block fw-bold mb-1">Pour une personne :</span>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="personne" id="physique" value="physique" {{ old('personne', 'physique') === 'physique' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="physique">Physique</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="personne" id="morale" value="morale" {{ old('personne') === 'morale' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="morale">Morale</label>
                                    </div>
                                </div>

                                {{-- Physique --}}
                                <div class="form-group col-md-6 mb-3 bloc-physique">
                                    <input type="text" name="nom" class="form-control" placeholder="Nom" value="{{ old('nom') }}">
                                    @error('nom')<div class="text-danger small">{{ $message }}</div>@enderror
                                </div>
                                <div class="form-group col-md-6 mb-3 bloc-physique">
                                    <input type="text" name="prenom" class="form-control" placeholder="Prénom" value="{{ old('prenom') }}">
                                    @error('prenom')<div class="text-danger small">{{ $message }}</div>@enderror
                                </div>

                                {{-- Morale --}}
                                <div class="form-group col-md-12 mb-3 bloc-morale d-none">
                                    <input type="text" name="raison_sociale" class="form-control" placeholder="Raison sociale" value="{{ old('raison_sociale') }}">
                                    @error('raison_sociale')<div class="text-danger small">{{ $message }}</div>@enderror
                                </div>

                                <div class="form-group col-md-6 mb-3">
                                    <input type="text" name="telephone" class="form-control" placeholder="Téléphone" value="{{ old('telephone') }}">
                                    @error('telephone')<div class="text-danger small">{{ $message }}</div>@enderror
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <input type="email" name="email" class="form-control" placeholder="Email" value="{{ old('email') }}">
                                    @error('email')<div class="text-danger small">{{ $message }}</div>@enderror
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <input type="email" name="email_confirm" class="form-control" placeholder="Confirmez votre email" value="{{ old('email_confirm') }}">
                                    @error('email_confirm')<div class="text-danger small">{{ $message }}</div>@enderror
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <input type="text" name="reference" class="form-control" placeholder="Référence du contrat" value="{{ old('reference') }}">
                                    @error('reference')<div class="text-danger small">{{ $message }}</div>@enderror
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <label class="form-check-label" for="date_evenement">
                                        Date souhaitée de la résiliation
                                    </label>
                                    <input type="date" name="date_evenement" id="date_evenement" class="form-control" placeholder="Date de l'événement" value="{{ old('date_evenement') }}">
                                    @error('date_evenement')<div class="text-danger small">{{ $message }}</div>@enderror
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <label class="form-check-label" for="motif">
                                        Motif de la résiliation
                                    </label>
                                    <select name="motif" id="motif" class="form-select">
                                        <option value="">-- Sélectionner le motif --</option>
                                        <option value="Résiliation à l'échéance" @selected(old('motif') === "Résiliation à l'échéance")>Résiliation à l'échéance</option>
                                        <option value="Autre" @selected(old('motif') === "Autre")>Autre</option>
                                    </select>
                                    @error('motif')<div class="text-danger small">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-md-12">
                                    <button type="submit" class="btn-default mt-3">Demander la résiliation de mon contrat</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-12 mt-5">
                    @include('partials.coordonnees')
                </div>

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function togglePersonne() {
            const physique = document.getElementById('physique').checked;
            document.querySelectorAll('.bloc-physique').forEach(e => e.classList.toggle('d-none', !physique));
            document.querySelectorAll('.bloc-morale').forEach(e => e.classList.toggle('d-none', physique));
        }
        document.getElementById('physique').addEventListener('change', togglePersonne);
        document.getElementById('morale').addEventListener('change', togglePersonne);
        togglePersonne();
    </script>
@endpush