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

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

        <!-- ---------- register_page page ----------- -->   
        
        
        <section class="subscribe_page form_page section_padding bg-light">
            <div class="container">
                <div class="content">
                    <div class="text-center">
                        <div class="logo_login">
                            <img src="{{url('')}}/assets/web/images/logo_login.svg" alt="">
                        </div>
                    </div>
                    <div class="form_box pb-5">
                        <form action="{{url(getCurrentLocale().'/continueSubscribe')}}" onsubmit="saveSubscribe(this)" method="post" class="form_edit">
                            @CSRF
                            <input name="subscribe_id" type="hidden" value="{{$subscribe->id}}">
                            <input name="dates" id="dates" type="hidden" value="">
                            <div class="row gx-lg-5">
                                <div class="col-lg-6">
                                    
                                    <div class="form-group">
                                        <label for="">{{__('web.goal')}}</label>
                                        <input type="text" name="goal" class="form-control" placeholder="{{__('web.write_here')}}...">
                                    </div>
                                    <div class="form-group">
                                        <label for="">{{__('web.cobon_discount')}}</label>
                                        <div class="d-flex align-items-center">
                                            <input type="text" onchange="cobonCheck(this)" name="cobon" class="form-control" placeholder="{{__('web.write_here')}}...">
                                            <button type="button" class="coupon_btn">{{__('web.valid')}}</button>
                                        </div>
                                        <small class="text-danger mt-2 " id="cobon" ></small>
                                    </div>
                                    <div class="form-group">
                                        <label for="">{{__('web.delivery_notes')}}</label>
                                        <textarea rows="6" name="notes" class="form-control" placeholder="{{__('web.write_here')}}..."></textarea>
                                    </div>
                                    <div class="wh_card mb-5">
                                        <h4 class="mb-4"> {{__('web.select_address')}} </h4>
                                            <div class="form-group">
                                                <label for=""> {{__('web.address_saved_before')}} </label>
                                                <select name="address_id" class="form-control form-select bg-light mt-2">
                                                    <option selected disabled>{{__('web.select')}}</option>
                                                    @foreach($addresses as $row)
                                                        <option value="{{$row->id}}">{{$row->street}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="butns inFlex mt-5 justify-content-center">
                                                <a href="#" class="butn mx-1"  data-bs-toggle="modal" onclick="createAddress()" data-bs-target="#addLocModal">
                                                    <span>{{__('web.add_address')}}</span>
                                                </a>
                                            </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="">{{__('web.delivery_times')}}</label>
                                        <select name="delivery" id="" class="form-control form-select">
                                            <option value="morning"> {{__('web.morning')}}  </option>
                                            <option value="night"> {{__('web.night')}} </option>
                                        </select>
                                    </div>
                                    <div class="form-group mt-5 pt-3">
                                        <label for="">  {{__('web.select_package_days')}} </label>
                                        <div class="input_datepicker" id="datepicker1"></div>
                                    </div>
                                    
                                </div>
                                <div class="col-12" style="display:none" id="payment">
                                    
                                </div>
                            </div>
                        <div class="row justify-content-center">
                            <div class="col-lg-10">
                                <div class="subscribe_price_table">
                                    <div class="price_table_body">
                                        <ul>
                                            <li>
                                                <p> {{__('web.package_cost')}} </p>
                                                <span class="line"></span>
                                                <strong> {{$subscribe->package_total}} {{__('web.sar')}} </strong>
                                            </li>
                                            <li>
                                                <p> {{__('web.tax')}} </p>
                                                <span class="line"></span>
                                                <strong id="tax"> {{$subscribe->tax_val}} {{__('web.sar')}} </strong>
                                            </li>
                                            <li style="display:none" id="cobon_show">
                                                <p> {{__('web.cobon_val')}} </p>
                                                <span class="line"></span>
                                                <strong id="cobon_val">   </strong>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="price_table_foot">
                                        <ul>
                                            <li>
                                                <p> {{__('web.total')}} </p>
                                                <span class="line"></span>
                                                <strong id="total"> {{$subscribe->total}} {{__('web.sar')}} </strong>
                                            </li>
                                        </ul>
                                        <img src="{{url('')}}/assets/web/images/zegzag1.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')}} </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>
   <div class="modal editProfModal fade" id="addLocModal" 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.add_address')}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="add_adress_tab" id="createAddress">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
   
@push('js')
<script>
    function createAddress()
    {
        $.ajax
        ({
            url : {!! json_encode(url(getCurrentLocale().'/createAddress')) !!},
            type: 'GET',              
            data: '',   
            success:function(data)
            {
                $('#createAddress').html(data);
                var latlng = new google.maps.LatLng({!! $product ?? ''  && $product->id ? $product->latlng : '21.4989, 39.2509' !!});
                var map = new google.maps.Map(document.getElementById('map'), {
                    center: latlng,
                    zoom: 11,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                
let infoWindow;


  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");
    locationButton.setAttribute("type", "button");  
  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };
          new google.maps.Marker({
                position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
                map: map,
                title: 'Set lat/lon values for this property',
                draggable: true
            });
          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter());
        }
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  });
    
                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) {
                    console.log(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;
                    });
                });
            }
        })
    }
    function saveSubscribe(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().'/cobonCheckPackage')) !!},
          type : 'GET',
          dataType : 'json',
          data : 'cobon='+target+'&subscribe_id='+{!! json_encode($subscribe->id) !!},
          success:function(data)
          {
                $('#cobon').html(data.cobon);
                $('#cobon_val').html(data.cobon_val + ' ' + {!! json_encode(__('web.sar')) !!});
                $('#total').html(data.total_paid + ' ' + {!! json_encode(__('web.sar')) !!});
                $('#tax').html(data.tax + ' ' + {!! 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_show').css('display','none');
                    $('#cobon').removeClass('text-success');
                    $('#cobon').addClass('text-danger');
                    $('#cobon').css('display','block');
                }
                    
          }
        })
    }
</script>
<script>
        $( function() {
          $( "#datepicker" ).datepicker({
            dateFormat: 'yy-mm-dd',
            minDate: {!! json_encode($start_date) !!},
            onSelect: function (dateText, inst) {
                 $('#datepicker1').multiDatesPicker({
                    minDate: dateText,
                    dateFormat: 'yy-mm-dd',
                });
              }
            
          });
        });
    </script>

    <script>
        $('#datepicker1').multiDatesPicker({
        minDate: {!! json_encode($start_date) !!},
        dateFormat: 'yy-mm-dd',
        maxPicks: {!! $subscribe->count_days !!},
           onSelect: function (date) {
            let data = $('#datepicker1').multiDatesPicker('getDates');
            $('#dates').val(data); 
           }
 });


    </script>

@endpush
@stop