@extends('site.layouts.blogAutre')

@section('title', 'Contact')

@section('content')
    @include('site.includes.public.headerMenuBlog')


        <!-- PAGE TITLE
        ================================================== -->
        <section class="page-title-section bg-img cover-background primary-overlay" data-overlay-dark="6" data-background="{{ asset('site/img/bg/apa.jpg') }}">
            <div class="row position-relative z-index-1">
                <div class="col-md-12">
                    <div class="faded-text">
                        <div class="f-text"><span class="main-font">APA-RDC</span></div>
                    </div>
                    <h1>Contact</h1>
                    <ul class="breadcrumb">
                        <li><a href="index.html">Accueil</a></li>
                        <li><a href="#!" style="color: #ffff00">Contact</a></li>
                    </ul>
                </div>
            </div>



        </section>
        <div class="divider"></div>

        <!-- CONTACT FORM
        ================================================== -->
        <section class="bg-light">
            <div class="container">

                <div class="row justify-content-center mt-3">
                    <div class="col-lg-7 mb-2-2 mb-lg-0">
                        <div class="p-1-9 p-lg-2-2 box-shadows h-100">
                            @if ($message = Session::get('success'))
                    <div class="section-heading5">
                        <div class="alert alert-success alert-block">
                            <button type="button" class="close" data-dismiss="alert"></button>
                            <strong>{{ $message }}</strong>
                        </div>
                    </div>
                    @endif

                    @if (count($errors) > 0)
                        <div class="section-heading5">
                            <div class="alert alert-danger text-left">
                                <strong>Oups!</strong> Il y a eu des problèmes avec votre entrée.
                                <ul class="list-style2 mb-0 text-left">
                                    @foreach ($errors->all() as $error)
                                        <li class="text-left">{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
            @endif
                            <h2 class="mb-2-5 text-primary">Contacter nous</h2>
                            <form class="1quform" action="{{ route('contacts.store') }}" method="POST">
                                @csrf
                                <div class="quform-elements">
                                    <div class="row">

                                        <!-- Begin Text input element -->
                                        <div class="col-md-6">
                                            <div class="quform-element form-group">
                                                <label for="name">Votre nom et post-nom <span class="quform-required">*</span></label>
                                                <div class="quform-input">
                                                    <input autofocus class="form-control @error('name') is-invalid @enderror" id="name" type="text" name="name" placeholder="Entrer votre nom complet" required value="{{ old('name') }}"/>
                                                </div>
                                                @error('name')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <!-- End Text input element -->

                                        <!-- Begin Text input element -->
                                        <div class="col-md-6">
                                            <div class="quform-element form-group">
                                                <label for="email">Adresse Email <span class="quform-required">*</span></label>
                                                <div class="quform-input">
                                                    <input autofocus class="form-control @error('email') is-invalid @enderror" id="email" type="text" name="email" value="{{ old('email') }}" placeholder="Entrer votre adresse email" required/>
                                                </div>
                                                @error('email')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <!-- End Text input element -->

                                        <!-- Begin Text input element -->
                                        <div class="col-md-6">
                                            <div class="quform-element form-group">
                                                <label for="subject">Votre Subject <span class="quform-required">*</span></label>
                                                <div class="quform-input">
                                                    <select id="sujet" name="sujet"
                                                        class="form-control form-select @error('sujet') is-invalid @enderror"
                                                        required autofocus>
                                                        <optgroup label="Selectionner une catégorie">
                                                            <option value="">-- Chosir un sujet --</option>
                                                            <option value="Demande de partenariat">Demande de partenariat</option>
                                                            <option value="Demande des informations">Demande des informations</option>
                                                            <option value="Demande d'un rendez-vous">Demande d'un rendez-vous</option>
                                                            <option value="Poser un problème">Poser un problème</option>
                                                            <option value="Signaler une erreur">Signaler une erreur</option>
                                                        </optgroup>
                                                    </select>
                                                    @error('sujet')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                    @enderror
                                                    </div>
                                            </div>
                                        </div>
                                        <!-- End Text input element -->

                                        <!-- Begin Text input element -->
                                        <div class="col-md-6">
                                            <div class="quform-element form-group">
                                                <label for="phone">Téléphone</label>
                                                <div class="quform-input">
                                                    <input autofocus required class="form-control @error('phone') is-invalid @enderror" id="phone" type="text" name="phone" placeholder="Entrer votre téléphone" value="{{ old('phone') }}" />
                                                </div>
                                                @error('phone')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <!-- End Text input element -->

                                        <!-- Begin Textarea element -->
                                        <div class="col-md-12">
                                            <div class="quform-element form-group">
                                                <label for="message">Message <span class="quform-required">*</span></label>
                                                <div class="quform-input">
                                                    <textarea required autofocus class="form-control @error('message') is-invalid @enderror" id="message" name="message" rows="3" placeholder="Entrer votre message">{{ old('message') }}</textarea>
                                                </div>
                                                @error('message')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <!-- End Textarea element -->

                                        <!-- Begin Captcha element -->
                                        <div class="col-md-12">
                                            <div class="quform-element">
                                                <div class="form-group">
                                                    <div class="quform-input">
                                                        <input class="form-control" id="captcha" type="text" name="captcha" placeholder="Ecriver le text en bas (captcha)" required/>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="quform-captcha">
                                                        <div class="quform-captcha-inner">
                                                            <img src="{{ asset('site/quform/images/captcha/courier-new-light.png') }}" alt="...">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Captcha element -->

                                        <!-- Begin Submit button -->
                                        <div class="col-md-12">
                                            <div class="quform-submit-inner">
                                                <button class="butn border-0" type="submit"><i class="ti-arrow-right icon-arrow before"></i><span class="label">Envoyer le message</span><i class="ti-arrow-right icon-arrow after"></i></button>
                                            </div>
                                            <div class="quform-loading-wrap text-start"><span class="quform-loading"></span></div>
                                        </div>
                                        <!-- End Submit button -->

                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="box-shadows p-1-9 p-lg-2-2 h-100">
                            <h2 class="mb-3 text-primary text-capitalize h3">Nos coordonnées</h2>
                            <p class="mb-2-2">S’il vous plait, n’hésitez pas à nous contacter à nos adresses respectives ou via ce formulaire de contact, et nous allons vous répondre dès que possible. </p>
                            <div class="d-flex mb-4 pb-3 border-bottom border-color-extra-light-gray">
                                <div class="flex-shrink-0 mt-2">
                                    <i class="fas fa-phone-alt text-secondary fs-2"></i>
                                </div>
                                <div class="flex-grow-1 ms-4">
                                    <h3 class="h5">Téléphone</h3>
                                    <span class="text-muted d-block mb-1">(+243) 815 165 776</span>
                                    <span class="text-muted">(+243 891 118 392)</span>
                                </div>
                            </div>
                            <div class="d-flex mb-4 pb-3 border-bottom border-color-extra-light-gray">
                                <div class="flex-shrink-0 mt-2">
                                    <i class="far fa-envelope-open text-secondary fs-2"></i>
                                </div>
                                <div class="flex-grow-1 ms-4">
                                    <h3 class="h5 mb-1">Addresse email</h3>
                                    <span class="text-muted d-block mb-1">info@apa.medd.gouv.cd</span>
                                    <span class="text-muted">admin@apa.medd.gouv.cd</span>
                                </div>
                            </div>
                            <div class="d-flex mb-4 pb-3 border-bottom border-color-extra-light-gray">
                                <div class="flex-shrink-0 mt-2">
                                    <i class="fas fa-map-marker-alt text-secondary fs-2"></i>
                                </div>
                                <div class="flex-grow-1 ms-4">
                                    <h3 class="h5 mb-1">Adresse physique</h3>
                                    <address class="text-muted d-block mb-0 w-md-80 w-xl-70">
                                        15, Av: Papa ILEO (Ex des Cliniques), C: Gombe / Kinshasa / RDC
                                    </address>
                                </div>
                            </div>
                            <ul class="social-box">
                                <li>
                                    <a href="#!"><i class="fab fa-facebook-f"></i></a>
                                </li>
                                <li>
                                    <a href="#!"><i class="fab fa-twitter"></i></a>
                                </li>
                                <li>
                                    <a href="#!"><i class="fab fa-youtube"></i></a>
                                </li>
                                <li>
                                    <a href="#!"><i class="fab fa-linkedin-in"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- MAP
        ================================================== -->
        <iframe class="map" id="gmap_canvas" src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d7956.983680566562!2d15.301038629321544!3d-4.318285453532198!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1s171%2C%20Av%3A%20des%20huileries%2C%20C%3A%20Lingwala%2C%20Immeuble%20MPUKA%20!5e0!3m2!1sfr!2scd!4v1672837914165!5m2!1sfr!2scd" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

@endsection

@section('scripts')
        <!-- jQuery -->
        <script src="{{ asset('site/js/jquery.min.js') }}"></script>

        <!-- popper js -->
        <script src="{{ asset('site/js/popper.min.js') }}"></script>

        <!-- bootstrap -->
        <script src="{{ asset('site/js/bootstrap.min.js') }}"></script>

        <!-- jquery -->
        <script src="{{ asset('site/js/core.min.js') }}"></script>

        <!-- search -->
        <script src="{{ asset('site/search/search.js') }}"></script>

        <!-- custom scripts -->
        <script src="{{ asset('site/js/main.js') }}"></script>

        <!-- form plugins js -->
        {{-- <script src="{{ asset('site/quform/js/plugins.js') }}"></script>

        <!-- form scripts js -->
        <script src="{{ asset('site/quform/js/scripts.js') }}"></script> --}}

        <!-- all js include end -->
@endsection