@props([
    'headers' => [],
    'rows' => [],
    'searchable' => false,
    'searchPlaceholder' => 'Search...',
    'sortable' => true,
    'hoverable' => true,
    'striped' => false,
    'compact' => false,
    'paginator' => null,
])

<div class="modern-table-wrapper">
    @if($searchable || !empty($filters))
    <form method="GET" id="data-table-filter-form">
    <div class="table-controls">
        @if($searchable)
        <div class="search-box">
            <svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
            <input type="text" name="search" placeholder="{{ $searchPlaceholder }}" value="{{ request('search') }}" class="search-input">
        </div>
        @endif

        @if(!empty($filters))
        <div class="filters">
            {{ $filters }}
        </div>
        @endif

        <button type="submit" class="btn-search">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
            </svg>
            Filter
        </button>
    </div>
    </form>
    @endif

    <div class="table-container">
        <table class="modern-table {{ $hoverable ? 'hoverable' : '' }} {{ $striped ? 'striped' : '' }} {{ $compact ? 'compact' : '' }}">
            <thead>
                <tr>
                    @foreach($headers as $header)
                    <th class="{{ $header['align'] ?? 'left' }} {{ $header['sortable'] ?? $sortable ? 'sortable' : '' }}" 
                        style="{{ isset($header['width']) ? 'width: ' . $header['width'] : '' }}">
                        <div class="th-content">
                            <span>{{ $header['label'] }}</span>
                            @if($header['sortable'] ?? $sortable)
                            <svg class="sort-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="14" height="14">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
                            </svg>
                            @endif
                        </div>
                    </th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                {{ $slot }}
            </tbody>
        </table>
    </div>

    @if($paginator && $paginator->hasPages())
    <div class="pagination-wrapper">
        <div class="pagination-info">
            Showing <strong>{{ $paginator->firstItem() }}</strong> to <strong>{{ $paginator->lastItem() }}</strong> of <strong>{{ $paginator->total() }}</strong> results
        </div>
        <div class="pagination-controls">
            @if ($paginator->onFirstPage())
                <span class="pagination-btn disabled">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                    Previous
                </span>
            @else
                <a href="{{ $paginator->previousPageUrl() }}" class="pagination-btn">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                    Previous
                </a>
            @endif

            <div class="page-input-wrapper">
                <span class="page-label">Page</span>
                <input 
                    type="number" 
                    class="page-input" 
                    value="{{ $paginator->currentPage() }}" 
                    min="1" 
                    max="{{ $paginator->lastPage() }}"
                    onchange="window.location.href = '{{ $paginator->url(1) }}'.replace('page=1', 'page=' + this.value)"
                >
                <span class="page-label">of {{ $paginator->lastPage() }}</span>
            </div>

            @if ($paginator->hasMorePages())
                <a href="{{ $paginator->nextPageUrl() }}" class="pagination-btn">
                    Next
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </a>
            @else
                <span class="pagination-btn disabled">
                    Next
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </span>
            @endif
        </div>
    </div>
    @endif
</div>

<style>
.modern-table-wrapper {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    overflow: hidden;
}

.table-controls {
    padding: 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #94a3b8;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    background: white;
}

.search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filters select {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.filters select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-search {
    padding: 10px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-search:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
}

.table-container {
    overflow-x: auto;
}

.modern-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 0px !important;
}

.modern-table thead {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.modern-table th {
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.modern-table th.center {
    text-align: center;
}

.modern-table th.right {
    text-align: right;
}

.modern-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.modern-table th.sortable:hover {
    background: #f1f5f9;
}

.th-content {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sort-icon {
    opacity: 0.4;
    transition: opacity 0.2s;
}

.modern-table th.sortable:hover .sort-icon {
    opacity: 0.8;
}

.modern-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s;
}

.modern-table.hoverable tbody tr:hover {
    background: #f8fafc;
}

.modern-table.striped tbody tr:nth-child(even) {
    background: #fafbfc;
}

.modern-table td {
    padding: 16px 20px;
    color: #334155;
    vertical-align: middle;
}

.modern-table.compact td {
    padding: 12px 16px;
}

.modern-table td.center {
    text-align: center;
}

.modern-table td.right {
    text-align: right;
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 4px;
    margin-bottom: 4px;
}

.badge-primary {
    background: #dbeafe;
    color: #1e40af;
}

.badge-success {
    background: #d1fae5;
    color: #065f46;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.badge-gray {
    background: #f1f5f9;
    color: #64748b;
}

.action-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
}

.btn-action {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-action.btn-view {
    background: white;
    border-color: #cbd5e1;
    color: #475569;
}

.btn-action.btn-view:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.btn-action.btn-edit {
    background: white;
    border-color: #93c5fd;
    color: #2563eb;
}

.btn-action.btn-edit:hover {
    background: #eff6ff;
    border-color: #3b82f6;
}

.btn-action.btn-delete {
    background: white;
    border-color: #fca5a5;
    color: #dc2626;
}

.btn-action.btn-delete:hover {
    background: #fef2f2;
    border-color: #ef4444;
}

.text-muted {
    color: #94a3b8;
    font-style: italic;
}

.text-truncate {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pagination-wrapper {
    padding: 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-info {
    color: #64748b;
    font-size: 14px;
}

.pagination-info strong {
    color: #334155;
    font-weight: 600;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pagination-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination-btn:hover:not(.disabled) {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.page-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-label {
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}

.page-input {
    width: 60px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #334155;
    background: white;
    transition: all 0.2s;
}

.page-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.page-input::-webkit-inner-spin-button,
.page-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-input[type=number] {
    -moz-appearance: textfield;
}

@media (max-width: 768px) {
    .table-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-box {
        min-width: 100%;
    }
    
    .modern-table {
        font-size: 13px;
    }
    
    .modern-table th,
    .modern-table td {
        padding: 12px 16px;
    }

    .pagination-wrapper {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-input-wrapper {
        order: -1;
        width: 100%;
        justify-content: center;
        margin-bottom: 8px;
    }
}
</style>