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

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

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($authorize->edit == '1')
                            <button class="btn btn-warning mb-0"
                                onclick="window.location='{{ URL::to($url_menu . '/edit/' . $idencrypt) }}'">
                                <i class="fas fa-edit me-1"></i>
                                <span class="font-weight-bold">Edit</span>
                            </button>
                            <button class="btn btn-info mb-0" type="button" data-bs-toggle="modal"
                                data-bs-target="#copyTemplateModal">
                                <i class="fas fa-copy me-1"></i>
                                <span class="font-weight-bold">Copy</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .template-table {
            width: 100%;
            border-collapse: collapse;
        }

        .template-table thead {
            background-color: rgba(61, 139, 139, 0.3);
            color: #3d8b8b;
        }

        .template-table th {
            padding: 12px;
            text-align: left;
            font-weight: 600;
            font-size: 0.875rem;
        }

        .template-table td {
            padding: 10px 12px;
            border-bottom: 1px solid #e9ecef;
        }

        .template-table tbody tr:hover {
            background-color: #f8f9fa;
        }

        .field-group-title {
            background-color: #3d8b8b;
            color: white;
            padding: 12px;
            font-weight: 600;
            font-size: 1rem;
            border-radius: 0.375rem 0.375rem 0 0;
        }

        .template-table-container {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            overflow: hidden;
            margin-bottom: 1rem;
        }

        .report-preview-container {
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            overflow: hidden;
            background: white;
        }

        .report-table {
            width: 100%;
            border-collapse: collapse;
        }

        .report-table thead th {
            background-color: #b2ebf2;
            color: #37474f;
            padding: 12px 15px;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: none;
            border-bottom: 1px solid #90caf9;
        }

        .report-table td {
            padding: 8px 15px;
            border-bottom: 1px solid #f1f3f5;
            font-size: 0.85rem;
            vertical-align: middle;
        }

        .row-group-header {
            background-color: #fafafa;
            font-weight: 600;
            color: #455a64;
            text-transform: uppercase;
        }

        .row-total {
            background-color: #e0f7fa !important;
            font-weight: 700 !important;
            color: #006064 !important;
            text-transform: uppercase;
        }

        .toggle-icon {
            width: 20px;
            display: inline-block;
            cursor: pointer;
            color: #78909c;
            font-size: 0.7rem;
            transition: transform 0.2s;
        }

        .report-table tr:hover:not(.report-table thead tr) {
            background-color: #f8fdff;
        }

        .text-amount {
            font-family: 'Courier New', Courier, monospace;
            font-weight: 600;
        }

        .neraca-preview-container {
            border: 1px solid #a7d6d6;
            border-radius: 0.5rem;
            overflow: hidden;
            background: #fff;
        }

        .neraca-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }

        .neraca-table thead th {
            background-color: #b0e9eb;
            color: #3f6b84;
            padding: 9px 12px;
            border: 1px solid #a7d6d6;
            text-align: left;
            font-weight: 600;
        }

        .neraca-table td {
            border: 1px solid #a7d6d6;
            padding: 8px 12px;
            vertical-align: middle;
        }

        .neraca-group-header {
            background-color: #eff3f8ff;
            color: #2f3e46;
            font-weight: 700;
        }

        .neraca-group-header.is-detail {
            background-color: #eff3f8ff;
            cursor: pointer;
        }

        .neraca-group-header.is-total {
            background-color: #3d8b8b;
            color: #ffffff;
            cursor: default;
        }

        .neraca-group-header td {
            border-left: 0 !important;
            border-right: 0 !important;
        }

        .neraca-toggle-icon {
            width: 16px;
            display: inline-block;
            font-size: 0.75rem;
            margin-right: 6px;
        }

        .neraca-legend {
            display: flex;
            gap: 18px;
            flex-wrap: wrap;
            margin: 10px 4px 0;
            font-size: 0.8rem;
            color: #495057;
        }

        .neraca-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .neraca-legend-swatch {
            width: 14px;
            height: 14px;
            border-radius: 3px;
            display: inline-block;
        }

        .report-table .neraca-detail-toggle {
            cursor: pointer;
        }
    </style>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card mb-3">
                    <div class="card-body">
                        @include('components.alert')

                        <p class="text-uppercase text-sm">Detail {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">

                        <div class="row">
                            <div class="col-md-4">
                                <label class="form-control-label">Nama Template</label>
                                <input type="text" class="form-control" value="{{ $list->nama }}" readonly>
                            </div>
                            @php
                                $enumTipeLaporan = collect(
                                    DB::select(
                                        "select value, name
                                        from sys_enum
                                        where idenum = 'tipe_laporan'
                                        and isactive = '1'",
                                    ),
                                );

                                $tipeLaporanName =
                                    optional($enumTipeLaporan->firstWhere('value', $list->tipe_laporan))->name ??
                                    $list->tipe_laporan;
                            @endphp

                            <div class="col-md-4">
                                <label class="form-control-label">Tipe Laporan</label>
                                <input type="text" class="form-control" value="{{ $tipeLaporanName }}" readonly>
                            </div>
                            <div class="col-md-4">
                                <label class="form-control-label">Status</label>
                                <input type="text" class="form-control"
                                    value="{{ $list->isactive == '1' ? 'Aktif' : 'Non Aktif' }}" readonly>
                            </div>
                        </div>

                        <div class="mt-3">
                            <label class="form-control-label">Assigned Users</label>
                            @if (!empty($assigned_users) && count($assigned_users) > 0)
                                <div>
                                    @foreach ($assigned_users as $user)
                                        @php
                                            $label = trim(($user->firstname ?? '') . ' ' . ($user->lastname ?? ''));
                                            $label =
                                                $label === '' ? $user->username : $label . ' (' . $user->username . ')';
                                        @endphp
                                        <span class="badge bg-gradient-info me-1 mb-1">{{ $label }}</span>
                                    @endforeach
                                </div>
                            @else
                                <p class="text-sm text-secondary mb-0">Tidak ada user spesifik (semua user sesuai otorisasi
                                    menu).</p>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body p-0">
                        <div class="p-3">
                            <p class="text-uppercase text-sm mb-0">Field Template & Template Data</p>
                        </div>
                        <hr class="horizontal dark mt-0 mb-0">

                        @if (empty($field_templates) || count($field_templates) === 0)
                            <div class="p-3">
                                <p class="text-sm text-secondary mb-0">Belum ada field template.</p>
                            </div>
                        @else
                            @php
                                $isLabaRugi = $list->tipe_laporan == 'Laba-Rugi';
                            @endphp

                            @if ($isLabaRugi)
                                <div class="report-preview-container mx-3 mb-3">
                                    <table class="report-table">
                                        <thead>
                                            <tr>
                                                <th>Keterangan / Description</th>
                                                <th class="text-end" style="width: 200px;">Bulan Berjalan</th>
                                                <th class="text-end" style="width: 200px;">Bulan Sebelumnya</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($field_templates as $fIndex => $field)
                                                @php
                                                    $isTotal = $field->tipe_template == 'Total';
                                                    $rowId = 'field-' . $field->id_field;
                                                @endphp
                                                <tr class="{{ $isTotal ? 'row-total' : 'row-group-header' }}"
                                                    data-id="{{ $rowId }}">
                                                    <td>
                                                        @if (!$isTotal)
                                                            <span class="toggle-icon toggle-node"
                                                                data-target="{{ $rowId }}">
                                                                <i class="fas fa-caret-down"></i>
                                                            </span>
                                                        @endif
                                                        {{ $field->nama }}
                                                    </td>
                                                    <td class="text-end text-amount">0,00</td>
                                                    <td class="text-end text-amount">0,00</td>
                                                </tr>
                                                @if (!$isTotal && !empty($field->template_data))
                                                    @include('master.mstemplate.partials.show_node', [
                                                        'nodes' => $field->template_data,
                                                        'level' => 1,
                                                        'isLabaRugi' => true,
                                                        'parentId' => $rowId,
                                                    ])
                                                @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <div class="report-preview-container mx-3 mb-3">
                                    <table class="report-table">
                                        <thead>
                                            <tr>
                                                <th>Keterangan / Description</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($field_templates as $field)
                                                @php
                                                    $templateType = strtolower($field->tipe_template ?? 'details');
                                                    $isDetailType = $templateType === 'details';
                                                    $sectionId = 'neraca-field-' . $field->id_field;
                                                @endphp
                                                <tr class="{{ $isDetailType ? 'row-group-header neraca-detail-toggle' : 'row-total' }}"
                                                    data-id="{{ $sectionId }}"
                                                    @if ($isDetailType) data-target-section="{{ $sectionId }}" @endif>
                                                    <td class="text-sm">
                                                        @if ($isDetailType)
                                                            <span class="toggle-icon">
                                                                <i class="fas fa-caret-right"></i>
                                                            </span>
                                                        @endif
                                                        {{ $field->nama }}
                                                        <span style="font-size: 0.75em; opacity: 0.9; margin-left: 6px;">
                                                            ({{ $isDetailType ? 'Detail' : 'Total' }})
                                                        </span>
                                                    </td>
                                                </tr>

                                                @if ($isDetailType && !empty($field->template_data) && count($field->template_data) > 0)
                                                    @include(
                                                        'master.mstemplate.partials.show_node_neraca',
                                                        [
                                                            'nodes' => $field->template_data,
                                                            'level' => 0,
                                                            'parentId' => $sectionId,
                                                            'hiddenByDefault' => $isDetailType,
                                                        ]
                                                    )
                                                @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="neraca-legend mx-3 mb-3">
                                    <span class="neraca-legend-item">
                                        <span class="neraca-legend-swatch"
                                            style="background:#fafafa; border:1px solid #e9ecef;"></span>
                                        Grup Detail (bisa expand/collapse, default tertutup)
                                    </span>
                                    <span class="neraca-legend-item">
                                        <span class="neraca-legend-swatch"
                                            style="background:#e0f7fa; border:1px solid #b2ebf2;"></span>
                                        Grup Total (tetap tampil, tidak bisa expand)
                                    </span>
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if ($list->tipe_laporan == 'Laba-Rugi')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const toggleButtons = document.querySelectorAll('.toggle-node');
                toggleButtons.forEach(btn => {
                    btn.addEventListener('click', function() {
                        const targetId = this.getAttribute('data-target');
                        const children = document.querySelectorAll(`.child-of-${targetId}`);
                        const icon = this.querySelector('i');

                        if (children.length > 0) {
                            const isHidden = children[0].classList.contains('d-none');

                            const toggleDescendants = (parentId, hide) => {
                                const directChildren = document.querySelectorAll(
                                    `.child-of-${parentId}`);
                                directChildren.forEach(child => {
                                    if (hide) {
                                        child.classList.add('d-none');
                                        const childToggle = child.querySelector(
                                            '.toggle-node i');
                                        if (childToggle) {
                                            childToggle.classList.remove('fa-caret-down');
                                            childToggle.classList.add('fa-caret-right');
                                        }
                                        const childId = child.getAttribute('data-id');
                                        if (childId) toggleDescendants(childId, true);
                                    } else {
                                        child.classList.remove('d-none');
                                    }
                                });
                            };

                            if (isHidden) {
                                children.forEach(c => c.classList.remove('d-none'));
                                icon.classList.remove('fa-caret-right');
                                icon.classList.add('fa-caret-down');
                            } else {
                                toggleDescendants(targetId, true);
                                icon.classList.remove('fa-caret-down');
                                icon.classList.add('fa-caret-right');
                            }
                        }
                    });
                });
            });
        </script>
    @endif

    @if ($list->tipe_laporan == 'Neraca')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const detailToggles = document.querySelectorAll('.neraca-detail-toggle');
                const nodeToggles = document.querySelectorAll('.neraca-node-toggle');

                function setIcon(icon, isOpen) {
                    if (!icon) return;
                    icon.classList.toggle('fa-caret-down', isOpen);
                    icon.classList.toggle('fa-caret-right', !isOpen);
                }

                function hideDescendants(parentId) {
                    const children = document.querySelectorAll(`.neraca-child-of-${parentId}`);
                    children.forEach(function(child) {
                        child.classList.add('d-none');
                        const childId = child.getAttribute('data-id');
                        const childIcon = child.querySelector('.neraca-node-toggle i');
                        setIcon(childIcon, false);
                        if (childId) hideDescendants(childId);
                    });
                }

                function toggleChildren(parentId, icon) {
                    const children = document.querySelectorAll(`.neraca-child-of-${parentId}`);
                    if (children.length === 0) return;

                    const opening = children[0].classList.contains('d-none');
                    if (opening) {
                        children.forEach(function(row) {
                            row.classList.remove('d-none');
                        });
                    } else {
                        hideDescendants(parentId);
                    }
                    setIcon(icon, opening);
                }

                detailToggles.forEach(function(toggleRow) {
                    toggleRow.addEventListener('click', function() {
                        const sectionId = this.getAttribute('data-target-section');
                        const icon = this.querySelector('.toggle-icon i');
                        toggleChildren(sectionId, icon);
                    });
                });

                nodeToggles.forEach(function(toggle) {
                    toggle.addEventListener('click', function(event) {
                        event.stopPropagation();
                        const targetId = this.getAttribute('data-target');
                        const icon = this.querySelector('i');
                        toggleChildren(targetId, icon);
                    });
                });
            });
        </script>
    @endif

    @if ($authorize->edit == '1')
        <div class="modal fade" id="copyTemplateModal" tabindex="-1" aria-labelledby="copyTemplateModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form id="copyTemplateForm" method="POST" action="{{ url($url_menu . '/copy/' . $idencrypt) }}">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title" id="copyTemplateModalLabel">Copy Template</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="copy-template-name" class="form-label">Nama Template Baru</label>
                                <input type="text" id="copy-template-name" name="nama"
                                    class="form-control @error('nama') is-invalid @enderror"
                                    value="{{ old('nama', $list->nama) }}" maxlength="100" required>
                                @error('nama')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-0">
                                <label for="copy-template-users-show" class="form-label">Hak Akses User</label>
                                <select id="copy-template-users-show" name="id_users[]"
                                    class="form-select custom-select select-multiple" multiple>
                                    @foreach ($users_options ?? [] as $user)
                                        @php
                                            $label = trim(($user->firstname ?? '') . ' ' . ($user->lastname ?? ''));
                                            $label =
                                                $label === '' ? $user->username : $label . ' (' . $user->username . ')';
                                        @endphp
                                        <option value="{{ $user->username }}"
                                            {{ in_array($user->username, old('id_users', $selected_users ?? [])) ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal"
                                id="copyCancelBtn">Cancel</button>
                            <button type="submit" class="btn btn-primary mb-0" id="copyConfirmBtn">
                                <span class="copy-btn-text">Confirm</span>
                                <span class="copy-btn-loading d-none">
                                    <span class="spinner-border spinner-border-sm me-1" role="status"
                                        aria-hidden="true"></span>
                                    Copying...
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif
@endsection

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const copyForm = document.getElementById('copyTemplateForm');
            if (!copyForm) return;

            const confirmBtn = document.getElementById('copyConfirmBtn');
            const cancelBtn = document.getElementById('copyCancelBtn');
            const normalText = copyForm.querySelector('.copy-btn-text');
            const loadingText = copyForm.querySelector('.copy-btn-loading');
            const copyUsersSelect = document.getElementById('copy-template-users-show');
            const copyModalEl = document.getElementById('copyTemplateModal');

            function initCopyShowUserSelect2() {
                if (!window.jQuery || !copyUsersSelect) return;
                const $select = $(copyUsersSelect);
                if ($select.hasClass('select2-hidden-accessible')) {
                    $select.select2('destroy');
                }
                $select.select2({
                    width: '100%',
                    placeholder: 'Pilih hak akses user',
                    allowClear: true,
                    dropdownParent: $('#copyTemplateModal'),
                    dropdownAutoWidth: false
                });
            }

            if (copyModalEl) {
                copyModalEl.addEventListener('shown.bs.modal', function() {
                    initCopyShowUserSelect2();
                });
            }

            copyForm.addEventListener('submit', function() {
                confirmBtn.disabled = true;
                cancelBtn.disabled = true;
                normalText.classList.add('d-none');
                loadingText.classList.remove('d-none');
            });

            @if ($errors->has('nama'))
                if (copyModalEl) {
                    const modal = new bootstrap.Modal(copyModalEl);
                    modal.show();
                }
            @endif
        });
    </script>
@endpush