@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Parameter Mesin'])

    <div class="container-fluid py-4">
        {{-- Header --}}
        {{-- <div class="row mt-4 mb-3">
            <div class="col-12 text-center">
                <h4 class="fw-bold text-primary mb-1">MSJ - Setting Parameter</h4>
                <p class="text-muted">Monitoring jumlah parameter per line</p>
            </div>
        </div> --}}

        <div class="row mt-7">
            <div class="col-md-12 mb-30">
                <div class="card shadow border-0">
                    <div class="card-header bg-transparent pb-0">
                        <div class="d-flex justify-content-end gap-3 me-4">
                            <div class="col-md-3">
                                <label for="mesin_id" class="form-label fw-semibold">Mesin</label>
                                <select class="form-control" id="mesin_id" name="mesin_id">
                                    <option value="">-- Pilih Mesin --</option>
                                    @foreach ($param->unique('mesin_id') as $mesin)
                                        <option value="{{ $mesin->mesin_id }}">{{ $mesin->nama_mesin }}</option>
                                    @endforeach
                                </select>
                            </div>
                            {{-- <div class="col-md-3">
                                <label for="mesin_id" class="form-label fw-semibold">Gedung</label>
                                <select class="form-control" id="Gedung_id" name="mesin_id">
                                    <option value="">-- Pilih Gedung --</option>
                                    @foreach ($param->unique('gedung_id') as $mesin)
                                        <option value="{{ $mesin->gedung_id }}">{{ $mesin->nama_gedung }}</option>
                                    @endforeach
                                </select>
                            </div> --}}
                            <div class="col-md-3">
                                <label for="mesin_id" class="form-label fw-semibold">Tanggal</label>
                                <input type="date" class="form-control" id="Tanggal" name="Tanggal">
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-4">
                        <div class="mt-4" id="shift-result" style="display:none;"></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Summary Cards --}}
        {{-- <div class="row">
            @php
                $colors = ['primary', 'info', 'success', 'warning', 'danger', 'secondary'];
            @endphp

            @foreach ($sumParam as $index => $sum)
                <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
                    <div class="card shadow-sm border-0 h-100 hover-shadow transition-all"
                        style="border-top: 4px solid var(--bs-{{ $colors[$index % count($colors)] }});">
                        <div class="card-body text-center">
                            <p class="fw-semibold text-uppercase text-secondary mb-1">{{ $sum->nama_line }}</p>
                            <h2 class="fw-bold text-dark mb-0">{{ $sum->total }}</h2>
                            <span class="text-muted small">Parameter</span>
                        </div>
                    </div>
                </div>
            @endforeach
        </div> --}}

        {{-- Chart Section --}}
        {{-- <div class="row mt-5">
            <div class="col-lg-10 col-md-12 mx-auto">
                <div class="card shadow border-0">
                    <div class="card-header bg-transparent pb-0">
                        <h6 class="mb-0 fw-bold text-primary">Tren Parameter</h6>
                        <p class="text-sm text-muted mb-0">Perkembangan parameter tiap bulan</p>
                    </div>
                    <div class="card-body p-4">
                        <canvas id="chart-line" height="100"></canvas>
                    </div>
                </div>
            </div>
        </div> --}}
    </div>
@endsection

@push('js')
    <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>
    {{-- <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById("chart-line").getContext("2d");

            const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
            gradientStroke.addColorStop(1, 'rgba(54, 162, 235, 0.2)');
            gradientStroke.addColorStop(0.2, 'rgba(54, 162, 235, 0.0)');
            gradientStroke.addColorStop(0, 'rgba(54, 162, 235, 0)');

            new Chart(ctx, {
                type: "line",
                data: {
                    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov",
                        "Dec"
                    ],
                    datasets: [{
                        label: "Parameter Aktif",
                        tension: 0.4,
                        borderWidth: 3,
                        pointRadius: 4,
                        pointBackgroundColor: "#36A2EB",
                        borderColor: "#36A2EB",
                        backgroundColor: gradientStroke,
                        fill: true,
                        data: @json($chart),
                    }],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            labels: {
                                color: '#333'
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index',
                    },
                    scales: {
                        y: {
                            grid: {
                                drawBorder: false,
                                color: 'rgba(200,200,200,0.2)',
                            },
                            ticks: {
                                color: '#555',
                                padding: 8,
                                font: {
                                    size: 12,
                                    family: "Open Sans"
                                }
                            }
                        },
                        x: {
                            grid: {
                                display: false,
                            },
                            ticks: {
                                color: '#555',
                                padding: 8,
                                font: {
                                    size: 12,
                                    family: "Open Sans"
                                }
                            }
                        },
                    },
                },
            });
        });
    </script> --}}

    <script>
                $('#mesin_id, #Tanggal').on('change', function() {
                    const mesin_id = $('#mesin_id').val();
                    const tanggal = $('#Tanggal').val();

                    if (!mesin_id || !tanggal) return;

                    $('#shift-result').html(`
        <div class="text-center py-4">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="text-muted mt-2">Sedang mengambil data...</p>
        </div>
    `).show();
                    Swal.fire({
                        title: 'Mohon tunggu...',
                        text: 'Sedang mengambil data',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });


                    $.ajax({
                        url: '{{ url('/parameter/get-shift') }}',
                        method: 'GET',
                        data: {
                            mesin_id,
                            tanggal
                        },
                        success: function(response) {
                            Swal.close();
                            let html = '';

                            if (Object.keys(response).length === 0) {
                                html = '<p class="text-muted">Tidak ada data.</p>';
                            } else {
                                $.each(response, function(shift, entries) {

                                    let headers = '';
                                    let values = '';

                                    entries[0].forEach(function(row) {
                                        headers += `<th>${row.nama_parameter ?? '-'}</th>`;
                                        values += `<td>${row.value_parameter ?? '-'}</td>`;
                                    });

                                    html += `
        <div class="mb-4">
            <h5 class="mb-3">Shift ${shift}</h5>
            <div class="table-responsive">
                <table class="table table-bordered align-middle">
                    <thead class="table-light">
                        <tr>
                            ${headers}
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            ${values}
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>`;
                                });
                            }

                            $('#shift-result').html(html).show();
                        },
                        error: function() {
                            $('#shift-result').html('<p class="text-danger">Gagal mengambil data.</p>').show();
                        }
                    });
                });

            $('#mesin_id, #Tanggal').on('change', function() {
                const mesin_id = $('#mesin_id').val();
                const tanggal = $('#Tanggal').val();

                if (!mesin_id || !tanggal) return;

                $('#shift-result').html(`
        <div class="text-center py-4">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="text-muted mt-2">Sedang mengambil data...</p>
        </div>
    `).show();

                Swal.fire({
                    title: 'Mohon tunggu...',
                    text: 'Sedang mengambil data',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: '{{ url('/parameter/get-shift') }}',
                    method: 'GET',
                    data: {
                        mesin_id,
                        tanggal
                    },
                    success: function(response) {
                        Swal.close();
                        let html = '';

                        if (Object.keys(response).length === 0) {
                            html = '<p class="text-muted">Tidak ada data.</p>';
                        } else {
                            $.each(response, function(shift, entries) {
                                let headers = '';
                                let values = '';
                                let pgHtml = '';


                                entries.data.forEach(function(row) {
                                    headers += `<th>${row.nama_parameter ?? '-'}</th>`;
                                    values += `<td>${row.value_parameter ?? '-'}</td>`;
                                });

                                const pg = entries.pagination;
                                const headerId = entries.header_id;

                                if (pg.last_page > 1) {
                                    pgHtml +=
                                        `<nav><ul class="pagination justify-content-center mt-2">`;
                                    for (let i = 1; i <= pg.last_page; i++) {
                                        pgHtml += `
                                <li class="page-item ${i === pg.current_page ? 'active' : ''}">
                                    <a class="page-link pagination-shift" href="#"
                                        data-header-id="${headerId}"
                                        data-shift="${shift}"
                                        data-page="${i}">${i}</a>
                                </li>`;
                                    }
                                    pgHtml += `</ul></nav>`;
                                }

                                html += `
                        <div class="mb-4">
                            <h5 class="mb-3">Shift ${shift}</h5>
                            <div class="table-responsive">
                                <table class="table table-bordered align-middle">
                                    <thead class="table-light" id="thead-${headerId}">
                                        <tr>${headers}</tr>
                                    </thead>
                                       <tbody id="tbody-${headerId}">
                                        <tr>${values}</tr>
                                    </tbody>
                                </table>
                            </div>
                              <div id="pagination-${headerId}" class="d-flex justify-content-end">${pgHtml} </div>
                        </div>`;
                            });
                        }

                        $('#shift-result').html(html).show();
                    },
                    error: function() {
                        $('#shift-result').html('<p class="text-danger">Gagal mengambil data.</p>').show();
                    }
                });
            });

            $(document).on('click', '.pagination-shift', function(e) {
                e.preventDefault();

                const headerId = $(this).data('header-id');
                const shift = $(this).data('shift');
                const page = $(this).data('page');

                $.ajax({
                    url: '{{ url('/parameter/get-shift') }}',
                    method: 'GET',
                    data: {
                        mesin_id: $('#mesin_id').val(),
                        tanggal: $('#Tanggal').val(),
                        header_id: headerId,
                        page: page
                    },
                    success: function(response) {
                        const result = response[shift];
                        let headers = '';
                        let values = '';
                        let pgHtml = '';

                        const entries = response[shift];
                        entries.data.forEach(function(row) {
                            headers += `<th>${row.nama_parameter ?? '-'}</th>`;
                            values += `<td>${row.value_parameter ?? '-'}</td>`;
                        });

                        // Update header + isi sekaligus
                        $(`#thead-${headerId}`).html(`<tr>${headers}</tr>`);
                        $(`#tbody-${headerId}`).html(`<tr>${values}</tr>`);

                        // Update active page
                        $(`#pagination-${headerId} .page-item`).removeClass('active');
                        $(`#pagination-${headerId} .page-link[data-page="${page}"]`).parent().addClass(
                            'active');
                    }
                });
            });
    //     $('#mesin_id, #Tanggal').on('change', function() {
    //         const mesin_id = $('#mesin_id').val();
    //         const tanggal = $('#Tanggal').val();

    //         if (!mesin_id || !tanggal) return;

    //         $('#shift-result').html(`
    //     <div class="text-center py-4">
    //         <div class="spinner-border text-primary" role="status">
    //             <span class="visually-hidden">Loading...</span>
    //         </div>
    //         <p class="text-muted mt-2">Sedang mengambil data...</p>
    //     </div>
    // `).show();

    //         Swal.fire({
    //             title: 'Mohon tunggu...',
    //             text: 'Sedang mengambil data',
    //             allowOutsideClick: false,
    //             allowEscapeKey: false,
    //             didOpen: () => {
    //                 Swal.showLoading();
    //             }
    //         });

    //         $.ajax({
    //             url: '{{ url('/parameter/get-shift') }}',
    //             method: 'GET',
    //             data: {
    //                 mesin_id,
    //                 tanggal
    //             },
    //             success: function(response) {
    //                 Swal.close();
    //                 let html = '';

    //                 if (Object.keys(response).length === 0) {
    //                     html = '<p class="text-muted">Tidak ada data.</p>';
    //                 } else {
    //                     $.each(response, function(shift, entries) {
    //                         let headers = '';
    //                         let values = '';

    //                         entries.data.forEach(function(row) {
    //                             headers += `<th>${row.nama_parameter ?? '-'}</th>`;
    //                             values += `<td>${row.value_parameter ?? '-'}</td>`;
    //                         });

    //                         html += `
    //                     <div class="mb-4">
    //                         <h5 class="mb-3">Shift ${shift}</h5>
    //                         <div class="table-responsive">
    //                             <table class="table table-bordered align-middle">
    //                                 <thead class="table-light" id="thead-${entries.header_id}">
    //                                     <tr>${headers}</tr>
    //                                 </thead>
    //                                 <tbody id="tbody-${entries.header_id}"
    //                                        data-header-id="${entries.header_id}"
    //                                        data-shift="${shift}">
    //                                     <tr>${values}</tr>
    //                                 </tbody>
    //                             </table>
    //                         </div>
    //                     </div>`;
    //                     });


    //                     const firstShift = Object.keys(response)[0];
    //                     const pg = response[firstShift].pagination;
    //                     let pgHtml = '';

    //                     if (pg.last_page > 1) {
    //                         pgHtml += `<nav><ul class="pagination justify-content-end mt-2">`;
    //                         for (let i = 1; i <= pg.last_page; i++) {
    //                             pgHtml += `
    //                         <li class="page-item ${i === pg.current_page ? 'active' : ''}">
    //                             <a class="page-link pagination-global" href="#" data-page="${i}">${i}</a>
    //                         </li>`;
    //                         }
    //                         pgHtml += `</ul></nav>`;
    //                     }

    //                     html +=
    //                         `<div id="pagination-global" class="d-flex justify-content-end">${pgHtml}</div>`;
    //                 }

    //                 $('#shift-result').html(html).show();
    //             },
    //             error: function() {
    //                 $('#shift-result').html('<p class="text-danger">Gagal mengambil data.</p>').show();
    //             }
    //         });
    //     });

    //     $(document).on('click', '.pagination-global', function(e) {
    //         e.preventDefault();
    //         const page = $(this).data('page');

    //         $('tbody[data-header-id]').each(function() {
    //             const headerId = $(this).data('header-id');
    //             const shift = $(this).data('shift');

    //             $.ajax({
    //                 url: '{{ url('/parameter/get-shift') }}',
    //                 method: 'GET',
    //                 data: {
    //                     mesin_id: $('#mesin_id').val(),
    //                     tanggal: $('#Tanggal').val(),
    //                     header_id: headerId,
    //                     page: page
    //                 },
    //                 success: function(response) {
    //                     const entries = response[shift];
    //                     let headers = '';
    //                     let values = '';

    //                     entries.data.forEach(function(row) {
    //                         headers += `<th>${row.nama_parameter ?? '-'}</th>`;
    //                         values += `<td>${row.value_parameter ?? '-'}</td>`;
    //                     });

    //                     $(`#thead-${headerId}`).html(`<tr>${headers}</tr>`);
    //                     $(`#tbody-${headerId}`).html(`<tr>${values}</tr>`);
    //                 }
    //             });
    //         });

    //         // Update active page
    //         $('#pagination-global .page-item').removeClass('active');
    //         $(`#pagination-global .page-link[data-page="${page}"]`).parent().addClass('active');
    //     });
    </script>

    {{-- <style>
        .hover-shadow:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
        }

        .transition-all {
            transition: all 0.3s ease;
        }
    </style> --}}
@endpush