@extends('upgrade.layouts.app')
@php($step = 2)
@section('content')

    <!-- 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">
                        <form action="{{ route('payment.make.payment')  }}" method="POST" class="uk-form" id="from_submit_on_click">
                            @csrf
                            @error('time') <span class="uk-text-danger"> {{ $message }} </span> @enderror
                            <div class="uk-margin">
                                <label for="city">المدينة</label>
                                <input class="uk-input" id="city" type="text" value="{{old('city')}}" name="city" required  placeholder="المدينة"/>
                                @error('city') <span class="uk-text-danger"> {{ $message }} </span> @enderror
                            </div>

                            <div class="uk-margin">
                                <label for="date">التاريخ</label>
                                <input type="date" class="uk-input" value="{{old('date')}}" name="date" required placeholder="التاريخ" />
                                @error('date') <span class="uk-text-danger"> {{ $message }} </span> @enderror
                            </div>

                            <div class="uk-margin">
                                <label for="time">الوقت</label>
                                <input type="time" class="uk-input" value="{{old('time')}}" name="time"  id="time" required placeholder="الوقت" />
                                <input type="hidden" class="uk-input" id="plan_id"  value="{{$plans->first()->id ?? ''}}" name="plan_id" required />
                                <input type="hidden" class="uk-input" id="contact_subject"  value="family" name="contact_subject" required />
                                @error('time') <span class="uk-text-danger"> {{ $message }} </span> @enderror
                            </div>

                        </form>
                    </div>
                    <div class="uk-width-3-5@s map">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2874.691922345382!2d31.376162024660797!3d31.03727845493937!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14f7777bfe771703%3A0xd1aa28f76e87bc34!2z2KfZhNmF2YbYtdmI2LHYqdiMINin2YTYr9mC2YfZhNmK2Kk!5e0!3m2!1sar!2seg!4v1601291254920!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 selected-event ">
        <div class="full-container">
            <div class="row">
                <h2>نوع المناسبة</h2>
            </div>
            <div class="row">
                <div class="uk-grid uk-child-width-1-4@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 {{$loop->first ? ' active ': ''}}' toggle='active'>
                            <div class='item'>
                                <img src="{{ $item['image'] }}" alt=""/>
                                <div class="info"> <div class="info-bg"></div> <h4>{{$item['name']}}</h4> </div>
                                <input type="radio" class="event_type" name="event_type" {{$loop->first ? ' checked ': ''}} value="{{ $key  }}" style="display:none;" id="event-type-{{$key}}"/>
                                <i class="check fas fa-check"></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" toggle-child="active">
                        @foreach ($plans as $plan)
                            <li class='item {{$loop->first ?  ' active ':''}} ' id="planIdNumber{{$plan->id}}">
                                <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>
                                    <div class="check fas fa-check"></div>
                                </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' uk-toggle="target:#planIdNumber{{$plan->id}};cls:active" onclick=" document.getElementById('plan_id').value = '{{$plan->id}}' " >تأكيد</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 class="uk-margin-large-bottom">
        <div class="full-container">
            <div class="uk-width-1-3@s">
                <button onclick="document.getElementById('from_submit_on_click').submit()" type="submit" class="btn">استمرار</button>
            </div>
        </div>
    </div>


@endsection
@push('js')
    <script>
        $('.selected-event .category-item').click(function () {
            setTimeout(function () { $('.selected-event .category-item:not(.active) input').map(function (key,element) { $(element).removeAttr('checked'); }) },200)
            let input =$(this).find('input');
            input.attr('checked',true)
            $('#contact_subject').val(input.val());
        });
    </script>
@endpush