@props([
    'title' => '',
    'searchPlaceholder' => 'جستجو...',
    'statusOptions' => [],
    'itemsPerPageOptions' => [5, 10, 25, 50],
    'currentPage' => 1,
    'totalItems' => 0,
    'itemsPerPage' => 10,
    'currentStatus' => 'all',
    'searchQuery' => '',
    'sortColumn' => 'id',
    'sortDirection' => 'asc'
])

<div class="data-table-container">
    <!-- Header -->
    @if($title)
    <header class="data-table-header">
        <h1>{{ $title }}</h1>
    </header>
    @endif

    <!-- Controls Section -->
    <section class="data-table-controls">
        <div class="control-group">
            <label for="searchInput">جستجو</label>
            <input 
                id="searchInput" 
                type="search" 
                placeholder="{{ $searchPlaceholder }}"
                value="{{ $searchQuery }}"
            />
        </div>
        
        @if(!empty($statusOptions))
        <div class="control-group">
            <label for="statusFilter">وضعیت</label>
            <select id="statusFilter">
                <option value="all">همه</option>
                @foreach($statusOptions as $value => $label)
                    <option value="{{ $value }}" {{ $currentStatus === $value ? 'selected' : '' }}>
                        {{ $label }}
                    </option>
                @endforeach
            </select>
        </div>
        @endif
        
        <div class="control-group">
            <label for="pageSize">تعداد در صفحه</label>
            <select id="pageSize">
                @foreach($itemsPerPageOptions as $option)
                    <option value="{{ $option }}" {{ $itemsPerPage == $option ? 'selected' : '' }}>
                        {{ $option }}
                    </option>
                @endforeach
            </select>
        </div>
        
        <div class="control-group">
            <button id="resetFilters" class="btn-secondary">پاکسازی فیلترها</button>
        </div>
    </section>

    <!-- Table Section -->
    <section class="data-table-card">
        <div class="table-wrapper">
            <table id="dataTable">
                <thead>
                    {{ $thead }}
                </thead>
                <tbody id="tableBody">
                    {{ $tbody }}
                </tbody>
            </table>
        </div>
        
        <div id="emptyState" class="empty-state" hidden>
            موردی یافت نشد
        </div>
        
        <footer class="table-footer">
            <div id="rangeInfo" class="range-info">
                {{ $totalItems > 0 ? (($currentPage - 1) * $itemsPerPage + 1) . ' تا ' . min($currentPage * $itemsPerPage, $totalItems) . ' از ' . $totalItems : '0 مورد' }}
            </div>
            <nav id="pagination" class="pagination"></nav>
        </footer>
    </section>
</div>

<!-- Data Table Default Styles -->
<style>
:root {
    --bg: #0f172a;
    --card: #111827;
    --muted: #94a3b8;
    --text: #e5e7eb;
    --accent: #22d3ee;
    --accent-2: #a78bfa;
    --border: #1f2937;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
}

.data-table-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.data-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.data-table-header h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}

.data-table-controls {
    display: grid;
    grid-template-columns: 1fr repeat(3, max-content);
    gap: 12px;
    align-items: end;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.0));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 16px;
    margin: 0 0 14px 0;
    backdrop-filter: blur(6px);
}

.control-group {
    display: grid;
    gap: 6px;
}

.control-group label {
    color: var(--muted);
    font-size: 12px;
}

.control-group input[type="search"], 
.control-group select {
    appearance: none;
    border: 1px solid var(--border);
    background: #0b1220;
    color: var(--text);
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.control-group input[type="search"]:focus, 
.control-group select:focus {
    border-color: rgba(34, 211, 238, 0.6);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

.btn-secondary {
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #101827, #0b1220);
    color: var(--text);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.2s ease, border-color 0.2s;
    font-family: inherit;
}

.btn-secondary:hover {
    transform: translateY(-1px);
    border-color: rgba(167, 139, 250, 0.5);
    background: linear-gradient(180deg, #131c2c, #0b1220);
}

.data-table-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #0b1220, #0f172a);
}

.table-wrapper {
    overflow: auto;
    max-height: 65vh;
}

#dataTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

#dataTable thead th {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, #0e1626, #0d1524);
    z-index: 2;
    text-align: right;
    font-weight: 600;
    font-size: 13px;
    color: #c7d2fe;
    border-bottom: 1px solid var(--border);
    padding: 12px;
    white-space: nowrap;
}

#dataTable th.sortable {
    cursor: pointer;
    user-select: none;
}

#dataTable th.sortable::after {
    content: "";
    display: inline-block;
    margin-right: 8px;
    border: 5px solid transparent;
    transform: translateY(-1px);
}

#dataTable th.sorted-asc::after {
    border-bottom-color: var(--accent);
}

#dataTable th.sorted-desc::after {
    border-top-color: var(--accent);
}

#dataTable tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    color: var(--text);
}

#dataTable tbody tr:hover {
    background: rgba(167, 139, 250, 0.05);
}

#dataTable tbody tr:nth-child(even) td {
    background: rgba(255,255,255,0.01);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid var(--border);
}

.status-active {
    background: rgba(16, 185, 129, 0.12);
    color: #d1fae5;
    border-color: rgba(16, 185, 129, 0.35);
}

.status-inactive {
    background: rgba(239, 68, 68, 0.12);
    color: #fee2e2;
    border-color: rgba(239, 68, 68, 0.35);
}

.status-pending {
    background: rgba(245, 158, 11, 0.12);
    color: #fef3c7;
    border-color: rgba(245, 158, 11, 0.35);
}

.table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: linear-gradient(180deg, #0d1524, #0b1220);
    border-top: 1px solid var(--border);
}

.range-info {
    color: var(--muted);
    font-size: 12px;
}

.pagination {
    display: flex;
    gap: 8px;
}

.page-btn {
    min-width: 34px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #0b1220;
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
    font-family: inherit;
}

.page-btn:hover { 
    transform: translateY(-1px); 
}

.page-btn[disabled] {
    opacity: 0.5;
    cursor: default;
}

.page-btn.active {
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.15), rgba(167, 139, 250, 0.15));
    border-color: rgba(34, 211, 238, 0.35);
}

.empty-state {
    padding: 24px;
    text-align: center;
    color: var(--muted);
}

@media (max-width: 720px) {
    .data-table-controls { 
        grid-template-columns: 1fr 1fr; 
    }
    .table-wrapper { 
        max-height: 55vh; 
    }
}
</style>

<!-- Data Table Default JavaScript -->
<script>
(function() {
    'use strict';
    
    // State management for the data table
    const state = {
        query: "{{ $searchQuery }}",
        status: "{{ $currentStatus }}",
        sortKey: "{{ $sortColumn }}",
        sortDir: "{{ $sortDirection }}",
        page: {{ $currentPage }},
        pageSize: {{ $itemsPerPage }},
        totalItems: {{ $totalItems }}
    };

    // DOM elements
    const searchInput = document.getElementById("searchInput");
    const statusFilter = document.getElementById("statusFilter");
    const pageSizeSelect = document.getElementById("pageSize");
    const resetFiltersBtn = document.getElementById("resetFilters");
    const table = document.getElementById("dataTable");
    const tableBody = document.getElementById("tableBody");
    const emptyState = document.getElementById("emptyState");
    const rangeInfo = document.getElementById("rangeInfo");
    const pagination = document.getElementById("pagination");

    // Utility functions
    function debounce(fn, ms = 300) {
        let timeoutId;
        return function (...args) {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => fn.apply(this, args), ms);
        };
    }

    function getTotalPages(total, size) {
        return Math.max(1, Math.ceil(total / size));
    }

    // Event handlers
    function handleSearch() {
        state.query = searchInput.value;
        state.page = 1;
        updateTable();
    }

    function handleStatusChange() {
        state.status = statusFilter.value;
        state.page = 1;
        updateTable();
    }

    function handlePageSizeChange() {
        state.pageSize = Number(pageSizeSelect.value);
        state.page = 1;
        updateTable();
    }

    function handleSort(column) {
        if (state.sortKey === column) {
            state.sortDir = state.sortDir === "asc" ? "desc" : "asc";
        } else {
            state.sortKey = column;
            state.sortDir = "asc";
        }
        updateTable();
    }

    function handlePagination(page) {
        state.page = page;
        updateTable();
    }

    function resetFilters() {
        state.query = "";
        state.status = "all";
        state.page = 1;
        state.sortKey = "{{ $sortColumn }}";
        state.sortDir = "{{ $sortDirection }}";
        
        searchInput.value = "";
        statusFilter.value = "all";
        pageSizeSelect.value = "{{ $itemsPerPage }}";
        
        updateTable();
    }

    // Table update function
    function updateTable() {
        // Emit custom event for parent components to handle
        const event = new CustomEvent('dataTableUpdate', {
            detail: {
                query: state.query,
                status: state.status,
                sortKey: state.sortKey,
                sortDir: state.sortDir,
                page: state.page,
                pageSize: state.pageSize
            }
        });
        document.dispatchEvent(event);
    }

    // Pagination rendering
    function renderPagination() {
        const totalPages = getTotalPages(state.totalItems, state.pageSize);
        state.page = Math.min(state.page, totalPages);

        const buttons = [];
        const createBtn = (label, page, disabled = false, active = false) => `
            <button class="page-btn${active ? " active" : ""}" data-page="${page}" ${disabled ? "disabled" : ""}>${label}</button>
        `;

        // Previous button
        buttons.push(createBtn("قبلی", Math.max(1, state.page - 1), state.page === 1));

        // Page numbers
        const windowSize = 2;
        const start = Math.max(1, state.page - windowSize);
        const end = Math.min(totalPages, state.page + windowSize);

        if (start > 1) {
            buttons.push(createBtn("1", 1, false, state.page === 1));
            if (start > 2) buttons.push(`<span class="page-btn" disabled>…</span>`);
        }

        for (let p = start; p <= end; p++) {
            buttons.push(createBtn(String(p), p, false, p === state.page));
        }

        if (end < totalPages) {
            if (end < totalPages - 1) buttons.push(`<span class="page-btn" disabled>…</span>`);
            buttons.push(createBtn(String(totalPages), totalPages, false, state.page === totalPages));
        }

        // Next button
        buttons.push(createBtn("بعدی", Math.min(totalPages, state.page + 1), state.page === totalPages));

        pagination.innerHTML = buttons.join("");
    }

    // Update range info
    function updateRangeInfo() {
        if (state.totalItems === 0) {
            rangeInfo.textContent = '0 مورد';
            return;
        }
        
        const from = (state.page - 1) * state.pageSize + 1;
        const to = Math.min(state.totalItems, state.page * state.pageSize);
        rangeInfo.textContent = `${from} تا ${to} از ${state.totalItems}`;
    }

    // Update sort indicators
    function updateSortIndicators() {
        document.querySelectorAll("th.sortable").forEach((th) => {
            th.classList.remove("sorted-asc", "sorted-desc");
            const key = th.getAttribute("data-key");
            if (key === state.sortKey) {
                th.classList.add(state.sortDir === "asc" ? "sorted-asc" : "sorted-desc");
            }
        });
    }

    // Main update function
    function updateTable() {
        updateRangeInfo();
        renderPagination();
        updateSortIndicators();
        
        // Emit event for parent components
        const event = new CustomEvent('dataTableUpdate', {
            detail: {
                query: state.query,
                status: state.status,
                sortKey: state.sortKey,
                sortDir: state.sortDir,
                page: state.page,
                pageSize: state.pageSize
            }
        });
        document.dispatchEvent(event);
    }

    // Event listeners
    searchInput.addEventListener("input", debounce(handleSearch, 250));
    statusFilter.addEventListener("change", handleStatusChange);
    pageSizeSelect.addEventListener("change", handlePageSizeChange);
    resetFiltersBtn.addEventListener("click", resetFilters);

    // Sortable column headers
    document.querySelectorAll("th.sortable").forEach((th) => {
        th.addEventListener("click", () => {
            const key = th.getAttribute("data-key");
            handleSort(key);
        });
    });

    // Pagination clicks
    pagination.addEventListener("click", (e) => {
        const btn = e.target.closest(".page-btn");
        if (!btn || btn.hasAttribute("disabled")) return;
        
        const page = Number(btn.getAttribute("data-page"));
        if (!Number.isNaN(page)) {
            handlePagination(page);
        }
    });

    // Initialize
    updateTable();
})();
</script>