160 lines
		
	
	
		
			6.8 KiB
		
	
	
	
		
			PHP
		
	
	
		
			Executable File
		
	
	
	
	
			
		
		
	
	
			160 lines
		
	
	
		
			6.8 KiB
		
	
	
	
		
			PHP
		
	
	
		
			Executable File
		
	
	
	
	
| @extends('app.app')
 | |
| @section('title')
 | |
|     Ceklis Pengemudi
 | |
| @endsection
 | |
| 
 | |
| @section('customcss')
 | |
|     <style>
 | |
|         .landscape-photo {
 | |
|             max-height: max(21vh, 210px);
 | |
|         }
 | |
|     </style>
 | |
| @endsection
 | |
| @section('content')
 | |
|     <div class="container-fluid">
 | |
|         <div class="content">
 | |
|             <div class="row">
 | |
|                 <div class="col-sm-12">
 | |
|                     <div class="card">
 | |
|                         <div class="card-header">
 | |
|                             <div class="row d-flex align-items-center">
 | |
|                                 <div class="col">
 | |
|                                     <p class="card-title text-bold mb-0">Ceklis Pengemudi (<span id="count_clients">0</span>)</p>
 | |
|                                 </div>
 | |
|                                 <div class="col text-end">
 | |
|                                     <a href="#" id="btnMdlNewChck" class="btn btn-sm btn-danger">Tambah Ceklis Pengemudi</a>
 | |
|                                 </div>
 | |
|                             </div>
 | |
|                         </div>
 | |
|                         <div class="card-body">
 | |
|                             <div class="table-responsive">
 | |
|                                 <table class="table table-hover" id="dataTable">
 | |
|                                     <thead>
 | |
|                                         <tr>
 | |
|                                             <th class="">#</th>
 | |
|                                             <th class="">Tindakan</th>
 | |
|                                             <th class="">Nama</th>
 | |
|                                             <th class="">Deskripsi</th>
 | |
|                                             <th class="">Perusahaan</th>
 | |
|                                             <th class="">Dibuat</th>
 | |
|                                             <th class="">Pembaharuan Terakhir</th>
 | |
|                                             <th class="">Status</th>
 | |
|                                         </tr>
 | |
|                                     </thead>
 | |
|                                 </table>
 | |
|                             </div>
 | |
|                         </div>
 | |
|                     </div>
 | |
|                 </div>
 | |
|             </div>
 | |
|         </div>
 | |
|     </div>
 | |
| 
 | |
|     {{-- modal here --}}
 | |
|     <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="mdlNewChck" aria-labelledby="mdlNewChckLabel" aria-hidden="true">
 | |
|         <div class="modal-dialog modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
 | |
|             <div class="modal-content">
 | |
|                 <form action="{{ url('checklist') }}" method="POST" enctype="multipart/form-data">
 | |
|                     @csrf
 | |
|                     <div class="modal-header">
 | |
|                         <h5 class="modal-title" id="mdlNewChckLabel">Tambah Ceklis</h5>
 | |
|                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 | |
|                     </div>
 | |
|                     <div class="modal-body">
 | |
|                         <div class="mb-3">
 | |
|                             <label for="" class="col-form-label">Nama Ceklis<span class="text-danger">*</span></label>
 | |
|                             <input type="text" id="" name="name" class="form-control" required>
 | |
|                         </div>
 | |
|                         <div class="mb-3">
 | |
|                             <label for="" class="col-form-label">Deskripsi<span class="text-danger">*</span></label>
 | |
|                             <textarea type="text" id="" name="desc" class="form-control" required></textarea>
 | |
|                         </div>
 | |
|                         <div class="mb-3">
 | |
|                             <label for="" class="col-form-label">Status<span class="text-danger">*</span></label>
 | |
|                             <select name="status" id="" class="select2 form-control" style="width: 100%" required>
 | |
|                                 <option value="1">Aktif</option>
 | |
|                                 <option value="0">Non-Aktif</option>
 | |
|                             </select>
 | |
|                         </div>
 | |
|                     </div>
 | |
|                     <div class="modal-footer">
 | |
|                         <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
 | |
|                         <button id="" type="submit" class="btn btn-sm btn-danger">Save</button>
 | |
|                     </div>
 | |
|                 </form>
 | |
|             </div>
 | |
|         </div>
 | |
|     </div>
 | |
| @endsection
 | |
| @section('customjs')
 | |
|     <script>
 | |
|         $('#btnMdlNewChck').on('click', function() {
 | |
|             $('#mdlNewChck').modal('show');
 | |
|         });
 | |
|         $('select').select2({
 | |
|             dropdownParent: $('#mdlNewChck')
 | |
|         });
 | |
|         $('#dataTable').DataTable({
 | |
|             processing: false,
 | |
|             serverSide: false,
 | |
|             bLengthChange: true,
 | |
|             deferRender: false,
 | |
|             destroy: true,
 | |
|             stateSave: false,
 | |
|             ajax: {
 | |
|                 url: `{{ url('checklist/table') }}`,
 | |
|                 type: 'POST',
 | |
|                 data: {
 | |
|                     _token: $('meta[name="csrf-token"]').attr('content'),
 | |
|                 },
 | |
|             },
 | |
|             columns: [{
 | |
|                     data: 'DT_RowIndex',
 | |
|                     className: 'text-end',
 | |
|                     visible: true,
 | |
|                     orderable: true,
 | |
|                     searchable: true,
 | |
|                 },
 | |
|                 {
 | |
|                     data: "id",
 | |
|                     className: 'text-center',
 | |
|                     render: function(data, type, row, meta) {
 | |
|                         let action = `
 | |
|                             <a href="#" class="text-decoration-none me-1 btnEdtClient" data-bs-toggle="tooltip"
 | |
|                                 data-bs-placement="bottom" title="Edit">
 | |
|                                 <span class="icon ion-edit fz-16"></span>
 | |
|                             </a>
 | |
|                         `;
 | |
|                         return action;
 | |
|                     }
 | |
|                 }, {
 | |
|                     data: "name",
 | |
|                 }, {
 | |
|                     data: "desc",
 | |
|                 }, {
 | |
|                     data: "company_name",
 | |
|                 }, {
 | |
|                     data: "crt_name",
 | |
|                 }, {
 | |
|                     data: "updt",
 | |
|                     render: function(data, type, row, meta) {
 | |
|                         return moment.unix(data).format('YYYY-MM-DD HH:mm:ss');
 | |
|                     }
 | |
|                 }, {
 | |
|                     data: "status",
 | |
|                     className: 'text-center',
 | |
|                     render: function(data, type, row, meta) {
 | |
|                         if (data == 1) {
 | |
|                             return '<span class="badge rounded-pill bg-success">Active</span>';
 | |
|                         }
 | |
|                         return '<span class="badge rounded-pill bg-danger">Inactive</span>';
 | |
|                     },
 | |
|                 },
 | |
|             ],
 | |
|             order: [
 | |
|                 [1, 'asc']
 | |
|             ],
 | |
|         })
 | |
|     </script>
 | |
| @endsection
 | 
