@extends('web.layouts.container')

@section('content')
    <section class="register-pg steps_page">
        <div class="container">
            <div class="inner">
                <div class="steps_body">
                    <section class="cart-pg form-wrapper bg-light p-5">
                        <div class="inner">
                            <div class="table-responsive position-relative d-none d-lg-block">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>{{__('products.products')}} <small class="cart_count">({{count($guestCart['products'])}})</small></th>
                                        <th>{{__('products.colors')}}</th>
{{--                                        <th>{{__('products.details')}}</th>--}}
                                        <th>{{__('products.quantity')}}</th>
                                        <th>{{__('products.total_price')}}</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @if(count($guestCart['products']))
                                        @foreach($guestCart['products'] as $id_color => $product)
                                            <tr class="deleted_item_{{$product['product_id']}}">
                                                <td>
                                                    <div class="prod">
                                                        <a href="#">
                                                            <img src="{{asset($product['image'])}}" alt="" class="prod-img">
                                                        </a>
                                                        <h6 class="prod-name">
                                                            <b>{{$product['name']}}</b>
                                                        </h6>
                                                    </div>
                                                </td>
                                                <td class="det "><div style="width:35px;height:35px; border-radius: 50%; background-color: {{$product['color']}}"></div></td>
{{--                                                <td class="det">{{$product['description']}}</td>--}}
                                                <td>
                                                    <div class="quantity-container">
                                                        <div class="add-more">
                                                            <button data-item-price=".item_price_{{$product['product_id']}}" data-id="{{$product['product_id']}}" data-key="{{$id_color}}" class="qt-minus amount_minus"><i class="fas fa-minus"></i></button>
                                                            <span class="qt product_amount">{{$product['amount']}}</span>
                                                            <button data-item-price=".item_price_{{$product['product_id']}}" data-id="{{$product['product_id']}}" data-key="{{$id_color}}" class="qt-plus amount_plus"><i class="fas fa-plus"></i></button>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="price_td">
                                                    @if($product['discount'])
{{--                                                        <span class="last_price mb-0"><small>{{__('products.sar')}}</small> <b>{{$product['prc']}}</b></span>--}}
                                                        <h6 class="price mb-0"><small>{{__('products.sar')}}</small> <b class="item_price_{{$product['product_id']}}">{{$product['amount']*$product['price']}}</b></h6>
                                                    @else
                                                        <h6 class="price mb-0"><small>{{__('products.sar')}}</small> <b class="item_price_{{$product['product_id']}}">{{$product['amount']*$product['prc']}}</b></h6>
                                                    @endif
{{--                                                    @if($product['discount'])--}}
{{--                                                        <span class="disbount">- {{round((($product['prc']-$product['discount'])*100)/$product['prc'])}} %</span>--}}
{{--                                                    @endif--}}
                                                </td>
                                                <td>
                                                    <button data-delete=".deleted_item_{{$product['product_id']}}" data-key="{{$id_color}}" class="delete-btn delete_product_button">
                                                        <i class="far fa-trash-alt"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="4" class="text-danger text-center">{{__('products.no_products')}}
                                                <a href="{{route('product.index')}}">{{__('products.products')}}</a>
                                            </td>
                                        </tr>
                                    @endif
{{--                                    <tr>--}}
{{--                                        <td colspan="6" class="text-danger text-center no_product_alert d-none">{{__('products.no_products')}}--}}
{{--                                            <a href="{{route('home')}}">{{__('products.products')}}</a>--}}
{{--                                        </td>--}}
{{--                                    </tr>--}}
                                    </tbody>
                                </table>
                                <span class="swipe_alert swipe_to_see_more">{{__('products.swipe_to_see_more')}}<i class="fas fa-angle-double-left"></i></span>
                            </div>
                                @if(count($guestCart['products']))
                                    @foreach($guestCart['products'] as $id_color => $product)
                                    <div class="mob_table d-block d-lg-none deleted_item_{{$product['product_id']}}">
                                        <div class="cart_mob_box">
                                            <div class="cart_item">
                                                <div class="title">
                                                    <h4>{{__('products.product_name')}}</h4>
                                                </div>
                                                <div class="info">
                                                    <div class="prod">
                                                        <a href="#">
                                                            <img src="{{asset($product['image'])}}" alt="" class="prod-img">
                                                        </a>
                                                        <h6 class="prod-name">
                                                            <b>{{$product['name']}}</b>
                                                        </h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="cart_item">
                                                <div class="title">
                                                    <h4>{{__('products.colors')}}</h4>
                                                </div>
                                                <div class="info">
                                                    <div style="width:35px;height:35px; border-radius: 50%; background-color: {{$product['color']}}">
                                                    </div>
                                                </div>
                                            </div>
{{--                                            <div class="cart_item">--}}
{{--                                                <div class="title">--}}
{{--                                                    <h4>{{__('products.details')}}</h4>--}}
{{--                                                </div>--}}
{{--                                                <div class="info">--}}
{{--                                                    <p class="det">{{$product['description']}}</p>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
                                            <div class="cart_item">
                                                <div class="title">
                                                    <h4>{{__('products.quantity')}}</h4>
                                                </div>
                                                <div class="info">
                                                    <div class="quantity-container">
                                                        <div class="add-more">
                                                            <button data-item-price=".item_price_{{$product['product_id']}}" data-id="{{$product['product_id']}}" data-key="{{$id_color}}" class="qt-minus amount_minus"><i class="fas fa-minus"></i></button>
                                                            <span class="qt product_amount">{{$product['amount']}}</span>
                                                            <button data-item-price=".item_price_{{$product['product_id']}}" data-id="{{$product['product_id']}}" data-key="{{$id_color}}" class="qt-plus amount_plus"><i class="fas fa-plus"></i></button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="cart_item">
                                                <div class="title">
                                                    <h4>{{__('products.total_price')}}</h4>
                                                </div>
                                                <div class="info">
                                                    <td class="price_td">
                                                        @if($product['discount'])
{{--                                                            <span class="last_price mb-0"><small>{{__('products.sar')}}</small> <b>{{$product['prc']}}</b></span>--}}
                                                            <h6 class="price mb-0"><small>{{__('products.sar')}}</small> <b class="item_price_{{$product['product_id']}}">{{$product['amount']*$product['price']}}</b></h6>
                                                        @else
                                                            <h6 class="price mb-0"><small>{{__('products.sar')}}</small> <b class="item_price_{{$product['product_id']}}">{{$product['amount']*$product['prc']}}</b></h6>
                                                        @endif
{{--                                                        @if($product['discount'])--}}
{{--                                                            <span class="disbount">- {{round((($product['prc']-$product['discount'])*100)/$product['prc'])}} %</span>--}}
{{--                                                        @endif--}}
                                                    </td>
                                                </div>
                                            </div>
                                            <div class="cart_item">
                                                <div class="title">
                                                    <h4>{{__('products.delete')}}</h4>
                                                </div>
                                                <div class="info">
                                                    <button data-delete=".deleted_item_{{$product['product_id']}}" data-key="{{$id_color}}" class="delete-btn delete_product_button">
                                                        <i class="far fa-trash-alt"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                        <div class="text-danger text-center no_product_alert d-none ">
                                            {{__('products.no_products')}}
                                            <a href="{{route('home')}}">{{__('products.products')}}</a>
                                        </div>
                                    @else
                                    <div class="text-danger text-center">
                                        {{__('products.no_products')}}
                                        <a href="{{route('home')}}">{{__('products.products')}}</a>
                                    </div>

                                @endif
                        </div>
                        <button class="submit-btn mt-5 cart_modal_button" data-toggle="modal" href="#cart_mode_modal"> {{__('products.continue')}} </button>
                    </section>
                </div>
            </div>
        </div>
    </section>
    <div class="modal confirmation-modal fade cart_mode_modal" id="cart_mode_modal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="text-box">
                        <div class="d-flex justify-content-around my-5">
                            <a href="{{ route('user.login') }}" class="main-butn">{{__('main.login')}}</a>
                            <a href="{{ route('user.register') }}" class="main-butn">{{__('main.register')}}</a>
                            <a href="{{route('product.visitorRegisterForm')}}" class="main-butn">{{__('main.buy_as_guest')}}</a>
                        </div>
                        @if($lang == 'ar')
                            <p class="p">{{__('products.thanks_message')}} {{__('products.store')}} <b>{{__('abouts.call_handy')}}</b></p>
                        @else
                            <p class="p">{{__('products.thanks_message')}} <b>{{__('abouts.call_handy')}}</b> {{__('products.store')}} </p>
                        @endif
                    </div>
                </div>
                <div class="modal-footer">
                    <button data-toggle="modal" data-target="#cart_mode_modal" type="button" class="btn btn-secondary">{{__('main.close')}}</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('inner_js')
    <script>
        let  changeAmountRoute = "{{route('product.visitorChangeAmount')}}",
            deleteProductRoute = "{{route('product.visitorDelete')}}";

        $('.amount_minus, .amount_plus').click(async function () {
            let data = {product_id: $(this).data('id'), key: $(this).data('key')},
                url = changeAmountRoute,
                method = 'post';

            if ($(this).hasClass('amount_minus')){
                if ($(this).siblings('.product_amount').html() === '1'){
                    return false;
                }
                data.amount_minus = true;
            }
            if ($(this).hasClass('amount_plus')){
                data.amount_plus = true;
            }

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors){
                toasterError(response.errors)
            }

            if(response.amount && response.price){
                $($(this).data('item-price')).html(response.price);
                $(this).siblings('.product_amount').html(response.amount)
            }

        });

        $('.delete_product_button').click(async function () {
            let data = {key: $(this).data('key')},
                url = deleteProductRoute,
                method = 'post';

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors){
                toasterError(response.errors)
            } else {
                $($(this).data('delete')).remove();
                $('.cart_count').html(response.amount);
                $('.icon_cart_count').html(response.amount);

                if(response.amount === 0){
                    $('.check_coupon_and_continue').remove();
                    $('.coupon').remove();
                    $('.no_product_alert').removeClass('d-none');
                    $('.cart_modal_button').remove();
                    $('.swipe_to_see_more').remove();
                }
            }

        });

    </script>
@endsection