@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') }}">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .center {
        text-align: center;
        vertical-align: middle;
    }

    th,
    td {
        text-align: center;
        vertical-align: middle;
    }
</style>
@endpush

@section('content')

<!-- <section id="title_breadcrumbs_bar">
    <div class="container clearfix">
        <div class="floatleft">
            <h1>Layanan</h1>
        </div>
    </div>
</section> -->

<section class="dnd_section_dd " style="background-color:#f5f6f8;">

    <div class="dnd_section_content">
        <div class="dnd_container">

            <!-- <div class="dnd_column_dd_span7">
                <div data-animation="fadeInLeft" data-duration="1000" data-delay="0">
                    <img src="{{ asset('assets/images/educational-service/'.$educational_service->educational_service_image) }}" alt="">
                </div>
                <span class="clear spacer_responsive_hide_tablet" style="height:20px;display:block;"></span>
            </div> -->

            <!-- <div class="dnd_column_dd_span5 ">
                <h4><span>Layanan Pendidikan</span></h4>
                {!! $educational_service->educational_service_content !!}
                <span class="clear spacer_responsive_hide_mobile " style="height:23px;display:block;"></span>
            </div> -->
            <h4>Jadwal Laboratorium</h4>
            <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">
                            <div class="card-header">
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="form-group row align-items-center">
                                                <div class="col-3">
                                                    Program Studi
                                                </div>
                                                <div class="col-6">
                                                    <select name="unit" id="unit" class="form-control">
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-group row align-items-center">
                                                <div class="col-1">
                                                    <label for="">Dari</label>
                                                </div>
                                                <div class="col-5">
                                                    <input type="date" id="from" value="2025-05-06" class="form-control">
                                                </div>
                                                <div class="col-1">
                                                    <label for="">Ke</label>
                                                </div>
                                                <div class="col-5">
                                                    <input type="date" id="to" value="2025-05-10" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="form-group" style="width: 30%;">
                                        <label for="">Program Studi</label>
                                        <select name="unit" id="unit" class="form-control">
                                        </select>
                                    </div> -->
                                </div>
                                <!-- /.card-header -->
                                <div class="card-body">
                                    <table id="table" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th class="center">No</th>
                                                <th class="center">Program Studi</th>
                                                <th class="center">Laboratorium</th>
                                                <th class="center">Utilitas</th>
                                                <th class="center">Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.card-body -->
                            </div>
                        </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 src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        // $('#table').DataTable();
        generate_table();
        $("#unit,#from,#to").change(function() {
            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": "GET",
                    "url": "http://labirin-polkesmed.poltekkes-medan.ac.id/laboratory-schedule/get-laboratory-percentage",
                    "data": {
                        "unit": $('#unit').val(),
                        "from": $('#from').val(),
                        "to": $('#to').val(),
                    },
                    "error": function(xhr, error, code) {
                        console.log(xhr);
                        console.log(error);
                        console.log(code);
                    }
                },
                "bDestroy": true,
                // "buttons": [
                //     'copy', 'csv', 'excel', 'pdf', 'print'
                // ],
                // // dom: 'Bfrtip',
                // dom: 'lBfrtip',
                //Set column definition initialisation properties.
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'unit_name',
                        name: 'unit_name'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'percentage',
                        name: 'percentage'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    }
                ],
                order: [
                    [1, 'asc']
                ]
            });
        }
        // $("#laboratory").select2();
        $("#unit").select2({
            // initSelection: function(element, callback) {},
            placeholder: "",
            allowClear: true,
            // theme: 'bootstrap4',
            ajax: {
                url: "http://labirin-polkesmed.poltekkes-medan.ac.id/laboratory-schedule/get-unit",
                type: "get",
                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 
                }
            }

        });
    });
</script>
@endpush