@extends('layout.master')

@section('title', 'Aktiviti PSOH')

@section('content')

<div class="page-header">
    <h5 class="page-title">Laporan Aktiviti Integrasi PSOH</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Laman Utama</a></li>
            <li class="breadcrumb-item">Laporan</li>
            <li class="breadcrumb-item active">Laporan Aktiviti Integrasi PSOH</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover nowrap w-100" id="the-table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<div class="modal" id="detail-modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Butiran</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')

<script type="text/javascript">


    $(document).ready(function() {

        const butiranModal = new bootstrap.Modal('#detail-modal');

        $('#the-table').DataTable({
            ...datatables_config,
            scrollX: true,
            processing: true,
            // serverSide: true,
            ajax: {
                url: "{{ route('laporan.aktiviti_psoh') }}"
            },
            buttons: [
                {
                    extend: 'pdf',
                    className: 'btn btn-danger',
                    text: '<i class="fa fa-file-pdf me-2"></i> PDF',
                    exportOptions: {
                        columns: [0, 1, 2, 3]
                    }
                },
                {
                    extend: 'csv',
                    className: 'btn btn-success',
                    text: '<i class="fa fa-file-csv me-2"></i> CSV',
                    exportOptions: {
                        columns: [0, 1, 2, 3]
                    }
                },
                {
                    extend: 'excel',
                }
            ],
            columns: [
                {
                    data: 'DT_RowIndex',
                    title: 'Bil',
                    width: '1%', 
                    className: 'text-center',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'negeri',
                    title: 'Negeri'
                },
                {
                    data: 'dashboard',
                    title: 'Dashboard'
                },
                {
                    data: 'tarikh',
                    title: 'Tarikh'
                },
                {
                    data: 'maklumat',
                    title: 'Maklumat Integrasi',
                    width: '1%', 
                    className: 'text-center',
                    render: (data, type, row) => {
                        return `
                        <button type="button" class="btn btn-sm btn-primary detailBtn"><i class="fa-solid fa-circle-info"></i></button>`;

                    }
                },
            ],
            order: [[0, 'asc']],
            columnDefs: [
                {
                    render: false,
                }
            ],
        });

        $("#the-table").on("click", "tbody .detailBtn", function() {
            const data = $(this).closest("table").DataTable().row($(this).closest("tr")).data();

            let html = `<ul>`;
            
            if (data.maklumat && data.maklumat.length > 0) {

                for (let i = 0; i < data.maklumat.length; i++) {
                    const item = data.maklumat[i];
                    html += `<li>${item}</li>`;
                }

            } else {
                html += `<li>Tiada data</li>`;
            }

            html += `</ul>`;

            document.querySelector('#detail-modal .modal-body').innerHTML = html;

            butiranModal.show();
        });
    });
</script>

@endsection