@extends('site.layout.master')

@section('content')
    <!-- start inner header -->
    <div class="inner-header">
        <h5>تفاصيل المنتجات المجانية</h5>
        <ul>
            <li><a href="{{route('home')}}">الرئسية</a></li>
            <li>/</li>
            <li><a>السلة </a></li>
        </ul>
    </div>
    <!-- end inner header -->

    <!-- start cart -->
    <div class="cart-table">
        <div class="container">
            <div class="list-tap">
                <ul>
                    <li class="active"><a href="{{route('my_cart_points')}}">منتجات النقاط</a></li>
                    <li class=""><a href="{{route('my_cart')}}">منتجات المشتروات</a></li>
                </ul>
            </div>
            @if(count($rows) > 0)

                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>المنتج</th>
                            <th>متاح ام لا</th>
                            <th>السعر</th>
                            <th>الكمية</th>
                            <th>الإجمالى</th>
                            <th>
                                <img src="{{asset('site/img/trash.svg')}}" alt="">
                            </th>
                        </tr>
                        </thead>
                        <tbody>

                        @foreach($rows as $row)

                            <tr>
                                <td>
                                    <div class="prodc-t">
                                        <img src="{{$row->images[0]['image']}}" alt="">
                                        <span>{{$row->title}}</span>
                                    </div>
                                </td>
                                <td>
                                    @if($row->count >= $row->pivot->count)
                                        <div class="status active">متاح</div>
                                    @else
                                        <div id="test{{$row->pivot->id}}" class="status unactive">غير متاح</div>
                                    @endif
                                </td>
                                <td>{{$row->price}}</td>
                                <td>
                                    <div class="pro-de">
                                        <div class="pro-de-count">
                                            <a onclick="update_point_cart({{$row->pivot->id}} , 'minus')"
                                               class="cart-qty-minus"><i class="fas fa-minus"></i></a>
                                            <input disabled id="count_cart{{$row->pivot->id}}" type="text"
                                                   max="{{$row->count}}" min="1"
                                                   value="{{$row->pivot->count}}" class="qty">
                                            <a onclick="update_point_cart({{$row->pivot->id}}, 'plus')"
                                               class="cart-qty-plus"><i class="fas fa-plus"></i></a>
                                        </div>


                                    </div>
                                </td>
                                <td class="total_points{{$row->pivot->id}}">{{$row->pivot->total_points . ' نقطة'}}</td>
                                <td>
                                    <a href="{{route('delete_point_cart', $row->pivot->id)}}" class="remove">
                                        <img src="{{asset('site/img/close.svg')}}" alt="">
                                    </a>
                                </td>
                            </tr>

                        @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="footer-tabel">
                    <!-- <a href="" class="update-cart">تحديث السلة</a> -->
                    <a href="{{ route('categories')}}" class="active-cart">مواصلة التسوق</a>
                    <a href="{{ route('my_cart_points')}}" class="active-cart">تحديث السلة</a>
                </div>
                <div class="all-sam">
                    <h6>إجمالى السلة</h6>
                    <ul>
                        <li>
                            <span>إجمالي المنتجات</span>
                            <p class="total_points_all">{{$total_points_products . ' نقطة'}}</p>
                        </li>
                        {{--                        <li>--}}
                        {{--                            <span>الضريبة</span>--}}
                        {{--                            <p>{{$tax . ' ريال'}}</p>--}}
                        {{--                        </li>--}}
                        {{--                        <li>--}}
                        {{--                            <span>الإجمالى</span>--}}
                        {{--                            <p>{{$total_price_products_tax . ' ريال'}}</p>--}}
                        {{--                        </li>--}}
                    </ul>
                    <div class="l-center">
                        <a style="color:#fff; cursor: pointer" data-toggle="modal" data-target="#exampleModal"
                           class="add-to-cart">الذهاب الى الدفع</a>
                    </div>
                </div>

            @else
                <div class="container">
                    <div class="empity">
                        <div class="item-emp">
                            <img src="{{asset('site/img/empty.svg')}}" alt="">
                            <h5>سلة المنتجات فارغة</h5>
                        </div>
                    </div>
                </div>
            @endif

        </div>
    </div>
    <!-- end cart  -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-body pop-style">
                    <div class="img-top">
                        <img src="{{asset('site/img/tMoney.svg')}}" alt="">
                    </div>
                    <div class="pop-text">
                        <h6>تأكيد الشراء</h6>
                        <h3>
                            هل أنت متأكد من شراء منتجات بقيمة
                            <span class="total_points_all">{{$total_points_products . ' نقطة'}}</span>

                        </h3>
                        <div class="l-center">
                            <a href="{{route('pay_order_point')}}" class="add-to-cart"> تأكيد</a>
                            <a href="{{route('my_cart_points')}}" class="add-to-cart can"> إلغاء</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

@endsection


@section('script')

    <script>

        function update_point_cart(id, type) {
            var count_num = $("#count_cart" + id).val();

            var count_number = parseInt(count_num);

            if (type == 'plus') {
                var count = count_number + 1;
            } else {
                var count = count_number - 1;
            }
            console.log(count, type);
            $.ajax({
                type: 'GET',
                url: '{{route('update_point_cart_ajax')}}',
                data: {id: id, count: count, type: type},
                success: function (data) {

                    if (data.value == false) {
                        // $("#active_element").removeClass('active');
                        // $("#in_active_element").addClass('unactive');
                        // $(".all_count").html(data.count);
                        $("#count_cart" + id).val(data.count)
                        Swal.fire({
                            title: 'خطأ',
                            text: data.msg,
                            icon: 'error',
                            confirmButtonText: 'تاكيد'
                        });
                    } else {
                        if (data.type == 'true') {
                            $("#test" + id).removeClass('unactive');
                            $("#test" + id).addClass('active');
                            $("#test" + id).html('متاح');
                        }
                        $(".total_points" + id).html(data.total_points);
                        $(".total_points_all").html(data.total_points_all);
                    }

                }
            });


        }

    </script>
@endsection