@extends('layouts.master')

@section('content')

<input type="hidden" id="a_u_a_b_t" value="{{$a_user_api_bearer_token}}">
<input type="hidden" id="userId" value="{{Auth::user()->id}}">


<main id="main" class="main">

  <div class="pagetitle">
    <h1>My Professionals</h1>
    <!-- <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item active"><a href="/home">Home</a></li>
        <li class="breadcrumb-item ">Dashboard</li>
      </ol>
    </nav> -->
  </div>
  <!-- End Page Title -->

  <section class="section dashboard">
    <div class="row mb-5 mt-5">
      <div class="col-xl-12 col-lg-12 col-md-12 col-12">
        <div class="row align-items-center">
          <div class="col-xl-12 col-12 mb-4 mb-xl-0">
            <div class="row">
              <div class="col-md-8">
                <button type="button" name="create_record" id="create_record" class="btn btn-success btn-sm">Add
                  Professionals</button>
              </div>
              <br>
              <br>
            </div>

            <table id="myTable" class="table">
              <thead>
                <tr>
                  <th data-column_name="avatar" width="5%">Avatar</th>
                  <th data-column_name="name" width="20%">Name</th>
                  <th data-column_name="email" width="30%">Email</th>
                  <th data-column_name="phone1" width="10%">Phone</th>
                  <th data-column_name="Profession" width="15%">Profession</th>
                  <th data-column_name="experience" width="10%">Experience</th>
                  <th width="10%">Action</th>
                </tr>
              </thead>
              <tbody>

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div id="formModal" class="modal fade" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add Professional</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="alert alert-danger" id="successRegsiter" style="display: none;"></div>
            <span id="form_result" aria-hidden="true"></span>
            <form method="post" id="sample_form" class="form-horizontal" enctype="multipart/form-data">
              @csrf
              <div class="form-group" id="name_form">

                <br>
                <div class="row">
                  <div class="col-12">
                    <div class="input-group has-validation">
                      <span class="input-group-text" id="inputGroupPrepend">+91</span>
                      <input type="text" name="phone1" class="form-control" id="phone1"
                        placeholder="Enter Professional Phone Number" pattern="^([\-\s]?)?[0]?(91)?[6789]\d{9}$"
                        title="Please enter a valid phone number" required>
                      <div class="invalid-feedback">Please enter your Phone Number</div>
                    </div>
                  </div>
                </div>
              </div>
              <br />
              <div class="form-group" align="center">
                <input type="hidden" name="action" id="action" />
                <input type="hidden" name="hidden_id" id="hidden_id" />
                <input type="submit" name="action_button" id="action_button" class="btn btn-warning float-left"
                  value="Add" />
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!--view details model-->
    <div class="modal fade" id="viewDetailsModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title center" id="exampleModalCenterTitle">Professional Details</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body" id="viewDetailTable">

          </div>
        </div>
      </div>
    </div>
    <!--end of view details model-->

  </section>

</main>
<!-- End #main -->
@endsection

@section('scripts')
<script type="text/javascript">
if (typeof jQuery !== 'undefined') {
  console.log('jQuery Loaded');
} else {
  console.log('not loaded yet');
}
localStorage.setItem('a_u_a_b_t', $('#a_u_a_b_t').val());
</script>

<script>
var user_id = $("#userId").val();
console.log('user_id: ' + user_id);
$(document).ready(function() {
  console.log('document.ready');
  var dt = $('#myTable').DataTable({
    "ajax": {
      "paging": true,
      "scrollX": true,
      "lengthChange": true,
      "searching": true,
      "ordering": true,
      "processing": true,
      "serverSide": true,
      "url": "{{ url('api/customer/getProfessionalAllDetail') }}" + '/' + user_id,
      "dataSrc": "",
      "type": "GET",
      "datatype": "json",
      "crossDomain": true,
      "beforeSend": function(xhr) {
        xhr.setRequestHeader("Authorization", "Bearer " + localStorage.getItem(
          'a_u_a_b_t'));
      }
    },
    processing: true,
    rowReorder: {
      selector: 'td:nth-child(2)'
    },
    responsive: true,
    rowReorder: false,

    columns: [{
        data: null,
        render: function(data, type, row) {
          return '<img src="' + data['avatar'] +
            '" class="rounded-circle" alt="Professional Picture" style="border-radius:50px;" width="40" height="40" />';
        },
      },
      {
        data: 'name'
      }, {
        data: 'email'
      }, {
        data: 'phone'
      }, {
        data: 'profession'
      }, {
        data: 'experience'
      },
      {
        data: null,
        render: function(data, type, row) {
          return '<button type="button"  id="' + data['id'] +
            '" class="profileAllDetail btn btn-warning btn-sm ">View Detail</button>';
        },
      },
    ],
  });

  $('#create_record').click(function() {
    console.log("create_record");
    $('#name_form').show();
    $('#sample_form')[0].reset();
    $('#form_result').html('');
    $('.modal-title').text("Add Professional");
    $('#action_button').val("Add");
    $('#action').val("Add");
    $('#formModal').modal('show');
  });

  $(document).on("click", ".profileAllDetail", function() {
    console.log("profileAllDetail clicked");
    professionalId = $(this).attr('id');
    console.log('professionalId: ' + professionalId);
    $.ajax({
      type: "get",
      url: "{{url('api/customer/getProfessionalAllDetailByProfessionalId')}}/" + professionalId,
      headers: {
        "Authorization": "Bearer " + localStorage.getItem('a_u_a_b_t')
      },
      success: function(response) {
        console.log('response: ' + response);
        $('#viewDetailsModel').modal('show');
        // if (response.data.postal_code) {
        //   var postalCode = response.data.postal_code;
        // } else {
        //   var postalCode = "Not Found";
        // }
        $("#viewDetailTable").empty().append(
          '<div class="container">' +
          '<h3>' + response.data.full_name + ' (' + response.data.username +
          ')' +
          '</h3>' +
          '<p>( ' + response.data.profession + ' )</p>' +
          '<hr>' +
          '<div class="row">' +
          '<div class="col-6">' +
          '<p>' + response.data.email + '</p>' +
          '<p>Phone: ' + response.data.phone + '</p>' +
          '<span>Aadhaar: ' + response.data.aadhar + '</span>' +
          '</div>' +
          '<div class="col-6">' +
          '<p>City: ' + response.data.city_name + '</p>' +
          '<p>State: ' + response.data.state_name + '</p>' +
          '<p>Gender: ' + response.data.gender + '</p>' +
          '</div>' +
          '</div>' +
          '<hr>' +
          '<div class="row">' +
          '<div class="col-6">' +
          '<p>Charges: ' + '&#x20B9; ' + response.data.amount + ' / ' +
          response.data.charges + '</p>' +
          '<p>Rating: ' + response.data.average_rating +
          ' (<span style="color:orange;">&#9734;</span>)' + ' out of ' +
          response.data.total_rating_count + '</p>' +
          '<span>DOB: ' + response.data.dob + '</span>' +
          '</div>' +
          '<div class="col-6">' +
          '<p>Experience: ' + response.data.experience + '</p>' +
          // '<p>Postal Code: ' + postalCode + '</p>' +
          '<p>Lat/Long: ' + response.data.latitude + ' / ' + response.data
          .longitude + '</p>' +
          '</div>' +
          '</div>' +
          '<hr>' +
          '<h5 class="text-center">Address </h5>' +
          '<p>' + response.data.address + '</p>' +
          '<hr>' +
          '<h5 class="text-center">About </h5>' +
          '<p>' + response.data.about + '</p>' +
          '</div>'

        );
      }
    });
  });

  $('#sample_form').on('submit', function(event) {
    console.log("form submitted");
    event.preventDefault();
    if ($('#action').val() == 'Add') {
      $customer_manager_id = $("#userId").val();
      console.log('$customer_manager_id: ' + $customer_manager_id);
      console.log("$('#phone1').val(): " + $('#phone1').val());
      console.log("$('input[name=_token]').val(): " + $('input[name=_token]').val());

      $.ajax({
        type: "GET",
        data: {},
        url: "{{ url('api/customer/checkProfessionalByPhone') }}" + "/" + $('#phone1').val() + '/' +
          $customer_manager_id,
        contentType: false,
        cache: false,
        processData: false,
        dataType: "json",
        headers: {
          "Authorization": "Bearer " + localStorage.getItem('a_u_a_b_t')
        },
        success: function(data) {
          console.log('api call success');
          console.log('data.success: ' + data.success);
          if (data.success == true) {
            $("#successRegsiter").text(data.message);
            $("#successRegsiter").show();
            setTimeout(function() {
              $("#successRegsiter").hide();
            }, 3000); // <-- time in milliseconds
          } else {
            $("#successRegsiter").text(
              "Something went wrong. Please try again.");
            $("#successRegsiter").show();
          }

        },
        error: function(data) {
          console.log('Error:', data);
        }
      })
    }
  });

});
</script>
@endsection