@extends('layout')
@section('content')
<div class="container">
    <form id="oauth-form">
        @csrf
        <div class="row mb-3">
            <label for="calendar_id" class="col-sm-2 col-form-label">Calendar ID</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="calendar_id" placeholder="Enter Calendar ID" value={{ $details->calendar_id }}>
            </div>
          </div>
      <div class="row mb-3">
        <label for="client_id" class="col-sm-2 col-form-label">Client ID</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="client_id" placeholder="Enter Client ID" value={{ $details->client_id }}>
        </div>
      </div>
      
      <div class="row mb-3">
        <label for="client_secret" class="col-sm-2 col-form-label">Client Secret</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="client_secret" placeholder="Enter Client Secret" value="{{ $details->client_secret }}">
        </div>
      </div>
      <div class="row mb-3">
        <label for="code" class="col-sm-2 col-form-label">Code</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="code" placeholder="Enter Code" value = {{ $details->code }}>
        </div>
      </div>
      <div class="row mb-3">
        <label for="email" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="email" placeholder="Enter Email" value = {{ $details->email }}>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-10 offset-sm-2">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </form>
  </div>
  
<button class="btn btn-primary" id="click">Click</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
   $(document).ready(function(){
    $(document).ready(function(){
  $('#oauth-form').on('submit', function(event) {
    event.preventDefault(); 
    var formData = {
      client_id: $('#client_id').val(),
      client_secret: $('#client_secret').val(),
      redirect_uri: $('#redirect_uri').val(),
      code: $('#code').val(),
      calendar_id : $('#calendar_id').val(),
      email : $('#email').val(),
      _token: "{{ csrf_token() }}"
    };

    $.ajax({
      url: '{{ route("calendar.create") }}',
      type: 'POST',
    
      data:
       formData,
      success: function(response) {
        alert('Form submitted successfully!');
        console.log(response);
      },
      error: function(xhr, status, error) {
        alert('An error occurred: ' + error);
        console.log(xhr.responseText);
      }
    });
  });
});
   });


document.getElementById("click").addEventListener('click', function() {
    $.ajax({
        url: '{{ route("zoho_auth")  }}', 
        type: 'GET', 
        dataType: 'json',
        success: function(response) {
            // Handle success
            console.log("Success:", response);
            alert("Zoho callback received successfully.");
        },
        error: function(xhr, status, error) {
            // Handle error
            console.log("Error:", error);
            alert("Something went wrong!");
        }
    });
});

</script>
@endsection