@extends('front.layout.master')

@section('content')
    <main class="main-content">
        <div class="cart-wrap checkout-wrap">
            <div class="container">
                <form action="{{ route('get-submitPost') }}" method="post">
                    @csrf
                    @method('post')
                    <div class="row">
                        <div class="col-lg-8 col-12">
                            <h3 class="checkout-head" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                                {{ __('confirm_order') }}
                            </h3>
                            <div class="addresses-block" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                                <div class="addresses-head">
                                    <h4>{{ __('delivery_address') }}</h4>
                                </div>
                                <div class="addresses-list">
                                    <div class="address-item">
                                        <h4>
                                            <img src="{{ asset('front/images/home.svg') }}" alt="home" />
                                            {{ __('home') }}
                                        </h4>
                                        <p>{{ $data['date']['content'] }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="seller-block" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300">
                                <h4>{{ __('merchant_info') }}</h4>
                                <div class="seller-box">
                                    <div class="img">
                                        <img src="{{ asset('front/images/home.svg') }}" alt="seller" />
                                    </div>
                                    <div class="info">
                                        <h4>{{ isset($branch) ? $branch->name : '' }}</h4>
                                                                                <span class="online">{{ $textt }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="times-block" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400">
                                <h4>{{ __('choose_delivery_time') }}</h4>
                                <!-- ... remaining code ... -->
                                <div class="dates-slider">
                                    <div class="swiper dates-swiper">
                                        <div class="swiper-wrapper">
                                            @foreach($days as $day)
                                                <div class="swiper-slide">
                                                    <label>
                                                        <input type="radio"  class="getDate" name="date"  data-url="{{route('get-times')}}"  value="{{$day['date']}}" data-branch="{{isset($branch) ? $branch->id : ''}}" data-date="{{$day['date']}}" />
                                                        <span>
                                                    {{$day['date_key']}}
                                                    <b>
                                                        {{$day['name']}}
                                                    </b>
                                                 </span>
                                                    </label>
                                                </div>
                                            @endforeach
                                            <input type="hidden" name="delivery_time" value="" id="dateTimes">

                                        </div>
                                    </div>
                                    <button class="swiper-button sb-right">
                                        <img src="{{asset('front/images/angle.svg')}}" alt="angle" />
                                    </button>
                                    <button class="swiper-button sb-left">
                                        <img src="{{asset('front/images/angle.svg')}}" alt="angle" />
                                    </button>
                                </div>
                                <div class="times-grid" id="append_times">


                                </div>
                                <input type="hidden" name="delivery_date_time" value="" id="date_time">
                            </div>
                        </div>
                        <div class="col-lg-4 col-12">
                            <div class="cart-overview" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">
                                <div class="payment-methods">
                                    @foreach($data['payment'] as $payment)
                                        <div class="payment-item">
                                            <label>
                                                <input type="radio" required="" name="payment_method" value="{{ $payment['id'] }}" />
                                                <div class="inner">
                                                    <div class="right">
                                                        <div class="img">
                                                            <img src="{{ $payment['image'] }}" alt="" />
                                                        </div>
                                                        <h4>{{ $payment['name'] }}</h4>
                                                    </div>
                                                    <div class="left">
                                                        <img src="{{ asset('front/images/check-outline.svg') }}" alt="check" />
                                                    </div>
                                                </div>
                                            </label>
                                        </div>
                                    @endforeach
                                    <input type="hidden" name="order_id" value="{{ $data['date']['order_id'] }}" />
                                </div>
                                <ul>
                                    <li>
                                        {{ __('total') }}
                                        <span>{{ $data['TotalPrice'] }} {{ __('KD') }}</span>
                                        <input type="hidden" name="total_price" value="{{ $data['TotalPrice'] }}">
                                    </li>
                                    <li>
                                        {{ __('delivery') }}
                                        <span>{{ $data['totaShippingCost'] }} {{ __('KD') }}</span>
                                        <input type="hidden" name="totaShippingCost" value="{{ $data['totaShippingCost'] }}">
                                    </li>
                                    <li>
                                        {{ __('discount_coupon') }}
                                        <span>-{{ $coupons != false ? $coupons->value : 0 }} %</span>
                                    </li>
                                    <li>
                                        {{ __('grand_total') }}
                                        <span>{{ $data['total'] }} {{ __('KD') }}</span>
                                        <input type="hidden" name="total_price_all" value="{{ $data['total'] }}">
                                    </li>
                                </ul>
                                <div class="checkout">
                                    <button type="submit" class="btn">{{ __('pay') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </main>
{{--    <div class="modal fade" id="confirmModal">--}}
{{--        <div class="modal-dialog modal-dialog-centered">--}}
{{--            <div class="modal-content">--}}
{{--                <div class="confirm-checkout-wrap">--}}
{{--                    <button type="button" class="close" data-bs-dismiss="modal">--}}
{{--                        <img src="images/close-filled.svg " alt="close" />--}}
{{--                    </button>--}}
{{--                    <div class="icon">--}}
{{--                        <img src="images/check-filled.svg" alt="check" />--}}
{{--                    </div>--}}
{{--                    <h4>تم الدفع بنجاح</h4>--}}
{{--                    <ul>--}}
{{--                        <li>--}}
{{--                            رقم الطلب :--}}
{{--                            <span>87687</span>--}}
{{--                        </li>--}}
{{--                        <li>--}}
{{--                            تاريخ الطلب :--}}
{{--                            <span>23-12-2021</span>--}}
{{--                        </li>--}}
{{--                        <li>--}}
{{--                            اجمالي الفاتورة :--}}
{{--                            <span> 55.00 <i>د.ك </i></span>--}}
{{--                        </li>--}}
{{--                        <li>--}}
{{--                            نوع الدفع :--}}
{{--                            <span>كي نت</span>--}}
{{--                        </li>--}}
{{--                    </ul>--}}
{{--                    <a href="#" class="btn">الرجوع للرئيسية</a>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

@endsection
@push('js')
<script>
    $('body').on('click','.getDate',function (e){
        e.preventDefault();

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

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

        console.log(date);
        $.ajax({
            url: url,
            method: "get",
            data: {
                date:date,
                branch:branch
            },
            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 =
                            `
                                         <label style="    width: 205px;">
                                    <input type="radio" class="timeDate" name="time" data-times="${response.data[i].to}-${response.data[i].from}" />
                                    <span>${response.data[i].to} الى  ${response.data[i].from}</span>
                                </label>
`;
                        $('#append_times').append(
                            html
                        );
                    }

                }else{
                    $('#append_times').empty();
                    var html =
                        `
                                         <label style="    width: 100%;">
                                    <span>{{ __('no_times_available') }}</span>
                                </label>
`;
                    $('#append_times').append(
                        html
                    );
                }

            },

        });

    })


    $('body').on('click','.timeDate',function (e){
        e.preventDefault();
        var times = $(this).data('times');
        $('#date_time').val(times);
        $(".form .box").each(function () {
            $(".form .box").removeClass("active");
        }),
            $(this).addClass("active")
    })
</script>

@endpush