@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">
                        <form method="post" onsubmit="saveOrder(this)" action="{{url(getCurrentLocale().'/order')}}">
                        @CSRF
                        
                        <div class="cart_table">
                            <h3> {{__('web.products')}} ({{$count}}) </h3>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                      <tr>
                                        <th scope="col">{{__('web.product_name')}}</th>
                                        <th scope="col">{{__('web.product_code')}}</th>
                                        <th scope="col">{{__('web.quantity')}}</th>
                                        <th scope="col">{{__('web.note')}}</th>
                                        <th scope="col">{{__('web.cost')}}</th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($carts as $key=>$row)
                                        <tr>
                                            <td>
                                                <strong> {{$row->product->descriptions()->name}} </strong>
                                            </td>
                                            <td>
                                                <p> {{$row->product->code}} </p>
                                            </td>
                                            <td>
                                                {{$row->count}}
                                            </td>
                                            <td>
                                                <small> {{$row->notes}} </small>
                                            </td>
                                            <td>
                                                <p> {{number_format($row->product->costCheck() * $row->count,2)}} {{__('web.sar')}} </p>
                                            </td>
                                      </tr>
                                    @endforeach
                                    </tbody>
                                  </table>
                            </div>
                            <div class="wh_card mt-5">
                                <div class="form-group">
                                    <label for=""> {{__('web.cobon')}} </label>
                                    <div class="row mt-2">
                                        <div class="col-lg-8">
                                            <input type="text" name="cobon" onchange="cobonCheck(this)" placeholder=" {{__('web.write_cobon')}} " class="form-control bg-light">
                                            <small class="text-danger mt-1" id="cobon" style="display:none">  </small>
                                        </div>
                                        <div class="col-lg-3">
                                            <button type="button" class="butn w-100"> <span> {{__('web.check')}} </span> </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-lg-12">
                                    <div class="subscribe_price_table_new mt-5">
                                        <div class="price_table_head bg-white rounded-3 p-4 m-4 mb-0">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <h6> <span> {{__('web.delivery_type')}} : </span> <strong> {{__('web.'.$delivery_type)}} </strong> </h6>
                                                </div>
                                                <div class="col-lg-6">
                                                    <h6> <span> {{__('web.location_select')}} : </span> <strong>  {{$address->city->descriptions()->name}} <a href="#" class="mainColor ms-2" data-bs-toggle="modal" data-bs-target="#mapModal"> مشاهدة على الخريطة </a> </strong> </h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="price_table_body">
                                            <ul>
                                                <li>
                                                    <p> {{__('web.products_amount')}}  </p>
                                                    <span class="line"></span>
                                                    <strong> {{number_format($total_products,2)}} {{__('web.sar')}} </strong>
                                                </li>
                                                <li id="tax_show" @if(settings('tax_valid') == 'false') style="display:none" @endif >
                                                    <p> {{__('web.tax_amount')}}  </p>
                                                    <span class="line"></span>
                                                    <strong> {{number_format($tax,2)}} {{__('web.sar')}} </strong>
                                                </li>
                                                <li id="cobon_show" style="display:none">
                                                    <p> {{__('web.cobon_val')}}  </p>
                                                    <span class="line"></span>
                                                    <strong id="cobon_val">  {{__('web.sar')}} </strong>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="price_table_foot py-3 rounded-3">
                                            <ul>
                                                <li>
                                                    <p> {{__('web.pill_amount')}} </p>
                                                    <span class="line"></span>
                                                    <strong id="total"> {{number_format($total,2)}} {{__('web.sar')}} </strong>
                                                </li>
                                            </ul>
                                            <img src="{{url('')}}/assets/web/images/zegzag2.png" alt="" class="zegzag">
                                            <img src="{{url('')}}/assets/web/images/zegzag_line.png" alt="" class="zegzag_line">
                                        </div>
                                    </div>
                                    <div class="text-center mt-5">
                                        <button type="submit" class="butn w-50 py-3 shadow-lg">
                                            <span> ا{{__('web.pay_finish')}} </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                    
                    <div class="col-12" style="display:none" id="payment">
                    </div>
                </div>
            </div>
        </section>
    </main>
   <div class="modal editProfModal fade" id="mapModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"> {{__('web.address_delivery')}} </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="row col-md-12 m-auto">
                            <div class="col-md-12 mt-4">
                            <iframe
                            src="https://maps.google.com/maps?q={{$address->latlng}}&hl=en-US&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"
                            width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                            </div>
                        </div>
                    </form>
                </div>
              
            </div>
        </div>
    </div>
        
        
@push('js')
 <script>
 
    function saveOrder(elem)
    {
        event.preventDefault(); 
        var action = $(elem).attr('action');
        var urls = action;
        let dataform = new FormData( $(elem)[0]);
     
        $.ajax
        ({
            url : urls,
            type: 'POST',              
            data: dataform,
            contentType: false, 
            processData: false, 
            success:function(data)
            {
                if(data['status'] == 'success')
                {
                    $('#modal_success').modal('show');
                    window.location.assign({!! json_encode(url(getCurrentLocale().'/profile')) !!});
                }
               $('#payment').html(data['content']);
               $('#payment').css('display','block');
            }
            ,error:function(data) 
            {
                $('#modal_error').modal('show');
                $('#errors').html('');
                $('#errors').css("display", "block");
                $.each(data.responseJSON.errors, function(key,value) 
                {
                    $('#errors').append('<h4 class="title text-center mt-3">'+value+'</h4>');
                }); 
            }
        })
    }
    function cobonCheck(elem)
    {
        let target = $(elem).val();
        
        $.ajax({
          url : {!! json_encode(url(getCurrentLocale().'/cobonCheck')) !!},
          type : 'GET',
          dataType : 'json',
          data : 'cobon='+target,
          success:function(data)
          {
                $('#cobon').html(data.cobon);
                $('#cobon_val').html(data.cobon_val + ' ' + {!! json_encode(__('web.sar')) !!});
                $('#total').html(data.total + ' ' + {!! json_encode(__('web.sar')) !!});
                if(data.cobonCheck == 'on')
                {
                    $('#cobon').removeClass('text-danger');
                    $('#cobon').addClass('text-success');
                    $('#cobon').css('display','block');
                    $('#cobon_show').css('display','flex');
                }
                else
                {
                    $('#cobon').removeClass('text-success');
                    $('#cobon').addClass('text-danger');
                    $('#cobon').css('display','block');
                }
                
                if(data.tax_valid == 'true')
                {
                    $('#tax_show').css('display','flex');
                }
                else
                {
                    $('#tax_show').css('display','none');
                }
                    
          }
        })
    }
        // ------------ 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