@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">Peminjaman Alat</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item">Home</a></li>
                    <li class="breadcrumb-item">Alat</li>
                    <li class="breadcrumb-item active">Peminjaman Alat</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
@endpush

@section('content')
@php $key_='Peminjaman Alat'; @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-3">
                        <div class="form-group">
                            <select name="laboratory_id" id="laboratory_id" 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> -->
                        <a href="{{ url('admin/laboratory-tool-borrowing/add') }}" class="btn-sm btn btn-primary" style="float:right;">TAMBAH</a>
                        @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>Laboratorium</th>
                            <th>Jumlah Alat</th>
                            <th>Tanggal Peminjaman</th>
                            <th>Catatan</th>
                            <th>Status Kembali</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
    </div>
</div>

<div id="modal_laboratory_tool_borrowing_detail" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="mt-0" id="myModalLabel">Detail Peminjaman Alat</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col">
                        <div class="table-responsive">
                            <table class="table" id="laboratory_tool_borrowing_detail_table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Nama Alat</th>
                                        <th>Kode Alat</th>
                                        <th>Tanggal Dikembalikan</th>
                                        @if (can($key_, 'edit'))
                                        <th>Aksi</th>
                                        @endif
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Tutup</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@endsection

@push('after-script')

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

        generate_table();
    });

    function generate_table() {
        console.log($('#laboratory_id').val());
        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-borrowing/show') }}",
                "data": {
                    // "unit": $('#unit').val(),
                    // "semester": $('#semester').val(),
                    'laboratory_id': $('#laboratory_id').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: 'laboratory',
                    name: 'laboratory'
                },
                {
                    data: 'total_tool',
                    name: 'total_tool'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'note',
                    name: 'note'
                },
                {
                    data: 'receivedStatusBadge',
                    name: 'receivedStatusBadge'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false
                }
            ],
            order: [
                [0, 'asc']
            ]
        });
    }

    function generate_table_detail(laboratory_tool_borrowing_id) {
        $('#modal_laboratory_tool_borrowing_detail').modal('show');
        table2 = $('#laboratory_tool_borrowing_detail_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-borrowing/detail') }}",
                "data": {
                    "laboratory_tool_borrowing_id": laboratory_tool_borrowing_id,
                    "_token": "{{ csrf_token() }}"
                },
                // "success": function(data) {
                // },
                "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,
            "paging": false,
            // "buttons": [
            //     'copy', 'csv', 'excel', 'pdf', 'print'
            // ],
            // // dom: 'Bfrtip',
            // dom: 'lBfrtip',
            //Set column definition initialisation properties.
            columns: [{
                    data: 'no',
                    name: 'no'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'code',
                    name: 'code'
                },
                {
                    data: 'received_at',
                    name: 'received_at'
                },