@extends('layouts.master')

@section('title')
Profession
@endsection

@section('page')
<!-- <div class="col-0">
    <h4 class="page-title">Professionals</h4>
    <div class="d-flex align-items-center">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Professionals</li>
            </ol>
        </nav>
    </div>
</div> -->
@endsection

@section('content')
<input type="hidden" id="a_u_a_b_t" value="{!! $a_user_api_bearer_token !!}">
<script type="text/javascript">
localStorage.setItem('a_u_a_b_t', $('#a_u_a_b_t').val());
</script>
<!-- <div class="container">
    <div class="category-filter">
        <select id="categoryFilter" class="form-control">
            <option value="">All Profession</option>
            @foreach($profession_array as $data)
            <option value="{{$data}}">{{$data}}</option>
            @endforeach
        </select>
    </div>

    <div class="state-filter">
        <select id="stateFilter" class="form-control">
            <option value="">All State</option>
            <option value="Gambela">Gambela Region</option>
            <option value="Maharashtra">Maharashtra</option>
            <option value="Karnataka">Karnataka</option>
            <option value="Bihar">Bihar</option>
            <option value="Jharkhand">Jharkhand</option>
        </select>
    </div>
    <div class="city-filter">
        <select id="cityFilter" class="form-control">
            <option value="">All City</option>
            <option value="Bokaro">Bokaro</option>
            <option value="Dhanbad">Dhanbad</option>
            <option value="Umred">Umred</option>
            <option value="Baraut">Baraut</option>
            <option value="Khunti">Khunti</option>
            <option value="Mayurbhanj">Mayurbhanj</option>
            <option value="Ziro">Ziro</option>
            <option value="Chandur Bazar">Chandur Bazar</option>
            <option value="Kanpur Dehat">Kanpur Dehat</option>
            <option value="Dibang Valley">Dibang Valley</option>
        </select>
    </div>
</div> -->
<!-- <div class="container"> -->
<div class="row">
  <div class="col-xl-12 col-lg-12 col-md-12 col-12">
    <table id="professional-table" class="table table-active display responsive nowrap">
      <thead class="thead-dark">
        <tr>
          <th>Professionals</th>
          <th>Email</th>
          <th>Profession</th>
          <th>State</th>
          <th>City</th>
          <th>Action</th>
          <th>ADR</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
      <!-- <tfoot>
                    <tr>
                        <th></th>
                        <th></th>
                        <th>Profession</th>
                        <th>State</th>
                        <th>City</th>
                        <th></th>
                        <th></th>
                    </tr>
                </tfoot> -->
    </table>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <table id="profile-all-details-table" class="display table" style="width:100%">

    </table>
  </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-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-->
<script>
$(document).ready(function() {

  var dt = $('#professional-table').DataTable({

    // initComplete: function() {
    // console.log('working data table in admin');
    // this.api().columns([2, 3, 4]).every(function() {
    //     var column = this;
    //     var select = $('<select><option value=""></option></select>')
    //         // .appendTo($(column.header()).empty())
    //         .appendTo($(column.footer()).empty())
    //         .on('change', function() {
    //             var val = $.fn.dataTable.util.escapeRegex(
    //                 $(this).val()
    //             );

    //             column
    //                 .search(val ? '^' + val + '$' : '', true, false)
    //                 .draw();
    //         });

    //     column.data().unique().sort().each(function(d, j) {
    //         select.append('<option value="' + d + '">' + d + '</option>')
    //     });
    // });
    // },

    "ajax": {
      "paging": true,
      "scrollX": true,
      "lengthChange": true,
      "searching": true,
      "ordering": true,
      "processing": true,
      "serverSide": true,
      "url": "{{url('api/admin/professionals')}}",
      "dataSrc": 'data',
      "type": "GET",
      "datatype": "json",
      "crossDomain": true,
      "responsive": true,
      "beforeSend": function(xhr) {
        console.log('before send');
        xhr.setRequestHeader("Authorization", "Bearer " + localStorage.getItem(
          'a_u_a_b_t'));
      }
    },
    processing: true,
    rowReorder: {
      selector: 'td:nth-child(2)'
    },
    responsive: true,
    rowReorder: false,
    columnDefs: [{
      "title": "Name",
      "targets": 0
    }, ],

    columns: [{
        data: 'full_name'
      },
      {
        data: 'email'
      },
      {
        data: 'profession'
      },
      {
        data: 'state_name'
      },
      {
        data: 'city_name'
      },
      {
        data: null,
        render: function(data) {

          if (data.status == 1) {
            return '<button type="button"  id="' + data['id'] +
              '" class="action btn btn-primary btn-sm ">Unblock</button>' +
              '<button type="button"  id="' + data['id'] +
              '" class="profileAllDetail btn btn-primary btn-sm ml-1">Details</button>'
          } else {
            return '<button type="button"  id="' + data['id'] +
              '" class="action btn btn-warning btn-sm ">Block</button>' +
              '<button type="button"  id="' + data['id'] +
              '" class="profileAllDetail btn btn-primary btn-sm ml-1">Details</button>'
          }
        },
      },
      {
        data: null,
        render: function(data) {
          if (data.ADS == 1) {
            return '<button type="button"  id="' + data['id'] +
              '" class="delteAccount btn btn-danger btn-sm ">Delete Account</button>'
          } else {
            return null
          }
        },
      },
    ],
    deferRender: true,

    searchPanes: {
      viewTotal: true,
      layout: 'columns-3',
      columns: [2, 3, 4]
    },
    dom: 'Plfrtip'

  });

  // table.columns().every(function() {
  //     var that = this;

  //     $('input', this.footer()).on('keyup change', function() {
  //         if (that.search() !== this.value) {
  //             that
  //                 .search(this.value)
  //                 .draw();
  //         }
  //     });
  // });

  // //Take the category filter drop down and append it to the datatables_filter div. 
  // //You can use this same idea to move the filter anywhere withing the datatable that you want.
  // $("#professional-table_filter.dataTables_filter").append($("#categoryFilter"));
  // $("#professional-table_filter.dataTables_filter").append($("#stateFilter"));
  // $("#professional-table_filter.dataTables_filter").append($("#cityFilter"));

  // //Get the column index for the Category column to be used in the method below ($.fn.dataTable.ext.search.push)
  // //This tells datatables what column to filter on when a user selects a value from the dropdown.
  // //It's important that the text used here (Category) is the same for used in the header of the column to filter
  // var categoryIndex = 0;
  // var stateIndex = 3;
  // var cityIndex = 4;
  // $("#professional-table th").each(function(i) {
  //     if ($($(this)).html() == "Profession") {
  //         categoryIndex = i;
  //         return false;
  //     }
  //     if ($($(this)).html() == "State") {
  //         stateIndex = i;
  //         return false;
  //     }
  //     if ($($(this)).html() == "City") {
  //         cityIndex = i;
  //         return false;
  //     }
  // });

  // //Use the built in datatables API to filter the existing rows by the Category column
  // $.fn.dataTable.ext.search.push(
  //     function(settings, data, dataIndex) {
  //         console.log('inside $.fn.dataTable.ext.search.push of categoryFilter');
  //         console.log('dataIndex: ', dataIndex);
  //         console.log('data: ', data);
  //         console.log('settings: ', settings);
  //         var selectedItem = $('#categoryFilter').val();
  //         console.log('selectedItem: ', selectedItem);
  //         var category = data[categoryIndex];
  //         console.log('category: ', category);
  //         if (selectedItem === "" || category.includes(selectedItem)) {
  //             console.log('inside if of categoryFilter means return true');
  //             return true;
  //         }
  //         return false;
  //     }
  // );
  // $.fn.dataTable.ext.search.push(

  //     function(settings, data, dataIndex) {
  //         console.log('inside $.fn.dataTable.ext.search.push of stateFilter');
  //         console.log('dataIndex: ', dataIndex);
  //         console.log('data: ', data);
  //         console.log('settings: ', settings);
  //         var selectedItem = $('#stateFilter').val();
  //         console.log('selectedItem: ', selectedItem);
  //         var state = data[stateIndex];
  //         console.log('state: ', state);
  //         if (selectedItem === "" || state.includes(selectedItem)) {
  //             console.log('inside if of stateFilter means return true');
  //             return true;
  //         }
  //         return false;
  //     }
  // );
  // $.fn.dataTable.ext.search.push(
  //     function(settings, data, dataIndex) {
  //         console.log('inside $.fn.dataTable.ext.search.push of cityFilter');
  //         console.log('dataIndex: ', dataIndex);
  //         console.log('data: ', data);
  //         console.log('settings: ', settings);
  //         var selectedItem = $('#cityFilter').val();
  //         console.log('selectedItem: ', selectedItem);
  //         var city = data[cityIndex];
  //         console.log('city: ', city);
  //         if (selectedItem === "" || city.includes(selectedItem)) {
  //             console.log('inside if of cityFilter means return true');
  //             return true;
  //         }
  //         return false;
  //     }
  // );

  // //Set the change event for the Category Filter dropdown to redraw the datatable each time
  // //a user selects a new filter.
  // $("#categoryFilter").change(function(e) {
  //     dt.draw();
  // });
  // $("#stateFilter").change(function(e) {
  //     dt.draw();
  // });
  // $("#cityFilter").change(function(e) {
  //     dt.draw();
  // });



  $(document).on("click", ".profileAllDetail", function() {
    id = $(this).attr('id');
    // console.log(id);
    $.ajax({
      type: "get",
      url: "{{url('api/admin/getprofessionalalldetailsbyId')}}/" + id,
      headers: {
        "Authorization": "Bearer " + localStorage.getItem('a_u_a_b_t')
      },
      success: function(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>'

        );
      }
    });
  });

  $(document).on('click', '.action', function() {

    id = $(this).attr('id');
    // console.log(id);
    $.ajax({
      type: "get",
      url: "{{url('api/admin/active_deactive_professional')}}/" + id,
      headers: {
        "Authorization": "Bearer " + localStorage.getItem('a_u_a_b_t')
      },
      success: function(response) {
        $("#successMessage").show();
        $('#professional-table').DataTable().ajax.reload()
      },
    })
  });
  $(document).on('click', '.delteAccount', function() {

    if (confirm('Are You sure to delete professionals all data')) {
      id = $(this).attr('id');
      // console.log(id);
      $.ajax({
        type: "get",
        url: "{{url('api/admin/deleteProfessionalAccount')}}/" + id,
        headers: {
          "Authorization": "Bearer " + localStorage.getItem('a_u_a_b_t')
        },
        success: function(response) {
          if (response.status == 200) {
            $("#successMessage").show();
            $('#professional-table').DataTable().ajax.reload();
            alert('Professional Data Deleted Successfully');
          } else {
            alert('Unable to Delete Professional Data');
          }
        },
      })
    } else {
      alert('Declined');
    }


  });
});
</script>


@endsection


@section('scripts')
@endsection