@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