@extends('master')

@push('after-style')
<link rel="stylesheet" href="{{ asset('adminn/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('adminn/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
@endpush

@section('content')

<section id="title_breadcrumbs_bar">
    <div class="container clearfix">
        <div class="floatleft">
            <h1>Koleksi Mikroba</h1>
        </div>
    </div>
</section>

<section style="padding-top:10px !important;">
    <div class="container ">
        <div class="row portfolio_4column portfolio_4column_gallery">
            <div class="portfolio_full_width span12 content ">
                <div class="row">
                    <div class="col-lg-12 col-12 col-md-12">
                        <div class="card">

                            <!-- /.card-header -->
                            <div class="card-body">
                                <table id="table" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Pilih</th>
                                            <th>No</th>
                                            <th>Kode</th>
                                            <th>Tipe Mikroba</th>
                                            <th>Genus</th>
                                            <th>Spesies</th>
                                            <th>Harga</th>
                                            <th>Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section style="padding-top: 0px;" id="table2-wrapper">
    <div class="container ">
        <div class="row portfolio_4column portfolio_4column_gallery">
            <div class="portfolio_full_width span12 content ">
                <div class="row">
                    <div class="col-lg-12 col-12 col-md-12">
                        <div class="card">

                            <!-- /.card-header -->
                            <div class="card-body">
                                <table id="table2" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Spesies</th>
                                            <th>Jumlah</th>
                                            <th>Tarif</th>
                                            <th>Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th></th>
                                            <th></th>
                                            <th style="text-align: end;">Total : </th>
                                            <th><span id="total"></span></th>
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Featured Portfolio -->
@endsection

@push('after-script')
<script src="{{ asset('adminn/plugins/jquery/jquery.min.js') }}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{{ asset('adminn/plugins/jquery-ui/jquery-ui.min.js') }}"></script>

<script src="{{ asset('adminn/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('adminn/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('adminn/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('adminn/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script>
    var dataSet = [];

    var table2 = null;
    const rupiah = (number) => {
        return new Intl.NumberFormat("id-ID", {
            style: "currency",
            currency: "IDR"
        }).format(number);
    }

    $(document).ready(function() {


        // console.log(rupiah(20000)) // "Rp 20.000,00"

        $('#table2-wrapper').hide();

        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('/microbe/show') }}",
                "data": {
                    "_token": "{{ csrf_token() }}"
                },
                "error": function(xhr, error, code) {
                    console.log(xhr, code);
                }
            },
            "bDestroy": true,
            // "buttons": [
            //     'copy', 'csv', 'excel', 'pdf', 'print'
            // ],
            // // dom: 'Bfrtip',
            // dom: 'lBfrtip',
            //Set column definition initialisation properties.
            columns: [{
                    data: 'checkbox',
                    name: 'checkbox'
                }, {
                    data: 'no',
                    name: 'no'
                },
                {
                    data: 'code',
                    name: 'code'
                },
                {
                    data: 'microbial_type',
                    name: 'microbial_type'
                },
                {
                    data: 'microbial_genus',
                    name: 'microbial_genus'
                },
                {
                    data: 'species',
                    name: 'species'
                },
                {
                    data: 'price',
                    name: 'price'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false
                }
            ],
            order: [
                [1, 'asc']
            ]
        });

        $('.cbx').click(function() {
            console.log('adfjald');
            if ($(this).is(":checked")) {
                console.log($(this).val());
            } else {
                console.log('empty');
            }
        });

    });

    function loadTable() {
        if (dataSet.length > 0) {
            $('#table2-wrapper').show();
            table2 = $('#table2').DataTable({
                data: dataSet,
                bDestroy: true,
                columns: [{
                        data: 'no',
                        render: function(data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data: 'name'
                    },
                    {
                        data: 'quantity',
                        render: function(data, type, row) {
                            return '<b>/</b>' +
                                '&nbsp<span class="wpcf7-form-control-wrap your-email"><input type="number" name="your-email" min="1" id="quantity_' + row.id + '" value="' + row.quantity + '" onkeyup="subtotal(' + row.id + ');" onmouseup="subtotal(' + row.id + ');" size="30" class="wpcf7-form-control wpcf7-text" aria-invalid="false" style="margin-bottom: 0px;width:60px;padding-left:10px;" /></span>';
                        }
                    },
                    {
                        data: 'price',
                        render: function(data, type, row) {
                            var subtotal = 0;
                            subtotal = row.price * row.quantity;

                            return '<span id="subtotal_' + row.id + '">' + rupiah(subtotal) + '</span>'
                        }
                    },
                    {
                        data: 'action',
                        render: function(data, type, row) {
                            return '<button class="btn btn-danger dnd-button_small" style="padding: 4px 10px !important;" onclick="remove(' + data + ')"><i class="fa fa-trash"></i></button>';

                            // if (data == true) {
                            //     return '<input type="checkbox" checked>';
                            // } else {
                            //     return '<input type="checkbox">';
                            // }
                            // return data;
                        }
                    },
                ],
            });
            total();
        } else {
            $('#table2-wrapper').hide();
        }

    }


    // function generateTable()
    // {

    // }

    function get(id) {
        console.log(id);
        var selector = $('#cbx_' + id);
        if (selector.is(":checked")) {
            // console.log('value = ' + selector.val() + ' (checked)');
            $.ajax({
                url: "{{ url('/microbe/get') }}",
                type: "POST",
                dataType: "JSON",
                data: {
                    "id": id,
                    "_token": "{{ csrf_token() }}",
                },
                success: function(data) {
                    console.log(data);
                    var a = [];
                    a['id'] = data.id;
                    a['no'] = (dataSet.length) + 1;
                    a['name'] = data.name;
                    a['price'] = data.price;
                    a['quantity'] = 1;
                    a['action'] = data.id;
                    dataSet.push(a);
                    // dataSet[data.id] = a;
                    console.log(dataSet.length);

                    loadTable(); //reload datatable ajax 
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    // alert('Error deleting data');
                }
            });
        } else {
            remove(id);
        }

    }

    function getById(id) {
        // var results = dataSet.filter(function(x) {
        //     return x.id == id
        // });
        // return (results.length > 0 ? results[0] : null);
        return dataSet.findIndex(x => x.id === id);
    }

    function remove(id) {
        console.log("=========");
        console.log(getById(id));
        console.log("=========");
        dataSet.splice(getById(id), 1);
        $('#cbx_' + id).prop('checked', false);
        loadTable();
    }

    function subtotal(id) {
        // console.log(id);
        var data = getById(id);
        var subtotal = 0;
        // console.log(data);
        // console.log(dataSet[index]);

        data.quantity = $('#quantity_' + id).val();
        var subtotal = data.price * $('#quantity_' + id).val();

        $("#subtotal_" + id).text(rupiah(subtotal));
        // loadTable();
        total();
    }

    function total() {
        var total = 0;
        for (let index = 0; index < dataSet.length; index++) {
            total += dataSet[index].price * dataSet[index].quantity;
        }
        $('#total').text(rupiah(total));
    }
</script>

@endpush