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

    
    <main>

        <!-- ---------- choose_plane_step2_sec ----------- -->
        <section class="choose_plan_step2_sec">
            <div class="container">
                <h3 class="title text-center mainColor mb-5"> {{__('web.cart')}} </h3>
                <form id="form" method="post" action="{{url(getCurrentLocale().'/cart/order')}}" onsubmit="paymentForm(this)">
                    @CSRF
                <div class="row justify-content-between">
                    <div class="col-lg-7">
                        <div class="form">
                            <div class="steps">
                                <div class="step_item">
                                    <div class="step_num">
                                        1
                                    </div>
                                    <div class="step_cont w-100">
                                        <div class="title mb-4">
                                            <small> {{__('web.first_step')}} </small>
                                            <h5> {{__('web.products')}} </h5>
                                        </div>
                                        <div class="cont cart_content">
                                            <div class="cart_table">
                                                <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.count')}}</th>
                                                            <th scope="col">{{__('web.cost')}} </th>
                                                            <th scope="col"> {{__('web.delete')}} </th>
                                                          </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach($products as $product)
                                                                <tr>
                                                                    <td>
                                                                        <img src="{{asset($product->product->firstImage())}}" alt="" class="img_prod">
                                                                    </td>
                                                                    <td>
                                                                        <strong> {{ $product->product->descriptions()->name }} </strong>
                                                                    </td>
                                                                    <td>
                                                                        <p> {{ $product->product->code }} </p>
                                                                    </td>
                                                                    <td>
                                                                        <p> {{ $product->product->category->descriptions()->name }} </p>
                                                                    </td>
                                                                    <td>
                                                                        <div class="add-more">
                                                                            <span class="qt-minus" data-id="{{$product->id}}"><i class="fas fa-minus"></i></span>
                                                                            <span class="qt">{{$product->count}}</span>
                                                                            <span class="qt-plus" data-id="{{$product->id}}"><i class="fas fa-plus"></i></span>
                                                                        </div>
                                                                    </td>
                                                                    <td>
                                                                        <p> {{$product->product->getCost()}} {{__('web.sar')}} </p>
                                                                    </td>
                                                                    <td>
                                                                        <a href="#0" onclick="deleteCart(this)" data-id="{{$product->id}}">
                                                                            <i class="bi bi-trash3"></i>
                                                                        </a>
                                                                    </td>
                                                                  </tr>
                                                            @endforeach
                                                        </tbody>
                                                      </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="step_item">
                                    <div class="step_num">
                                        2
                                    </div>
                                    <div class="step_cont w-100">
                                        <div class="title mb-4">
                                            <small> {{__('web.second_step')}} </small>
                                            <h5> {{__('web.address_delivery')}} </h5>
                                            <!--<div class="text"> يمكنك اختيار اكثر من عنوان للتوصيل </div>-->
                                        </div>
                                        <div class="cont">
                                            <div class="row">
                                                @if(count($addresses) > 0)
                                                    @foreach($addresses as $key=>$row)
                                                        @include('web.pages.components.address',['row'=>$row,'cart'=>'on','key'=>$key,'count'=>count($addresses)])
                                                    @endforeach
                                                @else
                                                    <div class="alert alert-info rounded-pill text-center mt-4" role="alert">
                                                      {{__('web.not_exist_address')}}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <!--<a href="{{url(getCurrentLocale().'/profile?address=on')}}" class="butn butn_main_line mt-5">-->
                                        <!--    <span> {{__('web.add_address')}} </span>-->
                                        <!--</a>-->
                                        <a href="#0" class="butn butn_main_line mt-5" data-bs-toggle="modal" data-bs-target="#modal_add_adress">
                                            <span> {{__('web.add_address')}} </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="step_item" id="third_step" style="display:none">
                                    <div class="step_num">
                                        3
                                    </div>
                                    <div class="step_cont w-100 mb-0 border-0" >
                                        <div class="title mb-4">
                                            <small> {{__('web.third_step')}} </small>
                                            <h5> {{__('web.paymnet')}} </h5>
                                        </div>
                                        <div class="payment_choose_content" id="payment">
                                        </div>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="payment_aside">
                            <div class="aside_card">
                                <h6 class="mb-4"> {{__('web.order_details')}} </h6>
                                <ul>
                                    <li> <p> {{__('web.products_amount')}} </p> <strong id="total_products">  </strong> </li>
                                    <li id="cobon_enterd" style="display:none"> <p> {{__('web.cobon_discount')}}    </p> <strong id="cobon_discount">  </strong> </li>
                                    <li id="total_after" style="display:none"> <p> {{__('web.total_products_after_discount')}} </p> <strong id="total_products_after_discount">  </strong> </li>
                                    <li id="tax_valid" style="display:none"> <p> {{__('web.tax_val')}} (<strong id="tax_percentage"></strong>) </p> <strong id="tax_val">  </strong> </li>
                                    <li id="delivery_valid" style="display:none"> <p> {{__('web.delivery_val')}} </p> <strong id="delivery_val">  </strong> </li>
                                    <li class="pt-3 mt-3 border-1 border-top"> <p> {{__('web.total')}} </p> <strong id="total"> </strong> </li>
                                    <li id="points_valid" style="display:none"> <p> {{__('web.points')}} </p> <strong id="points_val"> </strong> </li>
                                </ul>
                            </div>
                            <div class="aside_card copon_card mt-5 form">
                                <h6 class="mb-4"> {{__('web.have_cobon')}} </h6>
                                <div class="form-group">
                                    <input type="text" class="form-control" onchange="calculateCart()" name="cobon" placeholder="{{__('web.enter')}} {{__('web.cobon')}}">
                                    <a href="#0"> {{__('web.validate')}} </a>
                                </div>
                                <div class="total" style="display:none" id="cobon_valid">  </div>
                                <button type="submit" id="save" class="butn w-100 mt-3">
                                    <span> {{__('web.pay_now')}} </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                </form>
            </div>
        </section>

    </main>
    
<div class="modal fade modal_adress" id="modal_add_adress" tabindex="-1" aria-labelledby="exampleModalLabel" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <div class="modal_adress_form form p-4">
                    <div class="title">
                        <small> {!! $address->descriptions()->title !!} </small>
                        <h6> {!! $address->descriptions()->description !!}  </h6>
                    </div>
                    <form method="post" action="{{url(getCurrentLocale().'/addresses/create')}}" onsubmit="saveForm(this)">
                        @CSRF
                    <div class="form_row">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <small class="label"> {{__('web.name')}} </small>
                                    <input type="text" name="name" class="form-control" placeholder="{{__('web.enter')}} {{__('web.name')}}">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <small class="label"> {{__('web.phone')}} </small>
                                    <div class="input-group">
                                        <input type="number" name="phone" class="form-control rounded-start rounded-0" placeholder="{{__('web.enter')}} {{__('web.phone')}}">
                                        <div class="flag_box form-control"> <img src="{{url('')}}/assets/web/images/new_imgs/ksa_flag.png" alt=""> <span> +966 </span> </div>
                                        <!--<select class="form-select form-control" id="inputGroupSelect01" disabled>-->
                                        <!--  <option selected="">+966</option>-->
                                        <!--</select>-->
                                      </div>
                                </div>
                            </div>
                            
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <small class="label"> {{__('web.address_status')}} </small>
                                    <select name="status" class="form-select form-control" id="inputGroupSelect01">
                                        <option value="address_home"> {{__('web.address_home')}} </option>
                                        <option value="address_work"> {{__('web.address_work')}} </option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <small class="label"> {{__('web.city')}} </small>
                                    <select  onchange="selectCity(this)" class="form-select form-control" name="city_id" id="inputGroupSelect01">
                                        <option selected="" value="">{{__('web.select')}}</option>
                                        @foreach($cities as $city)
                                            <option value="{{$city->id}}">{{$city->descriptions()->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <small class="label"> {{__('web.area')}} </small>
                                    <select name="area_id" class="form-select form-control" id="area_id">
                                        <option selected="" value="">{{__('web.select')}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <small class="label"> {{__('web.delivery_type')}} </small>
                                    <select name="delivery_type" class="form-select form-control" id="inputGroupSelect01">
                                        <option value="morning"> {{__('web.morning')}} </option>
                                        <option value="night"> {{__('web.night')}} </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <small class="label"> {{__('web.phone_home')}}  </small>
                                    <input type="number" name="phone_home" min="1" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <small class="label"> {{__('web.home_num')}} </small>
                                    <input type="number" name="home_num" min="1" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <small class="label"> {{__('web.address')}}  </small>
                                    <input type="text" name="address" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="delivery_days">
                                    <div class="form-group">
                                        <small class="label"> {{__('web.select_days')}} </small>
                                        <div class="days-checks">
                                            @foreach($week_all_days as $key=>$day)
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="days[]" value="{{$day}}" id="day{{$key+1}}">
                                                <label class="form-check-label" for="day{{$key+1}}">
                                                    {{__('web.'.$day)}}
                                                </label>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <small class="label"> {{__('web.address_note')}} </small>
                                    <textarea name="note" id="" rows="5" placeholder="" class="form-control"></textarea>
                                </div>
                            </div>
                            
                            <div class="col-12">
                                <div class="form-group">
                                    <small class="label"> {{__('web.address_on_map')}}  </small>
                                    <input type="hidden" name="latlng" id="latlng" value="">
                                    <input id="pac-input" placeholder="{{__('web.search')}}" >
                                    <div class="map_box" id="map" style="border-radius: 8px;position: inherit;overflow: inherit;">
                                        
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <button class="butn w-100 mt-3 ">
                                    <span> {{__('web.save')}} </span>
                                </button>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
           
    
    @push('js')
        <script>
            let total = {!! json_encode(__('web.total')) !!}
            let discount = {!! json_encode(__('web.discount_amount')) !!}
            let points = {!! json_encode(__('web.point')) !!}
            let not_exist = {!! json_encode(__('web.not_exist')) !!}
            let sar = {!! json_encode(__('web.sar')) !!}
            let url_addcart = {!! json_encode(url(getCurrentLocale().'/cart/create')) !!}
            let url_editcart = {!! json_encode(url(getCurrentLocale().'/cart/edit')) !!}
            let url_deletecart = {!! json_encode(url(getCurrentLocale().'/cart/delete')) !!}
            let url_calculate_cart = {!! json_encode(url(getCurrentLocale().'/cart/calculate')) !!}
        </script>
        <script src="{{url('')}}/assets/web/js/custom/cartAction.js"></script>
        
<script type="text/javascript">

    var latlng = new google.maps.LatLng({!! $provider ?? ''  && $provider->id ? $provider->latlng : '21.4989, 39.2509' !!});
    var map = new google.maps.Map(document.getElementById('map'), {
        center: latlng,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'Set lat/lon values for this property',
        draggable: true
    });
    google.maps.event.addListener(marker, 'dragend', function(a) {
        var div = document.createElement('div');
        div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
        document.getElementsByTagName('body')[0].appendChild(div);
         $("#latlng").val(function() {
    return  div.innerHTML;

    
});

    });
    

    var input = document.getElementById("pac-input");
    
    var searchBox = new google.maps.places.SearchBox(input);
    
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(input);
  // Bias the SearchBox results towards current map's viewport.
  map.addListener("bounds_changed", () => {
    searchBox.setBounds(map.getBounds());
  });

  var markers = [];

  // Listen for the event fired when the user selects a prediction and retrieve
  // more details for that place.
  searchBox.addListener("places_changed", () => {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }

    // Clear out the old markers.
    markers.forEach((marker) => {
      marker.setMap(null);
    });
    markers = [];

    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();

    places.forEach((place) => {
      if (!place.geometry || !place.geometry.location) {
        console.log("Returned place contains no geometry");
        return;
      }

      var icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25),
      };

    
      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    
    var latlng = new google.maps.LatLng(bounds.Va['hi'] , bounds.Ha['hi']);
    
    var latlng = new google.maps.LatLng(bounds.Va['hi'], bounds.Ha['hi']);
    marker.setPosition(latlng);
    $("#latlng").val(function() {
        return  bounds.Va['hi'] +', '+ bounds.Ha['hi'];
    });
    map.fitBounds(bounds);
  });

</script>
    @endpush   
@stop