@extends('buyers_sellers.layout2.master')
@section('title', 'Home')
@section('content')
<style>
div.searchable {
    width: 100%;
    float: left;
    margin: 0 15px;
}

.searchable input {
    width: 100%;
    height: 50px;
    font-size: 18px;
    padding: 10px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    display: block;
    font-weight: 400;
    line-height: 1.6;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center/8px 10px;
}

.searchable ul {
    display: none;
    list-style-type: none;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid #add8e6;
    border-top: none;
    max-height: 180px;
    margin: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0;
}

.searchable ul li {
    padding: 7px 9px;
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer;
    color: #6e6e6e;
}

.searchable ul li.selected {
    background-color: #e8e8e8;
    color: #333;
}

/* LOADER */
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
#ajaxloader1 .square{
  border:8px solid #fff;
  border-radius:50%;
  .box-shadow(0 0 25px 2px);
  color:#fff;
  border-color:@red;
  color:@red-shadow;
  border-right-color:transparent;
  border-top-color:transparent;
  .animation(spin-right);
  margin:30px auto 0;
}
  
  &:after {
    display:block;
    .square(13px);
    margin:3px;
    border:6px solid @red;
    content:" ";
    border-radius:50%;
    border-left-color:transparent;
    border-bottom-color:transparent;
  }

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
              
                  @if (Session::has('message'))
                  <div class="alert alert-primary" role="alert">
                      {{ Session::get('message') }}
                  </div>
                @endif
              

                @if (Session::has('loginsuccessfully'))
                  <div class="alert alert-primary" role="alert">
                      {{ Session::get('loginsuccessfully') }}
                  </div>
                @endif
                @if($updateprofile == 0)
                  <div class="alert alert-danger" role="alert">
                    Your profile is incomplete - please update your profile
                  </div>
                @endif
                    <div class=" pull-left">
                        <div class="page-title">@if($points->points) {{ $points->points->points }}@else 0 @endif loyalty points available</div>
                    </div>

                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item"
                                href="{{ route('buyer.dashboard') }}">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        {{-- <li><a class="parent-item" href="">UI Elements</a>&nbsp;<i class="fa fa-angle-right"></i> --}}
                        </li>
                        <li class="active">Search</li>

                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="card-box">
                        <div class="card-head">
                            {{-- <header>Search</header> --}}
                        </div>
                        {{-- @livewire('job-search') --}}
                        <div class="card-body">
                          <div class="col-md-6 offset-md-3 text-center pb-4">
                            <h3>I am looking for a</h3>                            
                            <div class="searchable">
                                <input type="text" placeholder="search service" onkeyup="filterFunction(this,event)">
                                <ul>
                                @foreach ($services as $ser )
                                    <li>{{$ser->name}}</li>
                                @endforeach
                                </ul>
                            </div>
                          </div>
                         <div class="container">
                          <div id="ajaxloader1"></div>
                         </div>

                          <div class="col-md-12 col-sm-12 mt-4" id="showResult">
                              <div class="form-group" id="requestshow" style="display: none">
                                  <div class="col-md-6 mt-5">
                                    <h3>Please select preference:</h3>
                                  </div>
                                        <div class="radio p-0" id="freeservicepro">
                                          <label for="optionsRadios1">
                                              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"
                                                data-id="" onclick="FreeService()"> <span id="gettext"></span>
                                          </label>
                                        </div>
                                  
                                  
                                  <div class="radio p-0" id="free-provider-detail" style="display:none">
                                      <label>
                                          <span id="getProfiledetails"></span>
                                      </label>
                                  </div>

                                  <div class="radio p-0" id="standard-para">
                                      <label for="optionsRadios2">
                                          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"
                                          onclick="conbtn(1)"> 
                                          <span id="setcate"></span>
                                      </label>     
                                  </div>

                                  <div class="radio p-0" id="range-para">
                                    <label for="optionsRadios2">
                                        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3"
                                        onclick="conbtn(2)"> 
                                        <span id="setrange"></span>
                                    </label>
                                    
                                    <button id="free-btn" style="display:none;width:100px;" onclick="getProfile()"  class="btn btn-theme" ><span id="load"></span>Continue</button>
                                    
                                    <a id="standart-con-btn" style="display:none;width:100px;" id="seturlinjob" href="" class="btn btn-theme" >Continue</a>

                                    <a id="range-con-btn" style="display:none;width:100px;" id="seturlinjob" href="" class="btn btn-theme" >Continue</a>
                                </div>
                              </div>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div id="reqfound" class="modal fade" role="dialog">
        <div class="modal-dialog" style="width: 30%;">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-body text-center">
                    <p>Thank you for Paying Plase post your job</p>
                </div>
                <div class="modal-footer">
                    <a id="seturlinjob" href="" class="btn btn-info" >Post Your Job</a>
                </div>
            </div>

        </div>
    </div>
    


    <!-- strip -->
    <div id="myModalradio2" class="modal fade" role="dialog">
        <div class="modal-dialog" style="width: 30%;">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-body text-center">
                    <form action="{{ route('stripe') }}" method="post" id="payment-form">
                        @csrf
                       <div class="container">
                        <div class="row mt-3">
                            <div class="col-md-12">
                            <p>“Thank you for choosing our service. We are eager to get started. Would you like to pay $ for
                                your Standard Service package now?”</p>
                                <div id="card-element">
                                  <!-- A Stripe Element will be inserted here. -->
                                </div>
                            </div>
                            <div class="col-md-12 mt-4">
                                <div class="row">
                                  <div class="col-md-4"></div>
                                  <div class="col-md-4">
                                    <button class="btn btn-theme" id="card-button" data-secret="" style="float: left;background: #f0f0f0;">
                                        Payment
                                    </button>
                                  </div>
                                  <div class="col-md-4"></div>
                              </div>
                            </div>
                            
                            <!-- Used to display form errors. -->
                            <div id="card-errors" role="alert"></div>
                          </div>
                       </div>
                        <input type="hidden" name="paymentType" id="paymentType" value="2">
                        {{-- <button id="stripeSubmit">Submit Payment</button> --}}
                      </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-theme" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
    
@endsection
@section('scripts')
<script>
$(document).ready(function(){
$.ajax({
      url: "{{ route('free.service.permission') }}",
      type: "get",
      success: function(data)
      {
          if (data == 'yes') {
            document.getElementById('freeservicepro').style.display == 'block'
          }
          if (data == 'no') {
              document.getElementById("freeservicepro").style.display = "none"
          }
      }
    });
});

</script>
<script>


  {{-- function serchjobreq(name){
    event.preventDefault();
    let name1 = name;
    $.ajax({
        url: "{{ route('makeSearch') }}",
        type: "POST",
        data: 
        {
          "_token": "{{ csrf_token() }}",
          'query': name1
        },
        success: function(response)
        {
          if(response.status == true)
          {
            //  console.log(response.data.id);
            document.getElementById("requestshow").style.display = "block";
            document.getElementById("optionsRadios1").setAttribute('data-id' , response.data.id);
            document.getElementById("seturlinjob").href = "{{url('/buyer/add-job')}}/"+response.data.id;
            document.getElementById("gettext").innerHTML = "Free Service – Provide Contact details for 1 <strong> "+ response.data.name+" </strong> near me";
            document.getElementById("setcate").innerHTML = "Standard Service – Find available <strogn> "+ response.data.name+" </strong>, obtain quotes, choose the right <strogn> "+ response.data.name+" </strong> for me";
            document.getElementById('standart-con-btn').href  = "{{url('/buyer/add-job')}}/"+response.data.id; 


          }
          else
          {
            document.getElementById("optionsRadios1").setAttribute('data-id' , "");
            document.getElementById("requestshow").style.display = "none";  
            $('#reqnotfound').modal('toggle');
          }
        },
        error: function()
        {
          alert('error occured');
        }


      });
        
    } --}}


    

    function strip(){
        
        $('#myModalradio2').modal("hide");
        $('#strip').modal('show');
    }

    

 
        // STRIPE START

// Create a Stripe client.
var stripe = Stripe('{{env('STRIPE_KEY')}}');

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// Create an instance of the card Element.
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.on('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    // console.log(result);
    if (result.error) {
      // Inform the user if there was an error.
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // console.log(1);
      // Send the token to your server.
      stripeTokenHandler(result.token);
    }
  });
});

// Submit the form with the token ID.
function stripeTokenHandler(token) {
  // console.log(token);
  // Insert the token ID into the form so it gets submitted to the server
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  StripeToken = token.id;
  form.appendChild(hiddenInput);

  // Submit the form
  // form.submit();
  $.ajax({
      url: "{{route('stripe')}}",
      type: "POST",
      data: {
        '_token': "{{ csrf_token() }}",
        'stripeToken': token.id,
        'amount': $('#amount').val()
        
      },
      success: function(data){
        console.log(data);
        data = JSON.parse(data);
        if(data.status == true){

         $('#myModalradio2').modal('hide');
         $('#reqfound').modal('show');          
          
        }
        else if(data.status == false) {
          new swal({
            title: "",
            text: data.message,
            icon: "warning",
          });
        }
      },
      error: function(){
        new swal({
            title: "",
            text: "Something Went Wrong",
            icon: "warning",
          });
      }
  });
  
}
</script>


{{-- live search --}}
<script>
function filterFunction(that, event) {
    let container, input, filter, li, input_val;
    container = $(that).closest(".searchable");
    input_val = container.find("input").val().toUpperCase();

    if (["ArrowDown", "ArrowUp", "Enter"].indexOf(event.key) != -1) {
        keyControl(event, container)
    } else {
        li = container.find("ul li");
        li.each(function (i, obj) {
            if ($(this).text().toUpperCase().indexOf(input_val) > -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });

        container.find("ul li").removeClass("selected");
        setTimeout(function () {
            container.find("ul li:visible").first().addClass("selected");
        }, 100)
    }
}

function keyControl(e, container) {
    if (e.key == "ArrowDown") {

        if (container.find("ul li").hasClass("selected")) {
            if (container.find("ul li:visible").index(container.find("ul li.selected")) + 1 < container.find("ul li:visible").length) {
                container.find("ul li.selected").removeClass("selected").nextAll().not('[style*="display: none"]').first().addClass("selected");
            }

        } else {
            container.find("ul li:first-child").addClass("selected");
        }

    } else if (e.key == "ArrowUp") {

        if (container.find("ul li:visible").index(container.find("ul li.selected")) > 0) {
            container.find("ul li.selected").removeClass("selected").prevAll().not('[style*="display: none"]').first().addClass("selected");
        }
    } else if (e.key == "Enter") {
        container.find("input").val(container.find("ul li.selected").text()).blur();
        onSelect(container.find("ul li.selected").text())
    }

    container.find("ul li.selected")[0].scrollIntoView({
        behavior: "smooth",
    });
}

function onSelect(val) {
    {{-- alert(val) --}}

    $.ajax({
        url: "{{ route('makeSearch') }}",
        type: "POST",
        data: 
        {
          "_token": "{{ csrf_token() }}",
          'query': val
        },
        success: function(response)
        {
          if(response.status == true)
          {

            document.getElementById("requestshow").style.display = "block";
            document.getElementById("optionsRadios1").setAttribute('data-id' , response.data.id);
            document.getElementById("seturlinjob").href = "{{url('/buyer/add-job')}}/"+response.data.id;
            document.getElementById("gettext").innerHTML = "Free Service – Provide Contact details for 1 "+ response.data.name+" near me";
            document.getElementById("setcate").innerHTML = "Standard Service – Find available <strogn> "+ response.data.name+" </strong>, obtain quotes, choose the right <strogn> "+ response.data.name+" </strong> for me";
            document.getElementById("setrange").innerHTML = "I have a price in mind. I want to find "+ response.data.name+" in that price range.";
            document.getElementById('standart-con-btn').href  = "{{url('/buyer/add-job')}}/standard/"+response.data.id; 
            document.getElementById('range-con-btn').href  = "{{url('/buyer/add-job')}}/range/"+response.data.id; 

          }
          else
          {
            document.getElementById("requestshow").style.display = "none";
            document.getElementById("optionsRadios1").setAttribute('data-id' , "");
            document.getElementById("requestshow").style.display = "none";  
            $('#reqnotfound').modal('toggle');
          }
        },
        error: function()
        {
          alert('error occured');
        }


      });
}

$(".searchable input").focus(function () {
    $(this).closest(".searchable").find("ul").show();
    $(this).closest(".searchable").find("ul li").show();
});
$(".searchable input").blur(function () {
    let that = this;
    setTimeout(function () {
        $(that).closest(".searchable").find("ul").hide();
    }, 300);
});

$(document).on('click', '.searchable ul li', function () {
    $(this).closest(".searchable").find("input").val($(this).text()).blur();
    onSelect($(this).text())
});

$(".searchable ul li").hover(function () {
    $(this).closest(".searchable").find("ul li.selected").removeClass("selected");
    $(this).addClass("selected");
});

function FreeService(){
  
  document.getElementById('free-btn').style.display = "block";
  document.getElementById('standart-con-btn').style.display  = "none"; 

}

function getProfile(){
  
        document.getElementById('load').innerHTML = "<i class='fa fa-spinner fa-spin'></i>";
        let id = document.getElementById("optionsRadios1").getAttribute('data-id');
        document.getElementById('free-btn').disabled = true;

        $.ajax({
            url: "{{ route('profile.search.provider') }}",
            type: "POST",
            data: 
            {
            "_token": "{{ csrf_token() }}",
            'id': id
            },success:function(response){
              document.getElementById('load').innerHTML = " ";
              document.getElementById('free-btn').disabled = false;
                if (response.status == true) {
                    console.log(response.data);
                      document.getElementById('getProfiledetails').innerHTML = "Thank you for using our service. <strong> "+response.data.user.full_name+" </strong> is listed on our platform as a <strong> "+response.data.title+". </strong> His number is <strong> "+response.data.user.phone_number+". </strong> Email <strong> "+response.data.user.full_name+" </strong> at <strong> "+response.data.user.email+" </strong>";
                      document.getElementById('free-provider-detail').style.display  = "block"; 
                      document.getElementById('free-btn').style.display = "none";
                }else{
                    alert(response.message);
                }
            }
        });            
    }

    function conbtn(id){
      if (id == 1) {
        document.getElementById('standart-con-btn').style.display  = "block"; 
        document.getElementById('free-btn').style.display = "none";
        document.getElementById('range-con-btn').style.display  = "none"; 


      }else{
        document.getElementById('range-con-btn').style.display  = "block"; 
        document.getElementById('free-btn').style.display = "none";
        document.getElementById('standart-con-btn').style.display  = "none"; 

      }
    }
    (function($){
 
    $('#ajaxloader1, .outer, .inner, .barlittle, .pointcircle, .bar, #loadpulse div, #shadowloader span, .loadingtext span').toggleClass('stop');
 
})(jQuery);
</script>
@endsection