@extends('reachassuree_admin/layouts.main')
@section('title', $data['title'])
@section('content')
<style>
    .row{
        align-items: center;
    }
  .dataTables_scrollBody {
          position: relative;
          overflow: auto;
          width: 100%;
          max-height: 496px;
          height: 413px !important;
  }

  .scrollable-menu {
    height: auto;
    max-height: 800px;
    overflow-x: hidden;
  }

  .dropdown-checklist {
    padding: 0px 12px;
    line-height: 0px;
  }

  .dropdown-checklist input {
    margin-left: 3px;
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  ::-webkit-scrollbar {
    width: 16px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
  }

  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .pos-middle {
    vertical-align: middle;
  }

  #datatable tbody tr td:nth-child(7) {
    white-space: normal;
    word-wrap: break-word;
    max-width: 250px;
  }

  #datatable tbody tr td:nth-child(4) {
    white-space: normal;
    word-wrap: break-word;
    max-width: 250px;
  }

  #datatable tbody tr td:nth-child(5) {
    white-space: normal;
    word-wrap: break-word;
    max-width: 100px;
  }



  #datatable tbody ul {
    display: flex;
  }

  .dropdown-checklist {
    padding: 0px 12px;
    line-height: 0px;
  }

  .dropdown-checklist input {
    margin-left: 3px;
  }

  @media only screen and (max-width: 575px) {
    .page-title-right {
      text-align: center;
    }

    div#datatable_length {
      text-align: right;
    }

    div#datatable_filter {
      text-align: right;
    }

    .mb-3.d-flex {
      width: 200px;
      margin: 0 0 0 auto;
    }
  }

  .contactus .btn-primary {
    color: #2762e4 !important;
    background-color: #bcd4ff !important;
    border-color: #bcd4ff !important;
    padding-top: 3px;
    padding-bottom: 3px;
    font-weight: 500;
    font-size: 10px;

  }

  .nav-fill .nav-item .nav-link,
  .nav-justified .nav-item .nav-link {
    width: 100% !important;
  }

  span.badge.bg-warning {
    width: 63px;
  }

  .nav-pills .nav-link.active,
  .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #2762e4;
  }

  .nav-pills .nav-link {
    background: 0 0;
    border: 0;
    background-color: #f1f5fe;
    border-radius: 0.25rem;
  }

  .nav-item {
    margin-right: 10px;
    /* Adjust the value to control the spacing */
  }

  @media only screen and (max-width: 680px) {
    .page-title-right {
      text-align: center;
    }

    div#datatable_length {
      text-align: right;
    }

    div#datatable_filter {
      text-align: right;
    }

    .mb-3.d-flex {
      width: 200px;
      margin: 0 0 0 auto;
    }

    .contactus tr td {
      padding: 5px 10px;
    }


  }
</style>

<div class="page-content client-tr">
  <div class="container-fluid">

    <!-- start page title -->
    <div class="row">
      <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
          <h4 class="mb-sm-0 font-size-18">
            <a href="javascript:void(0);" onclick="history.back();" class="btn btn-primary waves-effect waves-light btn-sm"><i class="mdi mdi-arrow-left ms-1 font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
          </h4>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-8 m-2">
        <div class="mb-3">
          <div class="form-check">
            <ul class="nav nav-pills nav-justified" role="tablist">
              <li class="nav-item waves-effect waves-light">
                <a class="nav-link active" data-bs-toggle="tab" id="contact_client" href="#contact_client_setting" role="tab" aria-selected="false"><span class="d-none d-sm-block">Client Web Contacts</span></a>
              </li>
              <li class="nav-item waves-effect waves-light">
                <a class="nav-link" data-bs-toggle="tab" id="contact_general" href="#contact_general_setting" role="tab" aria-selected="true"><span class="d-none d-sm-block">General Web Contacts</span></a>
              </li>
              <li class="nav-item waves-effect waves-light">
                <a class="nav-link" data-bs-toggle="tab" id="sms_contact" href="#sms_contact_setting" role="tab" aria-selected="true"><span class="d-none d-sm-block">SMS Contacts</span></a>
              </li>
              <li class="nav-item waves-effect waves-light">
                <a class="nav-link" data-bs-toggle="tab" id="e-mail_contact" href="#e-mail_contact_setting" role="tab" aria-selected="true"><span class="d-none d-sm-block">E-mail Contacts</span></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- end page title -->

    <div class="card p-2">
      <div class="card-body">

        <div class="tab-content">
          <!-- contact client setting -->
          <div class="tab-pane active" id="contact_client_setting" role="tabpanel">
            <div class="row">
              <div class="d-flex justify-content-between mb-3 complain-mn">
                <div>
                  <label for="contactus_status" class="form-label" style="margin:0px 15px 0 0; align-self: center;">Status
                    <select class="form-control" name="contactus_status" id="contactus_status">
                      <option value="-1">All</option>
                      <option value="1">Pending</option>
                      <option value="0">Requested</option>
                    </select>
                </div>

              </div>

            </div>
            <div class="table-responsive">
              <table id="datatable" class="table align-middle table-nowrap table-hover table-striped  nowrap w-100 contactus">
                <thead class="table-light">
                  <tr>
                    <th>Action</th>
                    <th>Status</th>
                    <th>Sr.No</th>
                    
                    <th> Name </th>
                    <th>Email </th>
                    <th>Mobile No</th>
                    <th>Subject</th>
                    <th>Your Message</th>
                    <th>Created At</th>
                    <th>Update At</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
              @csrf
            </div>
          </div>

          <!-- contact general setting -->
          <div class="tab-pane fade" id="contact_general_setting" role="tabpanel">
            <div class="row">
              <div class="d-flex justify-content-between mb-3 complain-mn">
                <div>
                  <label for="contactus_status1" class="form-label" style="margin:0px 15px 0 0; align-self: center;">Status
                    <select class="form-control" name="contactus_status1" id="contactus_status1">
                      <option value="-1">All</option>
                      <option value="1">Pending</option>
                      <option value="0">Requested</option>
                    </select>
                </div>

              </div>

            </div>
            <div class="table-responsive">
              <table id="datatable1" class="table align-middle table-nowrap table-hover table-striped  nowrap w-100 contactus">
                <thead class="table-light">
                  <tr>
                    <th>Action</th>
                    <th>Status</th>
                    <th>Sr.No</th>
                    <th> Name </th>
                    <th>Email </th>
                    <th>Mobile No</th>
                    <th>Subject</th>
                    <th>Your Message</th>
                    <th>Created At</th>
                    <th>Update At</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
              @csrf
            </div>
          </div>
          <!-- SMS contact-->
          <div class="tab-pane fade" id="sms_contact_setting" role="tabpanel">
            <div class="row" id="card">
              <div class="card">
                <div class="card-body">
                  <div class="row">
                    <div class="text-center">
                      <div class="row justify-content-center mt-1">
                        <div class="col-sm-3">
                          <div class="maintenance-img">
                            <img src="{{ asset('ra-assets/images/coming-soon.svg') }}" alt="" class="img-fluid mx-auto d-block">
                          </div>
                        </div>
                      </div>

                      <div class="row justify-content-center">
                        <div class="col-md-8">
                          <div class="card">
                            <h4>Coming Soon...!</h4>
                            <hr>
                            <div class="card-body">
                              <ul>
                                <li class="event-list">
                                  <p>SMS Data will be get at a SMS Contacts.</p>
                                </li>
                                <li class="event-list">
                                  <!-- <p> We can Export / DownLoad that data in Excl / PDF File</p> -->
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Email contact-->
          <div class="tab-pane fade" id="e-mail_contact_setting" role="tabpanel">
            <div class="row" id="card">
              <div class="card">
                <div class="card-body">
                  <div class="row">
                    <div class="text-center">
                      <div class="row justify-content-center mt-1">
                        <div class="col-sm-3">
                          <div class="maintenance-img">
                            <img src="{{ asset('ra-assets/images/coming-soon.svg') }}" alt="" class="img-fluid mx-auto d-block">
                          </div>
                        </div>
                      </div>

                      <div class="row justify-content-center">
                        <div class="col-md-8">
                          <div class="card">
                            <h4>Coming Soon...!</h4>
                            <hr>
                            <div class="card-body">
                              <ul>
                                <li class="event-list">
                                  <p>E-mail Data will be get at a E-mail Contacts.</p>
                                </li>
                                <li class="event-list">
                                  <!-- <p> We can Export / DownLoad that data in Excl / PDF File</p> -->
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- start row -->

  </div>

  <!-- end row -->
  <!-- Modal -->
  <div class="modal fade" id="composemodal" tabindex="-1" role="dialog" aria-labelledby="composemodalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="composemodalTitle">Contact Us</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="closef"></button>
        </div>

        <form method="post" id="formSendEmail" action="{{route('save.mail')}}" novalidate enctype="multipart/form-data">
          @csrf
          <input type="hidden" id="contactus_id" name="contactus_id" class="form-control" value="">
          <div class="modal-body">
            <div>
              <div class="mb-3">
                <label for="message-text" class="col-form-label">Message:</label>
                <textarea class="form-control" id="message" name="message" require></textarea>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="closefill">Close</button>
            <button type="button" class="btn btn-primary" id="btnsendMail">Send <i class="fab fa-telegram-plane ms-1"></i></button>
            <div id="msgSubmit" class="h3 text-center hidden"></div>
            <div class="clearfix"></div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- end modal -->

</div>
<!-- container-fluid -->
</div>
<!-- End Page-content -->


@endsection('content')
@section('custom-scripts')

<script src="{{ asset('ra-assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/form-validation.init.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/jquery.form.js') }}"></script>
<script type="text/javascript">
  var ajaxURLGetClientContactus = '{{route("contactus.client.ajax")}}';
  var ajaxURLGetGeneralContactus = '{{route("contactus.general.ajax")}}';
  var deleteContactUS = "{{route('delete.contactus')}}";
  var ajaxRequestSendMail = "{{route('request.sendmail')}}";

  function resetUserForm() {
    $("#formSendEmail").trigger("reset");
  }
  $("#closefill").click(function() {
    $("#formSendEmail").trigger("reset");
  });
  $("#closef").click(function() {
    $("#formSendEmail").trigger("reset");
  });

  function reloadTable() {
    $("#datatable").DataTable().ajax.reload(null, false);
    $("#datatable1").DataTable().ajax.reload(null, false);
  }


  $("#btnsendMail").click(function() {
    $("#btnsendMail").prop("disabled", true);
    $("#btnsendMail").html(
      '<i class="ri-arrow-right-s-line"></i> Processing...'
    );
    $.ajax({
      type: 'POST',
      data: $("#formSendEmail").serialize(),
      url: ajaxRequestSendMail,
      success: function(resultData) {

        if (resultData['status'] == 1) {
          $("#btnsendMail").prop("disabled", false);
          $("#btnsendMail").html(
            '<i class="ri-arrow-right-s-line"></i>   Send'
          );
          toastr['success'](resultData['msg']);
          $("#composemodal").modal('hide');
          $("#formSendEmail").trigger("reset");
          $("#datatable").DataTable().ajax.reload(null, false);
          $("#datatable1").DataTable().ajax.reload(null, false);

        } else {
          toastr['error'](resultData['msg']);
          $("#btnsendMail").prop("disabled", false);
          $("#btnsendMail").html(
            '<i class="ri-arrow-right-s-line"></i> Send'
          );
        }
      }
    });

  });

  var csrfToken = $("[name=_token]").val();


  var table = $('#datatable').DataTable({
    "aoColumnDefs": [{"bSortable": false,"aTargets": []}],
    "order": [[0, 'desc']],
    "processing": true,
    "serverSide": true,
    "scrollX": true,
    "scrollY": function() { return $(window).height() - 320;},
    "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
    "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
    "ajax": {
      "url": ajaxURLGetClientContactus,
      "type": "POST",
      "data": {
        "_token": csrfToken,
        "contactus_status": function() { return $("#contactus_status").val();},
      }
    },
    "aoColumns": [
      {  "mData": "action", "bSortable": false, },
      {  "mData": "status", "bSortable": false },
      {  "mData": "id" },
      {  "mData": "name" },
      {  "mData": "email" },
      {  "mData": "phoneno" },
      {  "mData": "subject" },
      {  "mData": "yourmessage" , 
         "render": function(data, type, full, meta) {
          if (type === 'display' && data != null && data.length > 30) {
            return '<span title="' + data + '">' + data.substr(0, 30) + '...</span>';
          } else {
            return data;
          }
        } 
      },
      {  "mData": "created_at" },
      {  "mData": "updated_at" },
    ]
  });
  //- show data according to Contact status
  $("#contactus_status").select2();
  $("#contactus_status").change(function() {
    $('#datatable').DataTable().ajax.reload(null, false);

  });
  $("#contactus_status1").select2();
  $("#contactus_status1").change(function() {
    $("#datatable1").DataTable().ajax.reload(null, false);
  });


  //- soft delete record
  function contactUsDelete(id) {
    swal.fire({
      title: "Are you sure want to delete this?",
      text: "You won't be able to revert this!",
      showCancelButton: true,
      confirmButtonColor: "#526BDF",
      cancelButtonColor: "#EC6767",
      confirmButtonText: "Yes, delete it!",
      cancelButtonText: "No, cancel it!",
    }).then((result) => {
      if (result.isConfirmed) {
        remove(id);
      }
    });
  }

  function remove(id) {
    $.ajax({
      type: 'GET',
      url: deleteContactUS + "?id=" + id,
      success: function(resultData) {
        if (resultData['status'] == 1) {
          toastr["success"](resultData['msg']);
          $('#datatable').DataTable().ajax.reload(null, false);
          $("#datatable1").DataTable().ajax.reload(null, false);
        }
      }
    });
  }
  //- soft delete record
  function request(id) {

    $("#contactus_id").val(id);
    $("#composemodal").modal("show");
  }
  $(document).ready(function() {
    function updateURLWithActiveTabId() {
      const activeTab = $('.nav-link.active');
      if (activeTab.length > 0) {
        const tabId = activeTab.attr('id');
        const currentUrl = window.location.href;
        const url = new URL(currentUrl);
        url.searchParams.set('type', tabId);
        history.replaceState(null, null, url.toString());
      }
    }

    updateURLWithActiveTabId();

    $('.nav-link').on('click', function(event) {
      $('#contactus_status').val($('#contactus_status option:first').val()).trigger('change');
      $('#contactus_status1').val($('#contactus_status option:first').val()).trigger('change');

      event.preventDefault();
      const href = $(this).attr('href');
      $('.tab-content .tab-pane').removeClass('active');
      $(href).addClass('active');
      $('.nav-link').removeClass('active');
      $(this).addClass('active');
      updateURLWithActiveTabId();
    });
  });

  var table1 = $('#datatable1').DataTable({
    "aoColumnDefs": [{"bSortable": false,"aTargets": []}],
    "order": [[0, 'desc']],
    "processing": true,
    "serverSide": true,
    "scrollX": true,
    "scrollY": function() {return $(window).height() - 500;},
    "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
    "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
    "ajax": {
      "url": ajaxURLGetGeneralContactus,
      "type": "POST",
      "data": {
        "_token": csrfToken,
        "contactus_status": function() {return $("#contactus_status1").val();},
      }
    },
    "aoColumns": [
      { "mData": "action", "bSortable": false, },
      { "mData": "status",  "bSortable": false },
      { "mData": "id" },
      { "mData": "name"  },
      { "mData": "email" },
      { "mData": "phoneno" },
      { "mData": "subject" },
      { "mData": "yourmessage",
        "render": function(data, type, full, meta) {
          if (type === 'display' && data != null && data.length > 30) {
            return '<span title="' + data + '">' + data.substr(0, 30) + '...</span>';
          } else {
            return data;
          }
        }
      },
      { "mData": "created_at" },
      { "mData": "updated_at" },
    ]
  });
</script>

@endsection