@extends('front.layout.master')
@section('content')
    <!-- Start Banar -->
    <div class="banar mb-4 text-center" style="background-image: url('{{asset('front/images/banar.png')}}');">
        <h1 data-aos-delay="100" data-aos-duration="1000" data-aos="zoom-up-down">@lang('front.paymentPage')</h1>
    </div>
    <!-- End Banar -->
    <!-- -------------------------------------------- -->
    <!-- Start confirm -->

    <div class="container">
        @if(session('warning'))
            <div class="alert alert-danger">
                {{session('warning')}}
            </div>
        @endif
    </div>
    <div class="confirm mb-5 mt-5">
        <div class="container">
            <div class="header mb-4 row justify-content-between align-items-center">
                <div class="col-lg-5 col-6" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">
                    @lang('front.total')
                    <br>
                    <span>{{ $data['total']}}</span> {{session('countryCode') != null ? session('countryCode') : "KWD"}}
                </div>
                <div class="col-lg-5 col-6 im-box"data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">
                    <img src="{{asset(\Illuminate\Support\Facades\Storage::url('images/settings/'.setting('image')))}}" alt="">
                </div>
            </div>
            <div class="sub_header mb-4 row justify-content-between align-items-center">
                <div class="col-lg-5 col-6"data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">
                    @lang('front.total')
                    <span>{{ $data['total']}}</span> {{session('countryCode') != null ? session('countryCode') : "KWD"}}
                </div>
                <div class="col-lg-5 col-6 tex-box"data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">
                    @lang('front.shippingCost')
{{--@dd($data['totaShippingCost'])--}}
                    <span>{{  $data['totaShippingCost']}}</span> {{session('countryCode') != null ? session('countryCode') : "KWD"}}
                </div>
            </div>

            <div class="info mb-5 row">
                <div class="col-lg-6 mb-lg-0 mb-4"data-aos-delay="100" data-aos-duration="800" data-aos="fade-up">
                    <div class="box">
                        <div class="head d-flex justify-content-between align-items-center">
                            <div><i class="fas fa-home"></i>@lang('front.address')
                            </div>
                            <div><a href="{{route('edit-address' , $data['date']['id'])}}">@lang('front.edit') <i class="fas fa-edit"></i></a></div>
                        </div>
                        <p>
                            {{$data['date']['content']}}
                        </p>
                    </div>
                </div>
                <div class="col-lg-6"data-aos-delay="100" data-aos-duration="800" data-aos="fade-up">
                    <div class="box">
                        <div class="head d-flex justify-content-between align-items-center">
                            <div><i class="fas fa-user"></i> @lang('front.OrderDetails')</div>
{{--                            <div><a href="#">تعديل <i class="fas fa-edit"></i></a></div>--}}
                        </div>
                        <ul class="mb-0">
                            <li><span>@lang('front.name')  : </span>{{auth()->user()?->name}}</li>
                            <li><span>@lang('front.phone') : </span>{{auth()->user()?->phone}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="form">
                <form action="{{route('get-submitPost')}}" method="post">
                    @csrf
                    @method('post')
                    <input type="hidden" name="order_id" value="{{$data['date']['order_id']}}" />
                    <input type="hidden" name="total_price" value="{{$data['TotalPrice']}}">
                    <input type="hidden" name="totaShippingCost" value="{{$data['totaShippingCost']}}">
                    <input type="hidden" name="total_price_all" value="{{$data['total']}}">



                    <div class="form-box mb-5"data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">
                        <div class="row mb-4">
                            <div class="col-6">
                                <input class="sel" type="radio" name="select" id="sel-1" value="0"> <label for="sel-1">@lang('front.arrivalBefor')  </label>
                            </div>
                            <div class="col-6">
                                <input class="select" name="select" type="radio" id="sel-2" value="1"> <label for="sel-2">@lang('front.chooseArrival')  </label>
                                <span>@lang('front.arrivalTime')</span>
                            </div>
                        </div>
{{--                        @dd($url['data'])--}}
                        <div class="owl-carousel owl-carousel-1">
                            @foreach($url->data as $date)
{{--                                @dd($date)--}}

                                <div class="item getDate" data-url="{{route('get-times')}}" data-date="{{$date->date}}">{{$date->date_key}} {{$date->name}}</div>
                            @endforeach

                        </div>
                        <input type="hidden" name="delivery_time" value="" id="dateTimes">

{{--                        <input class="day" type="hidden">--}}
                        <div class="date_time row mt-4" id="append_times">



                        </div>
                        <input type="hidden" name="delivery_date_time" value="" id="date_time">

{{--                        <input class="date-time" type="hidden">--}}
                    </div>
                    <div class="payment">
                        <h4 class="mb-3"data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">@lang('front.paymentMethod')</h4>
                        <div class="d-flex">
                            @foreach( $data['payment'] as $payment)
                            <div class="box text-center payment_method_class" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" data-payMethod="{{$payment['id']}}">
                                <img src="{{$payment['image']}}" alt="">
                                <div class="name" >{{$payment['name']}}</div>
                            </div>
                            @endforeach
                                <input type="hidden" name="payment_method" value="" id="payment_method">

                        </div>
                    </div>
                    <button class="submit mt-4 mb-5" type="submit"data-aos-delay="100" data-aos-duration="800" data-aos="flip-down">@lang('front.doneOrder')</button>
                </form>
            </div>
        </div>
    </div>
    <!-- End confirm -->
    <!-- -------------------------------------------- -->
@endsection
@push('js')
    <script>
        $(function (){

            $('body').on('click','.getDate',function (e){
                e.preventDefault();

                var date = $(this).data('date');
                var url = $(this).data('url');

                $('#dateTimes').val(date);

                console.log(date);
                $.ajax({
                    url: url,
                    method: "get",
                    data: {
                        date:date
                    },
                    dataType: 'json',


                    success: function (response) {
                        // console.log(response.data.productCount);
                            if(response.status == 'success'){
                                $('#append_times').empty();

                                for(var i = 0 ; i < response.data.length ; i++){
                                    var html =
                                        `<div class="col-lg-4 col-6 mb-3">
                                              <div class="box timeDate" data-times="${response.data[i].to}-${response.data[i].from}">${response.data[i].to} الى  ${response.data[i].from}</div>
                                          </div>`;
                                    $('#append_times').append(
                                        html
                                    );
                                }

                            }else{
                                $('#append_times').empty();
                            }

                    },

                });

            })


            $('body').on('click','.timeDate',function (e){
                e.preventDefault();
                var times = $(this).data('times');

                $('#date_time').val(times);
            })


            $('body').on('click','.payment_method_class',function (e){
                e.preventDefault();
                var payMethod = $(this).data('paymethod');

                console.log(payMethod);
                // alert(payMethod);
                $('#payment_method').val(payMethod);
            })
        });
    </script>
@endpush