@extends('web.layouts.layout')
@section('content')



    <main>



    <!-- ---------- contact ----------- -->
    <section class="contact-pg">
        <div class="container">
            <div class="contact-form">
                <h3 class="fsz-40 main-color fw-400 mb-30"> {{__('web.order_send')}} </h3>
                <div class="form-box col-lg-10 mx-auto">
                    <form action="{{route('web.ordering')}}" method="post" onsubmit="formAction(this)" class="form">
                        @CSRF
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for=""> {{__('web.name')}} </label>
                                    <input type="text" name="name" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for=""> {{__('web.phone')}} </label>
                                    <input type="text" name="phone" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for=""> {{__('web.email')}} </label>
                                    <input type="email" name="email" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for=""> {{__('web.reservation_status')}}   </label>
                                    <select name="status" class="form-control form-select" id="reservationSelect">
                                        <option value=""> {{__('web.select')}} </option>
                                        <option id="servOpt" value="{{$serviceType}}" > {{__('web.types.'.$serviceType)}} </option>
                                        <option id="pkgOpt" value="{{$packageType}}"> {{__('web.types.'.$packageType)}} </option>
                                    </select>
                                </div>
                            </div>
                            <!-- servBox -->
                            <div class="row w-100 mt-4" id="servBox">
                                <label for=""> {{__('web.select_services')}}    </label>
                                @foreach($services as $row)
                                    <div class="col-lg-4">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="service_ids[]" value="{{$row->id}}" id="servCheck{{$row->id}}">
                                            <label class="form-check-label" for="servCheck{{$row->id}}">
                                                {!! $row->title !!}
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <!-- pkgBox -->
                            <div class="bouquet p-0 w-100 mt-4" id="pkgBox">
                                <label for=""> {{__('web.select_package')}}    </label>
                                <div class="cards row">
                                    @foreach($packages as $row)
                                        <div class="col-lg-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="package_ids[]" value="{{$row->id}}" id="pkgCheck{{$row->id}}">
                                                <label class="form-check-label" for="pkgCheck{{$row->id}}">
                                                    <div class="item ">
                                                        <div class="item-body">
                                                            <div class="top-cont">
                                                                <h2> {!! $row->title !!} </h2>
                                                                <h3 class="main-color"> {!! $row->cost !!} <small> {{__('web.sar')}} </small> </h3>
                                                            </div>
                                                            <ul class="check-list">
                                                                @foreach($row->features as $feature)
                                                                    <li> <i class="fas fa-check-circle"></i> <span class="txt"> {!! $feature->currentDescription->title !!} </span> </li>
                                                                @endforeach
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for=""> {{__('web.count_hours')}}   </label>
                                    <input type="text" name="count_hours" class="form-control digitsOnly" placeholder="" value="0" min="0">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="">  {{__('web.reservation_date')}}   </label>
                                    <input type="date" name="reservation_date" min="{{date('Y-m-d')}}" onchange="selectDate(this)" class="form-control " placeholder=""  >
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="">    {{__('web.reservation_time')}}   </label>
                                    <div class="time_box">
                                        <div class="swiper-container time_swiper">
                                            <div class="swiper-wrapper pb-5" id="times">
                                                @include('web.pages.orders.times')
                                            </div>
                                            <div class="swiper-pagination"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group  ">
                                    <label for="">  {{__('web.additions')}}       </label>
                                    <div class="addiotionals_group">
                                        @foreach($attributes as $key=>$row)
                                            <div class="item">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="additions[{{$key}}][attribute_id]" value="{{$row->id}}" id="additionalsChecks{{$row->id}}">
                                                    <label class="form-check-label" for="additionalsChecks{{$row->id}}">
                                                        {!! $row->title !!}
                                                        @if($row->currentDescription->description)
                                                            <span type="button" class="tooltip_span" data-bs-toggle="tooltip" data-bs-placement="top" title="{!! $row->currentDescription->description !!}">
                                                                    ؟
                                                            </span>
                                                        @endif
                                                    </label>
                                                </div>
                                                <div class="count_box">
                                                    <small>{{__('web.count')}} : </small>
                                                    <input type="number" name="additions[{{$key}}][count]" class="form-control num_input" min="0"/>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="">{{__('web.note')}}</label>
                                    <textarea name="note" rows="6" id="" class="form-control"></textarea>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="" class="fs-6 ">   {{__('web.photo_usage')}}  </label>
                                    <div class="sharing_radios d-flex align-items-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="photo_usage" value="1" id="shareWorksRadio1">
                                            <label class="form-check-label" for="shareWorksRadio1">
                                                {{__('web.yes')}}
                                            </label>
                                        </div>
                                        <div class="form-check ms-5">
                                            <input class="form-check-input" type="radio" name="photo_usage" value="0" id="shareWorksRadio2">
                                            <label class="form-check-label" for="shareWorksRadio2">
                                                {{__('web.no')}}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group text-center">
                            <button type="submit" class="butn mt-20 col-lg-5"> <span> <img src="{{url('')}}/assets/web/images/arrow3.svg" alt="" class="arrow th-20 me-2"> {{__('web.send')}} </span> </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>


</main>



@endsection

@section('inject_js')

    <script>
        $("#pkgBox").hide();
        $("#servBox").hide();
        $(function() {
            $("#reservationSelect").change(function() {
                if ($("#servOpt").is(":selected")) {
                    $("#servBox").show();
                    $("#pkgBox").hide();
                } else if ($("#pkgOpt").is(":selected"))  {
                    $("#servBox").hide();
                    $("#pkgBox").show();
                }   else {
                    $("#pkgBox").hide();
                    $("#servBox").hide();
                }
            }).trigger('change');
        });
    </script>
    <script>
        // ------------ time_swiper slider -----------
        var swiper = new Swiper('.contact-pg .time_swiper', {
            slidesPerView: 5,
            spaceBetween: 15,
            // centeredSlides: true,
            speed: 1500,
            navigation: {
                nextEl: ' .time_swiper .swiper-button-next',
                prevEl: ' .time_swiper .swiper-button-prev',
            },
            // mousewheel: false,
            // keyboard: false,
            // allowTouchMove: false,
            // slideToClickedSlide: false,
            // preventClicksPropagation: true,
            // preventClicks: true,
            // noSwiping: true,
            a11y: false,
            autoplay: {
                delay: 5000,
            },
            pagination: {
                el: ' .time_swiper .swiper-pagination',
                clickable: true
            },
            loop: false,
            breakpoints: {
                0: {
                    slidesPerView: 1,
                },
                480: {
                    slidesPerView: 2,
                },
                1200: {
                    slidesPerView: 5,
                }
            }
        });

    </script>
    <script>
        function selectDate(elem)
        {
            let date = $(elem).val()
            $.ajax({
                url : "{{route('web.order.times')}}",
                type : 'GET',
                data : 'date='+date,
                success:function(data)
                {
                    $('#times').html(data);
                    
                    
                    swiper.destroy(true, true);
                    
                    swiper = new Swiper('.contact-pg .time_swiper', {
                        slidesPerView: 5,
                        spaceBetween: 15,
                        speed: 1500,
                        navigation: {
                            nextEl: '.time_swiper .swiper-button-next',
                            prevEl: '.time_swiper .swiper-button-prev',
                        },
                        a11y: false,
                        autoplay: {
                            delay: 5000,
                        },
                        pagination: {
                            el: '.time_swiper .swiper-pagination',
                            clickable: true
                        },
                        loop: false,
                        breakpoints: {
                            0: {
                                slidesPerView: 1,
                            },
                            480: {
                                slidesPerView: 2,
                            },
                            1200: {
                                slidesPerView: 5,
                            }
                        }
                    });
                    
                    
                }
            })
        }
    </script>

@endsection
