@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])

<div class="container-fluid">
    <div class="row">
        {{-- KIRI --}}
        <div class="col-md-4">
            <div class="row mb-2 mx-1">
                <div class="card" style="min-height: 650px;">
                    <div class="card-header">
                        <h5 class="mb-0">List Kategori</h5>
                    </div>
                    <hr class="horizontal dark mt-0">
                    <div class="row px-4 py-2">
                        <div class="table-responsive">
                            <table class="table display" id="list_header">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>Kategori</th>
                                        <th>Detail</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($table_detail_h as $row)
                                        @php $enc = encrypt($row->id); @endphp
                                        <tr>
                                            <td class="text-sm">{{ $row->kategori }}</td>
                                            <td class="text-sm">{{ $row->detail }}</td>
                                            <td class="text-sm font-weight-normal">
                                                <button type="button"
                                                    class="btn btn-primary mb-0 py-1 px-3 btn-detkat-detail"
                                                    data-detkat-enc="{{ $enc }}"
                                                    data-detkat-id="{{ $row->id }}"
                                                    data-kategori="{{ $row->kategori }}"
                                                    data-detail="{{ $row->detail }}"
                                                    title="Detail">
                                                    <i class="fas fa-info-circle"></i>
                                                    <span class="font-weight-bold">Detail</span>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- KANAN --}}
        <div class="col-md-8">
            <div class="row mx-1">
                <div class="card" style="min-height: 650px;">
                    <div class="row">
                        <div class="card-header col-md-auto">
                            <h5 class="mb-0" id="label_detail">List Sub Detail Kategori</h5>
                        </div>
                        <div class="col">
                            @include('components.alert')
                        </div>
                    </div>

                    <hr class="horizontal dark mt-0">

                    <div class="row px-4 py-2">
                        <div class="table-responsive">
                            <table class="table display" id="list_detail">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th width="160">Action</th>
                                        <th width="60">No</th>
                                        <th>Sub ID</th>
                                        <th>Modul</th>
                                        <th>PIC</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>

                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper" id="noted">
                                <code>Note : <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active</code>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

@include('js.msdkat')
@endsection

@push('js')
<style>
    .table-danger-light {
        background-color: #ffe9ed !important;
    }

    .table-danger-light:hover {
        background-color: #ffd4d9 !important;
    }
</style>
<script>
    let selectedDetkatEnc = null;
    let selectedDetkatId = null;

    function setUrlDetkat(enc) {
        const newUrl = "{{ url($url_menu) }}" + (enc ? ("?detkat=" + encodeURIComponent(enc)) : "");
        window.history.replaceState({}, '', newUrl);
    }

    function goAddSelectedDetkat() {
        if (!selectedDetkatId) {
            Swal.fire({ title: 'Info', text: 'Silakan pilih kategori dulu (klik Detail di tabel kiri).', icon: 'info', confirmButtonColor: '#028284' });
            return;
        }
        window.location.href = "{{ url($url_menu . '/add') }}" + "?detkat_id=" + encodeURIComponent(selectedDetkatId);
    }

    function initNoColumn(dt) {
        dt.on('order.dt search.dt draw.dt', function () {
            dt.column(1, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                cell.innerHTML = i + 1;
            });
        });
    }

    function renderRows(encId) {
        $.ajax({
            url: "{{ url($url_menu . '/ajax') }}",
            type: "GET",
            dataType: "json",
            data: { id: encId },
            success: function(res) {
                const dt = $('#list_detail').DataTable();
                dt.clear();

                let rows = res.rows || [];
                rows.sort((a, b) => a.sub_id.localeCompare(b.sub_id, undefined, { numeric: true, sensitivity: 'base' }));

                rows.forEach(function(r) {
                    const isActive = String(r.isactive) === '1';
                    const statusText = isActive ? 'Active' : 'Not Active';

                    const btnView = `
                        <button type="button" class="btn btn-primary mb-0 py-1 px-2" title="View Data"
                            onclick="window.location='{{ url($url_menu . '/show') }}/${r.idencrypt}?detkat_id=${encodeURIComponent(selectedDetkatEnc)}'">
                            <i class="fas fa-eye"></i>
                        </button>`;

                    const btnEdit = `
                        <button type="button" class="btn btn-warning mb-0 py-1 px-2" title="Edit Data"
                            onclick="window.location='{{ url($url_menu . '/edit') }}/${r.idencrypt}?detkat_id=${encodeURIComponent(selectedDetkatEnc)}'">
                            <i class="fas fa-edit"></i>
                        </button>`;

                    const btnDelete = `
                        <form class="delete-form" 
                            onsubmit="return deleteData(event)" 
                            action="{{ url($url_menu) }}/${r.idencrypt}?detkat_id=${encodeURIComponent(selectedDetkatEnc)}"
                            method="POST" style="display:inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger mb-0 py-1 px-2"
                                title="${isActive ? 'Non Aktifkan' : 'Aktifkan'}">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>`;

                    const rowNode = dt.row.add([
                        (btnView + btnEdit + btnDelete),
                        '', 
                        r.sub_id ?? '',
                        r.modul ?? '',
                        r.pic_name ?? '',
                        statusText
                    ]).draw(false).node();

                    if (!isActive) {
                        $(rowNode).addClass('table-danger-light');
                    }
                });

                dt.draw(false);
            },
            error: function(xhr) {
                console.log('AJAX ERROR', xhr.status, xhr.responseText);
            }
        });
    }

    function deleteData(event) {
        event.preventDefault();
        
        const form = event.target.closest('form');
        if (!form) return;

        const title = form.querySelector('button').getAttribute('title') || 'Non Aktifkan';

        Swal.fire({
            title: 'Konfirmasi',
            text: `Apakah Anda yakin ingin ${title} data ini?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#028284'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    }

    function loadDetail(encId, kategori, detail, detkatId) {
        selectedDetkatEnc = encId;
        selectedDetkatId = detkatId || null;
        setUrlDetkat(encId);
        $('#label_detail').text('List Sub Detail -> ' + kategori + ' - ' + detail);
        renderRows(encId);
    }

    // Perbaikan utama: loadDetailDirect hanya dipakai jika button ditemukan
    function loadDetailDirect(encId) {
        const $btn = $('.btn-detkat-detail[data-detkat-enc="' + encId + '"]').first();

        if ($btn.length) {
            const kategori = $btn.data('kategori');
            const detail   = $btn.data('detail');
            const detkatId = $btn.data('detkat-id');
            loadDetail(encId, kategori, detail, detkatId);
        } else {
            console.log('Button not found → reset to default');
            $('#label_detail').text('List Sub Detail Kategori');
            $('#list_detail').DataTable().clear().draw();
            selectedDetkatEnc = null;
            selectedDetkatId = null;
        }
    }

    $(document).ready(function() {
        // DataTable Kiri
        $('#list_header').DataTable({
            language: { search: "Cari :", lengthMenu: "Tampilkan _MENU_ baris", zeroRecords: "Maaf - Data tidak ada", info: "Data _START_ - _END_ dari _TOTAL_", infoEmpty: "Tidak ada data", infoFiltered: "(pencarian dari _MAX_ data)" },
            pageLength: 15,
            responsive: true,
            dom: 'frtip'
        });

        // Click handler
        $(document).on('click', '.btn-detkat-detail', function() {
            const enc = $(this).data('detkat-enc');
            const detkatId = $(this).data('detkat-id');
            const kategori = $(this).data('kategori');
            const detail = $(this).data('detail');
            loadDetail(enc, kategori, detail, detkatId);
        });

        // DataTable Kanan (tetap sama persis)
        const dtDetail = $('#list_detail').DataTable({
            language: { search: "Cari :", lengthMenu: "Tampilkan _MENU_ baris", zeroRecords: "Maaf - Data tidak ada", info: "Data _START_ - _END_ dari _TOTAL_", infoEmpty: "Tidak ada data", infoFiltered: "(pencarian dari _MAX_ data)" },
            pageLength: 15,
            responsive: true,
            dom: 'Bfrtip',
            order: [[2, 'asc']],
            buttons: [
                { text: '<i class="fas fa-plus me-1 text-lg btn-add"></i><span class="font-weight-bold"> Tambah' },
                { extend: 'excelHtml5', text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel', autoFilter: true, sheetName: 'Exported data', exportOptions: { columns: ':visible:not(:first-child)' }},
                { extend: 'pdfHtml5',  text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF', exportOptions: { columns: ':visible:not(:first-child)' }},
                { extend: 'print',     text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print', exportOptions: { columns: ':visible:not(:first-child)' }}
            ]
        });

        initNoColumn(dtDetail);

        // Styling (tetap sama)
        $('.dt-button').addClass('btn btn-secondary').removeClass('dt-button');
        const btnadd = $('.btn-add').parents('.btn-secondary');
        btnadd.removeClass('btn-secondary').addClass('btn btn-primary');
        btnadd.attr('onclick', "goAddSelectedDetkat()");

        @if (isset($authorize))
            {!! (($authorize->add ?? '0') == '0') ? 'btnadd.remove();' : '' !!}
            {!! (($authorize->excel ?? '0') == '0') ? "$('.buttons-excel').remove();" : '' !!}
            {!! (($authorize->pdf ?? '0') == '0') ? "$('.buttons-pdf').remove();" : '' !!}
            {!! (($authorize->print ?? '0') == '0') ? "$('.buttons-print').remove();" : '' !!}
        @endif

        const urlParams = new URLSearchParams(window.location.search);
        const detkatIdParam = urlParams.get('detkat_id');
        const detkatEnc = urlParams.get('detkat');

        if (detkatIdParam) {
            setTimeout(() => {
                const $btn = $('.btn-detkat-detail[data-detkat-id="' + detkatIdParam + '"]').first();
                if ($btn.length) {
                    $btn.trigger('click');
                } else {
                    console.log('Button not found → reset to default');
                    $('#label_detail').text('List Sub Detail Kategori');
                    dtDetail.clear().draw();
                    selectedDetkatEnc = null;
                    selectedDetkatId = null;
                }
            }, 600);
        } else if (detkatEnc) {
            setTimeout(() => {
                const $btn = $('.btn-detkat-detail[data-detkat-enc="' + detkatEnc + '"]').first();
                if ($btn.length) {
                    $btn.trigger('click');
                } else {
                    console.log('Button not found → direct load');
                    loadDetailDirect(detkatEnc);
                }
            }, 600);
        } else {
            // Default state saat pertama kali masuk halaman
            $('#label_detail').text('List Sub Detail Kategori');
            dtDetail.clear().draw();
        }
    });
</script>
@endpush