@php($noSidebar=true)
@extends('upgrade.layouts.app')
@section('content')
    <style>
        .danger {
            padding:0 5px;
            color:#f00;
        }
        .status-bar .bar-items li {
            width: 20%;
        }
    </style>

    <x-errors></x-errors>
    <x-get-session key="error"></x-get-session>
    <x-get-session key="success"></x-get-session>
    <section class=''>
        <div class="row">
            <form id="example-advanced-form" onsubmit="event.preventDefault(); return false">
                @csrf
                <h3>الطلب</h3>
                <div>
                    <!-- start request form -->
                    <section class='uk-section request-form'>
                        <div class="full-container">
                            <div class="row">
                                <div class="uk-grid">
                                    <div class="uk-width-2-5@s">
                                        <div>
                                            <x-form-group for="city">
                                                <x-slot name="label">المدينة</x-slot>
                                                <x-input id="city" type="text" value="{{old('city')}}" name="city" required value="habib" placeholder='اختر المدينة المناسبة' ></x-input>
                                                <x-form-error name="city"></x-form-error>
                                            </x-form-group>
                                            <x-form-group for="date">
                                                <x-slot name="label">التاريخ</x-slot>
                                                <x-input id="date" type="date" value="{{old('date')}}" name="date" required value="1998-09-09" placeholder='التاريخ' ></x-input>
                                                <x-form-error name="date"></x-form-error>
                                            </x-form-group>
                                            <x-form-group for="time">
                                                <x-slot name="label">الوقت</x-slot>
                                                <x-input id="time" type="time" value="{{old('time')}}" name="time" required value="11:11" placeholder='الوقت' ></x-input>
                                                <x-form-error name="time"></x-form-error>
                                            </x-form-group>
                                        </div>
                                    </div>
                                    <div class="uk-width-3-5@s map">
                                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d463876.9397116346!2d47.102715725742776!3d24.725555345171905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e2f03890d489399%3A0xba974d1c98e79fd5!2z2KfZhNix2YrYp9i2IDExNTY02Iwg2KfZhNiz2LnZiNiv2YrYqQ!5e0!3m2!1sar!2seg!4v1603211665870!5m2!1sar!2seg" height="400" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- end request form -->
                    <!-- start category -->
                    <section class="uk-section category">
                        <div class="full-container">
                            <div class="row">
                                <h2>نوع المناسبة</h2>
                            </div>
                            <div class="row">
                                <div class="uk-grid uk-child-width-1-5@s uk-child-width-1-2" toggle-child='active'>
                                    @foreach ([
                                           'wedding'=>[
                                               "name"=>'مناسبة زواج',
                                               "image"=>asset('assets/img/img-1.png')
                                           ] ,
                                           'family'=>[
                                               "name"=> 'مناسبة عائلية',
                                               "image"=>asset('assets/img/img-1.png')
                                           ] ,
                                           'graduate'=>[
                                               "name"=>'حفل تخرج',
                                               "image"=>asset('assets/img/img-1.png')
                                           ] ,
                                           'other'=>[
                                               "name"=>'مناسبة اخري',
                                               "image"=>asset('assets/img/img-1.png')
                                           ]
                                        ] as $key => $item)
                                        <div class='category-item {{$loop->first ? ' active ': ''}} uk-margin-small-bottom'>
                                            <div class='item'>
                                                <img src="{{ $item['image'] }}" alt=""/>
                                                <div class="info"> <div class="info-bg"></div> <h4>{{$item['name']}}</h4> </div>
                                                <i class="check fas fa-check">
                                                    <input required  type="radio" style="display: none" name="contact_subject" class="contact_subject" value="{{$key}}"  {{$loop->first ?  ' checked ':''}}  />
                                                </i>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- end category -->
                    <!-- start Bouquet Category -->
                    <section class="uk-section bouquet-category visible-items">
                        <div class="full-container">
                            <div class="row">
                                <div class="" uk-slider>
                                    <ul class="uk-slider-items uk-child-width-1-1 uk-child-width-1-3@s uk-child-width-1-4@m uk-grid"  toggle-child='active'>
                                        @foreach ($plans as $plan)
                                            <li  class='category-item item {{$loop->first ?  ' active ':'' }} '>
                                                <div class='item-content'>
                                                    <img src="{{ $plan->image_path }}" alt="">
                                                    <div class="text">
                                                        <h3>{{ $plan->name }}</h3>
                                                        <p>{{ $plan->hours }} ساعات مدة الطلب</p>
                                                        <p>{{ $plan->photographers }} مصورين</p>
                                                        <p>{{ number_format($plan->price) }}  <sup>{{$plan->currency}}</sup></p>
                                                        <a class='btn-s' href="#modal-{{ $plan->id }}" uk-toggle>تحديد</a>
                                                    </div>
                                                    <i class="check fas fa-check">
                                                        <input required  type="radio" style="display: none" name="plan_id" class="plan_id" value="{{$plan->id}}" {{$loop->first ?  ' checked ':''}}     />
                                                    </i>
                                                </div>
                                            </li>
                                            @push('model')
                                                <div id="modal-{{$plan->id}}" class="uk-flex-top bouquet-fill-item uk-modal-container" uk-modal>
                                                    <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
                                                        <div class='item'>
                                                            <div class='item-content uk-grid'>
                                                                <img src="{{ $plan->image_path }}" class='uk-width-1-1 uk-width-1-2@s' alt="">
                                                                <div class="text uk-width-1-1 uk-width-1-2@s">
                                                                    <h3 class='mark'>تصوير فوتوغرافي</h3>
                                                                    <p>
                                                                        {!! $plan->description !!}
                                                                    </p>
                                                                    <div class='bold mark'>تشمل باقة التصوير الفوتوغرافي الخاصه بك :</div>
                                                                    <ul class='list uk-margin-small'>
                                                                        <li>{{ $plan->hours }} ساعات مدة الطلب</li>
                                                                        <li>{{ $plan->photographers }} مصورين</li>
                                                                    </ul>
                                                                    <div class="uk-grid uk-grid-small uk-child-width-1-2">
                                                                        <div><button class='btn submit uk-modal-close uk-text-lead'>تأكيد</button></div>
                                                                        <div class='uk-text-large uk-margin-small-top'>المجموع : <span class='bold mark'>{{$plan->price}}  <sup>{{$plan->currency}}</sup></span> </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endpush
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                @guest('client')
                    <h3>التسجيل</h3>
                    <div>
                        <!-- start request form -->
                        <div class="full-container">
                            <div class="uk-grid uk-grid-xlarge">
                                <div class="uk-width-2-5@s uk-width-1-1">
                                    <div class="uk-margin">
                                        <label>الأسم الكامل</label>
                                        <span class='danger' id='nameError'></span>
                                        <input type="text" class="uk-input x-input" name='name' minlength="3" required value="habib" />
                                    </div>
                                    <div class="uk-margin">
                                        <label for="">رقم الجوال</label><span class='danger' id='phoneError'></span>
                                        <input type="text" class="uk-input x-input" name='phone' minlength="11" maxlength="15" required value="+201098989297"/>
                                        <small> +996******** </small>
                                    </div>
                                </div>
                                <div class="uk-width-2-5@s uk-width-1-1">
                                    <div class="uk-margin">
                                        <label>البريد الألكتروني</label> <span class='danger' id='emailError'></span>
                                        <input type="email" class="uk-input x-input" minlength="8" required name='email' value="admin@app.com" />
                                    </div>
                                    <div class="uk-margin">
                                        <label>كلمة السر</label> <span class='danger' id='passwordError'></span>
                                        <input type="password" class="uk-input x-input" minlength="8" required name='password' value="123456789" />
                                    </div>
                                </div>
                            </div>
                            <div class="uk-margin-large-bottom uk-margin-large-top">
                                {{--                            <div class="uk-width-1-3@s">--}}
                                {{--                                <button class="btn active">انشاء حساب جديد</button>--}}
                                {{--                            </div>--}}
                                <p>هل لديك حساب بالفعل ؟ <a href="{{asset('client/login')}}" class='mark bold'>سجل دخولك</a></p>
                            </div>
                        </div>
                        <!-- end request form -->
                    </div>
                    <h3>تاكيد الهاتف</h3>
                    <div>
                        <!-- start request form -->
                        <div class="full-container">
                            <div class="uk-grid uk-grid-xlarge">
                                <div class="uk-width-2-5@s uk-width-1-1">
                                    <input type="hidden" name="id" id="code" value="" />
                                    <span class='uk-text-danger' id='tokenError'></span>
                                    <input type="text" name="token" maxlength="6" minlength="6" required class="uk-input x-input" placeholder='رسالة التاكيد'>
                                    <small>
                                        <a id="resendMessage" href="#">اعادة ارسال</a>
                                    </small>
                                    <div class="uk-margin-large-bottom uk-margin-large-top" >
                                        <div class="uk-width-1-3@s">
                                            <button class="btn active" type="submit" id="registerPhone">تاكيد</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- end request form -->
                    </div>
                @endguest
                <h3>الدفع</h3>
                <div>
                    <div class="full-container">
                        <div class="uk-width-2-3@s uk-width-1-1">
                            <ul uk-accordion class='accordion-item'>
                                <li>
                                    <a class="uk-accordion-title bold chec" href="#"> سياسة وش شروط دم لايت <span><input checked='true' type="checkbox" required> تأكيد</span> </a>
                                    <div class="uk-accordion-content policy">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        <p>Lorem ipsum dolor sit amet <a href="#lic" uk-toggle="target: #modal-close-default">عرض المزيد</a></p>
                                    </div>

                                </li>
                            </ul>
                            <ul uk-accordion class='accordion-item'>
                                <li>
                                    <a class="uk-accordion-title bold" href="#">أهم الأسئلة الشائعة</a>
                                    <div class="uk-accordion-content policy">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="row">
                            <div class="uk-margin-large-bottom uk-margin-large-top">
                                <div class="uk-width-1-3@s uk-width-1-1">
                                    <a class="btn">الرجوع للصفحة الرئيسية</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="lic" uk-modal>
                        <div class="uk-modal-dialog uk-modal-body">
                            <button class="uk-modal-close-default" type="button" uk-close></button>
                            <h2 class="uk-modal-title">سياسة و شروط دم لايت</h2>
                            <p>
                                1 .موعد وصول الفنان للزواج يحدد من قبل العميل حسب الوقت المخصص لكل خدمة وفي حال عدم تحديد
                                الوقت فيعتبر الموعد هو بعد أذان صلاة العشاء بـ ١٥ دقيقة في مدينة المناسبة وفي حال تأخر الفنان عن
                                الوصول في الوقت المحدد بأكثر من ربع ساعة يتم خصم مبلغ للعميل ما نسبته ١٥ ٪من قيمة بيع
                                الخدمة المتأخرة ، وما نسبته ٤٥ ٪إذا تأخر نصف ساعة إلى ساعة و٧٥ ٪إذا تأخر من ساعة إلى ساعة ونصف
                                ويسترد المبلغ للعميل ً كاملا إذا تأخر الفنان أكثر من ساعة ونصف بالإضافة إلى تعويض مادي مانسبته
                                ٥٠ ٪من قيمة الخدمة المتأخرة.
                            </p>
                            <p>
                                2 .في حال حدوث ظرف طار ئ للفنان قبل أو أثناء أو بعد المناسبة فإن دم لايت مسؤولة عن إيجاد بديل.
                            </p>
                            <p>
                                3 .يتم تسليم الأعمال للعميل خلال مدة لا تتجاوز ٧٢ ساعة من بداية اليوم التالي للمناسبة وفي حال التأخير
                                بتسليم التغطية للعميل عن الموعد المتفق عليه يتم احتساب ما نسبته ٣ ٪خصم من قيمة الخدمة
                                المتأخرة عن كل ١٢ ساعة تأخير.
                            </p>
                            <p>
                                4 .يحق للعميل المطالبة بالتعديل مرتين لأي عمل خلال مدة لا تتجاوز أسبوع من تاريخ تسليم العمل وأي تعديل
                                إضافي يحتسب بمبلغ مستقل بين ٢٥٠ و ٥٠٠ ريال حسب نوع التعديل. ولا يشمل هذا البند التعديل بسبب
                                عدم اختيار الخلفية الصوتية للمونتاج من قبل العميل قبل المناسبة.

                            </p>
                            <p>
                                5 .عند عدم اختيار أو توفير خلفية صوتية لمونتاج لفيديو قبل المناسبة من قبل العميل ، سيتم الاختيار من قبل دم
                                لايت وعند رغبة العميل بتغييرها يدفع مبلغ وقدره ٢٠٠ ريال.
                            </p>
                            <p>
                                6 .في حال طلب تعديلات على العمل أو تأخر العميل بتسليم المعلومات المطلوبة منه، سيتغير موعد التسليم
                                النهائي ً تبعا لذلك.

                            </p>
                            <p>
                                7 .في حال طلب العميل زيادة الوقت فإنه يدفع ما قيمته ٢٩٠ ريال عن كل ساعة إضافية لكل فنان.
                            </p>
                            <p>
                                8 .في حال كان هناك فشل في المعدات مخل بجودة التغطية يتم تعويض العميل بالاتفاق.
                            </p>
                            <p>
                                9 .لا يحق للعميل مطالبة الشركة أو الفنانين بالتعدي على أنظمة الدولة وفي حال صدور قرار بعد تأكيد الحجز فإن
                                للعميل الحق بإلغاء طلب التغطية ويسترد العربون ً كاملا.
                            </p>
                            <p>
                                10 .يحق للعميل طلب التواصل مع الإدارة لرفع شكوى على أي فنان أو موظف.

                            </p>
                            <p>
                                11 .يلتزم العميل بدفع مبلغ الخدمة ً كاملا قبل تاريخ المناسبة بأسبوع وفي حال عدم التزامه بذلك يحق لدم لايت
                                إلغاء الحجز وعدم استرداد العربون.

                            </p>
                            <p>
                                12 .في حالة رغبة العميل بإلغاء طلب التغطية فان مبلغ العربون يسترد ً كاملا في حال طلب الإلغاء قبل المناسبة
                                بأكثر من شهر ويسترد نصف العربون في حال تم الإلغاء في الفترة بين شهر وأسبوع قبل التغطية ولا
                                يسترد العربون في كل الأحوال إذا تبقى على المناسبة أقل من أسبوع
                            </p>
                            <p>
                                13 .في حال رغبة العميل بتأجيل التغطية فإن المبلغ المحول كرصيد يحفظ له لمدة ٦ أشهر حتى يتم تثبيت آخر
                                للمبلغ وإلا فيعود للبند الثاني عشر
                            </p>
                            <p>
                                14 .قد تتغير الأسعار أو الخدمات المقدمة مع التغطية في حال تغيير موعد المناسبة أو في حال كانت المعلومات
                                المقدمة من قبل العميل خاطئة أو ناقصة سواء كان لاختلاف المكان أو الزمان وغيرها.
                            </p>
                            <p>
                                15 .دم لايت غير ملزمة بتسليم نسخة من الأعمال بعد انتهاء ضمان حفظ الذكريات المحدد للخدمة أو مرور ٦
                                شهور على الخدمات الفردية.
                            </p>
                            <p>
                                16 .جميع الحقوق محفوظة لدم لايت.
                            </p>
                            <p>
                                17 .في حال وجود سوء فهم بين الطرفين فإن المرجع الأصلي هي محادثات الواتس اب و بيانات الاستبيان ولا يعتبر
                                بالكلام الشفهي ولا بالاتفاق المباشر مع الفنان بدون الرجوع للإدارة.

                            </p>
                            <p>
                                18 .في الزواجات يجب ألا تقل الصور عن ١٢٠ صورة للفنان الواحد والفيديو لا يقل عن ٤ دقائق الا بالاتفاق مع العميل.
                                وفي حال عدم الالتزام بذلك يتم خصم ما قدره ٢٠٠ ر ً يالا على خدمة التصوير الفوتوغرافي إذا كان عدد الصور
                                بين ١١٩ و١٠٠ صورة وخصم ما قدره ٤٠٠ ريال اذا كان عدد الصور أقل من ذلك للفنان الفوتوغرافي الواحد. وفي
                                خدمة تصوير الفيديو يتم خصم ما قدره ٤٠٠ ريال إذا كانت مدة المونتاج بين دقيقتين وثلاث دقائق وخصم ٨٠٠
                                ريال في حال كانت أقل من ذلك.

                            </p>
                            <p>
                                19 .في حال طلب العميل إضافة مقطع صوتي محدد فإن دم لايت تخلي مسؤوليتها من التجاوز على حقوقه إن
                                وجدت ويكون العميل هو المسؤول عن ذلك.
                            </p>
                            <p>
                                20 .لا يحق للعميل في حال تعاون مع مزود خدمة من خارج دم لايت أن يطالب بدمج عمله كاملا أو ً جزءا منه مع
                                عملنا.
                            </p>
                            <p>
                                21 .في حال وجود خدمات مجانية مقدمة من قبل دم لايت ولم يستلمها العميل في الوقت المحدد لها؛ فإنها غير
                                مكلفة بتسليمها بعد نهاية المدة.
                            </p>
                            <p>
                                22 .في التصوير الجوي: في حال وجود ما يمنع التصوير فإن العميل يتكفل بتوفير التصريح المطلوب وعلى سبيل
                                الذكر لا الحصر: القاعات العسكرية تحتاج تصريح ، وجود موانع للتصوير مثل تجمعات عائلة محيطة
                                بالمكان. وفي حال عدم توفيره للتصريح ولم يستطع الفنان من التصوير فلا يحق له المطالبة باسترداد
                                المبلغ. وكذلك في حال وجود ظروف جوية غير مناسبة للطيران سنكتفي بالتصوير داخل القاعة
                            </p>
                            <p>
                                23 .يحق للعميل تحديد موقعين للتصوير ( مثلا: مكان الاجتماع ومكان القاعة ) وفي حال وجود موقع ثالث فإنه
                                يدفع تكلفة إضافية وقدرها ١٨٠ ريال للفنان الواحد
                            </p>
                            <p>
                                24 .يحق للعميل تحديد وقت بداية طلب التصوير ويشترط أن يكون متصلا بلا فواصل وترتيب ساعات غير متصلة
                                بما يشمل المسافة بين موقع الإجتماع والقاعة إن وجد.
                            </p>
                        </div>
                    </div>
                    <!-- start pay -->
                    <section class='payment'>
                        <div class="full-container">
                            <div class="row">
                                <div class="uk-grid uk-large-grid">
                                    <div class="uk-width-2-3@s uk-width-1-1">
                                        <h3>طريقة الدفع</h3>

                                    </div>
                                    <div class="uk-width-1-3@s uk-width-1-1 uk-padding">
                                        <div class="uk-card uk-card-default uk-card-body">
                                            <h3 class="card-title mark">تفاصيل الحجز</h3>
                                            <ul id='error-list'></ul>
                                            <ul class='card-list'>
                                                <li>
                                                    <div class="icon">
                                                        <img src="{{asset('assets/img/1.jpg')}}" id="DataImage" alt="">
                                                    </div>
                                                    <div class="text bold" id="DataContact"></div>
                                                </li>
                                                <li>
                                                    <div class="icon">
                                                        <i class='fas fa-map-marker-alt'></i>
                                                    </div>
                                                    <div class="text" id="DataCity"></div>
                                                </li>
                                                <li>
                                                    <div class="icon">
                                                        <i class='far fa-calendar-check'></i>
                                                    </div>
                                                    <div class="text" id="DataDate"></div>
                                                </li>
                                                <li>
                                                    <div class="icon">
                                                        <i class='far fa-clock'></i>
                                                    </div>
                                                    <div class="text" id="DataTime"></div>
                                                </li>
                                                {{--                                                <li>--}}
                                                {{--                                                    <div class="icon">--}}
                                                {{--                                                        <i class='fas fa-star-half-alt'></i>--}}
                                                {{--                                                    </div>--}}
                                                {{--                                                    <div class="text">10, Seq 2020</div>--}}
                                                {{--                                                </li>--}}
                                                <li>
                                                    <div class="icon">
                                                        <i class='fas fa-dollar-sign'></i>
                                                    </div>
                                                    <div class="text">ضريبة 15%</div>
                                                </li>
                                            </ul>
                                            <div>
                                                <div class="uk-grid uk-child-width-1-2 uk-margin-small-top">
                                                    <div><h4>السعر الكلي</h4></div>
                                                    <div class=''><span class='uk-align-left mark bold' id="DataPrice">1.100 ريال</span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- end pay -->
                </div>

                <h3>التأكيد</h3>
                <div>
                    <!-- end status bar -->
                    <div class="xs-only uk-width-1-1">
                        <div class="uk-card uk-card-default uk-card-body">
                            <h3 class="card-title mark">تفاصيل الحجز</h3>

                            <ul class='card-list'>
                                <li>
                                    <div class="icon">
                                        <img src="{{asset('assets/img/1.jpg')}}" alt="">
                                    </div>
                                    <div class="text bold">مناسبة زراج</div>
                                </li>
                                <li>
                                    <div class="icon">
                                        <i class='fas fa-map-marker-alt'></i>
                                    </div>
                                    <div class="text"></div>
                                </li>
                                <li>
                                    <div class="icon">
                                        <i class='far fa-calendar-check'></i>
                                    </div>
                                    <div class="text"></div>
                                </li>
                                <li>
                                    <div class="icon">
                                        <i class='far fa-clock'></i>
                                    </div>
                                    <div class="text"></div>
                                </li>
                                {{--                                <li>--}}
                                {{--                                    <div class="icon">--}}
                                {{--                                        <i class='fas fa-star-half-alt'></i>--}}
                                {{--                                    </div>--}}
                                {{--                                    <div class="text">10, Seq 2020</div>--}}
                                {{--                                </li>--}}
                                <li>
                                    <div class="icon">
                                        <i class='fas fa-dollar-sign'></i>
                                    </div>
                                    <div class="text">ضريبة 15%</div>
                                </li>
                            </ul>
                            <div>
                                <div class="uk-grid uk-child-width-1-2 uk-margin-small-top">
                                    <div><h4>السعر الكلي</h4></div>
                                    <div class=''><span class='uk-align-left mark bold'> ريال</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- start request form -->
                    <section class=''>
                        <div class="full-container">
                            <div class="uk-width-2-3@s uk-width-1-1">
                                <ul class='notify-list'>
                                    <li>شكرا لكم اختيار دام لتوثيق اسعد لحظاتكم ومناسباتكم</li>
                                    <li>سوف يتم خلال 48 ساعة القادمة التواصل معك لاخذ المزيد تفاصيل اكثر عن مناسبتك وخدمتك بالشكل الذي يليق بك</li>
                                    <li>سيتم ارسال تاكيد الدفع علي حسابك علي الأيميل او علي رسالة نصية علي جوالك</li>
                                </ul>

                            </div>
                            {{--                            <div class="">--}}
                            {{--                                <div class="uk-margin-large-bottom uk-margin-large-top">--}}
                            {{--                                    <div class="uk-width-1-3@s uk-width-1-1">--}}
                            {{--                                        <a class="btn">الدفع</a>--}}
                            {{--                                    </div>--}}
                            {{--                                </div>--}}
                            {{--                            </div>--}}
                        </div>
                    </section>
                    <!-- end request form -->
                </div>
            </form>
        </div>
    </section>
    <div class='loading none'>
        <div class='uk-cover'>
            <div class="uk-position-center">
                <div uk-spinner="ratio: 3"></div>
                {{-- <span uk-icon="heart"></span> --}}
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit-icons.min.js"></script>
    <script src='{{asset('assets/js/jquery.steps.min.js')}}'></script>
    <script src='{{asset('assets/js/jquery.validate.js')}}'></script>
    <script>
        $(function () {
            const loggedIn = @auth('client') true @else false  @endauth ;
            var form = $("#example-advanced-form");
            let loading = $('.loading');
            form.steps({
                headerTag: "h3",
                saveState:true,
                startIndex: 1, //
                bodyTag: "div",
                transitionEffect: "fade",
                onStepChanging: function (event, currentIndex, newIndex)
                {
                    // Allways allow previous action even if the current form is not valid!
                    if (currentIndex > newIndex)
                    {
                        return true;
                    }
                    form.validate().settings.ignore = ":disabled,:hidden";
                    let valid =  form.valid();

                    if (newIndex ===2 && !loggedIn){
                        loading.fadeIn();
                        $.ajax({
                                method:"POST",
                                url:'{{ route('client.register.validation') }}',
                                data:form.serializeArray(),
                                success:({ code  , phone })=>{
                                    // start timer here
                                    // form.steps('next');
                                    $("#emailError").text('');
                                    $("#nameError").text('');
                                    $("#phoneError").text('');
                                    $("#passwordError").text('');
                                    loading.fadeOut();
                                    // send sms and valid form data
                                    let registerPhone = $('#example-advanced-form #registerPhone');
                                    let resendMessage = $('#example-advanced-form #resendMessage');
                                    let tokenError = $('#example-advanced-form #tokenError');
                                    let codeHtml = $('#example-advanced-form #code');
                                    codeHtml.val(code);
                                    registerPhone.click(function (e){
                                        e.preventDefault();
                                        console.log('registerPhone')
                                        let data;
                                        data = $(this).serializeArray();
                                        data.push({name:"phone",value:phone});
                                        $.ajax({
                                            headers:{
                                                "Accept":"application/json"
                                            },
                                            method:"POST",
                                            url:'{{ route('client.verify.phone') }}',
                                            data:{
                                                phone,
                                                token : $("[name=token]")[0].value || null,
                                                id : $("[name=id]")[0].value || null,
                                            },
                                            success:function ({status}){
                                                console.log('client.verify.phone')

                                                loading.fadeOut();
                                                // if false show not valid code message
                                                if (!status){
                                                    tokenError.text( '  غير صحيح');
                                                    return false;
                                                }
                                                // if true send register client
                                                // remove error text
                                                tokenError.text('');
                                                data = $(this).serializeArray();
                                                data.push({name:"phone",value:phone});
                                                data.push({name:"phone_verify_at",value:status});
                                                loading.fadeIn();
                                                form.steps('next');
                                            },
                                            error:function (error){
                                                console.log('client.verify.phone',error)
                                                tokenError.text( '   غير صحيح ');
                                                loading.fadeOut();
                                            }
                                        });
                                        return false;
                                    });
                                    resendMessage.click(function (){
                                        $.ajax({
                                            headers:{
                                                "Accept":"application/json"
                                            },
                                            method:"GET",
                                            url:'{{ route('client.resend.verify.phone') }}',
                                            data: { phone },
                                            success:function ({code}){
                                                loading.fadeOut();
                                                if (code){
                                                    // restart timer here
                                                    localStorage.setItem('code',code);
                                                    codeHtml.val(code);
                                                }
                                                tokenError.text('');
                                            },
                                            error:function (error){
                                                loading.fadeOut();
                                                // display timer here
                                                tokenError.text(" انتظر دقيقة ثم حاول مرة اخري ")
                                            }
                                        });
                                    });
                                    return true;
                                },
                                error:function (error){
                                    console.log('client.register.validation',error)
                                    form.steps('previous');
                                    loading.fadeOut();
                                    const { errors : {email , name , phone , password} } = error.responseJSON;
                                    $("#emailError").text( email ? email[0] : null);
                                    $("#nameError").text( name ? name[0] : null);
                                    $("#phoneError").text( phone ? phone[0] : null);
                                    $("#passwordError").text( password ? password[0] : null);
                                }
                            });

                        return true ;
                    }
                    console.log(currentIndex,((loggedIn && currentIndex ===0) || (!loggedIn && currentIndex ===3)))
                    if (((loggedIn && currentIndex ===0) || (!loggedIn && currentIndex ===2)) && valid){
                        loading.fadeIn();
                        console.log(form.serializeArray())
                        $.ajax({
                            method:"POST",
                            url:'{{ route('payment.all_in_one.post') }}',
                            data:form.serializeArray(),
                            success:function ({success_url}){
                                if (success_url){
                                    window.location = success_url;
                                    loading.fadeOut();
                                }
                            },
                            error:function (error){
                                loading.fadeOut();
                                const { errors : { email , name , phone , password } } = error.responseJSON;

                                $("#emailError").text( email ? email[0] : null);
                                $("#nameError").text( name ? name[0] : null);
                                $("#phoneError").text( phone ? phone[0] : null);
                                $("#passwordError").text( password ? password[0] : null);
                            }
                        });
                        return false;
                    }

                    // Needed in some cases if the user went back (clean up)
                    if (currentIndex < newIndex)
                    {
                        // To remove error styles
                        form.find(".body:eq(" + newIndex + ") label.error").remove();
                        form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
                    }

                    return valid;
                },
                onStepChanged: function (event, currentIndex, priorIndex)
                {
                    // Used to skip the "Warning" step if the user is old enough and wants to the previous step.
                    if (currentIndex === 2 && priorIndex === 3)
                    {
                        form.steps("previous");
                    }
                },
                onFinishing: function (event, currentIndex)
                {
                    form.validate().settings.ignore = ":disabled";
                    return form.valid();
                },
                onFinished: function (event, currentIndex)
                {

                }
            }).validate({
                errorPlacement: function errorPlacement(error, element) { element.before(error); },
                rules: {
                    confirm: {
                        equalTo: "#password-2"
                    }
                }
            });
            $('a[role="menuitem"]').eq(0).html('السابق').addClass('btn-s')
            $('a[role="menuitem"]').eq(1).html('التالي').addClass('btn-s')
            $('a[role="menuitem"]').eq(2).html('العودة للصفحة الرئيسية').addClass('btn-s')
            $('[role="menu"]').addClass('full-container uk-margin-large-bottom')
            $(".steps").addClass("status-bar").find('ul').addClass("bar-items")
            for(let z = 0; z < $('.steps ul li').length; z++) {
                let oldItem = $('.steps ul li').eq(z).html();
                $('.steps ul li').eq(z).find('a').html(`
            <div class="circle">
                <i class="bolid"><i class='fas fa-check'></i></i>
                <div class="status">${oldItem}</div>
            </div>
            `);
            }

  $("*[toggle]").on("click", function () {
    $(this).toggleClass($(this).attr("toggle"));
  });
    $("*[toggle-child]").children().on("click", function () {
        var classN = $(this).parent().attr("toggle-child");
        $(this).siblings().removeClass('active');
        $(this).addClass(classN)
        console.log(classN)
    });
  $("[view-form]").on("click", function () {
    $("[form-name=" + $(this).attr("view-form") + "]")
      .slideDown()
      .siblings()
      .slideUp();
  });
  $(".navbar .bars").on("click", function () {
    $(".navbar .mainmenu").slideToggle();
  });
  $("[link]").on("click", function () {
    window.location.href = $(this).attr("link");
  });
  let check = true;
  $(".chec").on("click", function () {
    check = !check;
    $(this).find("input").attr("checked", check);
  });

//   $("[uk-modal] .submit").on("click", function () {
//     $(".bouquet-category .item.active").removeClass("active");
//     $(
//       '.bouquet-category .item a[href="#' +
//         $(this).closest("[uk-modal]").attr("id") +
//         '"]'
//     )
//       .closest(".item")
//       .addClass("active");
//     // $(this).closest('.item').addClass('active');
//   });
    function addCkechMark(item, input, clickAple) {
        if (item == null) {
            item = '.item';
        }
        if (input == null) {
            item = 'input';
        }
        $(clickAple).on('click', function () {
            $(this).closest(item).addClass("active");
            $(item).find('input').removeAttr("checked");
            $(item + '.active').find(input).attr("checked", true);
        })
    }
    addCkechMark('.val-item', 'input', '.bouquet-category .item img');
    addCkechMark('.category-item', 'input', '.category-item');
        });

    </script>
@endpush