{{--
    Lead Tickets Tab
    Usage: @include('admin.leads.partials.tickets_tab', ['leadId' => $leadId])
--}}
@php
    $ticketLeadDisplayName = '';
    if (isset($lead)) {
        $ticketLeadDisplayName = trim($lead->dba ?? '') ?: trim(($lead->first_name ?? '') . ' ' . ($lead->last_name ?? ''));
    }
    $helpdeskTicketTypes = \App\Models\Masters\MasterHelpdeskTicketType::where('company_id', \Illuminate\Support\Facades\Auth::user()->company_id)
        ->where('status', 1)
        ->orderBy('display_order')
        ->get();
@endphp
<div id="lead-tickets-panel" data-lead-id="{{ $leadId ?? 0 }}" data-lead-name="{{ $ticketLeadDisplayName }}">
    <div class="p-3">

        {{-- Header --}}
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="mb-0 fw-bold">Helpdesk Tickets</h6>
            <a href="{{ route('merchant-helpdesk-tickets.create', ['lead_id' => $leadId, 'tf' => 'lead']) }}"
               class="green-btn-inner btn-sm waves-effect" style="text-decoration:none;">
                <i class="bx bx-plus"></i> Add New Ticket
            </a>
        </div>

        {{-- Controls --}}
        <div class="d-flex align-items-center gap-2 mb-3 flex-wrap project-form">
            <div class="custom-control custom-checkbox project-checkbox">
                <input type="checkbox" class="custom-control-input" id="showResolvedCheck" checked>
                <label class="custom-control-label small" for="showResolvedCheck">Show Resolved</label>
            </div>
            <div class="input-group input-group-sm form-line" style="max-width:220px;">
                <input type="text" id="ticketSearchInput" class="form-control" placeholder="Search">
                <span class="input-group-text"><i class="bx bx-search"></i></span>
            </div>
            <div class="hw-colcfg-wrapper ms-auto" id="ticket-col-wrapper">
                <button class="green-btn-inner filter-btn btn-sm waves-effect hw-colcfg-btn" type="button" title="Column Settings" id="ticketColBtn">
                    <i class="{{ \Config::get('settings.icon_settings') }}"></i>
                </button>
                <div class="hw-colcfg-panel shadow" id="ticketColumnSettings">
                    <div class="hw-colcfg-header">
                        <div class="search-field mb-0">
                            <input type="text" class="form-control pr-45" placeholder="Column Search" id="colSearchInput">
                            <i class="bx bx-search-alt-2"></i>
                        </div>
                    </div>
                    <div class="hw-colcfg-actions">
                        <div class="hw-colcfg-action-icons">
                            <button type="button" class="hw-colcfg-icon-btn" id="ticketColCheckAll" title="Check All"><i class="bx bx-check-square"></i></button>
                            <button type="button" class="hw-colcfg-icon-btn" id="ticketColReset" title="Reset"><i class="bx bx-reset"></i></button>
                        </div>
                        <button type="button" class="hw-colcfg-apply-btn green-btn-inner" id="ticketColApply">Apply</button>
                    </div>
                    <div class="hw-colcfg-list" id="ticketColList">
                        @php
                            $ticketCols = [
                                'id' => 'ID', 'created_at' => 'Created', 'subject' => 'Subject',
                                'due_at' => 'Due', 'files_count' => 'Files', 'status' => 'Status',
                                'type' => 'Type', 'priority' => 'Priority', 'assigned' => 'Assigned',
                                'last_comment_at' => 'Last Comment', 'age' => 'Age', 'updated_at' => 'Modified'
                            ];
                        @endphp
                        @foreach($ticketCols as $colKey => $colLabel)
                        <div class="custom-control custom-checkbox project-checkbox col-setting-item">
                            <input class="custom-control-input ticket-col-check" type="checkbox" value="{{ $colKey }}" id="tc_{{ $colKey }}" checked>
                            <label class="custom-control-label" for="tc_{{ $colKey }}">{{ $colLabel }}</label>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        {{-- Table --}}
        <div class="table-responsive">
            <table class="table custom-table mb-0" id="leadTicketsTable">
                <thead>
                    <tr style="background-color:#16C4C0; color:#fff;">
                        <th data-col="id" class="sortable-th" style="cursor:pointer;">ID <i class="bx bx-sort-alt-2"></i></th>
                        <th data-col="created_at" class="sortable-th" style="cursor:pointer;">Created <i class="bx bx-sort-alt-2"></i></th>
                        <th data-col="subject" class="sortable-th" style="cursor:pointer;">Subject <i class="bx bx-sort-alt-2"></i></th>
                        <th data-col="due_at" class="sortable-th" style="cursor:pointer;">Due <i class="bx bx-sort-alt-2"></i></th>
                        <th data-col="files_count">Files <i class="bx bx-sort-alt-2"></i></th>
                        <th data-col="status" class="sortable-th" style="cursor:pointer;">Status <i class="bx bx-sort-alt-2"></i></th>
                        <th data-col="type">Type <i class="bx bx-sort-alt-2"></i></th>
                        <th data-col="priority" class="sortable-th" style="cursor:pointer;">Priority <i class="bx bx-sort-alt-2"></i></th>
                        <th data-col="assigned">Assigned</th>
                        <th data-col="last_comment_at" class="sortable-th" style="cursor:pointer;">Last Comment</th>
                        <th data-col="age">Age</th>
                        <th data-col="updated_at" class="sortable-th" style="cursor:pointer;">Modified <i class="bx bx-sort-alt-2"></i></th>
                    </tr>
                </thead>
                <tbody id="ticketsTableBody"></tbody>
            </table>
        </div>

        {{-- Empty state --}}
        <div id="ticketsEmptyState" class="text-center py-4 text-muted d-none">
            <i class="bx bx-support" style="font-size:3rem;"></i>
            <p class="mb-1 mt-2 fw-bold">There are no results in this table.</p>
            <p class="small">You can try expanding your search terms or changing the filters.</p>
        </div>

        {{-- Loading --}}
        <div id="ticketsLoadingState" class="text-center py-4 text-muted">
            <div class="spinner-border spinner-border-sm"></div> Loading...
        </div>

        {{-- Pagination --}}
        @php
            $ticketsPerPageOptions = [10, 25, 50, 100, 500, 1000];
            $ticketsDefaultPerPage = (int) ($userListingTableSize ?? config('settings.per_page_record', 25));
            if ($ticketsDefaultPerPage && !in_array($ticketsDefaultPerPage, $ticketsPerPageOptions)) {
                $ticketsPerPageOptions[] = $ticketsDefaultPerPage;
                sort($ticketsPerPageOptions);
            }
        @endphp
        <div class="pagination-wrap mt-2" data-default-per-page="{{ $ticketsDefaultPerPage }}">
            <div class="col-lg-12">
                <div class="d-flex justify-content-between align-items-center my-3 pagination-info">
                    <div class="d-flex align-items-center">
                        <div class="me-3 small text-muted">Total records: <span id="ticketsTotalRecords">0</span></div>
                    </div>
                    <div class="d-flex align-items-center justify-content-end gap-3 pagination-info-inner">
                        <div class="d-flex align-items-center per-page-select">
                            <label for="ticketsPerPage" class="form-label mb-0 me-2">Items per page:</label>
                            <select id="ticketsPerPage" class="form-select form-select-sm select2 no-search" style="width:auto;">
                                @foreach($ticketsPerPageOptions as $opt)
                                    <option value="{{ $opt }}" {{ $ticketsDefaultPerPage == $opt ? 'selected' : '' }}>{{ $opt }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="pagination-links" id="ticketsPaginationLinks"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('page_script')
<script>
(function () {
    var __ticketsPanel = document.getElementById('lead-tickets-panel');
    if (!__ticketsPanel) return; // tab not rendered on this page
    const leadId   = __ticketsPanel.dataset.leadId;
    const indexUrl  = '{{ route("leads.tickets.index", ["lead" => "__L__"], false) }}'.replace('__L__', leadId);

    let currentPage = 1;
    let perPage     = parseInt(document.querySelector('.pagination-wrap[data-default-per-page]')?.dataset.defaultPerPage) || 25;
    let totalItems  = 0;
    let lastPage    = 1;
    let sortCol     = 'id';
    let sortDir     = 'desc';
    let searchText  = '';
    let searchTimer = null;
    let showResolved = true;
    let visibleColumns = [
        'id','created_at','subject','due_at','files_count','status',
        'type','priority','assigned','last_comment_at','age','updated_at'
    ];
    const defaultVisibleColumns = visibleColumns.slice(); // snapshot of defaults for Reset

    // --- Load tickets ---
    function loadTickets() {
        document.getElementById('ticketsLoadingState').classList.remove('d-none');
        document.getElementById('ticketsEmptyState').classList.add('d-none');
        document.getElementById('ticketsTableBody').innerHTML = '';

        var params = new URLSearchParams();
        params.append('page', currentPage);
        params.append('per_page', perPage);
        params.append('sort', sortCol);
        params.append('sort_dir', sortDir);
        params.append('show_resolved', showResolved ? '1' : '0');
        if (searchText) params.append('search', searchText);

        fetch(indexUrl + '?' + params.toString(), {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
        .then(function (r) { return r.json(); })
        .then(function (json) {
            document.getElementById('ticketsLoadingState').classList.add('d-none');
            var data = json.data || {};
            var tickets = data.tickets || [];
            totalItems = data.total || 0;
            lastPage = data.last_page || 1;

            updateTabBadge(totalItems);
            updatePagination();

            if (tickets.length === 0) {
                document.getElementById('ticketsEmptyState').classList.remove('d-none');
                return;
            }

            var tbody = document.getElementById('ticketsTableBody');
            tickets.forEach(function (t) {
                tbody.appendChild(createRow(t));
            });
        })
        .catch(function (err) {
            console.error(err);
            document.getElementById('ticketsLoadingState').classList.add('d-none');
        });
    }

    function createRow(t) {
        var tr = document.createElement('tr');
        tr.style.cursor = 'pointer';
        tr.addEventListener('click', function () {
            window.open(t.edit_url, '_blank');
        });

        var cells = {
            'id': t.id,
            'created_at': escHtml(t.created_at),
            'subject': escHtml(t.subject),
            'due_at': escHtml(t.due_at),
            'files_count': t.files_count || 0,
            'status': '<span class="badge bg-' + (t.status_badge || 'secondary') + '">' + escHtml(t.status) + '</span>',
            'type': escHtml(t.type),
            'priority': '<span class="badge bg-' + (t.priority_badge || 'secondary') + '">' + escHtml(t.priority) + '</span>',
            'assigned': escHtml(t.assigned),
            'last_comment_at': escHtml(t.last_comment_at),
            'age': escHtml(t.age),
            'updated_at': escHtml(t.updated_at)
        };

        visibleColumns.forEach(function (col) {
            var td = document.createElement('td');
            td.dataset.col = col;
            td.innerHTML = cells[col] !== undefined ? cells[col] : '--';
            td.className = 'small';
            tr.appendChild(td);
        });

        // Hide columns that aren't visible
        var allCols = ['id','created_at','subject','due_at','files_count','status','type','priority','assigned','last_comment_at','age','updated_at'];
        allCols.forEach(function (col) {
            if (visibleColumns.indexOf(col) === -1) {
                var tds = tr.querySelectorAll('[data-col="' + col + '"]');
                tds.forEach(function (td) { td.style.display = 'none'; });
            }
        });

        return tr;
    }

    // --- Pagination ---
    function updatePagination() {
        document.getElementById('ticketsTotalRecords').textContent = totalItems;

        var linksEl = document.getElementById('ticketsPaginationLinks');
        if (lastPage <= 1) { linksEl.innerHTML = ''; return; }

        var html = '<nav><ul class="pagination pagination-sm mb-0">';

        // Previous
        if (currentPage <= 1) {
            html += '<li class="page-item disabled"><span class="page-link">Previous</span></li>';
        } else {
            html += '<li class="page-item"><a class="page-link ticket-page-link" href="#" data-page="' + (currentPage - 1) + '">Previous</a></li>';
        }

        // Page numbers (window of 5)
        var start = Math.max(1, currentPage - 2);
        var end   = Math.min(lastPage, currentPage + 2);
        if (start > 1) {
            html += '<li class="page-item"><a class="page-link ticket-page-link" href="#" data-page="1">1</a></li>';
            if (start > 2) html += '<li class="page-item disabled"><span class="page-link">...</span></li>';
        }
        for (var p = start; p <= end; p++) {
            if (p === currentPage) {
                html += '<li class="page-item active"><span class="page-link">' + p + '</span></li>';
            } else {
                html += '<li class="page-item"><a class="page-link ticket-page-link" href="#" data-page="' + p + '">' + p + '</a></li>';
            }
        }
        if (end < lastPage) {
            if (end < lastPage - 1) html += '<li class="page-item disabled"><span class="page-link">...</span></li>';
            html += '<li class="page-item"><a class="page-link ticket-page-link" href="#" data-page="' + lastPage + '">' + lastPage + '</a></li>';
        }

        // Next
        if (currentPage >= lastPage) {
            html += '<li class="page-item disabled"><span class="page-link">Next</span></li>';
        } else {
            html += '<li class="page-item"><a class="page-link ticket-page-link" href="#" data-page="' + (currentPage + 1) + '">Next</a></li>';
        }

        html += '</ul></nav>';
        linksEl.innerHTML = html;

        linksEl.querySelectorAll('.ticket-page-link').forEach(function (a) {
            a.addEventListener('click', function (e) {
                e.preventDefault();
                currentPage = parseInt(this.dataset.page);
                loadTickets();
            });
        });
    }

    var _ticketsPerPage = document.getElementById('ticketsPerPage');
    if (_ticketsPerPage) _ticketsPerPage.addEventListener('change', function () {
        perPage = parseInt(this.value);
        currentPage = 1;
        loadTickets();
    });

    // --- Search ---
    var _ticketSearchInput = document.getElementById('ticketSearchInput');
    if (_ticketSearchInput) _ticketSearchInput.addEventListener('input', function () {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(function () {
            searchText = document.getElementById('ticketSearchInput').value.trim();
            currentPage = 1;
            loadTickets();
        }, 300);
    });

    // --- Show resolved ---
    var _showResolvedCheck = document.getElementById('showResolvedCheck');
    if (_showResolvedCheck) _showResolvedCheck.addEventListener('change', function () {
        showResolved = this.checked;
        currentPage = 1;
        loadTickets();
    });

    // --- Sorting ---
    document.querySelectorAll('#leadTicketsTable .sortable-th').forEach(function (th) {
        th.addEventListener('click', function () {
            var col = this.dataset.col;
            if (sortCol === col) {
                sortDir = sortDir === 'asc' ? 'desc' : 'asc';
            } else {
                sortCol = col;
                sortDir = 'asc';
            }
            currentPage = 1;
            loadTickets();
        });
    });

    // --- Column visibility panel (global hw-colcfg-wrapper standard) ---
    // Checkboxes are UI-only; table is only updated when Apply is clicked.
    var ticketColBtn   = document.getElementById('ticketColBtn');
    var ticketColPanel = document.getElementById('ticketColumnSettings');

    function applyTicketColumnVisibility() {
        // Rebuild visibleColumns in canonical definition order
        var allCols = ['id','created_at','subject','due_at','files_count','status','type','priority','assigned','last_comment_at','age','updated_at'];
        var checked = {};
        document.querySelectorAll('#ticketColList .ticket-col-check').forEach(function (cb) {
            if (cb.checked) checked[cb.value] = true;
        });
        visibleColumns = allCols.filter(function (k) { return checked[k]; });
        if (visibleColumns.length === 0) {
            showAlert('Warning', 'Please select at least one column.', 'warning');
            return false;
        }
        // Apply visibility to all rendered table cells
        allCols.forEach(function (col) {
            var show = visibleColumns.indexOf(col) !== -1;
            document.querySelectorAll('#leadTicketsTable [data-col="' + col + '"]').forEach(function (el) {
                el.style.display = show ? '' : 'none';
            });
        });
        return true;
    }

    if (ticketColBtn && ticketColPanel) {
        function positionTicketColPanel() {
            var btnRect    = ticketColBtn.getBoundingClientRect();
            var vpH        = window.innerHeight;
            var spaceBelow = vpH - btnRect.bottom - 12;
            var spaceAbove = btnRect.top - 12;
            if (spaceBelow >= 180 || spaceBelow >= spaceAbove) {
                ticketColPanel.style.top    = 'calc(100% + 4px)';
                ticketColPanel.style.bottom = 'auto';
                ticketColPanel.style.maxHeight = Math.min(420, Math.max(140, spaceBelow)) + 'px';
            } else {
                ticketColPanel.style.top    = 'auto';
                ticketColPanel.style.bottom = 'calc(100% + 4px)';
                ticketColPanel.style.maxHeight = Math.min(420, Math.max(140, spaceAbove)) + 'px';
            }
        }
        ticketColBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            if (ticketColPanel.style.display === 'flex') {
                ticketColPanel.style.display = 'none';
            } else {
                ticketColPanel.style.display = 'flex';
                positionTicketColPanel();
            }
        });
        ticketColPanel.addEventListener('click', function (e) { e.stopPropagation(); });
        document.addEventListener('click', function (e) {
            if (!e.target.closest('#ticket-col-wrapper')) {
                ticketColPanel.style.display = 'none';
            }
        });

        // Apply — commit checked state to table, then close panel
        var ticketColApplyBtn = document.getElementById('ticketColApply');
        if (ticketColApplyBtn) {
            ticketColApplyBtn.addEventListener('click', function () {
                if (applyTicketColumnVisibility()) {
                    ticketColPanel.style.display = 'none';
                }
            });
        }

        // Check All — check every checkbox (UI only, no table changes yet)
        var ticketCheckAllBtn = document.getElementById('ticketColCheckAll');
        if (ticketCheckAllBtn) {
            ticketCheckAllBtn.addEventListener('click', function () {
                document.querySelectorAll('#ticketColList .ticket-col-check').forEach(function (cb) {
                    cb.checked = true;
                });
            });
        }

        // Reset — restore checkboxes to defaultVisibleColumns (UI only, no table changes yet)
        var ticketResetBtn = document.getElementById('ticketColReset');
        if (ticketResetBtn) {
            ticketResetBtn.addEventListener('click', function () {
                document.querySelectorAll('#ticketColList .ticket-col-check').forEach(function (cb) {
                    cb.checked = defaultVisibleColumns.indexOf(cb.value) !== -1;
                });
            });
        }
    }

    // Column search filter
    var _colSearchInput = document.getElementById('colSearchInput');
    if (_colSearchInput) _colSearchInput.addEventListener('input', function () {
        var q = this.value.toLowerCase();
        document.querySelectorAll('.col-setting-item').forEach(function (item) {
            var label = item.querySelector('label').textContent.toLowerCase();
            item.style.display = label.indexOf(q) >= 0 ? '' : 'none';
        });
    });

    // --- Tab badge ---
    function updateTabBadge(count) {
        var panel = document.getElementById('lead-tickets-panel');
        var tabPane = panel.closest('.tab-pane');
        if (tabPane) {
            var tabId = tabPane.id;
            var tabBtn = document.querySelector('[data-bs-target="#' + tabId + '"], [href="#' + tabId + '"]');
            if (tabBtn) {
                tabBtn.innerHTML = 'Tickets (' + count + ')';
            }
        }
    }

    function escHtml(str) {
        var d = document.createElement('div');
        d.appendChild(document.createTextNode(String(str || '')));
        return d.innerHTML;
    }

    // --- Init ---
    loadTickets();
})();
</script>
@endpush