@extends('layouts.app')
@section('title', 'Tetapan Data Induk')
@section('content')
{{-- @include('layouts.sidebar') --}}

<div style="margin-left:261px; margin-top:107px; min-height:calc(100vh - 107px); background:#F4FFFF; padding:32px 40px 40px 40px;">
    <div style="max-width:1200px; margin:0; display:flex; flex-direction:column; gap:20px;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:40px;">
            <h2 style="font-family:'Poppins',sans-serif; font-size:2.3rem; font-weight:600; color:#222; margin:0;">Tetapan</h2>
            @include('layouts.date-clock')
        </div>
        <div style="background:#fff; border-radius:16px; box-shadow:0 4px 16px rgba(0,0,0,0.08); padding:32px 40px 40px 40px;">
            <div>
                <div style="display:flex; justify-content:space-between; align-items:flex-start;">
                    <div>
                        <div style="font-family:'Poppins',sans-serif; font-size:2rem; font-weight:600; color:#222;">Tetapan Data Induk</div>
                        <div id="subtitle" style="font-family:'Poppins',sans-serif; font-size:1.1rem; color:#888; margin-bottom:32px;">Data Induk - Kategori</div>
                    </div>
                    <button id="btn-tambah"
                        style="background:#0B6477; color:#fff; border:none; border-radius:4px; width:171px; height:35px; padding:10px 20px; display:flex; align-items:center; gap:10px; font-size:12px; font-family:'Poppins',sans-serif; font-weight:500; font-style:normal; line-height:15px; letter-spacing:0; cursor:pointer; margin-bottom:10px; margin-top:25px;">
                        <span style="font-size:1.3rem; font-weight:bold; display:inline-block; transform:translateY(-1px);"><img src="{{ asset('images/icon/plus.svg') }}" alt=""></span> Tambah Kategori
                    </button>
                </div>
                <div id="filter-btn-row" style="display:flex; gap:18px; margin-bottom:32px; margin-top:18px;">
                    <button id="btn-semua" type="button" style="background:#fff; color:#176D74; border:1.5px solid #176D74; border-radius:6px; padding:10px 32px; font-size:1rem; font-family:'Poppins',sans-serif; font-weight:500; cursor:pointer;">Semua</button>
                    <button id="btn-kategori" type="button" style="background:#176D74; color:#fff; border:none; border-radius:6px; padding:10px 32px; font-size:1rem; font-family:'Poppins',sans-serif; font-weight:500; cursor:pointer;">Kategori</button>
                    <button id="btn-keputusan" type="button" style="background:#fff; color:#176D74; border:1.5px solid #176D74; border-radius:6px; padding:10px 32px; font-size:1rem; font-family:'Poppins',sans-serif; font-weight:500; cursor:pointer;">Keputusan Akhir Mesyuarat</button>
                    <button id="btn-tahun" type="button" style="background:#fff; color:#176D74; border:1.5px solid #176D74; border-radius:6px; padding:10px 32px; font-size:1rem; font-family:'Poppins',sans-serif; font-weight:500; cursor:pointer;">Jumlah Tahun Pembaharuan</button>
                </div>
                <div id="table-container">
                    <!-- Table will be rendered here -->
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; margin-top:32px;">
                    <div style="font-family:'Poppins',sans-serif; font-size:1rem; color:#555;">
                        Rows per page:
                        <select style="border-radius:6px; border:1.5px solid #C7C7C7; padding:4px 12px; font-size:1rem;">
                            <option>10</option>
                            <option>25</option>
                            <option>50</option>
                        </select>
                    </div>
                    <div style="font-family:'Poppins',sans-serif; font-size:1rem; color:#555;">
                        1 - 3 of 3
                        <span style="margin-left:16px; color:#bbb; font-size:1.3rem; cursor:pointer;">&#60;</span>
                        <span style="margin-left:8px; color:#bbb; font-size:1.3rem; cursor:pointer;">&#62;</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal for Tambah/Kemaskini Kategori -->
<div id="modal-tambah-kategori" style="display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(34, 53, 53, 0.18); z-index:9999; align-items:center; justify-content:center;">
    <div style="background:#fff; border-radius:18px; width:700px; max-width:95vw; padding:48px 48px 32px 48px; position:relative; box-shadow:0 8px 32px rgba(0,0,0,0.12);">
        <div style="display:flex; justify-content:space-between; align-items:center;">
            <span id="modal-kategori-title" style="font-family:'Poppins',sans-serif; font-size:2rem; font-weight:600; color:#176D74;">Tambah Kategori</span>
            <span onclick="closeModalKategori()" style="font-size:2rem; color:#176D74; cursor:pointer; font-weight:400;">&#10005;</span>
        </div>
        <hr style="margin:18px 0 32px 0; border:0; border-top:1.5px solid #E5E5E5;">
        <form id="form-tambah-kategori" autocomplete="off">
            <div style="display:flex; flex-direction:column; gap:28px;">
                <div style="display:flex; align-items:center; gap:32px;">
                    <label style="width:120px; font-family:'Poppins',sans-serif; font-size:1.15rem; color:#222;">Jenis</label>
                    <input id="input-jenis" type="text" value="Kategori" readonly style="flex:1; background:#F8F8F8; border:1.5px solid #BFC7CE; border-radius:6px; padding:14px 18px; font-size:1.25rem; color:#4B5C6B;">
                </div>
                <div style="display:flex; align-items:center; gap:32px;">
                    <label style="width:120px; font-family:'Poppins',sans-serif; font-size:1.15rem; color:#222;">Data</label>
                    <input id="input-data" type="text" placeholder="Sila masukkan data" style="flex:1; background:#F8F8F8; border:1.5px solid #BFC7CE; border-radius:6px; padding:14px 18px; font-size:1.25rem; color:#4B5C6B;">
                </div>
                <div style="display:flex; align-items:center; gap:32px;">
                    <label style="width:120px; font-family:'Poppins',sans-serif; font-size:1.15rem; color:#222;">Kategori</label>
                    <input id="input-kategori" type="text" placeholder="Sila masukkan kategori" style="flex:1; background:#F8F8F8; border:1.5px solid #BFC7CE; border-radius:6px; padding:14px 18px; font-size:1.25rem; color:#4B5C6B;">
                </div>
            </div>
            <hr style="margin:38px 0 24px 0; border:0; border-top:1.5px solid #E5E5E5;">
            <div style="display:flex; justify-content:space-between; align-items:center;">
                <button type="button" onclick="closeModalKategori()" style="background:#fff; color:#176D74; border:2px solid #176D74; border-radius:8px; padding:12px 38px; font-size:1.25rem; font-family:'Poppins',sans-serif; font-weight:500; cursor:pointer;">Tutup</button>
                <button id="btn-modal-submit" type="submit" style="background:#176D74; color:#fff; border:none; border-radius:8px; padding:12px 48px; font-size:1.25rem; font-family:'Poppins',sans-serif; font-weight:500; cursor:pointer;">Tambah</button>
            </div>
        </form>
    </div>
</div>
<script>
const tableData = {
    semua: [
        { jenis: 'Kategori', data: 'LB5 / 600-5/5', kategori: 'A', status: 'Aktif' },
        { jenis: 'Kategori', data: 'LB1 / 600-5/1', kategori: 'B', status: 'Tidak Aktif' },
        { jenis: 'Keputusan Akhir Mesyuarat', data: 'Batal', kategori: 'B', status: 'Tidak Aktif' },
        { jenis: 'Jumlah Tahun Pembaharuan', data: '2', kategori: 'A', status: 'Aktif' }
    ],
    kategori: [
        { jenis: 'Kategori', data: 'LB5 / 600-5/5', kategori: 'A', status: 'Aktif' },
        { jenis: 'Kategori', data: 'LB1 / 600-5/1', kategori: 'B', status: 'Tidak Aktif' }
    ],
    keputusan: [
        { jenis: 'Keputusan Akhir Mesyuarat', data: 'Batal', kategori: 'B', status: 'Tidak Aktif' }
    ],
    tahun: [
        { jenis: 'Jumlah Tahun Pembaharuan', data: '2', kategori: 'A', status: 'Aktif' }
    ]
};

let currentType = 'semua'; // Track current tab

function renderTable(type) {
    let rows = '';
    let data = [];
    let subtitle = '';
    if (type === 'semua') {
        data = tableData.semua;
        subtitle = 'Data Induk - Semua';
    } else if (type === 'kategori') {
        data = tableData.kategori;
        subtitle = 'Data Induk - Kategori';
    } else if (type === 'keputusan') {
        data = tableData.keputusan;
        subtitle = 'Data Induk - Keputusan Akhir Mesyuarat';
    } else if (type === 'tahun') {
        data = tableData.tahun;
        subtitle = 'Data Induk - Jumlah Tahun Pembaharuan';
    }
    data.forEach((row, idx) => {
        const isAktif = row.status === 'Aktif';
        rows += `<tr style="border-bottom:1px solid #E5E5E5;">
            <td style="padding:16px 8px;">${row.jenis}</td>
            <td style="padding:16px 8px;">${row.data}</td>
            <td style="padding:16px 8px;">${row.kategori}</td>
            <td style="padding:16px 8px; color:${isAktif ? '#1DBA4C' : '#FF3A3A'}; font-weight:500;">${row.status}</td>
            <td style="padding:16px 8px; position:relative;">
                <span style="font-size:1.5rem; cursor:pointer;" onclick="toggleDropdown(event, ${idx})">&#8942;</span>
                <div id="dropdown-${idx}" class="action-dropdown" style="display:none; position:absolute; left:40px; top:0; width:125px; height:87px; background:#fff; border:1px solid #D9D9D9; border-radius:2px; z-index:10; padding:7px 20px; display:flex; flex-direction:column; gap:5px; opacity:1;">
                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">Kemaskini</div>
                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">${isAktif ? 'NyahAktif' : 'Aktif'}</div>
                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#FF3A3A; display:flex; align-items:center; gap:10px; cursor:pointer;">
                        <span style="background:#FF3A3A; color:#fff; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:1.1rem;">&#33;</span>
                        Hapus
                    </div>
                </div>
            </td>
        </tr>`;
    });
    document.getElementById('subtitle').innerText = subtitle;
    document.getElementById('table-container').innerHTML = `
        <table style="width:100%; border-collapse:collapse; font-family:'Poppins',sans-serif; font-size:1.08rem; background:#fff;">
            <thead>
                <tr>
                    <th style="padding:16px 8px; text-align:left; font-weight:600; color:#222; border-bottom:1px solid #E5E5E5;">Jenis</th>
                    <th style="padding:16px 8px; text-align:left; font-weight:600; color:#222; border-bottom:1px solid #E5E5E5;">Data</th>
                    <th style="padding:16px 8px; text-align:left; font-weight:600; color:#222; border-bottom:1px solid #E5E5E5;">Kategori</th>
                    <th style="padding:16px 8px; text-align:left; font-weight:600; color:#222; border-bottom:1px solid #E5E5E5;">Status</th>
                    <th style="padding:16px 8px; text-align:left; font-weight:600; color:#222; border-bottom:1px solid #E5E5E5;">Action</th>
                </tr>
            </thead>
            <tbody>
                ${rows}
            </tbody>
        </table>
    `;
}

// Button state styling
function setActiveButton(activeId) {
    document.getElementById('btn-semua').style.background = '#fff';
    document.getElementById('btn-semua').style.color = '#176D74';
    document.getElementById('btn-semua').style.border = '1.5px solid #176D74';

    document.getElementById('btn-kategori').style.background = '#fff';
    document.getElementById('btn-kategori').style.color = '#176D74';
    document.getElementById('btn-kategori').style.border = '1.5px solid #176D74';

    document.getElementById('btn-keputusan').style.background = '#fff';
    document.getElementById('btn-keputusan').style.color = '#176D74';
    document.getElementById('btn-keputusan').style.border = '1.5px solid #176D74';

    document.getElementById('btn-tahun').style.background = '#fff';
    document.getElementById('btn-tahun').style.color = '#176D74';
    document.getElementById('btn-tahun').style.border = '1.5px solid #176D74';

    // Set active
    let btn = document.getElementById(activeId);
    btn.style.background = '#0B6477';
    btn.style.color = '#fff';
    btn.style.border = 'none';

    // Only show "Tambah Kategori" button if "Kategori" is active
    var tambahBtn = document.getElementById('btn-tambah');
    if (activeId === 'btn-kategori') {
        tambahBtn.style.display = 'flex';
    } else {
        tambahBtn.style.display = 'none';
    }
}

document.addEventListener('DOMContentLoaded', function() {
    // Default: Semua
    renderTable('semua');
    setActiveButton('btn-semua');

    document.getElementById('btn-semua').onclick = function() {
        renderTable('semua');
        setActiveButton('btn-semua');
        attachDropdownListeners();
    };
    document.getElementById('btn-kategori').onclick = function() {
        renderTable('kategori');
        setActiveButton('btn-kategori');
        attachDropdownListeners();
    };
    document.getElementById('btn-keputusan').onclick = function() {
        renderTable('keputusan');
        setActiveButton('btn-keputusan');
        attachDropdownListeners();
    };
    document.getElementById('btn-tahun').onclick = function() {
        renderTable('tahun');
        setActiveButton('btn-tahun');
        attachDropdownListeners();
    };
    // Fix: Use addEventListener for btn-tambah
    var btnTambah = document.getElementById('btn-tambah');
    if (btnTambah) {
        btnTambah.addEventListener('click', function(e) {
            e.stopPropagation();
            openModalKategori('Tambah Kategori', '', '', '', 'Tambah');
        });
    }

    attachDropdownListeners();
});

// Open modal for Tambah Kategori
function openModalKategori(title, data, kategori, idx, btnText) {
    document.getElementById('modal-kategori-title').innerText = title;
    document.getElementById('input-jenis').value = 'Kategori';
    document.getElementById('input-data').value = data || '';
    document.getElementById('input-kategori').value = kategori || '';
    document.getElementById('btn-modal-submit').innerText = btnText || 'Tambah';
    document.getElementById('modal-tambah-kategori').style.display = 'flex';
    document.getElementById('form-tambah-kategori').setAttribute('data-edit-idx', idx !== undefined ? idx : '');
}

// Open modal for Kemaskini Kategori with prefilled data
function openModalKategori(title, data, kategori, idx, btnText) {
    document.getElementById('modal-kategori-title').innerText = title;
    document.getElementById('input-jenis').value = 'Kategori';
    document.getElementById('input-data').value = data || '';
    document.getElementById('input-kategori').value = kategori || '';
    document.getElementById('btn-modal-submit').innerText = btnText || 'Tambah';
    document.getElementById('modal-tambah-kategori').style.display = 'flex';
    document.getElementById('form-tambah-kategori').setAttribute('data-edit-idx', idx !== undefined ? idx : '');
}

function toggleDropdown(e, idx) {
    e.stopPropagation();
    document.querySelectorAll('.action-dropdown').forEach(el => el.style.display = 'none');
    var dropdown = document.getElementById('dropdown-' + idx);
    if (dropdown) dropdown.style.display = 'flex';

    // Attach a one-time event to close dropdown when clicking outside
    setTimeout(function() {
        document.addEventListener('click', hideDropdowns, { once: true });
    }, 0);
}

function hideDropdowns() {
    document.querySelectorAll('.action-dropdown').forEach(el => el.style.display = 'none');
}

function closeAllDropdowns() {
    document.querySelectorAll('.action-dropdown').forEach(el => el.style.display = 'none');
}

function closeModalKategori() {
    document.getElementById('modal-tambah-kategori').style.display = 'none';
}

// Optional: prevent form submit default for demo
document.addEventListener('DOMContentLoaded', function() {
    var form = document.getElementById('form-tambah-kategori');
    if (form) {
        form.onsubmit = function(e) {
            e.preventDefault();
            closeModalKategori();
        };
    }
});

function attachDropdownListeners() {
    // Hide all dropdowns on page load
    document.querySelectorAll('.action-dropdown').forEach(el => el.style.display = 'none');
    // Prevent dropdown from closing when clicking inside it
    document.querySelectorAll('.action-dropdown').forEach(function(drop) {
        drop.onclick = function(e) { e.stopPropagation(); };
    });
    // Attach Kemaskini handler
    document.querySelectorAll('.action-dropdown').forEach(function(drop, i) {
        const kemaskiniBtn = drop.querySelector('div:first-child');
        const statusBtn = drop.querySelector('div:nth-child(2)');
        if (kemaskiniBtn) {
            kemaskiniBtn.onclick = function(e) {
                e.stopPropagation();
                let dataArr = [];
                if (currentType === 'semua') dataArr = tableData.semua;
                else if (currentType === 'kategori') dataArr = tableData.kategori;
                else if (currentType === 'keputusan') dataArr = tableData.keputusan;
                else if (currentType === 'tahun') dataArr = tableData.tahun;
                const rowData = dataArr[i];
                openModalKategori(
                    'Kemaskini Data Kategori',
                    rowData ? rowData.data : '',
                    rowData ? rowData.kategori : '',
                    i,
                    'Kemaskini'
                );
                closeAllDropdowns();
            };
        }
        // Status toggle handler
        if (statusBtn) {
            statusBtn.onclick = function(e) {
                e.stopPropagation();
                let dataArr = [];
                if (currentType === 'semua') dataArr = tableData.semua;
                else if (currentType === 'kategori') dataArr = tableData.kategori;
                else if (currentType === 'keputusan') dataArr = tableData.keputusan;
                else if (currentType === 'tahun') dataArr = tableData.tahun;
                if (dataArr[i]) {
                    dataArr[i].status = dataArr[i].status === 'Aktif' ? 'Tidak Aktif' : 'Aktif';
                    renderTable(currentType);
                    attachDropdownListeners();
                }
            };
        }
    });
}
</script>
@endsection