@extends('admin')

@push('after-style')

<style>
    table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,
    table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
        display: none !important;
    }

    /* table.table-bordered.dataTable tbody td {
        display: inline !important;
    } */
    .x {
        display: revert !important;
    }

    table.table-bordered.dataTable tbody th,
    table.table-bordered.dataTable tbody td {
        display: revert !important;
    }
</style>
@endpush

@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">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">
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <select name="unit" id="unit" class="form-control">
                                                            </select>
                        </div>
                    </div>
                </div>
                <!-- <a href="{{ url('/research/add') }}" class="btn-sm btn btn-primary" style="float: right;">TAMBAH</a> -->
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <div class="table-responsive">
                    <table id="table" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th rowspan="2" class="x">No</th>
                                <th rowspan="2" class="x">Unit Lab</th>
                                <th rowspan="2" class="x">Judul Penelitian</th>
                                <th rowspan="2" class="x">Nama</th>
                                <th rowspan="2" class="x">NIM/NIP/NIDN</th>
                                <th rowspan="2" class="x">Institusi</th>
                                <th rowspan="2" class="x">Proposal</th>
                                <th rowspan="2" class="x">Hasil</th>
                                <th rowspan="2" class="x">Tanggal</th>
                                <th rowspan="2" style="color: red;" class="x">Status</th>
                                <th colspan="3" class="x" style="text-align: center;color:red;">Pembayaran</th>
                                <th rowspan="2" style="color: red;" class="x">Catatan</th>
                                <th rowspan="2" class="x" style="display: block !important;">Action</th>
                            </tr>
                            <tr>
                                <th style="color: red;" class="x">Total Biaya</th>
                                <th class="x">Bukti Bayar</th>
                                <th style="color: red;" class="x">Status</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
    </div>
</div>

<div id="modal_form" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <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">
                    <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 class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>NIM</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 class="col-6">
                            <div class="form-group">
                                <label>Semester</label>
                                <input type="number" name="semester" id="semester" class="form-control">
                                <div class="text-danger text-error" id="semester_error">*error</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 for="">Unit Lab</label>
                        <select name="unit_id" id="unit_id" class="form-control">
                                                    </select>
                    </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 -->
@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/research/show') }}",
                "data": {
                    "unit_id": $('#unit').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: 'unit_id',
                    name: 'unit_id'
                },
                {
                    data: 'title',
                    name: 'title'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'nim',
                    name: 'nim'
                },
                {
                    data: 'institution',
                    name: 'institution'
                },
                {
                    data: 'proposalButton',
                    name: 'proposalButton'
                },
                {
                    data: 'resultButton',
                    name: 'resultButton'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'statusBadge',
                    name: 'statusBadge'
                },
                {
                    data: 'priceButton',
                    name: 'priceButton'
                },
                {
                    data: 'receiptButton',
                    name: 'receiptButton'
                },
                {
                    data: 'paymentStatusBadge',
                    name: 'paymentStatusBadge'
                },
                {
                    data: 'note',
                    name: 'note'
                },
                {
                    data: 'action',
                    name: 'action',
                    // orderable: false
                }
            ],
            order: [
                [0, 'asc']
            ]
        });
    }

    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;

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

        var formData = new FormData($('#form')[0]);
        formData.append("_token", "{{ csrf_token() }}");

        $.ajax({
            url: url,
            type: "POST",
            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';
                    }
                    toastr.success(text);
                    // notification('success', 'Success', text);
                    $('#modal_form').modal('hide');
                    reload_table();
                } else {
                    for (const [key, value] of Object.entries(data.message)) {
                        $('#' + key + '_error').html('*' + value);
                    }

                    if (save_method == 'add') {
                        $('#btnSave').text('Save');
                    } else {
                        $('#btnSave').text('Update');
                    }
                }

                $('#btnSave').attr('disabled', false); //set button enable 
            },
            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 reload_table() {
        table.ajax.reload(null, false); //reload datatable ajax 
    }


    function edit(id) {
        save_method = 'update';
        $('.text-error').empty();
        $('#form')[0].reset(); // reset form on modals

        //Ajax Load data from ajax
        $.ajax({
            url: "{{ url('/admin/research/edit') }}",
            type: "POST",
            data: {
                "id": id,
                "_token": "{{ csrf_token() }}",
            },
            dataType: "JSON",
            success: function(data) {
                console.log(data);
                $('[name="id"]').val(data.id);
                $('[name="name"]').val(data.name);

                $('#btnSave').text('Update'); // Set Title to Bootstrap modal title
                $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
                $('.modal-title').text('Edit'); // Set title to Bootstrap modal title
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error get data from ajax');
            }
        });
    }

    function deletee(id) {
        // console.log('hore');
        if (confirm('Ingin menghapus data ?')) {
            // ajax delete data to database
            $.ajax({
                url: "{{ url('/admin/research/delete') }}",
                type: "POST",
                dataType: "JSON",
                data: {
                    "id": id,
                    "_token": "{{ csrf_token() }}",
                },
                success: function(data) {
                    toastr.success('Berhasil menghapus data');
                    // notification('success', 'Success', 'Berhasil menghapus data');

                    $('#modal_form').modal('hide');
                    reload_table();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert('Error deleting data');
                }
            });

        }
    }
</script>
@endpush