@extends('user')

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

@section('content')
<!-- Small boxes (Stat box) -->
<div class="row">
    <div class="col-lg-12 col-12 col-md-12">
        <div class="card">
            <div class="card-header">
                <!-- <button class="btn-sm btn btn-primary" onclick="add();" style="float: right;">TAMBAH</button> -->
            </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>Name</label>
                                <input type="text" name="name" id="name" class="form-control">
                                <div class="text-danger text-error" id="name_error">*error</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>NIM/NIP/NIDN</label>
                                <input type="text" name="nim" id="nim" class="form-control">
                                <div class="text-danger text-error" id="nim_error">*error</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Institusi</label>
                                <input type="text" name="institution" id="institution" class="form-control">
                                <div class="text-danger text-error" id="institution_error">*error</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="">Tipe Pengguna</label>
                        <div class="form-group clearfix">
                            <div class="icheck-primary d-inline">
                                <input type="radio" id="userType1" value="1" name="type">
                                <label for="userType1">
                                    Umum
                                </label>
                            </div>
                            <div class="icheck-primary d-inline">
                                <input type="radio" id="userType2" value="2" name="type">
                                <label for="userType2">
                                    Mahasiswa
                                </label>
                            </div>
                            <div class="text-danger text-error" id="type_error">*error</div>
                        </div>
                    </div>
                    <div id="mahasiswa" style="display: none;">
                        <div class="row">
                            <div class="col-4">
                                <div class="form-group">
                                    <label>Jurusan/Prodi</label>
                                    <input type="text" name="major" id="major" class="form-control">
                                    <div class="text-danger text-error" id="major_error">*error</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label>Dosen Pembimbing</label>
                                    <input type="text" name="lecturer" id="lecturer" class="form-control">
                                    <div class="text-danger text-error" id="lecturer_error">*error</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label>NIP</label>
                                    <input type="number" name="nip" id="nip" class="form-control">
                                    <div class="text-danger text-error" id="nip_error">*error</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Judul Penelitian</label>
                        <textarea name="title" id="title" cols="30" rows="5" class="form-control"></textarea>
                        <div class="text-danger text-error" id="title_error">*error</div>
                    </div>
                    <div class="form-group">
                        <label>Proposal</label>
                        <input type="file" name="file" id="file" class="form-control">
                        <div class="text-danger text-error" id="file_error">*error</div>
                    </div>
                    <div class="form-group">
                        <label for="">Unit Lab</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>
                    <b>
                        <hr>
                    </b>
                    <div class="row">
                        <div class="col">
                            <label for="">Daftar Bahan</label>
                        </div>
                    </div>
                    <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>Spesifikasi</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="text" id="spesification" name="spesification" class="form-control" style="width: 100%;">
                                            </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>
                    <div class="row">
                        <div class="col">
                            <label for="">Daftar Alat</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="table-responsive">
                                <table class="table" id="tool_table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Nama Alat</th>
                                            <th>Spesifikasi</th>
                                            <th>Jumlah</th>
                                            <th>Aksi</th>
                                        </tr>
                                        <tr>
                                            <td>#</td>
                                            <td>
                                                <select name="tool_id" id="tool_id" class="form-control select2bs4">
                                                </select>
                                            </td>
                                            <td>
                                                <input type="text" id="tool_spesification" name="tool_spesification" class="form-control" style="width: 100%;">
                                            </td>
                                            <td>
                                                <input type="number" id="tool_total" name="tool_total" class="form-control" style="width: 100%;">
                                            </td>
                                            <td>
                                                <button type="button" id="laboratory_tool_add_item_button" onclick="laboratory_tool_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>
                    <br>
                </form>
            </div>
            <div class="card-footer">
                <a href="{{ url('/research') }}" 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>
            <!-- /.card-body -->
        </div>
    </div>
</div>
@endsection

@push('after-script')

<script type="text/javascript">
    var laboratory_tool_id_array = [];
    var unit_item_id_array = [];

    $(document).ready(function() {
        $('.text-error').empty(); // clear error string
        $('#form')[0].reset(); // reset form on modals

        $('#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_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');

            $("#tool_table").find("tr:gt(1)").remove();
            $("#laboratory_tool_id").val('').trigger('change');
            $("#laboratory_tool_id").empty().trigger('change');

            laboratory_tool_id_array = [];
            unit_item_id_array = [];
        });

        $("#item_id").select2({
            // initSelection: function(element, callback) {},
            placeholder: "",
            allowClear: true,
            theme: 'bootstrap4',
            ajax: {
                url: "{{ url('/research/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 
                }
            }

        });

        $("#tool_id").select2({
            // initSelection: function(element, callback) {},
            placeholder: "",
            allowClear: true,
            theme: 'bootstrap4',
            ajax: {
                url: "{{ url('/research/get-laboratory-tool') }}",
                type: "post",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    console.log('yayay');
                    return {
                        _token: "{{ csrf_token() }}",
                        unit_id: $("#unit_id").val(),
                        laboratory_tool_id: laboratory_tool_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 = [];
        // });

        $('input[name="type"]').click(function() {
            var type = $(this).attr("value");
            console.log(type);
            if (type == 2) {
                $('#mahasiswa').show();
            } else {
                $('#mahasiswa').hide();
            }
            // var targetBox = $("." + inputValue);
            // $(".box").not(targetBox).hide();
            // $(targetBox).show();
        });
    });

    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 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 spesification = $("#spesification").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="text" name="unit_item_spesification[]" class="form-control" value="' + spesification + '"></td>' +
                '<td><div class="input-group mb-3"><input type="number" name="unit_item_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);
        $("#spesification").val(null);
    }

    function laboratory_tool_add_item() {
        var laboratory_tool_id = $("#tool_id").val();
        var laboratory_tool_text = $("#laboratory_tool_id :selected").text();
        var laboratory_tool_spesification = $("#tool_spesification").val();
        var laboratory_tool_total = $("#tool_total").val();
        // console.log(laboratory_tool_id);
        // console.log(laboratory_tool_text);
        if (laboratory_tool_id_array.includes(laboratory_tool_id)) {
            alert("Alat Sudah Ditambahkan");
        } else {
            var laboratory_tool_text = $("#tool_id option:selected").text();
            var content = '<tr>' +
                '<td>#</td>' +
                '<td><input type="hidden" name="laboratory_tool_id[]" value="' + laboratory_tool_id + '"><span style="margin-left:1rem;">' + laboratory_tool_text + '</span></td>' +
                '<td><input type="text" name="laboratory_tool_spesification[]" class="form-control" value="' + laboratory_tool_spesification + '"></td>' +
                '<td><input type="number" name="laboratory_tool_total[]" class="form-control" value="' + laboratory_tool_total + '"></td>' +
                '<td><button type="button" class="btn btn-rounded btn-danger" onClick="$(this).parent().parent().remove();laboratory_tool_remove_item(' + laboratory_tool_id + ');"><i class="fa fa-trash"></i></button></td>' +
                '</tr>';
            laboratory_tool_id_array.push(laboratory_tool_id);
            $('#tool_table tr:last').after(content);
        }
        // $('#laboratory_tool_detail_id').prop('selectedIndex', 0);
        $("#tool_id").val('').trigger('change');
        $("#tool_id").empty().trigger('change');

        $("#tool_spesification").val("");
        $("#tool_total").val("");
        // $("#laboratory_tool_detail_id").select2("val", "");
    }

    function laboratory_tool_remove_item(laboratory_tool_id) {
        laboratory_tool_id = laboratory_tool_id.toString();
        console.log(laboratory_tool_id_array);
        var index = laboratory_tool_id_array.indexOf(laboratory_tool_id);
        if (index !== -1) {
            laboratory_tool_id_array.splice(index, 1);
        }
        console.log(laboratory_tool_id_array);
    }

    function add() {
        save_method = 'add';
        $('.text-error').empty(); // clear error string
        $('#form')[0].reset(); // reset form on modals
        $('#btnSave').text('Simpan');
        $('.modal-title').text('Tambah'); // Set Title to Bootstrap modal title
        $('#modal_form').modal('show'); // show bootstrap modal
    }

    function save() {
        $('.text-error').empty(); // clear error string
        $('#btnSave').text('Menyimpan...'); //change button text
        $('#btnSave').attr('disabled', true); //set button disable 
        var url;

        var unit_item_id = $('input[name^=unit_item_id]').map(function(idx, elem) {
            return $(elem).val();
        }).get();

        var spesification = $('input[name^=unit_item_spesification]').map(function(idx, elem) {
            return $(elem).val();
        }).get();

        var total = $('input[name^=unit_item_total]').map(function(idx, elem) {
            return $(elem).val();
        }).get();

        var laboratory_tool_id = $('input[name^=laboratory_tool_id]').map(function(idx, elem) {
            return $(elem).val();
        }).get();

        var laboratory_tool_spesification = $('input[name^=laboratory_tool_spesification]').map(function(idx, elem) {
            return $(elem).val();
        }).get();

        var laboratory_tool_total = $('input[name^=laboratory_tool_total]').map(function(idx, elem) {
            return $(elem).val();
        }).get();
        console.log("unit_item_id");
        console.log(unit_item_id);
        console.log("spesification");
        console.log(spesification);
        console.log("total");
        console.log(total);
        console.log("laboratory_tool_id");
        console.log(laboratory_tool_id);
        console.log("laboratory_tool_spesification");
        console.log(laboratory_tool_spesification);
        console.log("laboratory_tool_total");
        console.log(laboratory_tool_total);

        // if (save_method == 'add') {
        //     url = "{{ url('/research/add') }}";
        // } else {
        //     url = "{{ url('/research/update') }}";
        // }

        var formData = new FormData($('#form')[0]);
        formData.append("_token", "{{ csrf_token() }}");
        formData.append("unit_item_id", JSON.stringify(unit_item_id));
        formData.append("spesification", JSON.stringify(spesification));
        formData.append("total", JSON.stringify(total));
        formData.append("laboratory_tool_id", JSON.stringify(laboratory_tool_id));
        formData.append("laboratory_tool_spesification", JSON.stringify(laboratory_tool_spesification));
        formData.append("laboratory_tool_total", JSON.stringify(laboratory_tool_total));

        // for (var i = 0; i < unit_item_id.length; i++) {
        //     formData.append('unit_item_id[]', unit_item_id[i]);
        // }

        // for (var i = 0; i < spesification.length; i++) {
        //     formData.append('spesification[]', spesification[i]);
        // }

        // for (var i = 0; i < total.length; i++) {
        //     formData.append('total[]', total[i]);
        // }

        // for (var i = 0; i < laboratory_tool_id.length; i++) {
        //     formData.append('laboratory_tool_id[]', laboratory_tool_id[i]);
        // }

        // for (var i = 0; i < laboratory_tool_spesification.length; i++) {
        //     formData.append('laboratory_tool_spesification[]', laboratory_tool_spesification[i]);
        // }

        // for (var i = 0; i < laboratory_tool_total.length; i++) {
        //     formData.append('laboratory_tool_total[]', laboratory_tool_total[i]);
        // }

        // console.log(formData);
        $.ajax({
            url: "{{ url('/research/create') }}",
            type: "POST",
            // data: {
            //     "unit_item_id": unit_item_id,
            //     "spesification": spesification,
            //     "total": total,
            //     "laboratory_tool_id": laboratory_tool_id,
            //     "laboratory_tool_spesification": laboratory_tool_spesification,
            //     "laboratory_tool_total": laboratory_tool_total,
            //     "name": $("#name").val(),
            //     "nim": $("#nim").val(),
            //     "title": $("#title").val(),
            //     "unit_id": $("#unit_id").val(),
            //     "semester": $("#semester").val(),
            //     "_token": "{{ csrf_token() }}"
            // },
            data: formData,
            dataType: "JSON",
            processData: false,
            contentType: false,
            success: function(data) {
                console.log(data);
                if (data.status) //if success close modal and reload ajax table
                {
                    var text = '';
                    // if (save_method == 'add') {
                    //     text = 'Data Added Successfully';
                    // } else {
                    //     text = 'Data Updated Successfully';
                    // }
                    text = 'Berhasil menambahkan usulan';
                    toastr.success(text);
                    // notification('success', 'Success', text);
                    window.location.replace("