@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> Headcopyiests list</h4>

  </div>

  <div class="panel-body">


    <table id='dt_table' class="table table-striped table-bordered align-middle">
      <thead>
        <tr>
          <th>S.No.</th>
          <th>Establishment Code</th>
          <th>Name</th>
          
          <th>Action</th>

        </tr>
      </thead>
      <tbody>
      @foreach($headcopyiests as $hcopyiest_key=> $hcopyiest_value)
    <tr>
        <td>1</td>
        <td>{{ $hcopyiest_value->establishment_code}}</td>
        <td>{{ $hcopyiest_value->name}}</td>
        <td><button class="btn btn-warning btn-xs update_record" data-record-id="{{$hcopyiest_value->id}}" type="button"> <i class="fas fa-pencil"></i></button>
</td>
    </tr>
@endforeach
      </tbody>
    </table>


  </div>
</div>


<!-- Modal -->
<div class="modal fade" id="updateHeadcopyiest" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    <form action="{{route('highcourt.headcopyiest.updateheadcopyiest')}}" method="POST" id="formheadcopyiest">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Update Headcopyiest</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">
        <input type="hidden" class="form-control" id="id" value="ssssss" name="id">
        <input type="hidden" class="form-control" id="establishment_code" value="ssss" name="establishment_code">
  <div class="mb-3">
    <label for="name" class="form-label">Headcopyiest name</label>
    <input type="text" class="form-control" id="name" name="name" value="">
  </div>
  <button class="btn btn-primary button-loader" data-loading-text="<i class='fa-solid fa-circle-notch fa-spin'></i> Loading..." type="submit">Update</button>
</form>



        </div>

      </div>

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


<!-- end panel -->
@endsection

@push('scripts')

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

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

  });

  let getFeedback = (recordid) => {

var url = "{{ route('highcourt.headcopyiest.getheadcopyiest', ":recordid") }}";
url = url.replace(':recordid', recordid);


    $.ajax({
     
      url: url,
     
      type: "GET",
      data: {
        "recordid": recordid
      },
      dataType: 'json',
      beforeSend: function() {
        $('#updateHeadcopyiest').modal('show');
        
        $('#updateHeadcopyiest .modal-body .modal_loader_div').css("display", "block");

      },
      success: function(data) {
        
        $('#establishment_code').val(data.headcopyiest.establishment_code);
         $('#name').val(data.headcopyiest.name);
         $('#id').val(data.headcopyiest.id);
        $('#updateHeadcopyiest .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'
  });




  $(document).on("submit", "form#formheadcopyiest", 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');
        window.location.reload();
        $('#updateHeadcopyiest').modal('hide');
      
      },
      error: function(xhr) {
        _this.closest('form').find(':submit').button('reset');

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


    $("#updateHeadcopyiest").on("hidden.bs.modal", function(e) {
        $("#formheadcopyiest").find('input:text, input:password, input:file, select, textarea').val('');
  });

 
</script>

@endpush