@extends('user')

@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">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">
                <a href="{{ url('/test/add') }}" class="btn-sm btn btn-primary" style="float: right;">TAMBAH</a>
            </div>
            <!-- /.card-header -->
            <div class="card-body table-responsive">
                <table id="table" class="table table-bordered table-striped" style="width: 100%;">
                    <thead>
                        <tr>
                            <th rowspan="2" class="x">No</th>
                            <th rowspan="2" class="x">Unit Lab</th>
                            <th rowspan="2" class="x">Nama Sample</th>
                            <th rowspan="2" class="x">Tujuan Pengujian</th>
                            <th rowspan="2" class="x">Nama</th>
                            <th rowspan="2" class="x">Alamat</th>
                            <th rowspan="2" class="x">No. Telp</th>
                            <th rowspan="2" class="x">Institusi</th>
                            <th rowspan="2" class="x">Proposal</th>
                            <th rowspan="2" class="x">Tanggal</th>
                            <th colspan="3" class="x" style="text-align: center;color:red;">Diisi Oleh Admin</th>
                            <th rowspan="2" class="x" style="display: revert !important;">Action</th>
                        </tr>
                        <tr>
                            <th class="x" style="color: red;">Status</th>
                            <th class="x" style="color: red;">Total Biaya</th>
                            <th class="x" style="color: red;">Catatan</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

            </div>
            <!-- /.card-body -->
        </div>
    </div>
</div>

@endsection

@push('after-script')

<script type="text/javascript">
    $(document).ready(function() {
        table = $('#table').DataTable({
            "responsive": true,
            // "responsive": {
            //     details: false
            // },
            "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('/test/show') }}",
                "data": {
                    "_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: 'sample',
                    name: 'sample'
                },
                {
                    data: 'purpose',
                    name: 'purpose'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'address',
                    name: 'address'
                },
                {
                    data: 'phone',
                    name: 'phone'
                },
                {
                    data: 'institution',
                    name: 'institution'
                },
                {
                    data: 'proposalButton',
                    name: 'proposalButton'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'statusBadge',
                    name: 'statusBadge'
                },
                {
                    data: 'price',
                    name: 'price'
                },
                {
                    data: 'note',
                    name: 'note'
                },
                {
                    data: 'action',
                    name: 'action'
                }
            ],
            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('/test/add') }}";
        } else {
            url = "{{ url('/test/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('/test/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) {
        if (confirm('Ingin menghapus data ?')) {
            // ajax delete data to database
            $.ajax({
                url: "{{ url('/test/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