@extends('templates.header')
@section('content')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <section id="page-header-cover" class="section-slider swiper-slider fixed no-image">
        <div class="swiper-container" data-autoplay="0">
            <div class="swiper-wrapper">
                <div class="swiper-slide slide-align-center">
                    <div class="swiper-slide-intro">
                        <div class="swiper-intro-inner" style="padding-top: 2%; padding-bottom: 0%; ">
                            <h1 class="swiper-slide-heading">
                                {{ App::getLocale() === 'ar' ? 'طلب عرض مع رأي جراح' : (App::getLocale() === 'en' ? 'Request a Quote with a Surgeon\'s Opinion' : 'Demande d’un devis avec l’avis d’un chirurgien') }}
                            </h1>
                        </div>
                    </div>
                    <div class="overlay"></div>
                </div>
            </div>
        </div>
    </section>

    <div id="content" class="site-content">
        <div id="content-inside" class="container right-sidebar">
            <div id="primary" class="sidearea">
                <main id="main" class="site-main" role="main">
                    <article id="post-3997" class="post-3997 page type-page status-publish hentry">
                        <div class="entry-content">
                            <nav role="navigation" aria-label="Breadcrumbs" class="breadcrumb-trail breadcrumbs"
                                itemprop="breadcrumb">
                                <h2 class="trail-browse">Browse:</h2>
                                <ul class="trail-items" itemscope="" itemtype="http://schema.org/BreadcrumbList">
                                    <meta name="numberOfItems" content="2">
                                    <meta name="itemListOrder" content="Ascending">
                                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
                                        class="trail-item trail-begin"><a href="{{ route('accueil') }}" rel="home"
                                            itemprop="item"><span itemprop="name">
                                                {{ App::getLocale() === 'ar' ? 'الرئيسية' : (App::getLocale() === 'en' ? 'Home' : 'Accueil') }}
                                            </span></a>
                                        <meta itemprop="position" content="1">
                                    </li>
                                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
                                        class="trail-item trail-end"><span itemprop="item"><span itemprop="name">
                                                {{ App::getLocale() === 'ar' ? 'طلب عرض مع رأي جراح' : (App::getLocale() === 'en' ? 'Request a Quote with a Surgeon\'s Opinion' : 'Demande d’un devis avec l’avis d’un chirurgien') }}
                                            </span></span>
                                        <meta itemprop="position" content="2">
                                    </li>
                                </ul>
                            </nav>

                            <h2 style="text-align: center;">
                                {{ App::getLocale() === 'ar' ? 'قل لنا ما ترغب في القيام به' : (App::getLocale() === 'en' ? 'Tell us what you would like to do' : 'Dites-nous ce que vous souhaitez faire') }}
                            </h2>
                            <p>
                                {{ App::getLocale() === 'ar' ? 'بملء النموذج أدناه، يلتزم فريقنا بالرد عليك في غضون 48 ساعة عمل مع:' : (App::getLocale() === 'en' ? 'By filling out the form below, our team commits to responding within 48 business hours with:' : 'En remplissant le formulaire ci-dessous, notre équipe s’engage à vous répondre dans les 48 heures ouvrables qui suivent, avec :') }}
                            </p>
                            <ul class="txtcalltoaction">
                                <li>
                                    {{ App::getLocale() === 'ar' ? 'رد من جراحنا مع رأيه وتشخيصه لحالتك.' : (App::getLocale() === 'en' ? 'The response from our surgeon with his opinion and diagnosis for your case.' : 'La réponse de notre chirurgien avec son avis et son diagnostic pour votre cas.') }}
                                </li>
                                <li>
                                    {{ App::getLocale() === 'ar' ? 'عرض تفصيلي حسب حالتك الخاصة، لإقامة جراحة تجميلية "شاملة" في المغرب (جراحة تجميلية أو تخصص طبي آخر، عيادة، جراح، فندق، وانتقالات…)' : (App::getLocale() === 'en' ? 'A detailed quote based on your specific case, for an all-inclusive cosmetic surgery stay in Morocco (cosmetic surgery or other medical specialties, clinic, surgeon, hotel, and transfers...)' : 'Un devis détaillé, en fonction de votre cas précis, pour un séjour de chirurgie esthétique en Maroc "all inclusive" (chirurgie esthétique ou autre spécialité médicale, clinique, chirurgien, hôtel et transferts…)') }}
                                </li>
                            </ul>
                            <p>
                                {{ App::getLocale() === 'ar' ? 'سيكون هذا العرض واضحًا دون أي رسوم مخفية ليتيح لك إدارة ميزانيتك بشكل جيد.' : (App::getLocale() === 'en' ? 'This quote will be clear with no hidden fees to allow you to manage your budget effectively.' : 'Ce devis sera clair et sans frais cachés afin de vous permettre de bien gérer votre budget.') }}
                            </p>

                            <div class="container mt-5">
                                <h2 class="mb-4 text-center">
                                    {{ App::getLocale() === 'ar' ? 'نموذج التدخل' : (App::getLocale() === 'en' ? 'Intervention Form' : 'Formulaire d\'Intervention') }}
                                </h2>
                                <form action="{{ route('store_devis') }}" method="POST">
                                    @csrf
                                    @if (session()->has('success'))
                                        <div id="success-message" class="container alert alert-success">
                                            {{ session()->get('success') }}
                                        </div>
                                        <script>
                                            setTimeout(function() {
                                                var successMessage = document.getElementById('success-message');
                                                if (successMessage) {
                                                    successMessage.remove();
                                                }
                                            }, 5000); // 5000 milliseconds = 5 seconds
                                        </script>
                                    @endif
                                    <!-- Page Heading -->
                                    @if (session()->has('delete'))
                                        <div id="success-message" class="container alert alert-danger">
                                            {{ session()->get('delete') }}
                                        </div>
                                        <script>
                                            setTimeout(function() {
                                                var successMessage = document.getElementById('success-message');
                                                if (successMessage) {
                                                    successMessage.remove();
                                                }
                                            }, 15000); // 5000 milliseconds = 5 seconds
                                        </script>
                                    @endif
                                    <!-- First Row -->
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="intervention1" class="form-label">
                                                {{ App::getLocale() === 'ar' ? 'التدخل 1' : (App::getLocale() === 'en' ? 'Intervention 1' : 'Intervention 1') }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <select id="intervention1" class="form-select" name="intervention1" required>
                                                <option value="" disabled selected>
                                                    {{ App::getLocale() === 'ar' ? 'اختر...' : (App::getLocale() === 'en' ? 'Choose...' : 'Choisir...') }}
                                                </option>
                                                @foreach ($chirurgies as $chirurgie)
                                                    <optgroup label="{{ $chirurgie->titre }}"
                                                        style="color:#495057;font-size:15px;">
                                                        @foreach ($chirurgie->categoryChildren as $child)
                                                            <option value="{{ $child->id }}">{{ $child->titre }}
                                                            </option>
                                                        @endforeach
                                                    </optgroup>
                                                @endforeach
                                            </select>

                                        </div>
                                        <div class="col-md-6">
                                            <label for="intervention2" class="form-label">
                                                {{ App::getLocale() === 'ar' ? 'التدخل 2' : (App::getLocale() === 'en' ? 'Intervention 2' : 'Intervention 2') }}
                                            </label>
                                            <select id="intervention2" class="form-select" name="intervention2">
                                                <option value="" disabled selected>
                                                    {{ App::getLocale() === 'ar' ? 'اختر...' : (App::getLocale() === 'en' ? 'Choose...' : 'Choisir...') }}
                                                </option>
                                                @foreach ($chirurgies as $chirurgie)
                                                    <optgroup label="{{ $chirurgie->titre }}"
                                                        style="color:#495057;font-size:15px;">
                                                        @foreach ($chirurgie->categoryChildren as $child)
                                                            <option value="{{ $child->id }}">{{ $child->titre }}
                                                            </option>
                                                        @endforeach
                                                    </optgroup>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Second Row -->
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="intervention3" class="form-label">
                                                {{ App::getLocale() === 'ar' ? 'التدخل 3' : (App::getLocale() === 'en' ? 'Intervention 3' : 'Intervention 3') }}
                                            </label>
                                            <select id="intervention3" class="form-select" name="intervention3">
                                                <option value="" disabled selected>
                                                    {{ App::getLocale() === 'ar' ? 'اختر...' : (App::getLocale() === 'en' ? 'Choose...' : 'Choisir...') }}
                                                </option>
                                                @foreach ($chirurgies as $chirurgie)
                                                    <optgroup label="{{ $chirurgie->titre }}"
                                                        style="color:#495057;font-size:15px;">
                                                        @foreach ($chirurgie->categoryChildren as $child)
                                                            <option value="{{ $child->id }}">{{ $child->titre }}
                                                            </option>
                                                        @endforeach
                                                    </optgroup>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="intervention4" class="form-label">
                                                {{ App::getLocale() === 'ar' ? 'التدخل 4' : (App::getLocale() === 'en' ? 'Intervention 4' : 'Intervention 4') }}
                                            </label>
                                            <select id="intervention4" class="form-select" name="intervention4">
                                                <option value="" disabled selected>
                                                    {{ App::getLocale() === 'ar' ? 'اختر...' : (App::getLocale() === 'en' ? 'Choose...' : 'Choisir...') }}
                                                </option>
                                                @foreach ($chirurgies as $chirurgie)
                                                    <optgroup label="{{ $chirurgie->titre }}"
                                                        style="color:#495057;font-size:15px;">
                                                        @foreach ($chirurgie->categoryChildren as $child)
                                                            <option value="{{ $child->id }}">{{ $child->titre }}
                                                            </option>
                                                        @endforeach
                                                    </optgroup>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Full Width Row -->
                                    <div class="mb-3">
                                        <label for="autres" class="form-label">
                                            {{ App::getLocale() === 'ar' ? 'أخرى' : (App::getLocale() === 'en' ? 'Other' : 'Autres') }}
                                        </label>
                                        <textarea id="autres" class="form-control" rows="4" name="description"></textarea>
                                    </div>



                                    <br>
                                    <div class="form-group" style="display: none;">
                                        <label>Website</label>
                                        <input type="text" class="form-control" name="website">
                                    </div>


                                    <!-- CAPTCHA -->
                                    <div class="form-group col-md-6 col-sm-6 col-xs-6">
                                        <div class="g-recaptcha" data-sitekey="6LcV5KkqAAAAADXI3U-_LGw1kiCHDNA1Kb4uH7xC"
                                            data-theme="light" data-size="normal" data-callback="onSubmit"></div>
                                    </div>

                                    <!-- Submit Button -->
                                    <div class="text-center">
                                        <button type="submit" id="submitButton" name="submit" value="Submit" disabled
                                            class="btn-block"
                                            style="background-color:#11A892;color:white;padding:10px;border-radius:5px;">
                                            {{ App::getLocale() === 'ar' ? 'إرسال' : (App::getLocale() === 'en' ? 'Submit' : 'Envoyer') }}
                                        </button>
                                    </div>


                                </form>
                            </div>
                        </div>
                    </article>
                </main>
            </div>
        </div>
    </div>
    <script>
        function onSubmit(token) {
            document.getElementById('submitButton').removeAttribute('disabled');
        }
    </script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endsection