@extends('web.layouts.main')
@section('content')

 <main>
        <!-- ----------  inner header ----------- -->   
        
        @include('web.pages.components.headerNav')
        

        <!-- ---------- privacy_page_section page ----------- -->   
        <section class="cart_page section_padding bg-light">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="cart_table">
                            <h3 id="products_count"> {{__('web.products')}} ({{$count}}) </h3>
                            <form id="form">
                            @CSRF
                            @if($count > 0)
                            <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                          <tr>
                                            <th scope="col">{{__('web.product_image')}}</th>
                                            <th scope="col">{{__('web.product_name')}}</th>
                                            <th scope="col">{{__('web.product_code')}}</th>
                                            <th scope="col">{{__('web.category')}}</th>
                                            <th scope="col">{{__('web.quantity')}}</th>
                                            <!--<th scope="col">{{__('web.note')}}</th>-->
                                            <th scope="col">{{__('web.total_amount')}}</th>
                                            <th scope="col">{{__('web.cost_after_discount')}}</th>
                                            <th scope="col">{{__('web.discount')}}</th>
                                            <th scope="col">{{__('web.note')}}</th>
                                            <th scope="col"> {{__('web.remove')}} </th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($carts as $key=>$row)
                                            <tr id="tr{{$row->id}}">
                                            <td>
                                                <img src="{{asset($row->product->photos[0]->image)}}" alt="" class="img_prod">
                                            </td>
                                            <td>
                                                <strong> {{$row->product->descriptions()->name}} </strong>
                                            </td>
                                            <td>
                                                <p> {{$row->product->code}} </p>
                                            </td>
                                            <td>
                                                <p> {{$row->product->category->descriptions()->name}} </p>
                                            </td>
                                            <td>
                                                <div class="add_more">
                                                    <span onclick="updateCart(this)" type-id="minus" data-id="{{$row->id}}" class="qt-minus"><i class="fas fa-minus"></i></span>
                                                    <div class="cen_qt">
                                                        <span class="qt" id="qtVal{{$row->id}}">{{$row->count}}</span>
                                                        <input type="hidden" name="cart[{{$key}}][count]" id="countproduct{{$row->id}}" value="{{$row->count}}">
                                                        <input type="hidden" name="cart[{{$key}}][cart_id]" id="counting" value="{{$row->id}}">
                                                    </div>
                                                    <span onclick="updateCart(this)" type-id="plus" data-id="{{$row->id}}" class="qt-plus"><i class="fas fa-plus"></i></span>
                                                </div>
                                            </td>
                                            <!--<td>-->
                                            <!--    <textarea rows="2" onkeyup="updateCartNote(this)" name="cart[{{$key}}][notes]">{{$row->notes}}</textarea>-->
                                            <!--</td>-->
                                            <td>
                                                <p id="totalCost{{$row->id}}"> {{$row->product->costCheck() * $row->count}} {{__('web.sar')}}</p>
                                            </td>
                                            <td>
                                                <p> @if($row->product->type == 'none') - @else {{$row->product->costCheck()}} {{__('web.sar')}} @endif </p>
                                            </td>
                                            <td>
                                                <p> @if($row->product->type == 'none') - @else @if($row->product->type == 'value') {{$row->product->getDiscount()}} {{__('web.sar')}} @else {{$row->product->getDiscount()}}% @endif @endif </p>
                                            </td>
                                            <td>
                                                <a href="#0"  onclick="openCart(this)" data-id="{{$row->id}}" >
                                                    <i class="bi bi-pen"></i>
                                                </a>
                                            </td>
                                            <td>
                                                <a style="cursor:pointer" onclick="removeCart(this)" data-id="{{$row->id}}">
                                                    <i class="bi bi-trash3"></i>
                                                </a>
                                            </td>
                                          </tr>
                                        @endforeach
                                        </tbody>
                                      </table>
                            
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-lg-12">
                                    <div class="subscribe_price_table">
                                        <div class="price_table_foot">
                                            <ul>
                                                <li>
                                                    <p> {{__('web.total_cart')}} </p>
                                                    <span class="line"></span>
                                                    <strong id="total"> {{$total}} {{__('web.sar')}} </strong>
                                                </li>
                                            </ul>
                                            <img src="{{url('')}}/assets/web/images/zegzag2.png" alt="" class="zegzag2">
                                        </div>
                                    </div>
                                    <div class="text-center mt-5">
                                        <a href="{{url(getCurrentLocale().'/order/step/1')}}" class="butn w-50 py-3 shadow-lg">
                                            <span> {{__('web.finish_order')}} </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            @else 
                                <div class="alert alert-info py-4 mt-4" role="alert">
                                    {{__('web.not_cart')}}
                                </div> 
                            @endif
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    
    <!-- modal_report Modal -->
    <div class="modal fade modal_logOut" id="modal_notes" tabindex="-1" aria-labelledby="modal_logOutLabel" aria-hidden="true">
        
    </div>
           
        
@push('js')        
    <script>
        function removeCart(elem)
        {
            let target = $(elem).attr('data-id');
            
            $.ajax({
              url : {!! json_encode(url(getCurrentLocale().'/removeCart')) !!},
              type : 'GET',
              dataType : 'json',
              data : 'product_id='+target,
              success:function(data)
              {
                $('#tr'+target).fadeOut(1000);
                $('#tr'+target).remove();
                $('#total').html(data.total+' '+{!! json_encode(__('web.sar')) !!});
                $('#products_count').html({!! json_encode(__('web.products')) !!}+' ('+data.carts.length+')');
                $.each(data.carts, function (key, val) {
                    $('#totalCost'+val.cart_id).html(val.cost+' '+{!! json_encode(__('web.sar')) !!});
                });
              }
            })
        }
        function updateCart(elem)
        {
            event.preventDefault(); 
            let type = $(elem).attr('type-id');
            let data_id = $(elem).attr('data-id');
            let val_num = $('#countproduct'+data_id).val();
            
            if(type == 'plus')
            {
                $('#countproduct'+data_id).val(parseInt(val_num)+1);
            }
            else
            {
                if(val_num != 1)
                {
                    $('#countproduct'+data_id).val(parseInt(val_num)-1);
                }
            }
            var urls = {!! json_encode(url(getCurrentLocale().'/updateCart')) !!};
            let dataform = new FormData( $('#form')[0]);
            
            $.ajax
            ({
                url : urls,
                type: 'POST',              
                data: dataform,
                contentType: false, 
                processData: false, 
                success:function(data)
                {
                    $('#total').html(data.total+' '+{!! json_encode(__('web.sar')) !!});
                    $.each(data.carts, function (key, val) {
                        $('#totalCost'+val.cart_id).html(val.cost+' '+{!! json_encode(__('web.sar')) !!});
                    });
                }
                 ,error:function(data) 
                 {
                     $('#modal_error').modal('show');
                     $('#errors').html('');
                     $('#errors').css("display", "block");
                     if(type == 'plus'){
                          $('#countproduct'+data_id).val(parseInt(val_num));
                          $('#qtVal'+data_id).html(parseInt(val_num));
                     }
                     $.each(data.responseJSON.errors, function(key,value) 
                     {
                         $('#errors').append('<h4 class="title text-center mt-3">'+value+'</h4>');
                     }); 
                 }
                
            })
        }
        
        function openCart(elem)
        {
            let target = $(elem).attr('data-id')
            $.ajax
            ({
                url : {!! json_encode(url(getCurrentLocale().'/openCart')) !!},
                type : 'GET',
                data : 'cart_id='+target,
                success:function(data)
                {
                    $('#modal_notes').html(data);
                    $('#modal_notes').modal('show');
                }
            })
        }
        
        function updateCartNote(elem)
        {
            event.preventDefault(); 
            var urls = {!! json_encode(url(getCurrentLocale().'/updateCartNote')) !!};
            let dataform = new FormData( $(elem)[0]);
            
            $.ajax
            ({
                url : urls,
                type: 'POST',              
                data: dataform,
                contentType: false, 
                processData: false, 
                success:function(data)
                {
                    $('#modal_notes').modal('hide');
                }
            })
        }
        
    </script>
    <script>
        // ------------ increase products -----------
        $(".qt-plus").click(function() {
            $(this).parent().children(".cen_qt").children(".qt").html(parseInt($(this).parent().children(".cen_qt").children(".qt").html()) + 1);
        });
    
        $(".qt-minus").click(function() {
    
            child = $(this).parent().children(".cen_qt").children(".qt");
            if (parseInt(child.html()) > 1) {
                child.html(parseInt(child.html()) - 1);
            }
    
            $(this).parent().children(".full-price").addClass("minused");
    
        });
    </script>
@endpush
@stop