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

@section('content')
    <style>
        .trsprm-list-page {
            --list-accent: #00a8b0
        }

        .trsprm-list-page .filter-card,
        .trsprm-list-page .building-card {
            border: 0;
            border-radius: 1rem
        }

        .building-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem
        }

        .building-icon {
            display: grid;
            place-items: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: .75rem;
            background: rgba(0, 183, 189, .12);
            color: #008d94
        }

        .case-badge {
            font-size: .72rem
        }

        .record-mobile {
            display: none
        }

        .detail-section-title {
            padding: .6rem .75rem;
            border-radius: .5rem;
            background: #f4f6f8;
            font-weight: 700
        }

        .detail-value {
            white-space: pre-wrap;
            word-break: break-word
        }

        .pivot-wrap {
            overflow-x: auto;
            border: 1px solid #e9ecef;
            border-radius: .75rem
        }

        .pivot-table {
            width: max-content;
            min-width: 100%;
            margin: 0
        }

        .pivot-table th {
            min-width: 9rem;
            white-space: normal;
            vertical-align: middle
        }

        .pivot-table th:first-child {
            min-width: 6rem;
            position: sticky;
            left: 0;
            z-index: 2
        }

        .pivot-table td {
            min-width: 9rem;
            vertical-align: top
        }

        .pivot-table td:first-child {
            min-width: 6rem;
            position: sticky;
            left: 0;
            z-index: 1;
            background: #fff;
            font-weight: 700
        }

        .trsprm-list-page .thead-light,
        #detailModal .thead-light {
            background-color: #00b7bd4f
        }

        .trsprm-list-page .thead-light th,
        #detailModal .thead-light th {
            color: #344767;
            font-size: .75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .025em;
            vertical-align: middle;
            border-bottom-width: 1px
        }

        @media(max-width:767.98px) {
            .trsprm-list-page {
                padding: .75rem !important
            }

            .trsprm-list-page .card-body {
                padding: 1rem
            }

            .filter-actions {
                display: grid !important;
                grid-template-columns: 1fr 1fr;
                gap: .75rem
            }

            .filter-actions .btn {
                width: 100%;
                min-height: 46px;
                margin: 0 !important
            }

            .form-control,
            .form-select {
                min-height: 46px;
                font-size: 16px
            }

            .records-table {
                display: none
            }

            .record-mobile {
                display: block
            }

            .record-card {
                border: 1px solid #e9ecef;
                border-radius: .85rem;
                padding: 1rem;
                margin-bottom: .75rem
            }

            .record-card:last-child {
                margin-bottom: 0
            }

            .record-meta {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: .65rem;
                margin: .85rem 0
            }

            .record-meta small {
                display: block;
                color: #8392ab
            }

            .record-meta strong {
                display: block;
                font-size: .88rem
            }

            .building-heading {
                align-items: flex-start
            }

            .modal-dialog {
                margin: .5rem
            }

            .detail-table thead {
                display: none
            }

            .detail-table tr {
                display: grid;
                border: 1px solid #e9ecef;
                border-radius: .65rem;
                margin-bottom: .65rem;
                padding: .65rem
            }

            .detail-table td {
                display: block;
                border: 0 !important;
                padding: .2rem !important
            }

            .detail-table td:first-child {
                font-weight: 700
            }

            .detail-table td[data-label]::before {
                content: attr(data-label) ': ';
                font-weight: 600;
                color: #8392ab
            }
        }

        /* Perpanjang tinggi dropdown ke bawah Select2 agar lebih banyak item terlihat tanpa scroll sempit */
        .select2-container--default .select2-results>.select2-results__options {
            max-height: 380px !important;
            overflow-y: auto;
        }

        /* Penataan item opsi dropdown agar rapi dan nyaman dibaca */
        .select2-container--default .select2-results__option {
            padding: 8px 12px;
            font-size: 0.875rem;
            line-height: 1.4;
        }

        .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
            color: #fff;
        }

        /* Styling popup dropdown box */
        .select2-dropdown {
            border: 1px solid #d2d6da;
            border-radius: 0.5rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
            z-index: 1060;
        }
    </style>

    @include('layouts.navbars.auth.topnav', ['title' => $title_menu])
    <div class="container-fluid py-3 trsprm-list-page">

        @include('components.alert')

        <div class="card filter-card shadow-sm mb-4">
            <div class="card-body p-4">
                @php
                    $currentRoles = array_filter(
                        array_map('trim', explode(',', strtolower((string) (session('user')->idroles ?? '')))),
                    );
                    $canAddParameter =
                        in_array('admins', $currentRoles, true) || (string) ($authorize->add ?? '0') === '1';
                @endphp
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                    <div>
                        <h5 class="mb-1">Riwayat {{ $title_menu }}</h5>
                        <p class="text-sm text-muted mb-0">Semua input parameter dikelompokkan berdasarkan gedung.</p>
                    </div>
                    @if ($canAddParameter)
                        <a class="btn btn-primary mb-0" href="{{ URL::to($url_menu . '/add') }}" id="btn-add-parameter">
                            <i class="fas fa-plus me-1"></i><span class="font-weight-bold">Tambah</span>
                        </a>
                    @endif
                </div>
                <hr class="horizontal dark mt-0 mb-3">
                <form id="filter-form">
                    @php
                        // Filter Shift dan Group hanya relevan untuk Gedung C.
                        // Jika role pengguna yang login tidak memiliki hak akses ke Gedung C (seperti role Gedung B / Gedung A),
                        // maka filter Shift dan Group tidak perlu ditampilkan di form.
                        $hasC = !empty($has_gedung_c_access);
                    @endphp
                    <div class="row g-3">
                        <div class="col-12 col-md-2">
                            <label for="filter_tanggal" class="form-label fw-semibold">Tanggal</label>
                            <input type="date" class="form-control" id="filter_tanggal" value="{{ request('tanggal') }}">
                        </div>
                        <div class="col-12 col-md-2">
                            <label for="filter_gedung" class="form-label fw-semibold">Gedung</label>
                            <select class="form-select" id="filter_gedung">
                                <option value="" data-is-gedung-c="1">Semua Gedung</option>
                                @foreach ($filter_buildings as $b)
                                    @php
                                        $bName = strtolower(trim((string) $b->nama_gedung));
                                        $isBldC =
                                            $bName === 'c' ||
                                            str_contains($bName, 'gedung c') ||
                                            str_contains($bName, 'building c');
                                    @endphp
                                    <option value="{{ $b->gedung_id }}" data-is-gedung-c="{{ $isBldC ? '1' : '0' }}"
                                        {{ (string) request('gedung_id') === (string) $b->gedung_id ? 'selected' : '' }}>
                                        {{ $b->nama_gedung }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6">
                            <label for="filter_profile" class="form-label fw-semibold">Profil Parameter</label>
                            <select class="form-select custom-select" id="filter_profile">
                                <option value="">Semua Profil</option>
                                @foreach ($grouped_profiles as $pGroup)
                                    <option value="{{ $pGroup->group_key }}" data-building-id="{{ $pGroup->gedung_id }}"
                                        data-profile-ids="{{ $pGroup->profile_ids }}">
                                        {{ $pGroup->label_list ?? $pGroup->label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-2">
                            <label for="filter_line" class="form-label fw-semibold">Line</label>
                            <select class="form-select custom-select" id="filter_line" disabled>
                                <option value="">Semua Line</option>
                            </select>
                        </div>
                        @if ($hasC)
                            <div class="col-6 col-md-2 filter-shift-group-col">
                                <label for="filter_shift" class="form-label fw-semibold">Shift</label>
                                <select class="form-select" id="filter_shift">
                                    <option value="">Semua</option>
                                    @foreach ($shift as $option)
                                        <option value="{{ $option->value }}"
                                            {{ (string) request('shift') === (string) $option->value ? 'selected' : '' }}>
                                            {{ $option->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-6 col-md-2 filter-shift-group-col">
                                <label for="filter_group" class="form-label fw-semibold">Group</label>
                                <select class="form-select" id="filter_group">
                                    <option value="">Semua</option>
                                    @foreach ($group as $option)
                                        <option value="{{ $option->value }}"
                                            {{ (string) request('group') === (string) $option->value ? 'selected' : '' }}>
                                            {{ $option->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                    </div>
                    <div class="d-flex justify-content-end mt-3 filter-actions">
                        <button type="button" class="btn btn-outline-secondary mb-0" id="btn-reset"><i
                                class="fas fa-rotate-left me-1"></i> Reset</button>
                        <button type="button" class="btn btn-info text-white mb-0 ms-2" id="btn-filter"><i
                                class="fas fa-search me-1"></i> Terapkan</button>
                    </div>
                </form>
            </div>
        </div>

        {{-- 1. Looping setiap gedung yang memiliki data transaksi aktif (berdasarkan display_buildings dari controller) --}}
        @forelse ($display_buildings as $building)
            @php
                $buildingName = strtolower(trim((string) $building->nama_gedung));
                // Cek apakah gedung ini adalah Gedung C (karena Gedung C memiliki kolom Shift/Group dan Informasi Testing)
                $isGedungC =
                    $buildingName === 'c' ||
                    str_contains($buildingName, 'gedung c') ||
                    str_contains($buildingName, 'building c');
            @endphp
            <section class="card building-card shadow-sm mb-4" id="building-card-{{ $building->id }}" data-gedung-id="{{ $building->id }}">
                {{-- Header Card: Menampilkan Nama Gedung, Total Transaksi, Total Parameter, dan Total Roll --}}
                <div class="card-header bg-white border-0 p-3 p-md-4">
                    <div class="building-heading d-flex justify-content-between align-items-center w-100">
                        <div class="d-flex align-items-center gap-3">
                            <span class="building-icon"><i class="fas fa-building"></i></span>
                            <div>
                                <h5 class="mb-0">{{ $building->nama_gedung }}</h5>
                                <small class="text-muted">
                                    <span
                                        id="total-trx-{{ $building->id }}">{{ number_format($building->total_trx, 0, ',', '.') }}</span>
                                    transaksi ·
                                    <span
                                        id="total-param-{{ $building->id }}">{{ number_format($building->total_param, 0, ',', '.') }}</span>
                                    nilai parameter
                                </small>
                            </div>
                        </div>
                        <span class="badge bg-primary"
                            id="total-roll-{{ $building->id }}">{{ number_format($building->total_roll, 0, ',', '.') }}
                            roll</span>
                    </div>
                </div>
                <div class="card-body pt-0 px-3 px-md-4 pb-4">
                    {{-- Container Tabel Desktop: tbody dikosongkan karena data di-render dinamis via DataTables AJAX --}}
                    <div class="table-responsive records-table" style="overflow-x: auto;">
                        <table class="table display align-middle mb-0 trsprm-data-table w-100"
                            id="table-gedung-{{ $building->id }}" data-gedung-id="{{ $building->id }}"
                            data-is-gedung-c="{{ $isGedungC ? '1' : '0' }}">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th>Tanggal</th>
                                    <th>Profil / Line</th>

                                    @if ($isGedungC)
                                        <th>Shift / Group</th>
                                        <th>Informasi Testing</th>
                                    @endif

                                    <th>Dibuat</th>
                                    <th class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>

                    {{-- Container Kartu Mobile: Diisi oleh renderMobileCards() saat pagination DataTables berganti halaman --}}
                    <div class="record-mobile" id="mobile-cards-{{ $building->id }}">
                    </div>
                </div>
            </section>
        @empty
            {{-- Tampilan fallback jika tidak ada transaksi yang ditemukan --}}
            <div class="card building-card shadow-sm">
                <div class="card-body text-center py-5"><i class="fas fa-inbox fa-2x text-muted mb-3"></i>
                    <h6>Belum ada data parameter</h6>
                    <p class="text-sm text-muted mb-0">Ubah filter atau mulai input parameter baru.</p>
                </div>
            </div>
        @endforelse
    </div>

    <div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title mb-0">Detail Parameter</h5><small id="detail-subtitle"
                            class="text-muted"></small>
                    </div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body">
                    <div id="detail-content">
                        <div class="text-center py-5"><i class="fas fa-spinner fa-spin"></i> Memuat...</div>
                    </div>
                </div>
                <div class="modal-footer"><button type="button" class="btn btn-secondary mb-0"
                        data-bs-dismiss="modal">Tutup</button></div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(function() {
            // Inisialisasi DataTables Server-Side untuk setiap tabel gedung
            $('.trsprm-data-table').each(function() {
                var tableEl = $(this);
                var gedungId = tableEl.data('gedung-id');
                var isGedungC = tableEl.data('is-gedung-c') == '1';

                // 1. Definisi kolom-kolom DataTables
                var columns = [{
                        data: 'tanggal_html',
                        name: 'capture.tgl_penginputan'
                    },
                    {
                        data: 'profil_line_html',
                        name: 'parameter_set.nama_parameter_set'
                    }
                ];

                // Tambahkan kolom khusus jika tabel ini adalah Gedung C
                if (isGedungC) {
                    columns.push({
                        data: 'shift_group_html',
                        orderable: false,
                        searchable: false
                    });
                    columns.push({
                        data: 'info_testing_html',
                        orderable: false,
                        searchable: false
                    });
                }

                columns.push({
                    data: 'dibuat_html',
                    name: 'capture.user_create'
                });
                columns.push({
                    data: 'aksi_html',
                    orderable: false,
                    searchable: false,
                    className: 'text-center'
                });

                // 2. Setup DataTables Server-Side dengan dom bawaan 'frtip' (sama dengan di srcprm)
                tableEl.DataTable({
                    serverSide: true, // Mengaktifkan server-side processing via AJAX
                    processing: true, // Menampilkan indikator loading saat me-request data
                    scrollX: true, // Scroll horizontal jika kolom lebar
                    autoWidth: false, // Mencegah kalkulasi lebar otomatis yang memakan waktu
                    destroy: true, // Memperbolehkan inisialisasi ulang jika diperlukan
                    lengthChange: true, // Memperbolehkan user mengganti jumlah data per halaman (10, 25, dll)
                    searching: true, // Mengaktifkan fitur pencarian global (Cari Cepat:)
                    paging: true, // Mengaktifkan paginasi DataTables bawaan
                    info: true, // Menampilkan teks informasi "Menampilkan 1 sampai 10..."
                    ordering: true, // Mengaktifkan pengurutan kolom
                    order: [
                        [0, 'desc']
                    ], // Default sorting: kolom tanggal descending (terbaru di atas)
                    pageLength: 10, // Default 10 baris per halaman
                    dom: 'frtip', // Layout DataTables: Filter (f), Processing (r), Table (t), Info (i), Paging (p)
                    ajax: {
                        url: '{{ URL::to('/') }}/trsprm/data-table',
                        type: 'GET',
                        data: function(d) {
                            // Kirim parameter filter form bersama request AJAX DataTables
                            d.gedung_id = gedungId;
                            d.tanggal = $('#filter_tanggal').val();

                            // Filter profil parameter dan line
                            var selectedLine = $('#filter_line').val();
                            var selectedProfileKey = $('#filter_profile').val();
                            if (selectedLine) {
                                // Jika Line spesifik dipilih
                                d.parameter_profile_id = selectedLine;
                            } else if (selectedProfileKey) {
                                // Jika Profil dipilih dan Line "Semua Line", kirim seluruh ID profil dalam grup
                                var grp = groupedProfiles.find(g => String(g.group_key) === String(selectedProfileKey));
                                d.profile_ids = grp ? grp.profile_ids : ($('#filter_profile option:selected').data('profile-ids') || '');
                            }

                            d.shift = $('#filter_shift').val();
                            d.group = $('#filter_group').val();
                        }
                    },
                    columns: columns,
                    columnDefs: [{
                        defaultContent: "",
                        targets: "_all"
                    }],
                    // Teks bahasa Indonesia 100% sama dengan di modul srcprm
                    language: {
                        emptyTable: "Tidak ada data yang tersedia",
                        info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                        infoEmpty: "Menampilkan 0 data",
                        infoFiltered: "(difilter dari _MAX_ total data)",
                        lengthMenu: "Tampilkan _MENU_ data",
                        search: "Cari Cepat:",
                        paginate: {
                            first: "Pertama",
                            last: "Terakhir",
                            next: "Selanjutnya",
                            previous: "Sebelumnya"
                        }
                    },
                    // Callback setelah data berhasil di-load dan di-render di tabel
                    drawCallback: function(settings) {
                        var json = settings.json;
                        if (json) {
                            // Perbarui angka total transaksi di header card gedung
                            if (json.recordsFiltered !== undefined) {
                                $('#total-trx-' + gedungId).text(json.recordsFiltered
                                    .toLocaleString('id-ID'));
                            }
                            // Render kartu untuk tampilan mobile (responsif)
                            renderMobileCards(gedungId, json.mobile_data || [], isGedungC);
                        }
                    }
                });
            });

            // Data grup profil parameter dari controller
            const groupedProfiles = @json($grouped_profiles);

            // Inisialisasi Select2 untuk Profil Parameter (dapat diketik / pencarian cepat sesuai MSJFramework)
            $('#filter_profile').select2({
                placeholder: 'Semua Profil',
                allowClear: true,
                width: '100%'
            });

            // Inisialisasi Select2 untuk Line produksi
            $('#filter_line').select2({
                placeholder: 'Semua Line',
                allowClear: true,
                width: '100%'
            });

            // Fungsi mengisi pilihan Line berdasarkan Profil Parameter terpilih
            function syncLines() {
                const selectedKey = $('#filter_profile').val();
                const lineSelect = $('#filter_line');
                const currentLineVal = lineSelect.val();

                lineSelect.empty().append(new Option('Semua Line', ''));

                if (!selectedKey) {
                    lineSelect.prop('disabled', true).trigger('change.select2');
                    return;
                }

                const group = groupedProfiles.find(g => String(g.group_key) === String(selectedKey));
                if (group && group.lines && group.lines.length > 0) {
                    group.lines.forEach(function(l) {
                        const opt = $('<option>', {
                            value: l.profile_id,
                            text: l.nama_line,
                            'data-line-id': l.line_id
                        });
                        lineSelect.append(opt);
                    });

                    lineSelect.prop('disabled', false);
                    if (currentLineVal && lineSelect.find('option[value="' + currentLineVal + '"]').length > 0) {
                        lineSelect.val(currentLineVal);
                    } else {
                        lineSelect.val('');
                    }
                    lineSelect.trigger('change.select2');
                } else {
                    lineSelect.prop('disabled', true).trigger('change.select2');
                }
            }

            // Flag untuk mendeteksi apakah pemilihan gedung di-set secara otomatis dari dropdown Profil Parameter
            var isAutoGedung = false;
            // Flag untuk mencegah event change berulang saat sinkronisasi profil secara programatik
            var isSyncingProfiles = false;

            // Fungsi sinkronisasi dropdown Profil Parameter dan filter Shift/Group berdasarkan pilihan Gedung
            function syncProfiles(forceReset = false) {
                isSyncingProfiles = true;
                const selectedGedungOpt = $('#filter_gedung option:selected');
                const building = String($('#filter_gedung').val() || '');
                const isGedungC = selectedGedungOpt.data('is-gedung-c') == '1' || !building;
                const profileSelect = $('#filter_profile');
                const currentProfileVal = forceReset ? '' : profileSelect.val();

                profileSelect.empty().append(new Option('Semua Profil', ''));

                groupedProfiles.forEach(function(g) {
                    if (!building || String(g.gedung_id) === building) {
                        const opt = $('<option>', {
                            value: g.group_key,
                            text: g.label_list || g.label,
                            'data-building-id': g.gedung_id,
                            'data-profile-ids': g.profile_ids
                        });
                        profileSelect.append(opt);
                    }
                });

                if (currentProfileVal && profileSelect.find('option[value="' + currentProfileVal + '"]').length > 0) {
                    profileSelect.val(currentProfileVal);
                } else {
                    profileSelect.val('');
                }
                profileSelect.trigger('change.select2');

                syncLines();

                // Sembunyikan filter shift dan group jika gedung yang dipilih bukan Gedung C
                if ($('.filter-shift-group-col').length > 0) {
                    if (isGedungC) {
                        $('.filter-shift-group-col').show();
                    } else {
                        $('.filter-shift-group-col').hide();
                        $('#filter_shift').val('');
                        $('#filter_group').val('');
                    }
                }
                isSyncingProfiles = false;
            }

            // Fungsi untuk mengatur visibilitas kartu gedung dan me-reload DataTables
            // Jika memilih parameter gedung tertentu (misal Gedung B), kartu gedung lain (Gedung A, Gedung C, dll)
            // otomatis disembunyikan sehingga hanya fokus ke tabel gedung tersebut.
            // Jika filter dikosongkan ("Semua Gedung"), seluruh tabel gedung dimunculkan kembali.
            function updateBuildingVisibilityAndReload() {
                var selectedGedung = String($('#filter_gedung').val() || '');
                var selectedProfileKey = $('#filter_profile').val();

                // Jika Gedung belum dipilih di dropdown Gedung, namun Profil Parameter dipilih:
                // Deteksi gedung asal profil tersebut dari data groupedProfiles
                if (!selectedGedung && selectedProfileKey) {
                    var group = groupedProfiles.find(g => String(g.group_key) === String(selectedProfileKey));
                    if (group && group.gedung_id) {
                        selectedGedung = String(group.gedung_id);
                        $('#filter_gedung').val(selectedGedung);
                        isAutoGedung = true;
                    }
                }

                // Sesuaikan visibilitas filter Shift dan Group (khusus Gedung C)
                if ($('.filter-shift-group-col').length > 0) {
                    var selectedGedungOpt = $('#filter_gedung option:selected');
                    var isGedungC = selectedGedungOpt.data('is-gedung-c') == '1' || !selectedGedung;
                    if (isGedungC) {
                        $('.filter-shift-group-col').show();
                    } else {
                        $('.filter-shift-group-col').hide();
                        $('#filter_shift').val('');
                        $('#filter_group').val('');
                    }
                }

                // Tampilkan hanya kartu gedung yang sesuai, sembunyikan kartu gedung lainnya
                $('.building-card').each(function() {
                    var cardGedungId = String($(this).data('gedung-id') || $(this).find('.trsprm-data-table').data('gedung-id'));
                    if (!selectedGedung || selectedGedung === cardGedungId) {
                        $(this).show();
                        $(this).find('.trsprm-data-table').DataTable().ajax.reload();
                    } else {
                        $(this).hide();
                    }
                });
            }

            // Event saat dropdown Gedung berubah
            $('#filter_gedung').on('change', function() {
                isAutoGedung = false; // User secara manual memilih dropdown Gedung
                syncProfiles(false);
                updateBuildingVisibilityAndReload();
            });

            // Event saat dropdown Profil Parameter berubah
            $('#filter_profile').on('change', function() {
                syncLines();

                // Abaikan jika perubahan berasal dari sinkronisasi programatik
                if (isSyncingProfiles) {
                    return;
                }

                var selectedKey = $(this).val();
                if (selectedKey) {
                    var group = groupedProfiles.find(g => String(g.group_key) === String(selectedKey));
                    if (group && group.gedung_id) {
                        var targetGedungId = String(group.gedung_id);
                        if ($('#filter_gedung').val() !== targetGedungId) {
                            $('#filter_gedung').val(targetGedungId);
                            isAutoGedung = true;
                        }
                    }
                } else if (isAutoGedung) {
                    // Jika profil dikosongkan (pilih "Semua Profil") dan gedung sebelumnya di-set otomatis oleh profil, kembalikan ke "Semua Gedung"
                    $('#filter_gedung').val('');
                    isAutoGedung = false;
                }

                // Fokus ke gedung terpilih (sembunyikan gedung lainnya) dan reload DataTables
                updateBuildingVisibilityAndReload();
            });

            // Event saat dropdown Line produksi berubah
            $('#filter_line').on('change', function() {
                // Saat opsi line berubah, reload tabel pada gedung yang sedang tampil
                $('.building-card:visible .trsprm-data-table').each(function() {
                    $(this).DataTable().ajax.reload();
                });
            });

            syncProfiles(false);

            // Handler Tombol Terapkan: Terapkan filter gedung & profil, sembunyikan gedung lain, dan reload DataTables
            $('#btn-filter').on('click', function() {
                updateBuildingVisibilityAndReload();
            });

            // Handler Tombol Reset: Kosongkan seluruh form filter dan tampilkan kembali SEMUA tabel gedung (Gedung A, B, C, dll)
            $('#btn-reset').on('click', function() {
                isAutoGedung = false;
                $('#filter_tanggal').val('');
                $('#filter_gedung').val('');
                $('#filter_profile').val('');
                $('#filter_line').val('');
                $('#filter_shift').val('');
                $('#filter_group').val('');
                syncProfiles(true); // Reset paksa Profil Parameter dan Line ke opsi Semua
                $('.building-card').show(); // Tampilkan KEMBALI SEMUA kartu gedung (Gedung A, Gedung B, Gedung C, dll)
                $('.trsprm-data-table').each(function() {
                    $(this).DataTable().ajax.reload(); // Reload data awal untuk seluruh gedung
                });
            });
        });

        // Fungsi render kartu tampilan versi mobile (responsif saat diakses via smartphone)
        function renderMobileCards(gedungId, items, isGedungC) {
            var container = $('#mobile-cards-' + gedungId);
            if (!items || items.length === 0) {
                container.html('<div class="text-center py-4 text-muted">Tidak ada data</div>');
                return;
            }
            var html = '';
            items.forEach(function(batch) {
                var rollBadge = batch.total_roll > 0 ?
                    '<span class="badge bg-info text-white align-self-start">ROLL · ' + batch.total_roll +
                    '</span>' :
                    '<span class="badge bg-secondary align-self-start">FORM</span>';

                var testingHtml = '';
                if (isGedungC) {
                    testingHtml = '<div><small>Petugas Cek</small><strong>' + escapeHtml(batch.petugas_cek || '-') +
                        '</strong></div>' +
                        '<div><small>Roll/Jumbo Dites</small><strong>' + escapeHtml(batch.tested_roll_jumbo ||
                        '-') + '</strong></div>';
                }

                html += '<article class="record-card mb-3">' +
                    '<div class="d-flex justify-content-between gap-2">' +
                    '<div><strong>' + escapeHtml(batch.nama_parameter_set) + '</strong>' +
                    '<div class="text-xs text-muted">' + escapeHtml(batch.nama_line || 'Semua Line') + ' · Item ' +
                    escapeHtml(batch.item_group) + '</div>' +
                    '</div>' +
                    rollBadge +
                    '</div>' +
                    '<div class="record-meta">' +
                    '<div><small>Tanggal</small><strong>' + escapeHtml(batch.tanggal) + '</strong></div>' +
                    '<div><small>Shift / Group</small><strong>' + escapeHtml(batch.shift || '-') + ' / ' +
                    escapeHtml(batch.group || '-') + '</strong></div>' +
                    '<div><small>Total Parameter</small><strong>' + batch.total_param + '</strong></div>' +
                    '<div><small>Penginput</small><strong>' + escapeHtml(batch.user_create || '-') +
                    '</strong></div>' +
                    testingHtml +
                    '</div>' +
                    '<button type="button" class="btn btn-info text-white w-100 mb-0" onclick="detailBatch(this)" data-capture-id="' +
                    batch.id + '" data-title="' + escapeHtml(batch.nama_parameter_set) + '">' +
                    '<i class="fas fa-eye me-1"></i> Lihat Detail' +
                    '</button>' +
                    '</article>';
            });
            container.html(html);
        }

        function escapeHtml(value) {
            return $('<div>').text(value == null || value === '' ? '-' : value).html()
        }

        function pivotColumns(rows) {
            const seen = new Set();
            return rows.reduce((columns, row) => {
                const name = String(row.nama_parameter || '-');
                if (!seen.has(name)) {
                    seen.add(name);
                    columns.push(name)
                }
                return columns
            }, []);
        }

        function pivotMap(rows) {
            return rows.reduce((values, row) => {
                values[String(row.nama_parameter || '-')] = row.value;
                return values
            }, {});
        }

        function pivotTable(columns, records, firstHeader) {
            if (!columns.length || !records.length)
                return '<p class="text-center text-muted py-4">Tidak ada parameter.</p>';
            let html =
                '<div class="pivot-wrap"><table class="table table-bordered table-sm pivot-table"><thead class="thead-light" style="background-color: #00b7bd4f;"><tr><th>' +
                escapeHtml(firstHeader) + '</th>';
            columns.forEach(column => {
                html += '<th>' + escapeHtml(column) + '</th>'
            });
            html += '</tr></thead><tbody>';
            records.forEach(record => {
                html += '<tr><td>' + escapeHtml(record.label) + '</td>';
                columns.forEach(column => {
                    html += '<td class="detail-value">' + escapeHtml(record.values[column]) + '</td>'
                });
                html += '</tr>'
            });
            return html + '</tbody></table></div>';
        }

        function detailBatch(btn) {
            const captureId = $(btn).data('capture-id');
            $('#detail-subtitle').text($(btn).data('title') || '');
            $('#detail-content').html(
                '<div class="text-center py-5"><i class="fas fa-spinner fa-spin"></i> Memuat...</div>');
            $('#detailModal').modal('show');
            $.get('{{ URL::to('/') }}/trsprm/get-detail-batch', {
                capture_id: captureId
            }).done(function(res) {
                if (res.status !== 'success') {
                    $('#detail-content').html('<div class="alert alert-warning mb-0">Data tidak ditemukan.</div>');
                    return;
                }
                const rows = res.data || [];
                const common = rows.filter(row => row.level !== 'roll');
                const rollRows = rows.filter(row => row.level === 'roll');
                const rolls = {};
                rollRows.forEach(row => {
                    const number = String(row.nomor_urut_roll || '-');
                    (rolls[number] || (rolls[number] = [])).push(row)
                });
                let html =
                    '<div class="detail-section-title mb-2">Parameter Umum <span class="badge bg-secondary float-end">' +
                    common.length + '</span></div>';
                html += pivotTable(pivotColumns(common), [{
                    label: 'Nilai',
                    values: pivotMap(common)
                }], 'Data');
                if (Object.keys(rolls).length) {
                    const rollColumns = pivotColumns(rollRows);
                    const rollRecords = Object.keys(rolls).sort((a, b) => {
                        const na = Number(a),
                            nb = Number(b);
                        return Number.isNaN(na) || Number.isNaN(nb) ? a.localeCompare(b) : na - nb
                    }).map(number => ({
                        label: 'Roll ' + number,
                        values: pivotMap(rolls[number])
                    }));
                    html +=
                        '<div class="detail-section-title mt-4 mb-2">Parameter per Roll <span class="badge bg-info text-white float-end">' +
                        rollRecords.length + ' roll</span></div>';
                    html += pivotTable(rollColumns, rollRecords, 'Roll');
                }
                $('#detail-content').html(html);
            }).fail(function(xhr) {
                const message = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message :
                    'Gagal mengambil detail parameter.';
                $('#detail-content').html('<div class="alert alert-danger mb-0">' + escapeHtml(message) + '</div>');
            });
        }
    </script>
@endpush