@extends('layouts.app')
@section('title', 'Chart of Accounts')

@push('stylesheets')
@include('partials.index-datatable-styles')
@include('partials.filter-card-styles')
<style>
    #chartOfAccountsTableCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    #chartOfAccountsTableCard .table-responsive table td:last-child { position: relative; white-space: nowrap; }
    #chartOfAccountsTableCard .dropdown .dropdown-menu { position: absolute !important; }
    @media (max-width: 768px) {
        #chartOfAccountsTableCard .table-responsive { overflow-x: auto; }
    }
</style>
@endpush

@section('contents')
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12" id="chartOfAccountsTableCard">
                    <x-table-filter-card
                        action="{{ route('chart-of-accounts.index') }}"
                        id="chartOfAccountFilterForm"
                        :resetUrl="route('chart-of-accounts.index')"
                    >
                        <div class="pms-filter-field">
                            <label for="filter-search">Search</label>
                            <input type="text" name="search" id="filter-search" class="form-control form-control-sm"
                                   placeholder="Search by code or title…" value="{{ $search }}">
                        </div>
                    </x-table-filter-card>

                    <x-active-filter-chips :chips="$activeChips" :totalCount="$chartOfAccounts->total()" />

                    <x-layouts.index-card
                        :createRoute="can('chart_of_account', 'add') ? route('chart-of-accounts.create') : null"
                        tableHeading="Chart of Accounts"
                        createLabel="Add Chart of Account"
                        :headers="['Code', 'Title', 'Parent', 'Budget', 'Type', 'Sort', 'Status', 'Created At']"
                        :perPageSlot="view('components.per-page-selector', ['current' => $perPage, 'baseUrl' => route('chart-of-accounts.index')])"
                        :sortColumns="[null, null, null, null, null, null, 'chart_of_accounts.status', 'chart_of_accounts.created_at']"
                        :pagination="$chartOfAccounts->links('vendor.pagination.bootstrap-4')">
                        @forelse ($chartOfAccounts as $row)
                            <tr>
                                <td class="text-monospace small">{{ $row->code }}</td>
                                <td>
                                    <x-details-modal-with-actions
                                        as="trigger"
                                        modalId="chartOfAccountDetailsModal"
                                        :detailsUrl="route('chart-of-accounts.show', $row->id)"
                                        :entityId="$row->id"
                                        :entityName="$row->code ?? 'Chart of Account'"
                                        :editUrl="route('chart-of-accounts.edit', $row->id)"
                                        :deleteUrl="route('chart-of-accounts.destroy', $row->id)"
                                    >
                                        {{ \Illuminate\Support\Str::limit($row->title, 80) }}
                                    </x-details-modal-with-actions>
                                </td>
                                <td>
                                    @if ($row->parent)
                                        <span class="small">{{ $row->parent->code }}</span>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td>{{ $row->budget_type ? ucfirst($row->budget_type) : '—' }}</td>
                                <td><span class="small">{{ $row->types ?? '—' }}</span></td>
                                <td>{{ $row->sort_order }}</td>
                                <td>
                                    @if($row->status)
                                        <span class="badge badge-success">Active</span>
                                    @else
                                        <span class="badge badge-secondary">Inactive</span>
                                    @endif
                                </td>
                                <td>{{ $row->created_at->format('d M Y') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8">
                                    <x-table-empty-state
                                        :state="request()->anyFilled(['search']) ? 'no-results' : 'empty'"
                                        :createRoute="can('chart_of_account', 'add') ? route('chart-of-accounts.create') : null"
                                        createLabel="Add Chart of Account"
                                        :resetUrl="route('chart-of-accounts.index')"
                                    />
                                </td>
                            </tr>
                        @endforelse
                    </x-layouts.index-card>
                </div>
            </div>
        </div>
    </section>

    <x-details-modal-with-actions
        modalId="chartOfAccountDetailsModal"
        entityLabel="Chart of Account"
        historyTarget="#versionHistoryModal"
        form="chart_of_account"
        formKey="chart_of_account"
    />

    <x-version-history-modal form="chart_of_account" entityLabel="Chart of Account" />
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
<script>
    $(function () {
        PmsIndexDataTable.initLaravelPaginated('#example1');
        PmsIndexDataTable.attachServerSort('#example1', {
            baseUrl: '{{ route("chart-of-accounts.index") }}',
            currentQuery: @json(request()->except(['page']) + ['sort_col' => $sort['col'], 'sort_dir' => $sort['dir']]),
            currentSortCol: '{{ $sort["col"] }}',
            currentSortDir: '{{ $sort["dir"] }}'
        });

        $(document).on('click', '.action-dropdown-delete, .btn-details-modal-delete', function(e) {
            e.preventDefault();
            var form = $(this).closest('form');
            if (!form.length) return;
            Swal.fire({
                title: 'Are you sure?',
                text: 'Are you sure you want to delete this chart of account? You will not be able to revert this!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!'
            }).then(function(result) {
                if (result.isConfirmed) form.submit();
            });
        });

        $(document).on('click', '.details-modal-trigger', function(e) {
            e.preventDefault();
            var $t = $(this);
            var modalId = $t.data('modal-id');
            if (modalId !== 'chartOfAccountDetailsModal') return;
            var detailsUrl = $t.data('details-url');
            var id = $t.data('entity-id');
            var name = $t.data('entity-name') || 'Chart of Account';
            var editUrl = $t.data('edit-url');
            var deleteUrl = $t.data('delete-url');

            $('#' + modalId + '-title-name').text(name);
            $('#' + modalId + '-body').html('<div class="text-center py-5"><div class="spinner-border text-primary" role="status"></div><p class="mt-2">Loading...</p></div>');
            var $editBtn = $('#' + modalId + '-edit-btn');
            var $deleteForm = $('#' + modalId + '-delete-form');
            var $historyBtn = $('#' + modalId + '-history-btn');
            if ($editBtn.length) { $editBtn.hide().attr('href', '#'); }
            if ($deleteForm.length) { $deleteForm.hide().attr('action', '#'); }
            if ($historyBtn.length) { $historyBtn.hide().removeData('id').removeData('name').attr('data-id', id).attr('data-name', name); }
            $('#' + modalId).modal('show');

            $.ajax({
                url: detailsUrl,
                method: 'GET',
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                success: function(res) {
                    if (res.status === 200 && res.data) {
                        var d = res.data;
                        var html = '<dl class="row mb-0">';
                        html += '<dt class="col-sm-4">Code</dt><dd class="col-sm-8"><strong>' + (d.code || '-') + '</strong></dd>';
                        html += '<dt class="col-sm-4">Title</dt><dd class="col-sm-8">' + (d.title || '-') + '</dd>';
                        html += '<dt class="col-sm-4">Parent</dt><dd class="col-sm-8">' + (d.parent || '-') + '</dd>';
                        html += '<dt class="col-sm-4">Label</dt><dd class="col-sm-8">' + (d.label || '-') + '</dd>';
                        html += '<dt class="col-sm-4">Budget type</dt><dd class="col-sm-8">' + (d.budget_type || '-') + '</dd>';
                        html += '<dt class="col-sm-4">Account type</dt><dd class="col-sm-8">' + (d.types || '-') + '</dd>';
                        html += '<dt class="col-sm-4">Sort order</dt><dd class="col-sm-8">' + (d.sort_order != null ? d.sort_order : '-') + '</dd>';
                        html += '<dt class="col-sm-4">Status</dt><dd class="col-sm-8">' + (d.status ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-secondary">Inactive</span>') + '</dd>';
                        html += '<dt class="col-sm-4">Created</dt><dd class="col-sm-8">' + (d.created_at || '-') + '</dd>';
                        html += '<dt class="col-sm-4">Updated</dt><dd class="col-sm-8">' + (d.updated_at || '-') + '</dd></dl>';
                        $('#' + modalId + '-body').html(html);
                        if ($editBtn.length && editUrl) { $editBtn.attr('href', editUrl).show(); }
                        if ($deleteForm.length && deleteUrl) { $deleteForm.attr('action', deleteUrl).show(); }
                        if ($historyBtn.length) { $historyBtn.show(); }
                    } else {
                        $('#' + modalId + '-body').html('<div class="alert alert-warning">Unable to load details.</div>');
                    }
                },
                error: function(xhr) {
                    var msg = 'Failed to load details.';
                    if (xhr.status === 403) msg = 'Permission denied.';
                    if (xhr.status === 404) msg = 'Chart of Account not found.';
                    $('#' + modalId + '-body').html('<div class="alert alert-danger">' + msg + '</div>');
                }
            });
        });
    });
</script>
@endpush