@extends('dashboard.layouts.app')

@section('content')
    <style>
        .chart-accounts-table-wrap {
            margin: 1rem 1rem 0;
            background: var(--white);
            max-height: none !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
        }

        .chart-accounts-card {
            display: block;
            overflow: hidden;
            height: auto;
            max-height: none;
        }

        .chart-accounts-card > .p-0 {
            min-height: 0;
            display: block;
            flex: none;
        }

        .chart-accounts-card .chart-accounts-table-wrap {
            flex: none;
            min-height: 0;
        }

        #chartAccountsTableView {
            min-height: 0;
            display: block;
            flex: none;
        }

        #chartAccountsTableView > .p-0 {
            min-height: 0;
            display: block;
            flex: none;
        }

        #chartAccountsTableView .px-4.py-3 {
            flex: 0 0 auto;
            background: var(--white);
            border-top: 1px solid var(--neutral-200);
        }

        .chart-accounts-table-wrap thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            box-shadow: inset 0 -1px 0 var(--neutral-200);
            white-space: nowrap;
        }

        .chart-accounts-table-wrap tbody td {
            white-space: nowrap;
        }

        .chart-accounts-table-wrap tbody tr:hover td {
            background: var(--neutral-50);
        }

        .chart-accounts-table {
            width: 100%;
            min-width: 1460px !important;
            table-layout: auto;
        }

        .chart-accounts-table thead th {
            white-space: nowrap !important;
        }

        .chart-accounts-table tbody td {
            white-space: nowrap !important;
        }

        .chart-account-name {
            min-width: 260px;
            text-align: start;
        }

        .chart-account-tree-line {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
        }

        .chart-account-actions {
            min-width: 280px;
        }

        .chart-account-actions .d-flex {
            flex-wrap: nowrap;
            justify-content: center;
        }

        .chart-account-actions form {
            display: inline-flex;
            margin: 0;
        }

        .chart-view-toggle .btn {
            min-width: 96px;
        }

        .chart-tree-view {
            margin: 1rem;
            padding: 1rem;
            max-height: calc(100vh - 310px);
            overflow: auto;
            border: 1px solid var(--neutral-200);
            border-radius: 8px;
            background: var(--neutral-50);
        }

        .chart-tree-node {
            position: relative;
        }

        .chart-tree-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: .75rem;
            padding: .85rem 1rem;
            border: 1px solid var(--neutral-200);
            border-radius: 8px;
            background: var(--white);
            box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
        }

        .chart-tree-row:hover {
            border-color: var(--primary-200);
            box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
        }

        .chart-tree-main {
            display: flex;
            align-items: flex-start;
            gap: .5rem;
            min-width: 0;
        }

        .chart-tree-content {
            min-width: 0;
        }

        .chart-tree-main .account-title {
            display: block;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .chart-tree-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: .4rem;
            margin-top: .4rem;
        }

        .chart-tree-code {
            flex: 0 0 auto;
            min-width: 68px;
            text-align: center;
        }

        .chart-tree-toggle-placeholder,
        .chart-tree-toggle {
            flex: 0 0 auto;
            width: 34px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .chart-tree-actions {
            flex: 0 0 auto;
        }

        .chart-tree-children {
            margin-inline-start: 1.25rem;
            padding-inline-start: 1rem;
            border-inline-start: 2px solid var(--neutral-200);
        }

        @media (max-width: 1199px) {
            .chart-tree-row {
                flex-direction: column;
            }

            .chart-tree-actions {
                justify-content: flex-start !important;
                padding-inline-start: 42px;
            }
        }
    </style>

    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if (isset($errors) && $errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div>
                    <div class="card-header border-bottom py-3 px-5 d-flex align-items-center flex-wrap justify-content-between gap-3">
                        <x-table-controls
                            :action="route('chart_of_accounts.index')"
                            :filters="[
                                'status' => ['Active' => 'Active', 'Inactive' => 'Inactive'],
                                'type' => ['root' => 'Main Accounts', 'child' => 'Sub-Accounts'],
                                'parent_id' => $parentAccounts,
                                'account_type' => $accountTypes,
                                'account_subtype' => $accountSubtypes,
                                'account_nature' => $accountNatures,
                            ]"
                            :filterLabels="[
                                'status' => 'Status',
                                'type' => 'Type',
                                'parent_id' => 'Parent',
                                'account_type' => 'Account Type',
                                'account_subtype' => 'Account Subtype',
                                'account_nature' => 'Account Nature',
                            ]"
                        />
                        <div class="d-flex align-items-center gap-2">
                            <div class="btn-group btn-group-sm chart-view-toggle" role="group" aria-label="Chart of accounts view">
                                <button type="button" class="btn btn-outline-primary active js-chart-view-btn" data-view="table">
                                    Table
                                </button>
                                <button type="button" class="btn btn-outline-primary js-chart-view-btn" data-view="tree">
                                    Tree
                                </button>
                            </div>
                            <x-table-action type="create" target="#createAccountModal" class="d-flex align-items-center gap-2" />
                        </div>
                    </div>

                    <div id="chartAccountsTableView" class="js-chart-view-panel">
                        <x-table
                            :headers="['Account Code', 'Account Name', 'Parent', 'Level', 'Account Type', 'Account Subtype', 'Account Nature', 'Nature Inherited', 'Status', 'Child Accounts', 'Actions']"
                            :paginator="$accounts"
                            wrapper-class="chart-accounts-table-wrap border rounded-3"
                            wrapper-style="overflow-x: auto; overflow-y: hidden;"
                            table-class="chart-accounts-table table-hover align-middle"
                            table-style="min-width: 1460px;"
                            empty-message="No accounts found."
                        >
                            @forelse ($accounts as $account)
                                <tr>
                                    <td class="fw-semibold text-primary-light">{{ $account->code }}</td>
                                    <td class="chart-account-name">
                                        <span class="chart-account-tree-line" style="padding-inline-start: {{ max(0, ((int) $account->tree_level - 1) * 24) }}px;">
                                            @if ((int) $account->tree_level > 1)
                                                <span class="text-secondary">--</span>
                                            @endif
                                            <span>{{ $account->title }}</span>
                                            @if ($account->name_en)
                                                <span class="text-secondary small">({{ $account->name_en }})</span>
                                            @endif
                                        </span>
                                    </td>
                                    <td>
                                        @if ($account->parent)
                                            {{ $account->parent->code }} - {{ $account->parent->title }}
                                        @else
                                            <span class="badge rounded-pill bg-light text-secondary border px-3">Root</span>
                                        @endif
                                    </td>
                                    <td>{{ $account->tree_level }}</td>
                                    <td>{{ $accountTypes[$account->account_type] ?? 'Not set' }}</td>
                                    <td>{{ $accountSubtypes[$account->account_subtype] ?? '-' }}</td>
                                    <td>
                                        @if ($account->account_nature === 'debit')
                                            <span class="badge rounded-pill bg-info px-3">Debit increases</span>
                                        @elseif ($account->account_nature === 'credit')
                                            <span class="badge rounded-pill bg-warning text-dark px-3">Credit increases</span>
                                        @else
                                            <span class="text-secondary">Not set</span>
                                        @endif
                                    </td>
                                    <td>{{ $account->is_nature_inherited ? 'Yes' : 'No' }}</td>
                                    <td>
                                        <span class="badge rounded-pill px-3 {{ $account->status == 'Active' ? 'bg-success' : 'bg-secondary' }}">
                                            {{ $account->status }}
                                        </span>
                                    </td>
                                    <td>{{ $account->children_count }}</td>
                                    <td class="chart-account-actions">
                                        <div class="d-flex align-items-center justify-content-center gap-2">
                                           <x-table-action type="view" :url="route('chart_of_accounts.ledgers.index', ['account_id' => $account->id])"  title="View Ledger" custom-icon="lucide:book-open" />
                                            <x-table-action
                                                type="create"
                                                custom-icon="lucide:list-plus"
                                                title="Add Child"
                                                target="#createAccountModal"
                                                class="js-add-child-account"
                                                data-parent-id="{{ $account->id }}"
                                            />
                                            {{-- @if (!$account->can_delete)
                                                <span class="badge rounded-pill bg-light text-secondary border px-3">Locked</span>
                                            @else --}}
                                                <x-table-action type="edit" :target="'#editAccountModal' . $account->id" />

                                                <form action="{{ route('chart_of_accounts.update_status', $account->id) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    @method('PATCH')
                                                    <input type="hidden" name="status" value="{{ $account->status === 'Active' ? 'Inactive' : 'Active' }}">
                                                    <x-table-action
                                                        type="edit"
                                                        :button-type="'submit'"
                                                        :custom-icon="$account->status === 'Active' ? 'lucide:pause-circle' : 'lucide:play-circle'"
                                                        :title="$account->status === 'Active' ? 'Deactivate' : 'Activate'"
                                                    />
                                                </form>
                                            {{-- @endif --}}
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="11" class="text-center py-3">No accounts found.</td>
                                </tr>
                            @endforelse
                        </x-table>
                    </div>

                    <div id="chartAccountsTreeView" class="js-chart-view-panel d-none">
                        <div class="chart-tree-view">
                            @if ($treeAccounts->isEmpty())
                                <div class="px-6 py-12 text-center">
                                    <p class="text-slate-500 mb-0">No accounts found.</p>
                                </div>
                            @else
                                @include('dashboard.chart_of_accounts.partials.tree_nodes', [
                                    'nodes' => $treeAccounts,
                                    'accountTypes' => $accountTypes,
                                    'accountSubtypes' => $accountSubtypes,
                                    'accountNatures' => $accountNatures,
                                ])
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="createAccountModal" tabindex="-1" aria-labelledby="createAccountModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <form action="{{ route('chart_of_accounts.store') }}" method="POST" id="createAccountForm">
                @csrf
                <input type="hidden" name="is_nature_inherited" id="create_is_nature_inherited" value="0">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="modal-title" id="createAccountModalLabel">Add New Account</div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Account Code <span class="text-danger">*</span></label>
                                <input type="text" name="code" class="form-control" value="{{ old('code') }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Account Name Arabic <span class="text-danger">*</span></label>
                                <input type="text" name="title" class="form-control" value="{{ old('title') }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Account Name English</label>
                                <input type="text" name="name_en" class="form-control" value="{{ old('name_en') }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Parent Account</label>
                                <select name="parent_id" id="create_parent_id" class="form-control js-parent-select" data-nature-target="create_account_nature" data-inherited-target="create_is_nature_inherited">
                                    <option value="">No Parent (Root)</option>
                                    @foreach($parentOptions as $pAccount)
                                        <option value="{{ $pAccount->id }}">{{ $pAccount->code }} - {{ $pAccount->title }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Account Type <span class="text-danger">*</span></label>
                                <select name="account_type" class="form-control" required>
                                    @foreach($accountTypes as $value => $label)
                                        <option value="{{ $value }}" {{ old('account_type') === $value ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Account Subtype</label>
                                <select name="account_subtype" class="form-control">
                                    <option value="">None</option>
                                    @foreach($accountSubtypes as $value => $label)
                                        <option value="{{ $value }}" {{ old('account_subtype') === $value ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Account Nature <span class="text-danger">*</span></label>
                                <select name="account_nature" id="create_account_nature" class="form-control js-nature-select" data-inherited-target="create_is_nature_inherited" required>
                                    @foreach($accountNatures as $value => $label)
                                        <option value="{{ $value }}" {{ old('account_nature') === $value ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Status <span class="text-danger">*</span></label>
                                <select name="status" class="form-control" required>
                                    <option value="Active">Active</option>
                                    <option value="Inactive">Inactive</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-outline-primary">Create</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    @foreach ($modalAccounts as $account)
        <div class="modal fade" id="editAccountModal{{ $account->id }}" tabindex="-1" aria-labelledby="editAccountModalLabel{{ $account->id }}" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <form action="{{ route('chart_of_accounts.update', $account->id) }}" method="POST" class="js-edit-account-form" data-original-nature="{{ $account->account_nature }}" data-children-count="{{ $account->children_count }}">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="is_nature_inherited" id="edit_is_nature_inherited_{{ $account->id }}" value="{{ $account->is_nature_inherited ? 1 : 0 }}">
                    <input type="hidden" name="apply_nature_to_children" class="js-apply-nature-to-children" value="0">
                    <div class="modal-content">
                        <div class="modal-header">
                            <div class="modal-title" id="editAccountModalLabel{{ $account->id }}">Edit Account</div>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Account Code <span class="text-danger">*</span></label>
                                    <input type="text" name="code" class="form-control" value="{{ old('code', $account->code) }}" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Account Name Arabic <span class="text-danger">*</span></label>
                                    <input type="text" name="title" class="form-control" value="{{ old('title', $account->title) }}" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Account Name English</label>
                                    <input type="text" name="name_en" class="form-control" value="{{ old('name_en', $account->name_en) }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Parent Account</label>
                                    @if ($account->parent_id === null)
                                        <input type="hidden" name="parent_id" value="">
                                    @endif
                                    <select name="parent_id" class="form-control js-parent-select" data-nature-target="edit_account_nature_{{ $account->id }}" data-inherited-target="edit_is_nature_inherited_{{ $account->id }}" {{ $account->parent_id === null ? 'disabled' : '' }}>
                                        <option value="">No Parent (Root)</option>
                                        @foreach($parentOptions as $pAccount)
                                            @if ($pAccount->id !== $account->id)
                                                <option value="{{ $pAccount->id }}" {{ $account->parent_id == $pAccount->id ? 'selected' : '' }}>
                                                    {{ $pAccount->code }} - {{ $pAccount->title }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                    @if ($account->parent_id === null)
                                        <div class="form-text">Root accounts cannot be moved under another account.</div>
                                    @endif
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Account Type <span class="text-danger">*</span></label>
                                    <select name="account_type" class="form-control" required>
                                        @foreach($accountTypes as $value => $label)
                                            <option value="{{ $value }}" {{ $account->account_type === $value ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Account Subtype</label>
                                    <select name="account_subtype" class="form-control">
                                        <option value="">None</option>
                                        @foreach($accountSubtypes as $value => $label)
                                            <option value="{{ $value }}" {{ old('account_subtype', $account->account_subtype) === $value ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Account Nature <span class="text-danger">*</span></label>
                                    <select name="account_nature" id="edit_account_nature_{{ $account->id }}" class="form-control js-nature-select" data-inherited-target="edit_is_nature_inherited_{{ $account->id }}" required>
                                        @foreach($accountNatures as $value => $label)
                                            <option value="{{ $value }}" {{ $account->account_nature === $value ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Status <span class="text-danger">*</span></label>
                                    <select name="status" class="form-control" required>
                                        <option value="Active" {{ $account->status == 'Active' ? 'selected' : '' }}>Active</option>
                                        <option value="Inactive" {{ $account->status == 'Inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-outline-primary">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endforeach

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const parentAccounts = @json($parentAccountData);
            const parentNatureById = new Map(parentAccounts.map(account => [String(account.id), account.account_nature]));
            const createParentSelect = document.getElementById('create_parent_id');
            const createNatureSelect = document.getElementById('create_account_nature');
            const createInheritedInput = document.getElementById('create_is_nature_inherited');

            document.querySelectorAll('.js-add-child-account').forEach(button => {
                button.addEventListener('click', function () {
                    const parentId = this.dataset.parentId;
                    if (!createParentSelect || !createNatureSelect || !createInheritedInput) return;

                    createParentSelect.value = parentId;
                    const nature = parentNatureById.get(String(parentId));
                    if (nature) {
                        createNatureSelect.value = nature;
                        createInheritedInput.value = '1';
                    }
                });
            });

            document.querySelectorAll('.js-parent-select').forEach(select => {
                select.addEventListener('change', function () {
                    const natureTarget = document.getElementById(this.dataset.natureTarget);
                    const inheritedTarget = document.getElementById(this.dataset.inheritedTarget);
                    const nature = parentNatureById.get(String(this.value));

                    if (natureTarget && inheritedTarget && nature) {
                        natureTarget.value = nature;
                        inheritedTarget.value = '1';
                    } else if (inheritedTarget) {
                        inheritedTarget.value = '0';
                    }
                });
            });

            document.querySelectorAll('.js-nature-select').forEach(select => {
                select.addEventListener('change', function () {
                    const inheritedTarget = document.getElementById(this.dataset.inheritedTarget);
                    if (inheritedTarget) {
                        inheritedTarget.value = '0';
                    }
                });
            });

            document.querySelectorAll('.js-edit-account-form').forEach(form => {
                form.addEventListener('submit', function () {
                    const originalNature = this.dataset.originalNature;
                    const childrenCount = Number(this.dataset.childrenCount || 0);
                    const natureSelect = this.querySelector('[name="account_nature"]');
                    const applyInput = this.querySelector('.js-apply-nature-to-children');

                    if (!natureSelect || !applyInput || !originalNature || childrenCount < 1 || natureSelect.value === originalNature) {
                        return;
                    }

                    const shouldApply = window.confirm(
                        'Do you want to apply this Account Nature change to child accounts?\nAccounts that were manually overridden will not be changed.'
                    );

                    applyInput.value = shouldApply ? '1' : '0';
                });
            });

            const viewButtons = document.querySelectorAll('.js-chart-view-btn');
            const tablePanel = document.getElementById('chartAccountsTableView');
            const treePanel = document.getElementById('chartAccountsTreeView');

            viewButtons.forEach(button => {
                button.addEventListener('click', function () {
                    const isTree = this.dataset.view === 'tree';
                    tablePanel?.classList.toggle('d-none', isTree);
                    treePanel?.classList.toggle('d-none', !isTree);

                    viewButtons.forEach(btn => btn.classList.toggle('active', btn === this));
                });
            });

            document.querySelectorAll('.js-tree-toggle').forEach(button => {
                const icon = button.querySelector('iconify-icon');
                const target = document.querySelector(button.dataset.bsTarget);

                if (!icon || !target) return;

                target.addEventListener('show.bs.collapse', () => icon.setAttribute('icon', 'lucide:chevron-down'));
                target.addEventListener('hide.bs.collapse', () => icon.setAttribute('icon', 'lucide:chevron-right'));
            });
        });
    </script>
@endsection