@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"> {{$title}} </h3>
                <form id="form" onsubmit="paymentForm(this)" method="{{$method}}" action="{{$action}}">
                    @CSRF
            
                    @foreach($requestData as $key=>$row)
                        <input type="hidden" name="{{$key}}" value="{{$row}}">
                    @endforeach
                    <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.subscribe_package')}} </h5>
                                            </div>
                                            <div class="cont">
                                                <div class="choose_plan_card_info">
                                                    <div class="inf">
                                                        <p> {{__('web.current_package')}} </p>
                                                        <h5> {{$package->descriptions()->name}} </h5>
                                                        <h6 class="mt3 mainColor"> {{$species->species->descriptions()->name}} </h6>
                                                        <small> {{$packageCost->day->day}} {{__('web.day')}} <i class="far fa-circle mx-2 small"></i> </small>
                                                        <small> {{$packageCost->breakfast + $packageCost->main}} {{__('web.daily_meal')}} <i class="far fa-circle mx-2 small"></i> </small>
                                                        @if(count($sides) > 0)
                                                            @foreach($sides as $side)
                                                                @if($side['count'] > 0)
                                                                    <small> {{$side['count']}} {{$side['side']}} <i class="far fa-circle mx-2 small"></i> </small>
                                                                @endif
                                                            @endforeach
                                                        @endif
                                                        @if($count_snacks)
                                                        <small> {{$count_snacks}} {{__('web.snacks')}} <i class="far fa-circle mx-2 small"></i> </small>
                                                        @endif
                                                        <small> {{$packageCost->species->calories}} {{__('web.calories')}} </small>
                                                        <div class="btns mt-4 small">
                                                            <a href="{{url(getCurrentLocale().'/subscribe?choose_days='.$requestData['cost_id'].'&count_snacks='.$requestData['count_snacks'])}}" class="fw-bold py-2 px-4 rounded-pill mainBack text-white me-2"> {{__('web.edit_subscribe')}} </a>
                                                        </div>
                                                    </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>
                                            <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="#0" data-bs-toggle="modal" data-bs-target="#modal_add_adress" class="butn butn_main_line mt-5"> 
                                                <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.total_package')}} </p> <strong id="total_package">  </strong> </li>
                                    <ul id="sides"></ul>
                                    <li id="count_snacks" style="display:none"> <p> {{__('web.count_snacks')}} <span>  </span> </p> <strong>  </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_after_discount')}} </p> <strong id="total_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')}} ({{$packageCost->day->day . ' ' . __('web.day')}}) </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="calculateSubscribe()" 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 type="submit" class="butn w-100 mt-3 ">
                                                                <span> {{__('web.save')}} </span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
    </div>
</div>
   
    @push('js')
        <script>
            let count_snacks = {!! json_encode(__('web.count_snacks')) !!}
            let discount = {!! json_encode(__('web.discount_amount')) !!}
            let count_side = {!! json_encode(__('web.count_side')) !!}
            let total = {!! json_encode(__('web.total')) !!}
            let points = {!! json_encode(__('web.point')) !!}
            let not_exist = {!! json_encode(__('web.not_exist')) !!}
            let sar = {!! json_encode(__('web.sar')) !!}
            let day = {!! json_encode(__('web.day')) !!}
            let url_calculate_package = {!! json_encode(url(getCurrentLocale().'/subscribe/calculate')) !!}
            let url_species = {!! json_encode(url(getCurrentLocale().'/packages/select/species')) !!}
            let url_days = {!! json_encode(url(getCurrentLocale().'/packages/select/days')) !!}
            let select = '<option>'+{!! json_encode(__('web.select')) !!}+'</option>';
        </script>
        <script src="{{url('')}}/assets/web/js/custom/payAction.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.Ja['hi']);
    
    var latlng = new google.maps.LatLng(bounds.Va['hi'], bounds.Ja['hi']);
    marker.setPosition(latlng);
    $("#latlng").val(function() {
        return  bounds.Va['hi'] +', '+ bounds.Ja['hi'];
    });
    map.fitBounds(bounds);
  });

function addYourLocationButton (map, marker) 
{
    var controlDiv = document.createElement('div');

    var firstChild = document.createElement('button');
    firstChild.setAttribute('type', 'button');
    firstChild.style.backgroundColor = '#fff';
    firstChild.style.border = 'none';
    firstChild.style.outline = 'none';
    firstChild.style.width = '28px';
    firstChild.style.height = '28px';
    firstChild.style.borderRadius = '2px';
    firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
    firstChild.style.cursor = 'pointer';
    firstChild.style.marginRight = '10px';
    firstChild.style.padding = '0';
    firstChild.title = 'Your Location';
    controlDiv.appendChild(firstChild);

    var secondChild = document.createElement('div');
    secondChild.setAttribute('type', 'button');
    secondChild.style.margin = '5px';
    secondChild.style.width = '18px';
    secondChild.style.height = '18px';
    secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-2x.png)';
    secondChild.style.backgroundSize = '180px 18px';
    secondChild.style.backgroundPosition = '0 0';
    secondChild.style.backgroundRepeat = 'no-repeat';
    firstChild.appendChild(secondChild);

    google.maps.event.addListener(map, 'center_changed', function () {
        secondChild.style['background-position'] = '0 0';
    });

    firstChild.addEventListener('click', function () {
        var imgX = '0',
            animationInterval = setInterval(function () {
                imgX = imgX === '-18' ? '0' : '-18';
                secondChild.style['background-position'] = imgX+'px 0';
            }, 500);

        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                marker.setPosition(latlng);
                map.setCenter(latlng);
                clearInterval(animationInterval);
                secondChild.style['background-position'] = '-144px 0';
            });
        } else {
            clearInterval(animationInterval);
            secondChild.style['background-position'] = '0 0';
        }
    });

    controlDiv.index = 1;
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(controlDiv);
}


addYourLocationButton(map, marker);
</script>

    @endpush  

@stop