@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">Pengajuan Bahan</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">Bahan</li>
                    <li class="breadcrumb-item active">Pengajuan Bahan</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>Unit</label>
                                <select name="unit_id" id="unit_id" class="form-control">
                                                                    </select>
                                <div class="text-danger text-error" id="unit_id_error">*error</div>
                                <div class="text-danger text-error" id="unit_item_id_error">*error</div>
                                <div class="text-danger text-error" id="total_error">*error</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Semester</label>
                                <select name="semester_id" id="semester_id" class="form-control">
                                                                    </select>
                            </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 Bahan</th>
                                            <th>Jumlah</th>
                                            <th>Aksi</th>
                                        </tr>
                                        <tr>
                                            <td>#</td>
                                            <td>
                                                <select name="item_id" id="item_id" class="form-control" style="width:100%;">
                                                </select>
                                            </td>
                                            <!-- <td><input type="number" id="total" class="form-control"></td> -->
                                            <td>
                                                <div class="input-group mb-3"><input type="number" id="total" class="form-control">
                                                    <div class="input-group-append"><span class="input-group-text" id="unit_name"></span></div>
                                                </div>
                                            </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/unit-item-stock-in') }}" 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 unit_item_id_array = [];
    $(document).ready(function() {
        $('.text-error').empty(); // clear error string

        $('#item_id').on('change', function() {
            // alert(this.value);
            // alert($("#item_id option:selected").text());
            console.log($('#item_id').val());
            if ($('#item_id').val() != null) {
                var item_text = $("#item_id option:selected").text();
                var item_text_split = item_text.split("/");
                $('#unit_name').text(item_text_split[1].replace(")", ''));
            }
        });

        // $("#unit,#semester").change(function() {
        //     $("#unit_id").val($("#unit").val());
        //     $("#semester_id").val($("#semester").val());
        //     generate_table();
        //     // generate_item();
        // });


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

        $("#item_id").select2({
            // initSelection: function(element, callback) {},
            placeholder: "",
            allowClear: true,
            theme: 'bootstrap4',
            ajax: {
                url: "{{ url('/admin/unit-item-stock-in/get-unit-item') }}",
                type: "post",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        _token: "{{ csrf_token() }}",
                        unit_id: $("#unit_id").val(),
                        unit_item_id: unit_item_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 
                }
            }

        });
        // $("#unit_id").val($("#unit").val());
        // $("#semester_id").val($("#semester").val());
        // generate_item();
        generate_table();
    });

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

    // function generate_item() {
    //     console.log("generate item");
    //     // console.log($("#unit_id").val());
    //     $.ajax({
    //         url: "{{ url('/admin/unit-item-stock-in/get-unit-item') }}",
    //         type: "GET",
    //         data: {
    //             "unit_id": $("#unit_id").val(),
    //             "_token": "{{ csrf_token() }}",
    //         },
    //         dataType: "JSON",
    //         success: function(data) {
    //             // console.log('berhasil');
    //             // console.log(data);
    //             // console.log('berhasil');
    //             $('#item_id').empty();
    //             var i = 1;
    //             $.each(data, function(key, obj) {
    //                 if (i == 1) {
    //                     var unit_name = obj.item.unit_name;
    //                     $('#unit_name').text(unit_name);
    //                 }
    //                 $('#item_id').append('<option value="' + obj.id + '">' + obj.item.name + ' (' + obj.item.volume_per_unit + ' ' + obj.item.volume_name + '/' + obj.item.unit_name + ')' + '</option>');
    //                 i++;
    //             });

    //         },
    //         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 
    //         }
    //     });
    // }

    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/unit-item-stock-in/show') }}",
                "data": {
                    "unit": $('#unit').val(),
                    "semester": $('#semester').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: 'semester',
                    name: 'semester'
                },
                {
                    data: 'unit',
                    name: 'unit'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'total_item',
                    name: 'total_item'
                },
                {
                    data: 'approvedBadge',
                    name: 'approvedBadge'
                },
                {
                    data: 'receivedBadge',
                    name: 'receivedBadge'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false
                }
            ],
            order: [
                [0, 'asc']
            ]
        });
    }

    function generate_table_detail(unit_item_stock_in_id) {
        $('#modal_unit_item_stock_in_detail').modal('show');
        table2 = $('#unit_item_stock_in_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/unit-item-stock-in-detail/show') }}",
                "data": {
                    "unit_item_stock_in_id": unit_item_stock_in_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,
            // "buttons": [
            //     'copy', 'csv', 'excel', 'pdf', 'print'
            // ],
            // // dom: 'Bfrtip',
            // dom: 'lBfrtip',
            //Set column definition initialisation properties.
            columns: [{
                    data: 'no',
                    name: 'no'
                },
                {
                    data: 'item',
                    name: 'item'
                },
                {
                    data: 'total',
                    name: 'total'
                }
            ],
            order: [
                [0, 'asc']
            ]
        });
    }

    function add_item() {
        var item_id = $("#item_id option:selected").val();
        if (unit_item_id_array.includes(item_id)) {
            alert("Item Sudah Ditambahkan");
        } else {
            var item_text = $("#item_id option:selected").text();
            var item_text_split = item_text.split("/");
            var total = $("#total").val();
            var content = '<tr>' +
                '<td>#</td>' +
                '<td><input type="hidden" name="unit_item_id[]" value="' + item_id + '"><span style="margin-left:1rem;">' + item_text + '</span></td>' +
                // '<td><input type="number" name="total[]" class="form-control" value="' + total + '"></td>' +
                '<td><div class="input-group mb-3"><input type="number" name="total[]" value="' + total + '" class="form-control"><div class="input-group-append"><span class="input-group-text">' + item_text_split[1].replace(")", '') + '</span></div></div></td>' +
                '<td><button type="button" class="btn btn-rounded btn-danger" onClick="$(this).parent().parent().remove();remove_item(' + item_id + ');"><i class="fa fa-trash"></i></button></td>' +
                '</tr>';
            unit_item_id_array.push(item_id);
            $('#item_table tr:last').after(content);
            var item_text = $("#item_id option:selected").text();
            var item_text_split = item_text.split("/");
            $('#unit_name').text(item_text_split[1].replace(")", ''));
        }
        $("#item_id").val('').trigger('change');
        $("#item_id").empty().trigger('change');
        $("#total").val(null);
    }