@extends('web.layouts.container')

@section('content')
    <section class="register-pg steps_page">
        <div class="container">
            <div class="inner">
                <div class="steps_head">
                    <div class="step_card card_done">
                        <div class="cont">
                            <div class="num">
                                1
                            </div>
                            <div class="icon">
                                <img src="{{asset('assets/web/images/done.png')}}" alt="">
                            </div>
                            <h6> {{__('products.address_details')}} </h6>
                        </div>
                    </div>
                    <div class="step_card">
                        <div class="cont">
                            <div class="num">
                                2
                            </div>
                            <div class="icon">
                                <img src="{{asset('assets/web/images/done.png')}}" alt="">
                            </div>
                            <h6> {{__('products.order_details')}} </h6>
                        </div>
                    </div>
                    <div class="step_card">
                        <div class="cont">
                            <div class="num">
                                3
                            </div>
                            <div class="icon">
                                <img src="{{asset('assets/web/images/done.png')}}" alt="">
                            </div>
                            <h6> {{__('products.payment')}} </h6>
                        </div>
                    </div>
                </div>
                <div class="steps_body">
                    <section class="cart-pg form-wrapper bg-light p-5">
                        <div class="inner">
                            <div class="table-responsive 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>
                            </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 class="col-md-6 mt-5">
{{--                                <p class="text-success d-block d-lg-none swipe_to_see_more"> {{__('products.swipe_to_see_more')}} </p>--}}
                                <div class="form-group">
                                    <input name="coupon" class="form-control coupon" placeholder="{{__('products.apply_coupon_code')}}">
                                </div>
                            </div>
                        </div>
                        <button class="submit-btn mt-5 check_coupon_and_continue"> {{__('products.continue')}} </button>
                    </section>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        let visitorCart = "{{route('product.visitorCart')}}",
            changeAmountRoute = "{{route('product.visitorChangeAmount')}}",
            deleteProductRoute = "{{route('product.visitorDelete')}}";
        $('.check_coupon_and_continue').click(async function (e) {
            e.preventDefault();
            let data = {},
                couponInput = $('input[name="coupon"]'),
                url = visitorCart,
                method = 'get';

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

            if (response.errors){
                $(this).prop('disabled', false);
                toasterError(response.errors)
            }
            if (response.url){
                window.location.href = response.url;
            }

        });

        $('.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');
                    $('.swipe_to_see_more').remove();
                }
            }

        });


    </script>
@endsection