{{--@dd($transaction)--}}
@extends('payment.layouts.layout')
@section('content')
    <section class=''>
        <div class="row">
            <div id="example-advanced-form" ">
                <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>
                                            <div class="uk-margin">
                                                <label for="">المدينة</label>
                                                <input type="text" class="uk-select" name='city' required value="{{$transaction->webmail->from_city}}"/>
                                            </div>
                                            <div class="uk-margin">
                                                <label for="">التاريخ</label>
{{--                                                <input class="uk-input" type='date' name='date' required value="2020-10-28" />--}}
                                                <input class="uk-input" type='date' name='date' required value="{{$transaction->webmail->from_date->toDateString()}}" />
                                            </div>
                                            <div class="uk-margin">
                                                <label for="">الوقت</label>
                                                <input class="uk-input" type="time" name='time' required value="{{$transaction->webmail->from_date->toTimeString()}}"/>
                                            </div>
                                        </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 ([
                                           'family'=>[
                                               "name"=> 'مناسبة عائلية',
                                               "image"=>asset('assets/img/img-1.png')
                                           ] ,
                                           'graduate'=>[
                                               "name"=>'حفل تخرج',
                                               "image"=>asset('assets/img/img-1.png')
                                           ] ,
                                           'wedding'=>[
                                               "name"=>'مناسبة زواج',
                                               "image"=>asset('assets/img/img-1.png')
                                           ] ,
                                           'other'=>[
                                               "name"=>'مناسبة اخري',
                                               "image"=>asset('assets/img/img-1.png')
                                           ]
                                        ] as $key => $item)
                                        <div class='category-item {{$item['name'] == $transaction->webmail->title ? ' 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="hidden" name="contact_subject" value="{{$key}}"  {{$item['name'] == $transaction->webmail->title ?  ' checked ':''}}  />
                                                </i>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- end category -->
                    <!-- start Bouquet Category -->
                    <section class="uk-section bouquet-category">
                        <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">
                                        @forelse (\App\Plan::latest()->get() as $plan)
                                            <li class='item {{$plan->id == $transaction->plan_id ?  ' 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>{{$plan->price}}  <sup>{{$plan->currency}}</sup></p>
                                                        <a class='btn' href="#modal-{{$plan->id}}" uk-toggle>تحديد</a>
                                                    </div>
                                                    <i class="check fas fa-check">
                                                        <input type="hidden" required name="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'>
                                                                        <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'>تأكيد</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
                                        @empty

                                        @endforelse
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <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 class="uk-open">
                                    <a class="uk-accordion-title bold chec" href="#"> سياسة وش شروط دم لايت <span><input class='uk-checkbox' disabled type="checkbox"> تأكيد</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, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</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>
                    <!-- 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">
                                        <div class='pay-row none'>
                                            <h3>طريقة الدفع</h3>
                                            {!! $PayForm ?? '' !!}
                                        </div>
                                    </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="{{$transaction->plan->image_path}}" alt="">
                                                    </div>
                                                    <div class="text bold">{{$transaction->webmail->title}}</div>
                                                </li>
                                                <li>
                                                    <div class="icon">
                                                        <i class='fas fa-map-marker-alt'></i>
                                                    </div>
                                                    <div class="text">{{$transaction->webmail->from_city}}</div>
                                                </li>
                                                <li>
                                                    <div class="icon">
                                                        <i class='far fa-calendar-check'></i>
                                                    </div>
                                                    <div class="text">{{$transaction->webmail->from_date}}</div>
                                                </li>
                                                <li>
                                                    <div class="icon">
                                                        <i class='fas fa-clock'></i>
                                                    </div>
                                                    <div class="text">{{$transaction->webmail->from_date->toTimeString()}}</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'>{{ number_format($transaction->total,2) }} ريال</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">10, Seq 2020</div>
                                </li>
                                <li>
                                    <div class="icon">
                                        <i class='far fa-clock'></i>
                                    </div>
                                    <div class="text">10, Seq 2020</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'>1.100 ريال</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>
            </div>
        </div>
    </section>

@endsection

@push('js')
    <script>
        $(function () {
            var form = $("#example-advanced-form");
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            form.steps({
                headerTag: "h3",
                preloadContent: true,
                saveState:true,
                enableAllSteps: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;
                    }
                    // Forbid next action on "Warning" step if the user is to young
                    if (newIndex === 3 && Number($("#age-2").val()) < 18)
                    {
                        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");
                    }
                    form.validate().settings.ignore = ":disabled,:hidden";
                    return form.valid();
                },
                onStepChanged: function (event, currentIndex, priorIndex)
                {
                    // Used to skip the "Warning" step if the user is old enough.
                    if (currentIndex === 2 && Number($("#age-2").val()) >= 18)
                    {
                        form.steps("next");
                    }
                    // 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");
                    }
                    console.log(currentIndex)
                },
                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>
            `);
            }


        });

    </script>
@endpush