@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 Pengujian</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">Pengujian</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>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="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Alamat</label>
                                <textarea name="address" id="address" cols="30" rows="5" class="form-control"></textarea>
                                <div class="text-danger text-error" id="address_error">*error</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Phone</label>
                                <input type="number" name="phone" id="phone" class="form-control">
                                <div class="text-danger text-error" id="phone_error">*error</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Nama Sampel Uji</label>
                                <textarea name="sample" id="sample" cols="30" rows="5" class="form-control"></textarea>
                                <div class="text-danger text-error" id="sample_error">*error</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Tujuan Pengujian</label>
                                <textarea name="purpose" id="purpose" cols="30" rows="5" class="form-control"></textarea>
                                <div class="text-danger text-error" id="purpose_error">*error</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="">Unit Lab</label>
                        <select name="unit_id" id="unit_id" class="form-control">
                                                    </select>
                    </div>
                    <b>
                        <hr>
                    </b>
                    <div class="form-group">
                        <label for="">Parameter & Metode Uji</label>
                        <select name="testing_service_id" id="testing_service_id" class="form-control">
                            <option value=""></option>
                        </select>
                        <br>
                        <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>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="table-responsive">
                                <table class="table" id="item_table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Metode Pengujian</th>
                                            <th>Parameter Uji</th>
                                            <th>Biaya</th>
                                            <th>Aksi</th>
                                        </tr>
                                        <!-- <tr>
                                            <td>#</td>
                                            <td>
                                            </td>
                                            <td>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-rounded btn-danger" onClick=""><i class="fa fa-trash"></i></button>
                                            </td>
                                        </tr> -->
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-footer">
                <a href="{{ url('/test') }}" 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 testing_service_id_array = [];
    var 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(")", ''));
            }
        });

        $("#testing_service_id").select2({
            // initSelection: function(element, callback) {},
            placeholder: "",
            allowClear: true,
            theme: 'bootstrap4',
            ajax: {
                url: "http://labirin.poltekkes-medan.ac.id/test-service/get",
                type: "get",
                // dataType: 'jsonp',
                delay: 250,
                crossDomain: true,
                headers: {
                    'Access-Control-Allow-Origin': '*',
                    'Access-Control-Allow-Headers': '*'
                },
                data: function(params) {
                    return {
                        _token: "{{ csrf_token() }}",
                        // unit_id: $("#unit_id").val(),
                        testing_service_id: id_array,
                        search: params.term // search term
                    };
                },
                success: function(jsondata){
                    console.log(jsondata);
                },
                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 remove_item(testing_service_id) {
        testing_service_id = testing_service_id.toString();
        // console.log(unit_item_id_array);
        var testing_service = testing_service_id.split("_");
        var index = testing_service_id_array.indexOf(testing_service_id);
        var index2 = id_array.indexOf(testing_service[0]);
        if (index !== -1) {
            testing_service_id_array.splice(index, 1);
            console.log('berhasil hore1');
        }

        if (index2 !== -1) {
            id_array.splice(index2, 1);
            console.log('berhasil hore2');
        }
        // console.log(unit_item_id_array);
    }

    function add_item() {
        var testing_service_id = $("#testing_service_id option:selected").val();
        if (testing_service_id_array.includes(testing_service_id)) {
            alert("Pengujian Sudah Ditambahkan");
        } else {
            // var testing_service = $("#item_id option:selected").text();
            var testing_service = testing_service_id.split("_");
            var content = '<tr>' +
                '<td>#</td>' +
                '<td><span>' + testing_service[1] + '</span></td>' +
                '<td><span>' + testing_service[2] + '</span></td>' +
                '<td><span>' + testing_service[3] + '</span></td>' +
                '<td><button type="button" class="btn btn-rounded btn-danger" onClick="$(this).parent().parent().remove();remove_item(' + '\'' + testing_service_id + '\'' + ');"><i class="fa fa-trash"></i></button></td>' +
                '</tr>';
            testing_service_id_array.push(testing_service_id);
            id_array.push(testing_service[0]);
            console.log(id_array);
            console.log(testing_service_id_array);
            $('#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(")", ''));
        }
        $("#testing_service_id").val('').trigger('change');
        $("#testing_service_id").empty().trigger('change');
    }

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

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

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

        $.ajax({
            url: "{{ url('/test/create') }}",
            type: "POST",
            data: {
                "name": $("#name").val(),
                "institution": $("#institution").val(),
                "address": $("#address").val(),
                "phone": $("#phone").val(),
                "sample": $("#sample").val(),
                "purpose": $("#purpose").val(),
                "unit_id": $("#unit_id").val(),
                "testing_service_id": testing_service_id_array,
                "_token": "{{ csrf_token() }}"
            },
            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("