@extends('layouts.default', ['appTopMenu' => true])

@section('title', 'Checker Modify')


@push('scripts')
<script type="text/javascript" src="{{ asset('/assets/dcopying/toastr/toastr.min.js') }}"></script>
<link href="{{ asset('/assets/dcopying/toastr/toastr.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css') }}" rel="stylesheet" />
<script src="{{ asset('assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js') }}"></script>


<link href="{{ asset('assets/dcopying/css/custom.css')}}" rel="stylesheet" />


<link href="{{ asset('assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css')}}" rel="stylesheet" />
<script src="{{ asset('assets/plugins/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js')}}"></script>
<script src="{{ asset('assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{ asset('assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js')}}"></script>


<script type="text/javascript" src="{{ asset('/assets/dcopying/js/custom.js') }}"></script>


@endpush



@section('content')



<div class="panel">

  <div class="panel-heading card-bg-color">
    <h4 class="panel-title"><i class="fa-solid fa-list"></i> Applications</h4>

  </div>

  <div class="panel-body">
    <form method="POST" id="datatable_form" action="">

      <div class="row g-3 align-items-center mb-1">

        <div class="col-md-6">
          <div class="mb-3">
            <label for="keyword" class="form-label">Find Keyword</label>
            <input type="text" id="search" name="search_key" class="form-control" placeholder="Search..">
          </div>
        </div>
        <div class="col-md-3">
          <div class="mb-3">
            <label for="to_date" class="form-label">Received Date</label>
            <input type="text" class="form-control date" id="to_dt" placeholder="Received Date" name="to_dt" readonly="">
          </div>
        </div>

        <div class="col-auto">

          <button type="submit" class="btn btn-outline-primary rounded-0 btn-sm"><i class="fa-solid fa-magnifying-glass"></i> Search</button>
          <button type="button" class="btn btn-outline-warning reset_from rounded-0 btn-sm"><i class="fas fa-sync-alt"></i> Reset Search</button>
        </div>

      </div>





    </form>

    <table id='dt_table' class="table table-striped table-bordered align-middle">
      <thead>
        <tr>
          <th>S.No.</th>
          <th>Application No</th>
          <th>Message</th>
          <th>Recived Date</th>
          <th>Mobile</th>
          <th>status</th>
          <th>Action</th>

        </tr>
      </thead>
    </table>


  </div>
</div>


<!-- Modal -->
<div class="modal fade" id="viewApplication" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Application</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body min-h">
        <div class="modal_loader_div" style="display: none;"></div>
        <div class="modal-body-inner"></div>

      </div>

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




<!-- Modal -->
<div class="modal fade" id="updateApplication" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Update Feedback</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body min-h">
        <div class="modal_loader_div" style="display: none;"></div>
        <div class="modal-body-inner"></div>

      </div>

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

<!-- end panel -->
@endsection

@push('scripts')

<script>
  // ===============
  $(document).ready(function(){
	backDropModal('updateApplication');
});

  $(document).on('click', '.withdraw_application', function(e) {
    var recordid = $(this).data('recordId');
    getFeedback(recordid);

  });

  let getFeedback = (recordid) => {
    $.ajax({
     
      url: "{{ route('hccopying.feedback.getfeedback') }}",
     
      type: "GET",
      data: {
        "recordid": recordid
      },
      dataType: 'json',
      beforeSend: function() {
        $('#updateApplication').modal('show');
        $('#updateApplication .modal-body .modal-body-inner').html("");
        $('#updateApplication .modal-body .modal_loader_div').css("display", "block");

      },
      success: function(data) {
        $('#updateApplication .modal-body .modal-body-inner').html(data.page);
        $('#updateApplication .modal-body .modal_loader_div').fadeOut(400);
      },
      error: function(xhr) { // if error occured
        alert("Error");

      },
      complete: function() {

      }
    });
  }




  // ====


  $(".date").datepicker({
    todayHighlight: true,
    autoclose: true,
    format: 'dd-mm-yyyy'
  });

  function form_to_json(selector) {
    var ary = $(selector).serializeArray();
    console.log(ary);
    var obj = {};
    for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
    return obj;
  }


  $(document).ready(function() {
    backDropModal('viewApplication');
    initDatatable('dt_table', "{{ url('hccopying/application/feedbacklist_dttable') }}", form_to_json('#datatable_form'), [], 50, [{
      "bSortable": false,
      "aTargets": [-1],
      'sClass': 'dt-body-right'
    }], false, []);
  });

  $(document).on('click', '.reset_from', function() {
    form_reset('datatable_form');
    initDatatable('dt_table', "{{ url('hccopying/application/feedbacklist_dttable') }}", [], [], 50, [{
      "bSortable": false,
      "aTargets": [-1],
      'sClass': 'dt-body-right'
    }], false, []);
  });

  $(document).on('submit', '#datatable_form', function(e) {
    initDatatable('dt_table', "{{ url('hccopying/application/feedbacklist_dttable') }}", form_to_json('#datatable_form'), [], 50, [{
      "bSortable": false,
      "aTargets": [-1],
      'sClass': 'dt-body-right'
    }], false, []);
    e.preventDefault();
  })



  $(document).on("submit", "form#withdrawal_application", function(e) {
    e.preventDefault();
    let _this = $(this);

    $.ajax({
      url: _this.attr("action"),
      type: _this.attr("method"),
      dataType: "JSON",
      data: $(this).serialize(),
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      beforeSend: function() {

        _this.closest('form').find(':submit').button('loading');
      },

      success: function(response) {
        successMsg(response.msg);

        _this.closest('form').find(':submit').button('reset');
        $('#updateApplication').modal('hide');
        dt_tables.ajax.reload(null, false); 
      },
      error: function(xhr) {
        _this.closest('form').find(':submit').button('reset');

      },
      complete: function() {
        _this.closest('form').find(':submit').button('reset');
      }
    });
  });





  // $("#viewApplication").on("show.bs.modal", function(e) {
  //   var link = $(e.relatedTarget);
  //   let recordid = link.data('recordId');
  //   $.ajax({
  //     url: "{{ url('dcopying/application/updatewithdrawalbackapplication') }}",
  //     type: "POST",
  //     data: {
  //       "recordid": recordid
  //     },
  //     dataType: 'json',
  //     headers: {
  //       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  //     },
  //     beforeSend: function() {
  //       $('#viewApplication .modal-body .modal-body-inner').html("");
  //       $('#viewApplication .modal-body .modal_loader_div').css("display", "block");

  //     },
  //     success: function(data) {
  //       $('#viewApplication .modal-body .modal-body-inner').html(data.page);
  //       $('#viewApplication .modal-body .modal_loader_div').fadeOut(400);
  //     },
  //     error: function(xhr) { // if error occured
  //       alert("Error");

  //     },
  //     complete: function() {

  //     }
  //   });
  // });


  // $("#viewApplication").on("hidden.bs.modal", function(e) {
  //   $('#viewApplication .modal-body .modal-body-inner').html("");
  // });

  function form_reset(form_id) {
    $("#" + form_id).find('input:text, input:password, input:file, select, textarea').val('');

  }
</script>

@endpush