@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">{{ $laboratory_tool->tool->name }}</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')
<!-- Small boxes (Stat box) -->
@php $key_='Alat Unit'; @endphp

<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="unit" id="unit" class="form-control">
                                <option value="0">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>Kode</th>
                            <th>Tahun</th>
                            <th>Kondisi</th>
                            <th>Catatan</th>
                            @if (can($key_, 'edit') || can($key_, 'delete'))
                            <th>Action</th>
                            @endif
                        </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">
                    <input type="hidden" name="laboratory_tool_id" id="laboratory_tool_id" value="{{ $laboratory_tool->id }}">
                    <div class="form-group">
                        <label>Kode</label>
                        <input type="text" name="code" id="code" class="form-control">
                        <div class="text-danger text-error" id="code_error">*error</div>
                    </div>
                    <div class="form-group">
                        <label>Tahun</label>
                        <input type="text" name="year" id="year" class="form-control">
                        <div class="text-danger text-error" id="year_error">*error</div>
                    </div>
                    <div class="form-group">
                        <label>Kondisi</label>
                        <select name="condition" id="condition" class="form-control">
                            <option value="" selected disabled>-Pilih-</option>
                            <option value="1">Bagus</option>
                            <option value="2">Rusak Ringan</option>
                            <option value="3">Rusak Berat</option>
                        </select>
                        <div class="text-danger text-error" id="tool_type_error">*error</div>
                    </div>
                    <div class="form-group">
                        <label for="">Catatan</label>
                        <textarea name="note" id="note" cols="30" rows="10" class="form-control"></textarea>
                        <div class="text-danger text-error" id="note_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() {
        $("#unit").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-detail/show') }}",
                "data": {
                    "laboratory_tool_id": ,
                    "_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: 'code',
                    name: 'code'
                },
                {
                    data: 'year',
                    name: 'year'
                },
                {
                    data: 'condition',
                    name: 'condition'
                },
                {
                    data: 'note',
                    name: 'note'
                },