@extends('front.layout.master')
@push('css')

@endpush

@section('content')
    {{--@dd( auth()->user())--}}

    <main class="main-content">
        <div class="cart-wrap">
            <div class="container">
                @if (isset($cartOrder) && $cartOrder != null)
                    <div class="addresses-block" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                        @if(isset($checkAdress) && $checkAdress != null)
                        <div class="addresses-head">
                            <button type="button" data-bs-toggle="modal" data-bs-target="#addressesModal" class="add-address">
                                {{ __('choose_delivery_address') }}
                                <img src="{{ asset('front/images/arrow-down.svg') }}" alt="arrow-down" />
                            </button>
                            <button type="button" data-bs-toggle="modal" data-bs-target="#addAddressModal" class="btn">
                                {{ __('add_new_address') }}
                                <img src="{{ asset('front/images/plus.svg') }}" alt="plus" />
                            </button>
                        </div>
                        <div class="addresses-list">
                            <div class="address-item">
                                <h4>
                                    <img src="{{ asset('front/images/home.svg') }}" alt="home" />
                                    @if(isset($checkAdress))
                                        @if($checkAdress->type == 1)
                                            {{ __('home') }}
                                        @elseif($checkAdress->type == 2)
                                            {{ __('work') }}
                                        @elseif($checkAdress->type == 3)
                                            {{ __('hospital') }}
                                        @endif
                                    @endif
                                </h4>
                                <p>
                                    {{ trans('admin.governmentt').' '.$checkAdress?->goventmnt?->name.' '.trans('admin.region').' '.$checkAdress?->region?->name.' '.
                                    trans('admin.block').' '.$checkAdress?->block.' '.trans('admin.Street_number').' '.$checkAdress?->Street_number.' '.
                                    trans('admin.house_number').' '.$checkAdress?->house_number.' '.trans('admin.The_role').' '.$checkAdress?->The_role.' '.
                                    trans('admin.Apartment_number').' '.$checkAdress?->Apartment_number }}
                                </p>
                            </div>
                        </div>

                        @else
                            <div class="addresses-head">
                                <button type="button" data-bs-toggle="modal" data-bs-target="#addressesModal" class="add-address">
                                    {{ __('choose_delivery_address') }}
                                    <img src="{{ asset('front/images/arrow-down.svg') }}" alt="arrow-down" />
                                </button>
                                <button type="button" data-bs-toggle="modal" data-bs-target="#addAddressModal" class="btn">
                                    {{ __('add_new_address') }}
                                    <img src="{{ asset('front/images/plus.svg') }}" alt="plus" />
                                </button>
                            </div>
                            <div class="addresses-list">
                                <div class="address-item">

{{--                                        <img src="{{ asset('front/images/home.svg') }}" alt="home" />--}}
                                        <p class="alert alert-danger" style="text-align: center;">@lang('front.chooseAddresse')</p>
                                </div>
                            </div>

                        @endif
                    </div>

                    <div class="row">
                        <div class="col-lg-6 col-12">
                            <div class="cart-products">
                                <div class="products-head" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                                    <h3>
                                        <img src="{{ asset('front/images/cart-bag.svg') }}" alt="cart-bag" />
                                        {{ __('cart') }} {{ $cartOrderCount->products_count }}
                                    </h3>
                                </div>
                                <div class="products">
                                    @php $total = 0; @endphp
                                    @foreach($cartOrder->products as $order)
                                        @php
                                            $feature = \App\Models\OrderProductFeature::where('order_product_id', $order->pivot->id)->get();
                                            $total += $order->pivot->price * $order->pivot->quantity;
                                        @endphp
                                        <div class="product-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                                            <div class="img">
                                                <img src="{{ $order->image_path }}" alt="" />
                                                <a href="{{ route('products-details', ['id' => $order->id, 'slug' => str_replace(' ', '-', $order->name)]) }}"></a>
                                            </div>
                                            <div class="info">
                                                <div class="action">
                                                    <button class="del-btn" id="deleteCart" type="button" data-orderid="{{ $order->pivot->order_id }}" data-id="{{ $order->pivot->id }}" data-url="{{ route('remove-from-cart') }}" data-msg="{{ __('Deleted done') }}">
                                                        <img src="{{ asset('front/images/close.svg') }}" alt="delete" />
                                                    </button>
                                                </div>
                                                <div class="bottom">
                                                    <div class="data">
                                                        <a href="#">{{ $order->name }}</a>
                                                        @foreach($feature as $feat)
                                                            <p>{{ $feat->feature->title }} ({{ $feat->option->title }} - {{ $feat->option->price }})</p>
                                                        @endforeach
                                                        <p>
                                                            <span class="product-subtotallgg" hidden>{{ number_format($order->pivot->price * $order->pivot->quantity, 3) }}</span>
                                                            <span class="product-subtotallg">{{ number_format($order->pivot->price * $order->pivot->quantity, 3) }} {{ __('دينار') }}</span>
                                                        </p>
                                                    </div>

                                                    <div class="qty btn">
                                                        <a class="inc qtybutton" data-url="{{ route('update-cart') }}" data-msg="@lang('admin.successfuly_edited')" data-id="{{ $order->pivot->id }}">
                                                            <img src="{{ asset('front/images/plus.svg') }}" alt="" />
                                                        </a>
                                                        <input type="text" value="{{ $order->pivot->quantity }}" data-id="{{ $order->id }}" data-msg="@lang('admin.successfuly_edited')" data-price="{{ $order->pivot->price }}" data-url="{{ route('update-cart') }}" name="qtybutton" class="plus-minus-box" disabled="">
                                                        <a class="dec qtybutton" data-url="{{ route('update-cart') }}" data-msg="@lang('admin.successfuly_edited')" data-id="{{ $order->pivot->id }}">
                                                            <img src="{{ asset('front/images/minus.svg') }}" alt="minus" />
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5 col-12">
                            <div class="cart-overview" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">
                                @if(isset($branch) && $branch->free_delevery >= 0)
                                    <div class="fees">{{ __('free_delivery') }}: <b>{{ $branch->free_delevery }}</b> {{ __('KD') }}</div>
                                @endif
                                <ul>
                                    <li>{{ __('total_price') }} <span class="total_price">{{ number_format($total, 3) }} {{ __('KD') }}</span></li>
                                    <li>{{ __('coupon_discount') }} <span>{{ $coupons != false ? $coupons->value : 0 }} %</span></li>
                                    <li>{{ __('delivery_cost') }} <span class="ship_cost">{{$ship ? $ship : 0}}</span></li>
{{--                                    <span class="free_delivery_hidden" hidden>{{$branch?->free_delevery}}</span>--}}
                                    <span class="ship_cost_hidden" hidden>{{$shipBefor ? $shipBefor : 0}}</span>
                                    <li>{{ __('order_total') }} <span class="total_price_total_price">{{ $coupons != false ? number_format(($total - $coupons->price + $coupons->discountprice) + $ship, 3) : number_format($total + $ship, 3) }} {{ __('KD') }}</span></li>
                                </ul>
                                <div class="coupon">
                                    <form action="{{ route('get-coupons') }}" method="post" id="submit_coupon">
                                        @csrf
                                        @method('post')
                                        <div class="form-group">
                                            <img src="{{ asset('front/images/coupon.svg') }}" alt="coupon" />
                                            <input type="hidden" class="form-control" name="order_id" value="{{ $cartOrder->id }}" />
{{--                                            <input type="hidden" class="form-control" name="tager_id" value="{{ $branch->user_id }}" />--}}
                                            <input type="text" class="form-control" name="discountCode" value="" placeholder="" />
                                            <button type="submit" class="btn btn-border">{{ __('apply') }}</button>
                                        </div>
                                    </form>
                                </div>
                                <div class="checkout">
                                    <a href="{{ route('get-confirm') }}" class="btn">{{ __('complete_order') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="modal fade auth-modal" id="addressesModal">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4>{{ __('choose_address') }}</h4>
                                    <button type="button" class="close" data-bs-dismiss="modal">
                                        <img src="{{asset('front/images/close-filled.svg')}}" alt="close" />
                                    </button>
                                </div>
                                <div class="addresses-wrap">
                                    @if(count($data) > 0)
                                        @foreach($data as $da)
                                            <div class="item">
                                                <div class="top">
                                                    <h3>
                                                        <img src="{{asset('front/images/home.svg')}}" alt="home" />
                                                        @if($da['type'] == 1)
                                                            {{ __('home') }}
                                                        @elseif($da['type'] == 2)
                                                            {{ __('work') }}
                                                        @elseif($da['type'] == 3)
                                                            {{ __('hospital') }}
                                                        @endif
                                                    </h3>
                                                    <input type="radio" name="address" value="{{$da['id']}}" class="chooseAdd" />
                                                </div>
                                                <p>{{ $da['date'] }}</p>
                                                <div class="action">
                                                    <button type="button deleteAddress" data-action="{{ route('deleteAddress') }}" data-id="{{ $da['id'] }}">
                                                        {{ __('delete') }}
                                                        <img src="{{asset('front/images/trash.svg')}}" alt="delete" />
                                                    </button>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <p>{{ __('no_addresses_found') }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="addAddressModal">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="add-address-wrap">
                                    <button type="button" class="close" data-bs-dismiss="modal">
                                        <img src="{{asset('front/images/close-filled.svg')}}" alt="close" />
                                    </button>
                                    <div class="address-head">
                                        <h3>{{ __('add_new_address') }}</h3>
                                        <div>
                                            <label>
                                                <input type="radio" name="type" form="form_d" value="1" checked />
                                                <span>{{ __('home') }}</span>
                                            </label>
                                            <label>
                                                <input type="radio" name="type" form="form_d" value="2" />
                                                <span>{{ __('work') }}</span>
                                            </label>
                                            <label>
                                                <input type="radio" name="type" form="form_d" value="3" />
                                                <span>{{ __('hospital') }}</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="address-form">
                                        <form action="{{ route('add_address') }}" method="post" id="form_d">
                                            @csrf
                                            <div class="form-item">
                                                <h3>
                                                    <img src="{{asset('front/images/check-double.svg')}}" alt="check-double" />
                                                    {{ __('sender_details') }}
                                                </h3>
                                                <div class="form-group">
                                                    <label class="form-label">{{ __('name') }}</label>
                                                    <div>
                                                        <img src="{{asset('front/images/user.svg')}}" alt="user" />
                                                        <input type="text" name="user_name" class="form-control" placeholder="{{ __('name') }}" />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="form-label">{{ __('phone') }}</label>
                                                    <div>
                                                        <img src="{{asset('front/images/phone-2.svg')}}" alt="user" />
                                                        <input type="text" name="phone" class="form-control" placeholder="{{ __('phone') }}" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-item">
                                                <h3>
                                                    <img src="{{asset('front/images/check-double.svg')}}" alt="check-double" />
                                                    {{ __('receiver_details') }}
                                                </h3>
                                                <div class="form-group">
                                                    <label class="form-label">{{ __('name') }}</label>
                                                    <div>
                                                        <img src="{{asset('front/images/user.svg')}}" alt="user" />
                                                        <input type="text" name="user_name_recived" class="form-control" placeholder="{{ __('name') }}" />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="form-label">{{ __('phone') }}</label>
                                                    <div>
                                                        <img src="{{asset('front/images/phone-2.svg')}}" alt="user" />
                                                        <input type="text" name="phone_recived" class="form-control" placeholder="{{ __('phone') }}" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-item">
                                                <div class="form-group">
                                                    <label class="form-label">{{ __('region') }}</label>
                                                    <input type="hidden" class="form-control" name="region_id" value="{{isset($region_id) ? $region_id : ''}}" />
                                                    <input type="text" class="form-control" value="{{ isset($region_name) ? $region_name : '' }}" placeholder="{{ isset($region_name) ? $region_name : __('region') }}" />
                                                </div>
                                                <div class="form-group">
                                                    <label class="form-label">{{ __('block') }}</label>
                                                    <input type="text" name="block" class="form-control" placeholder="{{ __('block') }}" />
                                                </div>
                                                <div class="form-group">
                                                    <label class="form-label">{{ __('gada') }}</label>
                                                    <input type="text" name="gada" class="form-control" placeholder="{{ __('gada') }}" />
                                                </div>
                                                <div class="form-group">
                                                    <label class="form-label">{{ __('street') }}</label>
                                                    <input type="text" class="form-control" name="Street_number" placeholder="{{ __('street') }}" />
                                                </div>
                                                <div class="form-group">
                                                    <label class="form-label">{{ __('house_number') }}</label>
                                                    <input type="text" class="form-control" name="house_number" placeholder="{{ __('house_number') }}" />
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-6 col-12">
                                                        <div class="form-group">
                                                            <label class="form-label">{{ __('floor_number') }}</label>
                                                            <input type="text" class="form-control" name="floor_number" placeholder="{{ __('floor_number') }}" />
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6 col-12">
                                                        <div class="form-group">
                                                            <label class="form-label">{{ __('apartment_number') }}</label>
                                                            <input type="text" class="form-control" name="Apartment_number" placeholder="{{ __('apartment_number') }}" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-item">
                                                <div class="form-group has-notes">
                                                    <label class="form-label">{{ __('notes') }}</label>
                                                    <textarea class="form-control" name="note" placeholder="{{ __('notes') }}"></textarea>
                                                </div>
                                                <div class="form-group">
                                                    <button type="submit" class="btn">{{ __('save_address') }}</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                @else
                    <div class="alert alert-danger">
                        <h4 style="text-align: center;">{{ __('cart_empty') }}</h4>
                    </div>
                @endif
            </div>
        </div>
    </main>

@endsection
@push('js')
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script>

        $(function (){


            $('body').on('click','#confirm-order',function (e){
                e.preventDefault();

                var val = $('#note').val();
                console.log(val);
                $.ajax({
                    url: "{{route('confirm-data')}}",
                    method: "get",
                    data: {
                        val: val
                    },
                    success: function (response) {
                        if(response.status == 'true'){
                            window.location.href = "{{route('get-confirm')}}";

                        }

                    }
                });




            });
            $('body').on('click','.qtybutton',function (e) {
                e.preventDefault();
                // alert(url);

                var url = $(this).data('url');
                var val = parseInt($(this).parent().parent().find('.plus-minus-box').val());
                var  unitPrice = parseFloat($(this).data('price'));

                var id = $(this).data('id');
                var msg = $(this).data('msg');

                $.ajax({
                    url: url,
                    method: "get",
                    context:this,

                    data: {
                        id: id,
                        quantity: val

                    },
                    success: function (response) {
                        console.log(response);
                        if (response.status == 'success'){

                            var total = response.quantity * response.price;
                            // if(response.coupons != false){
                            //     var tot = total - response.coupons.price + response.coupons.discountprice;
                            // }else{
                                var tot = response.quantity * response.price;

                            // }

                            $(this).parent().parent().find('.product-subtotallg').html(tot.toFixed(3)+'{{ __('KD') }}');
                            $(this).parent().parent().find('.product-subtotallgg').html(tot.toFixed(3));
                            calculate(response);

                        }
                    }
                });

            });

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

                console.log('sda');
                // var val = $(this).parent().parent().find('.cart-plus-minus-box').val();
                var id = $(this).data('id');
                var orderId = $(this).data('orderid');
                var url = $(this).data('url');
                var msg = $(this).data('msg');

                console.log(id,orderId);

                $.ajax({
                    _token: "{{ csrf_token() }}",
                    url: url,
                    method: "post",
                    context : this,
                    data: {
                        id: id,
                        orderId: orderId
                    },
                    success: function (response) {
                        console.log(response);
                        if (response.status == 'success'){

                            $(this).parent().parent().parent().remove();
                            calculate(response);

                        }

                        if (response.status == 'true'){

                            $(this).parent().parent().parent().remove();
                            calculate(response);
                            location.reload();



                        }


                    }


                });


            });


            function calculate(response = null){
                var price = 0;
                var shiping = parseFloat($('.ship_cost_hidden').html());
                var free_delivery_hidden = parseFloat($('.free_delivery_hidden').html());
                $("span[class='product-subtotallgg']").each(function ($index) {
                    price+= parseFloat($(this).html());
                });
                console.log(price , shiping , free_delivery_hidden);

                if(price >= free_delivery_hidden){
                     $('.ship_cost').html(0);

                }else{
                   $('.ship_cost').html(shiping);

                }

                    var shipping =parseFloat( $('.ship_cost').html());
                console.log(response);
                if(response != null){
                    if(response.coupons != null){

                        var pricees = price;
                        console.log(pricees , '2222222');
                        var couponPrice = isNaN(response.coupons?.price) ? 0 : response.coupons.price;
                        var discountPrice = isNaN(response.coupons?.discountprice) ? 0 : response.coupons.discountprice;

                        var finalPrice = (price + shipping) - couponPrice + discountPrice;

                        $('.total_price').html(pricees.toFixed(3) + '{{ __('KD') }}');
                        $('.total_price_total_price').html(finalPrice.toFixed(3) + '{{ __('KD') }}');

                    }else{
                        var priceess = price + shipping;
                        $('.total_price').html(price.toFixed(3) + '{{ __('KD') }}');
                        console.log(priceess.toFixed(3));

                        $('.total_price_total_price').html(priceess.toFixed(3) + '{{ __('KD') }}');

                    }
                }else{
                    var priceess = price + shipping;
                    $('.total_price').html(price.toFixed(3) + 'د.ك');
                    $('.total_price_total_price').html(priceess.toFixed(3) + '{{ __('KD') }}');

                }


            }

            function handleQtyButtonClick(event) {
                var button = event.currentTarget;
                var input = button.parentElement.querySelector("input");
                var oldValue = parseFloat(input.value);
                var newVal;

                if (button.classList.contains("inc")) {
                    newVal = oldValue + 1;
                } else {
                    // Don't allow decrementing below zero
                    if (oldValue > 0) {
                        newVal = oldValue - 1;
                    } else {
                        newVal = 0;
                    }
                }

                input.value = newVal;
            }

            // Get all elements with class "qtybutton"
            var qtyButtons = document.querySelectorAll(".qtybutton");

            // Loop through each button and attach the click event listener
            qtyButtons.forEach(function (button) {
                button.addEventListener("click", handleQtyButtonClick);
            });






        });
    </script>
@endpush