@extends('layouts.app')

@section('title', 'Règlement en ligne - EquitAssistance')
@section('meta_description', 'Réglez votre contrat Equitassistance en ligne en toute simplicité : retard de paiement ou démarrage immédiat de votre garantie')
@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 class="" data-cursor="-opaque">Paiement en ligne</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">Paiement en ligne</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">Paiement en ligne - EquitAssistance</p>
                            <h2>Régler en ligne votre cotisation</h2>
                        </div>
                        <p class="wow fadeInUp" data-wow-delay="0.2s">EquitAssistance a mis en place une plateforme de paiement en partenariat avec la Société Generale afin de vous permettre de payer votre cotisation lors du démarrage par adhésion séparée.</p>
                    </div>
                </div>

                <div class="col-12">
                    <form id="contactForm" action="{{ route('paiement.verify') }}" 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="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" required>
                                    <div class="help-block with-errors"></div>
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <input type="text" name="prenom" class="form-control" id="prenom" placeholder="Prénom" required>
                                    <div class="help-block with-errors"></div>
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <input type="text" name="societe" class="form-control" id="societe" placeholder="Société" required>
                                    <div class="help-block with-errors"></div>
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <input type="email" name="email" class="form-control" id="email" placeholder="Email" required>
                                    <div class="help-block with-errors"></div>
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <input type="text" name="reference" class="form-control" id="reference" placeholder="Référence de dossier" required>
                                    <div class="help-block with-errors"></div>
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <input type="text" name="montant" class="form-control" id="montant" placeholder="Montant en €" required>
                                    <div class="help-block with-errors"></div>
                                </div>
                                <div class="col-md-12">
                                    <button type="submit" class="btn-default mt-4">Valider et effectuer mon règlement</button>
                                    <div id="msgSubmit" class="h3 hidden"></div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

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