@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    .row{
        align-items: center;
    }
  .scrollable-menu {
    height: auto;
    max-height: 800px;
    overflow-x: hidden;
  }
 .dataTables_scrollBody {
          position: relative;
          overflow: auto;
          width: 100%;
          max-height: 496px;
          height: 413px !important;
  }

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

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

  ::-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(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: 250px;
  }

  #datatable tbody ul {
    display: flex;
  }

  @media only screen and (max-width: 420px) {
    .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;
    }
  }

  @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;
    }
  }

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

    div#datatable_filter {
      text-align: right;
    }

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

    div#datatable_length {
      text-align: right;
    }

    div#datatable_length {
      text-align: left;
    }
  }

  .sms_content tr td {
    padding: 9px 10px;
  }

  .sms_content .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;

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

  span.badge.badge-pill.badge-soft-success.font-size-12 {
    width: 63px;
  }
</style>

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

    <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>
    <!-- start row -->
    <div class="row">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="d-flex justify-content-between mb-3 complain-mn">
            
            </div>
          </div>
          <div class="table-responsive">
           <form action="" class="needs-validation" id="show" novalidate>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="TabId" class="form-label">Select Tab</label>
                                <select class="form-control select2-ajax" name="TabId" id="TabId"
                                    required></select>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="mb-3 ">
                                <label for="UsecaseId" class="form-label">Select UseCase</label>
                                <select class="form-control select2-ajax" name="UsecaseId" id="UsecaseId" required></select>
                            </div>
                        </div>
                    </div>
                </form>

            <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element sms_content">
              <thead class="table-light">
                <tr>
                  <th>Id</th>
                  <th>Tab Name</th>
                  <th>UseCase Name</th>
                  <th>Email Content</th>
                  <th>Defualt SMS</th>
                  <th>Created at</th>
                  <th>Updated at</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
            @csrf
          </div>

        </div>
      </div>
    </div>
  </div>

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


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


<script type="text/javascript">
  var ajaxURLGetEmailSetting = '{{route("email.setting.ajax")}}';
  var changeDefaultEmail = '{{route("email.changes.deafult")}}';
  var ajaxSearchTab = '{{route("search.tab")}}';
  var ajaxSearchUseCase = '{{ route('usecase.search') }}';

  function reloadTable() {
    $('#datatable').DataTable().ajax.reload(null, false);
  }
  $(document).ready(function() {
        var newOption = new Option("Client Management", '2', false, false);
        $('#TabId').append(newOption).trigger('change');
        var newOption = new Option("New Client  Well Come message", '8', false, false);
        $('#UsecaseId').append(newOption).trigger('change');
        
   });

  var csrfToken = $("[name=_token").val();
  var table = $('#datatable').DataTable({
    "aoColumnDefs": [{"bSortable": false,"aTargets": []}],
    "order": [[0, 'desc']],
    "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>'},
    "processing": true,
    "serverSide": true,
    "ajax": {
      "url": ajaxURLGetEmailSetting,
      "type": "POST",
      "data": {
        "_token": csrfToken,
        "TabId": function() {
                        return $("#TabId").val();
                    },
        "UsecaseId": function() {
                        return $("#UsecaseId").val();
                    },
      }
    },
    "aoColumns": [
     
      { "mData": "id"  },
      { "mData": "tab_name" },
      { "mData": "usecase_name" },
      { "mData": "email_content" },
      { "mData": "default","bSortable": false, },
      { "mData": "created_at" },
      { "mData": "updated_at" },
    ]
  });

  function handleRadioClick(e) {
        var id=e;
        $.ajax({
            type: 'GET',
            url: changeDefaultEmail + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable, #datatable1').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

      $("#TabId").change(function() {
            $('#datatable').DataTable().ajax.reload(null, false);
        });
      $("#UsecaseId").change(function() {
            $('#datatable').DataTable().ajax.reload(null, false);
        });

      $("#TabId").select2({
            ajax: {
                url: ajaxSearchTab,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        // _token: CSRF_TOKEN,
                        // search: params.term // search term
                        q: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    return {
                        // results: response,
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for a Tab',
            dropdownParent: $("#show")
        });

            // FOR  Select District
        $("#UsecaseId").select2({
            ajax: {
                url: ajaxSearchUseCase,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        // _token: CSRF_TOKEN,
                        // search: params.term // search term
                        q: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    return {
                        // results: response,
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for a UseCase',
            dropdownParent: $("#show")
        });

           $(document).ready(function() {

            $('#TabId').change(function() {
                $('#UsecaseId').prop('selectedIndex', -1);

                var usecase_id = $('#TabId').val();

                if (usecase_id) {
                    $("#UsecaseId").select2({
                        ajax: {
                            url: ajaxSearchUseCase + "?usecase_id=" + usecase_id,
                            dataType: 'json',
                            method: 'GET',
                            delay: 0,
                            data: function(params) {
                                return {
                                    // _token: CSRF_TOKEN,
                                    // search: params.term // search term
                                    q: params.term, // search term
                                    page: params.page
                                };
                            },
                            processResults: function(data, params) {
                                params.page = params.page || 1;
                                return {
                                    // results: response,
                                    results: data.results,
                                    pagination: {
                                        more: (params.page * 30) < data.total_count
                                    }
                                };
                            },
                            cache: false
                        },
                        placeholder: 'Search for a UseCases',
                        dropdownParent: $("#show")
                    });
                }
            });
        });



 

</script>

@endsection