@extends('reachassuree_admin/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>
          {{-- @php
          $check_privileges = userPrivilegesReturn(72, 77);
          @endphp --}}
          {{-- @if (($check_privileges == 1) || (Session::get('admin_type') == 0)) --}}
          <div class="page-title-right">
            <a href="{{ route('email.format.form') }}" style="color:white" class="btn btn-primary waves-effect waves-light"> E-mail Format Add </a>
          </div>
          {{-- @endif --}}
        </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>Action</th> 
                  <th>Id</th>
                  <th>Tab Name</th>
                  <th>UseCase Name</th>
                  <th>Email Content</th>
                  <th>Defualt Email</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 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 ajaxURLGetEmailFormat = '{{route("email.format.ajax")}}';
 var changeDefaultEmail = '{{route("changes.deafult.email")}}';
   var ajaxSearchTab = '{{route("search.tab")}}';
  var ajaxSearchUseCase = '{{ route('usecase.name.search') }}';
  var ajaxApproveEmail = '{{route("approve.email")}}';
  var ajaxDisapproveEmail = '{{route("disapprove.email")}}';
  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": ajaxURLGetEmailFormat,
      "type": "POST",
      "data": {
        "_token": csrfToken,
        "TabId": function() {
                        return $("#TabId").val();
                    },
        "UsecaseId": function() {
                        return $("#UsecaseId").val();
                    },
      }
    },
    "aoColumns": [
      { "mData": "action" },
      { "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")
        });
     
    function approveEmail(id) {
    swal.fire({
      title: "Do you really want to Deactive email?",
      showCancelButton: true,
      confirmButtonColor: "#526BDF",
      cancelButtonColor: "#EC6767",
      confirmButtonText: "Yes, Deactive it!",
      cancelButtonText: "No, cancel it!",
    }).then((result) => {
      if (result.isConfirmed) {
        approve(id);
      }
    });
  }

     $(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")
            });
        }
    });
});

  function approve(id) {
    $.ajax({
      type: 'GET',
      url: ajaxApproveEmail + "?id=" + id,
      success: function(resultData) {
        if (resultData['status'] == 1) {
          toastr["success"](resultData['msg']);
          $('#datatable').DataTable().ajax.reload(null, false);
        }
      }
    });
  }
 
  function disapproveEmail(id) {
    swal.fire({
      title: "Do you really want to Active?",
      showCancelButton: true,
      confirmButtonColor: "#526BDF",
      cancelButtonColor: "#EC6767",
      confirmButtonText: "Yes, Active it!",
      cancelButtonText: "No, cancel it!",
    }).then((result) => {
      if (result.isConfirmed) {
        disapprove(id);
      }
    });
  }

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


</script>

@endsection