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

@php
    // Ambil semua menu investor dari sys_enum sebagai sumber label — urutkan sesuai kolom urut
    $all_menu_options = \Illuminate\Support\Facades\DB::table('sys_enum')
        ->where('idenum', 'investor_menu')
        ->where('isactive', 1)
        ->orderBy('value')
        ->pluck('name', 'value'); // ['menu_key' => 'Label']
@endphp

{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                {{-- alert --}}
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                        {{-- check authorize add --}}
                                        @if ($authorize->add == '1')
                                            {{-- button add --}}
                                            <button class="btn btn-primary mb-0"
                                                onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                                    class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</button>
                                        @endif

                                        {{-- button reset urutan default --}}
                                        @if ($authorize->edit == '1')
                                            <button class="btn btn-outline-secondary mb-0" id="btn-reset-order" title="Kembalikan urutan ke susunan default">
                                                <i class="fas fa-rotate-left me-1"></i>
                                                <span class="font-weight-bold">Reset Urutan Default</span>
                                            </button>
                                        @endif
                                    </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="40"></th>
                                            <th width="110">Action</th>
                                            <th>No</th>
                                            <th>Nama Menu</th>
                                            <th>Template Tampilan</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{-- retrieve table detail --}}
                                        @foreach ($table_detail as $detail)
                                            @php
                                                $primary = '';
                                                foreach ($table_primary as $p) {
                                                    $primary == ''
                                                        ? ($primary = $detail->{$p->field})
                                                        : ($primary = $primary . ':' . $detail->{$p->field});
                                                }
                                                if ($primary === '') {
                                                    $primary = $detail->id ?? '';
                                                }
                                                $vcount = $loop->iteration;
                                            @endphp
                                            <tr data-id="{{ $detail->id }}"
                                                {{ $detail->isactive == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                                <td class="text-center drag-handle" style="cursor:grab;" title="Drag untuk ubah urutan">
                                                    <i class="fas fa-grip-vertical text-secondary"></i>
                                                </td>
                                                <td class="text-sm font-weight-normal">
                                                    <div class="btn-group">
                                                        <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                            title="View Data"
                                                            onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($primary)) }}'">
                                                            <i class="fas fa-eye"> </i><span class="font-weight-bold"> View
                                                        </button>
                                                        <button type="button"
                                                            class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            <span class="visually-hidden">Toggle Dropdown</span>
                                                        </button>
                                                        <ul class="dropdown-menu">
                                                            {{-- check authorize edit --}}
                                                            @if ($authorize->edit == '1')
                                                                @if ($detail->isactive == 1)
                                                                    <li><hr class="dropdown-divider"></li>
                                                                    <li>
                                                                        <button type="button"
                                                                            class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                                            title="Edit Data"
                                                                            onclick="window.location='{{ url($url_menu . '/edit/' . encrypt($primary)) }}'">
                                                                            <i class="fas fa-edit"></i>
                                                                            <span class="font-weight-bold"> Edit</span>
                                                                        </button>
                                                                    </li>
                                                                @endif
                                                            @endif
                                                            @if ($authorize->delete == '1' && $primary != 'msjit')
                                                                <form
                                                                    action="{{ url($url_menu . '/' . encrypt($primary)) }}"
                                                                    method="POST" style="display: inline">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    {{-- button delete --}}
                                                                    <li>
                                                                        <hr class="dropdown-divider">
                                                                    </li>
                                                                    <button type="submit"
                                                                        class="btn btn-sm btn-{{ $detail->isactive == '0' ? 'success' : 'danger' }} mx-2 mb-0 w-90"
                                                                        title="Hapus Data"
                                                                        onclick="return deleteData(event, '{{ $primary }}','{{ $detail->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}')">
                                                                        <i class="fas fa-random"></i><span
                                                                            class="font-weight-bold">
                                                                            {{ $detail->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}</span>
                                                                    </button>
                                                                </form>
                                                            @endif
                                                            <li>
                                                                <hr class="dropdown-divider">
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                                <td>{{ $table_detail->firstItem() + $loop->index }}</td>

                                                {{-- Nama Menu: dinamis dari $all_menu_options --}}
                                                <td class="text-sm font-weight-bold text-dark">
                                                    {{ $all_menu_options[$detail->menu_key] ?? ucwords(str_replace('-', ' ', $detail->menu_key)) }}
                                                </td>

                                                <td class="text-sm font-weight-normal">
                                                    @if($detail->template_type == 'text_editor') Text Editor
                                                    @elseif($detail->template_type == 'upload_file') Upload File
                                                    @elseif($detail->template_type == 'collapse') Collapse
                                                    @else {{ $detail->template_type }}
                                                    @endif
                                                </td>
                                                <td class="text-sm font-weight-normal">
                                                    <span class="badge bg-gradient-{{ $detail->isactive == 1 ? 'success' : 'danger' }}">
                                                        {{ $detail->isactive == 1 ? 'Aktif' : 'Tidak Aktif' }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        Data {{ $table_detail->firstItem() }} - {{ $table_detail->lastItem() }}
                                        dari {{ $table_detail->total() }} data.
                                    </div>
                                    <div>
                                        {{ $table_detail->appends(request()->query())->links('pagination::bootstrap-4') }}
                                    </div>
                                </div>
                            </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>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        let columnAbjad = '';
        $(document).ready(function() {
            let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
            let columnNames = '';
            for (let index = 0; index < numColumns; index++) {
                columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
                if (columnNames == 'Status' || columnNames == 'status') {
                    columnAbjad = String.fromCharCode(65 + index);
                }
            }
            //check note
            if ($('*').hasClass('exp')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` )</code>`)
            }
            if ($('*').hasClass('stock')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> ` + $('#stocknote').text() + ` )</code>`)
            }
            if ($('*').hasClass('exp') && $('*').hasClass('stock')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> ` + $('#stocknote').text() + ` )</code>`)
            }
        });
        //set table into datatables
        $('#list_{{ $dmenu }}').DataTable({
            paging: false,
            info: false,
            searching: true,
            responsive: true,
            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)"
            },
            responsive: true,
            // dom: 'Bfrtip',
            dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
            buttons: [{
                    text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                    action: function() {
                        // Arahkan ke server untuk ekspor Excel
                        window.location.href = "{{ url($url_menu) }}?export=excel";
                    }
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                    action: function() {
                        // Arahkan ke server untuk ekspor PDF
                        window.location.href = "{{ url($url_menu) }}?export=pdf";
                    }
                },
            ],
            initComplete: function() {
                // Tambahkan custom search bar
                var searchBarHtml = `
                    <div class="dataTables_filter d-flex justify-content-end">
                        <form method="GET" action="{{ url($url_menu) }}" class="d-flex">
                            <input type="text" name="search" class="form-control me-2" placeholder="Search..." value="{{ request('search') }}">
                        </form>
                    </div>
                `;
                $('.dataTables_filter').remove(); // Hapus input pencarian default DataTables
                $(searchBarHtml).insertAfter('.dt-buttons'); // Tambahkan search bar setelah tombol
            }
        });
        //set color button datatables
        $('.dt-button').addClass('btn btn-secondary');
        $('.dt-button').removeClass('dt-button');
        //check authorize button datatables
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjwebcp/resources/views/master/msinve/list.blade.php</b> on line <b>285</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjwebcp/resources/views/master/msinve/list.blade.php</b> on line <b>285</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjwebcp/resources/views/master/msinve/list.blade.php</b> on line <b>286</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjwebcp/resources/views/master/msinve/list.blade.php</b> on line <b>286</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjwebcp/resources/views/master/msinve/list.blade.php</b> on line <b>287</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjwebcp/resources/views/master/msinve/list.blade.php</b> on line <b>287</b><br />
        //function delete
        function deleteData(event, name, msg) {
            event.preventDefault(); // Prevent default form submission
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Find the closest form element and submit it manually
                    event.target.closest('form').submit();
                }
            });
        }
    </script>

    {{-- Reset Urutan Default --}}
    <script>
        $(document).ready(function () {
            $('#btn-reset-order').on('click', function () {
                // Daftar urutan default yang akan diterapkan
                var defaultList = [
                    'Corporate Governance',
                    'Prospectus',
                    'Investor Presentation',
                    'IDX Announcement',
                    'Analyst Reports',
                    'Financial Highlight',
                    'News Release',
                    'Quarterly Press Release',
                    'Investor Calendar',
                    'Shareholder Meetings',
                    'Financial Statements',
                    'Annual Reports',
                    'Sustainability Report',
                    'Supporting Professionals',
                    'Investor Relation Contact',
                ];

                var listHtml = defaultList.map(function (item, i) {
                    return '<tr><td class="text-end pe-3 text-muted" style="width:30px;">' + (i + 1) + '.</td><td class="text-start">' + item + '</td></tr>';
                }).join('');

                Swal.fire({
                    title: 'Reset Urutan Default?',
                    html: '<p class="text-muted mb-3" style="font-size:13px;">Urutan akan dikembalikan ke susunan berikut:</p>' +
                          '<div style="max-height:280px;overflow-y:auto;">' +
                          '<table class="table table-sm table-borderless mb-0" style="font-size:13px;">' +
                          listHtml +
                          '</table></div>' +
                          '<p class="text-muted mt-3 mb-0" style="font-size:12px;"><i class="fas fa-circle-info me-1"></i>Menu yang tidak ada dalam daftar akan diletakkan di akhir</p>',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '<i class="fas fa-rotate-left me-1"></i> Ya, Reset',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#028284',
                    width: '480px',
                }).then(function (result) {
                    if (result.isConfirmed) {
                        // Loading state
                        Swal.fire({
                            title: 'Memproses...',
                            text: 'Menerapkan urutan default.',
                            allowOutsideClick: false,
                            showConfirmButton: false,
                            didOpen: function () { Swal.showLoading(); }
                        });

                        $.ajax({
                            url: '{{ url($url_menu . "/reset-order") }}',
                            method: 'POST',
                            data: { _token: '{{ csrf_token() }}' },
                            success: function () {
                                Swal.fire({
                                    title: 'Berhasil!',
                                    text: 'Urutan berhasil direset ke susunan default.',
                                    icon: 'success',
                                    timer: 1800,
                                    showConfirmButton: false,
                                    confirmButtonColor: '#028284'
                                }).then(function () {
                                    location.reload();
                                });
                            },
                            error: function (xhr) {
                                var msg = xhr.responseJSON?.message ?? 'Silakan coba lagi.';
                                Swal.fire({
                                    title: 'Gagal!',
                                    text: 'Gagal mereset urutan. ' + msg,
                                    icon: 'error',
                                    confirmButtonColor: '#028284'
                                });
                            }
                        });
                    }
                });
            });
        });
    </script>

    {{-- Drag & Drop Reorder --}}
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
    <script>
        $(document).ready(function () {
            var tbody = document.querySelector('#list_{{ $dmenu }} tbody');
            if (!tbody) return;

            var pendingOrder = null;

            Sortable.create(tbody, {
                handle: '.drag-handle',
                animation: 150,
                ghostClass: 'bg-light',
                onEnd: function () {
                    // Kumpulkan urutan baru
                    pendingOrder = [];
                    tbody.querySelectorAll('tr[data-id]').forEach(function (tr, index) {
                        pendingOrder.push({ id: tr.getAttribute('data-id'), urut: index + 1 });
                    });

                    // Tampilkan konfirmasi sebelum simpan
                    Swal.fire({
                        title: 'Konfirmasi Urutan',
                        text: 'Apakah Anda yakin ingin menyimpan urutan baru ini?',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Ya, Simpan',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#028284'
                    }).then(function (result) {
                        if (result.isConfirmed) {
                            $.ajax({
                                url: '{{ url($url_menu . "/reorder") }}',
                                method: 'POST',
                                data: {
                                    _token: '{{ csrf_token() }}',
                                    order: pendingOrder
                                },
                                success: function () {
                                    Swal.fire({
                                        title: 'Berhasil!',
                                        text: 'Urutan berhasil disimpan.',
                                        icon: 'success',
                                        timer: 1500,
                                        showConfirmButton: false,
                                        confirmButtonColor: '#028284'
                                    }).then(function () {
                                        location.reload();
                                    });
                                },
                                error: function () {
                                    Swal.fire({
                                        title: 'Gagal!',
                                        text: 'Gagal menyimpan urutan. Silakan coba lagi.',
                                        icon: 'error',
                                        confirmButtonColor: '#028284'
                                    }).then(function () {
                                        // Reload untuk kembalikan tampilan ke urutan DB
                                        location.reload();
                                    });
                                }
                            });
                        } else {
                            // User batal — reload untuk kembalikan tampilan ke urutan semula
                            location.reload();
                        }
                        pendingOrder = null;
                    });
                }
            });
        });
    </script>
@endpush