@extends('admin')

@push('header')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">Alat</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Alat</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
@endpush

@section('content')
@php $key_='Alat Unit'; @endphp
<!-- Small boxes (Stat box) -->
<div class="row">
    <div class="col-lg-12 col-12 col-md-12">
        <div class="card">
            <div class="card-header">
                <!-- <h3 class="card-title">DataTable with default features</h3> -->
                <div class="row">
                    <div class="col-md">
                        <div class="form-group">
                            <select name="laboratory" id="laboratory" class="form-control">
                                <option value="">Semua</option>
                                                            </select>
                        </div>
                    </div>
                    <div class="col-md">
                        @if (can($key_, 'add'))
                        <button class="btn-sm btn btn-primary" onclick="add();" style="float:right;">TAMBAH</button>
                        @endif
                    </div>
                </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="table" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Alat</th>
                            <th>Laboratorium</th>
                            <th>Jumlah</th>
                            <th>Alat tersedia</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
    </div>
</div>

@if (can($key_, 'edit') || can($key_, 'add'))
<div id="modal_form" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mt-0" id="myModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>

            <div class="modal-body">
                <form id="form">
                    <input type="hidden" name="id" id="id">
                    <div class="form-group">
                        <label>Laboratorium</label>
                        <select name="laboratory_id" id="laboratory_id" class="form-control">
                            <option value="" selected disabled>-Pilih-</option>
                                                    </select>
                        <div class="text-danger text-error" id="laboratory_id_error">*error</div>
                    </div>
                    <div class="form-group">
                        <label>Alat</label>
                        <select name="tool_id" id="tool_id" class="form-control">
                            <option value="" selected disabled>-Pilih-</option>
                                                    </select>
                        <div class="text-danger text-error" id="tool_id_error">*error</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Tutup</button>
                <button type="button" id="btnSave" onclick="save();" class="btn btn-primary waves-effect waves-light">Save
                    changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@endif

@endsection

@push('after-script')

<script type="text/javascript">
    $(document).ready(function() {
        $("#laboratory").change(function() {
            generate_table();
        });

        generate_table();
    });

    function generate_table() {
        table = $('#table').DataTable({
            "responsive": true,
            "autoWidth": false,
            "processing": true, //Feature control the processing indicator.
            "serverSide": true, //Feature control DataTables' server-side processing mode.
            "order": [], //Initial no order.

            // Load data for the table's content from an Ajax source
            "ajax": {
                "type": "POST",
                "url": "{{ url('/admin/laboratory-tool/show') }}",
                "data": {
                    "laboratory": $('#laboratory').val(),
                    "_token": "{{ csrf_token() }}"
                },
                "error": function(jqXHR, textStatus, errorThrown) {
                    // alert('Error adding / update data');
                    console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);
                    // $('#btnSave').attr('disabled', false); //set button enable 
                },
            },
            "bDestroy": true,
            // "buttons": [
            //     'copy', 'csv', 'excel', 'pdf', 'print'
            // ],
            // // dom: 'Bfrtip',
            // dom: 'lBfrtip',
            //Set column definition initialisation properties.
            columns: [{
                    data: 'no',
                    name: 'no'
                },
                {
                    data: 'tool',
                    name: 'tool'
                },
                {
                    data: 'laboratory',
                    name: 'laboratory'
                },
                {
                    data: 'total_column',
                    name: 'total_column'
                },
                {
                    data: 'readyToolBadge',
                    name: 'readyToolBadge'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false
                }
            ],
            order: [
                [2, 'asc']
            ]
        });
    }