@extends('buyers_sellers.layout2.master')
@section('title', 'Edit Profile')
@section('content')
    <style type="text/css">
        .profileimage {
            height: 146px;
            width: 152px;
            object-fit: fill;
        }

        .uploadbtn {
            margin-left: -8px !important; 
        }

        select.form-control {
            height: 39px !important;
        }

    </style>
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <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>
                        <li class="active">Jobs</li>
                    </ol>
                </div>
            </div>
          <div class="row">
                  
            <div class="col-sm-12">
                <div class="card">
                  
                    <div class="card-body ">
                                <!-- Main Content -->
                                <main class="col col-xl-12 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">
                                    <div class="tab-content" id="myTabContent">
                                        <div class="tab-pane fade show active" id="home" role="tabpanel"
                                            aria-labelledby="home-tab">
                                            <div class="d-flex"></div>
                                            <div class="job-tags p-3">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <form class="needs-validation" novalidate="" action="{{ route('buyer.job.update') }}" enctype="multipart/form-data" method="post" id="payment-form">
                                                            <input type="hidden" name="job_id" id="job_id" value="{{$data->id}}">
                                                            @csrf
                                                            <div class="row">
                                                                <div class="col-md-4">
                                                                    <label for="jobtitle" class="bold">This service Request is for a:</label>
                                                                    <input type="text" name="title" id="title" class="form-control" value="{{$data->title}}" required disabled>
                                                                    {{-- <p class="text-danger"><b>@error('title') {{$message}} @enderror</b></p> --}}
                                                                    <div class="invalid-feedback">
                                                                        Please fill in your email
                                                                      </div>
                                                                </div>
                                                                    
                                                                    <div class="form-group col-md-4">
                                                                        <label for="selectservice" class="bold">Where are you located?</label>
                                                                        <input type="text" name="title" id="title" class="form-control" value="{{$data->town_name}}" placeholder="Job Title" required disabled>
                                                                     </div>
                                                                <div class="col-md-4">
                                                                    <label for="jobbudget" class="bold">When do you need this service?</label>
                                                                    <input type="text" id="date" name="date" class="form-control"
                                                                        placeholder="Job date" value="{{date('Y-m-d', strtotime($data->sup_req_date))}}" disabled>
                                                                    <p class="text-danger"><b>@error('date') {{$message}} @enderror</b></p>
                                                                    <div class="invalid-feedback">
                                                                        Please put integer
                                                                      </div>
                                                                </div>
                                                            </div>
                                                            @if ($data->type == "range")
                                                            <div class="row">
                                                              <div class="col-md-4">
                                                                      <label for="jobbudget" class="bold">Your Price</label>
                                                                      <input type="number" id="range" name="price" class="form-control"
                                                                          placeholder="Your fix price" value="{{$data->price}}" required>
                                                                  </div>
                                                              </div>
                                                          </div>
                                                            @endif
                                                           

                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <label for="jobdescription" class="bold">Please provide us with the details of your requirements</label>
                                                                    <textarea type="text" cols="30" rows="10"
                                                                        name="details" id="details" class="form-control"
                                                                        placeholder="Job Description" required> {{$data->desc}}</textarea>
                                                                        <p class="text-danger"><b>@error('details') {{$message}} @enderror</b></p>

                                                                </div>
                                                                <!-- <div id="googleMap" style="width:100%;height:200px;"></div> -->
                                                                <div class="form-group col-md-6">
                                                                    <label for="selectservice" class="bold">Multiple Image for your issue</label><br>
                                                                    <input type="file" accept="image/jpg" name="job_images[]" id="service_image" class="btn btn-theme btn-sm col-sm-7 mb-3 w-50 uploadbtn" multiple/>
                                                                 </div> 
                                                                <div class="col-md-12 m-1">
                                                                        <button type="submit" class="btn btn-theme"  style="float: left;background: #f0f0f0;">
                                                                            Update
                                                                        </button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </main>
                            </div>
                        </div>
                    </div>
                </div>
            
        </div>
    </div>
    </div>
@endsection

@section('scripts')
<script>
    // 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();
//   });
// });

$(".needs-validation").submit(function () {
    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);
    }
    });
    var form = $(this);
    if (form[0].checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }
    form.addClass("was-validated");
    
  });

// 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

  var data = new FormData();
  var files = $('#service_image')[0].files[0];
  data.append("service_image",files);
  data.append("stripeToken", token.id);
  data.append("title", $('#title').val());
  data.append("town", $( "#Town option:selected" ).val());
  data.append("Budget",$("#Budget").val());
  data.append("description",$("#description").val());
  data.append("sub_category_id",$("#sub_category_id").val());

  $.ajax({
    headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      url: "{{route('stripe')}}",
      type: "POST",
      data:data,
      contentType: false,
      processData: false,
      success: function(data){
        data = JSON.parse(data);
        if(data.status == true){
          new swal({
            title: "",
            text: data.message,
            icon: "success",
          });
          window.location.href = "{{route('clientIndex')}}";
        }
        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>
<script>
  function myMap() {
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
google.maps.event.addListener(marker,'click',function() {
var pos = map.getZoom();
map.setZoom(9);
map.setCenter(marker.getPosition());
window.setTimeout(function() {map.setZoom(pos);},3000);
});
var marker = new google.maps.Marker({position: myCenter});

marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmyshh9H4Z2CEnfS695dE9NhMtCDVeqU0&callback=myMap"></script> 

<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
@endsection