@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 Alatt</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
@endpush

@section('content')
@php $key_='Stok Masuk'; @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">
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <form id="form">
                    <input type="hidden" name="id" id="id">
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Laboratorium</label>
                                <select name="laboratory" id="laboratory" class="form-control">
                                    <!-- <option value="">Semua</option> -->
                                    <option value="" disabled selected>==Pilih==</option>
                                                                        <div class="text-danger text-error" id="laboratory_error">*error</div>
                                </select>
                            </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>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col">
                            <div class="table-responsive">
                                <table class="table" id="item_table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Nama Alat</th>
                                            <th>Aksi</th>
                                        </tr>
                                        <tr>
                                            <td>#</td>
                                            <td>
                                                <select name="laboratory_tool_detail_id" id="laboratory_tool_detail_id" class="form-control select2bs4">
                                                </select>
                                            </td>
                                            <td>
                                                <button type="button" id="add_item_button" onclick="add_item();" class="btn btn-rounded btn-outline-primary">
                                                    <b><i class="fa fa-plus"></i> TAMBAH ITEM</b>
                                                </button>
                                            </td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <!-- /.card-body -->
            <div class="card-footer">
                <a href="{{ url('admin/laboratory-tool-borrowing') }}" style="float:left;" class="btn btn-secondary waves-effect">Kembali</a>
                <button type="button" id="btnSave" onclick="save();" style="float: right;;" class="btn btn-primary waves-effect waves-light">Simpan</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('after-script')

<script type="text/javascript">
    var laboratory_tool_detail_id_array = [];
    $(document).ready(function() {
        $('.text-error').empty(); // clear error string
        // $("#unit_id").val($("#unit").val());
        // $("#semester_id").val($("#semester").val());
        // generate_item();
        $("#laboratory_tool_detail_id").select2({
            // initSelection: function(element, callback) {},
            placeholder: "",
            allowClear: true,
            theme: 'bootstrap4',
            ajax: {
                url: "{{ url('/admin/laboratory-tool-borrowing/get-laboratory-tool') }}",
                type: "post",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        _token: "{{ csrf_token() }}",
                        laboratory: $("#laboratory").val(),
                        laboratory_tool_detail_id: laboratory_tool_detail_id_array,
                        search: params.term // search term
                    };
                },
                processResults: function(response) {
                    return {
                        results: response
                    };
                },
                cache: true,
                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 
                }
            }

        });

        $("#laboratory").change(function() {
            // $("#item_table:not(:first)").remove();
            $("#item_table").find("tr:gt(1)").remove();
            $("#laboratory_tool_detail_id").val('').trigger('change');
            $("#laboratory_tool_detail_id").empty().trigger('change');
            laboratory_tool_detail_id_array = [];
        });
    });

    function add_item() {
        var laboratory_tool_detail_id = $("#laboratory_tool_detail_id").val();
        var laboratory_tool_detail_text = $("#laboratory_tool_detail_id :selected").text();
        console.log(laboratory_tool_detail_id);
        console.log(laboratory_tool_detail_text);
        if (laboratory_tool_detail_id_array.includes(laboratory_tool_detail_id)) {
            alert("Alat Sudah Ditambahkan");
        } else {
            var item_text = $("#item_id option:selected").text();
            var content = '<tr>' +
                '<td>#</td>' +
                '<td><input type="hidden" name="laboratory_tool_detail_id[]" value="' + laboratory_tool_detail_id + '"><span style="margin-left:1rem;">' + laboratory_tool_detail_text + '</span></td>' +
                '<td><button type="button" class="btn btn-rounded btn-danger" onClick="$(this).parent().parent().remove();remove_item(' + laboratory_tool_detail_id + ');"><i class="fa fa-trash"></i></button></td>' +
                '</tr>';
            laboratory_tool_detail_id_array.push(laboratory_tool_detail_id);
            $('#item_table tr:last').after(content);
        }
        // $('#laboratory_tool_detail_id').prop('selectedIndex', 0);
        $("#laboratory_tool_detail_id").val('').trigger('change');
        $("#laboratory_tool_detail_id").empty().trigger('change');
        // $("#laboratory_tool_detail_id").select2("val", "");
    }

    function remove_item(laboratory_tool_detail_id) {
        laboratory_tool_detail_id = laboratory_tool_detail_id.toString();
        console.log(laboratory_tool_detail_id_array);
        var index = laboratory_tool_detail_id_array.indexOf(laboratory_tool_detail_id);
        if (index !== -1) {
            laboratory_tool_detail_id_array.splice(index, 1);
        }
        console.log(laboratory_tool_detail_id_array);
    }