@props([
    'module' => 'table',          // localStorage ayarları için benzersiz anahtar
    'title' => null,
    'subtitle' => null,
    'icon' => null,
    'columns' => [],              // [['key','label','sortable','sort','visible','fixed','align','width']]
    'filters' => [],              // [['key','label','options'=>[val=>label],'value','placeholder']]
    'search' => '',
    'searchPlaceholder' => 'Ara...',
    'sort' => null,
    'dir' => 'desc',
    'createUrl' => null,
    'createLabel' => 'Yeni Ekle',
    'bulk' => false,
    'stats' => [],                // [['label','value','icon','color']]
    'paginator' => null,          // LengthAwarePaginator → otomatik sayfalama çubuğu (üst + alt)
    'perPageOptions' => [10, 25, 50, 100], // sayfa başına kayıt seçenekleri
])

@php
    $activeFilterCount = collect($filters)->filter(fn ($f) => ($f['value'] ?? '') !== '' && !is_null($f['value'] ?? null))->count();
    $defaultHidden = collect($columns)
        ->filter(fn ($c) => (($c['visible'] ?? true) === false) && !($c['fixed'] ?? false))
        ->pluck('key')->values();
@endphp

<div class="dt-root" data-module="{{ $module }}" data-default-hidden='@json($defaultHidden)'>

    {{-- ── İstatistik Kartları ── --}}
    @if(count($stats))
        <div class="dt-stats">
            @foreach($stats as $s)
                <div class="dt-stat">
                    <div class="dt-stat-ic" style="--ic:{{ $s['color'] ?? '#6366f1' }}">
                        <i class="fas {{ $s['icon'] ?? 'fa-chart-simple' }}"></i>
                    </div>
                    <div>
                        <div class="dt-stat-val">{{ $s['value'] }}</div>
                        <div class="dt-stat-lbl">{{ $s['label'] }}</div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- ── Başlık ── --}}
    @if($title || $createUrl)
        <div class="dt-head">
            <div class="dt-head-title">
                @if($icon)<span class="dt-head-ic"><i class="fas {{ $icon }}"></i></span>@endif
                <div>
                    @if($title)<h1>{{ $title }}</h1>@endif
                    @if($subtitle)<p>{{ $subtitle }}</p>@endif
                </div>
            </div>
            <div class="dt-head-actions">
                {{ $headerActions ?? '' }}
                @if($createUrl)
                    <a href="{{ $createUrl }}" class="dt-btn dt-btn-primary"><i class="fas fa-plus"></i> {{ $createLabel }}</a>
                @endif
            </div>
        </div>
    @endif

    {{-- ── Araç Çubuğu (arama + filtre + ayarlar) ── --}}
    <form method="GET" class="dt-toolbar" id="dt-form-{{ $module }}">
        <input type="hidden" name="sort" value="{{ $sort }}" class="dt-sort-input">
        <input type="hidden" name="dir" value="{{ $dir }}" class="dt-dir-input">

        <div class="dt-search">
            <i class="fas fa-magnifying-glass"></i>
            <input type="text" name="search" value="{{ $search }}" placeholder="{{ $searchPlaceholder }}" autocomplete="off">
            @if($search)
                <a href="{{ url()->current() }}" class="dt-search-clear" title="Temizle"><i class="fas fa-times"></i></a>
            @endif
        </div>

        <div class="dt-toolbar-right">
            @if(count($filters))
                <button type="button" class="dt-btn dt-btn-ghost dt-filter-toggle">
                    <i class="fas fa-filter"></i> <span>Filtreler</span>
                    @if($activeFilterCount)<span class="dt-pill">{{ $activeFilterCount }}</span>@endif
                </button>
            @endif

            <div class="dt-settings-wrap">
                <button type="button" class="dt-btn dt-btn-ghost dt-settings-toggle" title="Tablo Ayarları">
                    <i class="fas fa-sliders"></i>
                </button>
                <div class="dt-settings-panel" hidden>
                    <div class="dt-settings-arrow"></div>
                    <div class="dt-settings-head"><i class="fas fa-table-cells me-1"></i> Tablo Ayarları</div>

                    <div class="dt-settings-sec">
                        <div class="dt-settings-lbl">Görünür Kolonlar</div>
                        <div class="dt-coltoggles">
                            @foreach($columns as $col)
                                @continue($col['fixed'] ?? false)
                                <label class="dt-coltoggle">
                                    <input type="checkbox" data-col-toggle="{{ $col['key'] }}" {{ ($col['visible'] ?? true) ? 'checked' : '' }}>
                                    <span class="dt-coltoggle-box"><i class="fas fa-check"></i></span>
                                    <span class="dt-coltoggle-name">{{ $col['label'] }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <div class="dt-settings-sec">
                        <div class="dt-settings-lbl">Satır Yoğunluğu</div>
                        <div class="dt-seg" data-setting="density">
                            <button type="button" data-val="compact"><i class="fas fa-grip-lines"></i> Sık</button>
                            <button type="button" data-val="normal" class="active">Normal</button>
                            <button type="button" data-val="comfortable">Geniş</button>
                        </div>
                    </div>

                    <div class="dt-settings-sec dt-settings-switches">
                        <label class="dt-switch"><span>Zebra Satırlar</span><input type="checkbox" data-setting-toggle="striped" checked><i class="dt-switch-ui"></i></label>
                        <label class="dt-switch"><span>Sabit Başlık</span><input type="checkbox" data-setting-toggle="sticky" checked><i class="dt-switch-ui"></i></label>
                        <label class="dt-switch"><span>Hücre Kenarlıkları</span><input type="checkbox" data-setting-toggle="bordered"><i class="dt-switch-ui"></i></label>
                    </div>

                    <div class="dt-settings-foot">
                        <button type="button" class="dt-mini-btn dt-settings-reset"><i class="fas fa-rotate-left"></i> Varsayılana Sıfırla</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Filtre paneli --}}
        @if(count($filters))
            <div class="dt-filters" {{ $activeFilterCount ? '' : 'hidden' }}>
                @foreach($filters as $f)
                    <div class="dt-filter-field">
                        <label>{{ $f['label'] }}</label>
                        @if(($f['type'] ?? 'select') === 'date')
                            <input type="date" name="{{ $f['key'] }}" value="{{ $f['value'] ?? '' }}" class="dt-select dt-autosubmit">
                        @else
                            <select name="{{ $f['key'] }}" class="dt-select dt-autosubmit">
                                <option value="">{{ $f['placeholder'] ?? 'Tümü' }}</option>
                                @foreach(($f['options'] ?? []) as $val => $lbl)
                                    <option value="{{ $val }}" @selected((string) ($f['value'] ?? '') === (string) $val)>{{ $lbl }}</option>
                                @endforeach
                            </select>
                        @endif
                    </div>
                @endforeach
                <div class="dt-filter-actions">
                    <button type="submit" class="dt-btn dt-btn-primary dt-btn-sm"><i class="fas fa-check"></i> Uygula</button>
                    <a href="{{ url()->current() }}" class="dt-btn dt-btn-ghost dt-btn-sm"><i class="fas fa-eraser"></i> Temizle</a>
                </div>
            </div>
        @endif
    </form>

    {{-- ── Toplu İşlem Çubuğu ── --}}
    @if($bulk)
        <div class="dt-bulkbar" hidden>
            <div class="dt-bulkbar-info"><i class="fas fa-circle-check"></i> <span class="dt-bulk-count">0</span> kayıt seçildi</div>
            <div class="dt-bulkbar-actions">
                {{ $bulkActions ?? '' }}
                <button type="button" class="dt-mini-btn dt-bulk-clear"><i class="fas fa-xmark"></i> Seçimi Temizle</button>
            </div>
        </div>
    @endif

    {{-- ── Tablo ── --}}
    <div class="dt-card">
        @if($paginator)
            @include('components.partials.dt-pager', ['paginator' => $paginator, 'perPageOptions' => $perPageOptions, 'position' => 'top'])
        @endif

        <div class="dt-table-wrap">
            <table class="dt-table">
                <thead>
                    <tr>
                        @if($bulk)
                            <th class="dt-col-select" data-col="_select"><label class="dt-check"><input type="checkbox" class="dt-checkall"><span></span></label></th>
                        @endif
                        @foreach($columns as $col)
                            <th data-col="{{ $col['key'] }}" class="dt-th text-{{ $col['align'] ?? 'start' }}" @if(!empty($col['width'])) style="width:{{ $col['width'] }}" @endif>
                                @if($col['sortable'] ?? false)
                                    @php $sortKey = $col['sort'] ?? $col['key']; $isActive = $sort === $sortKey; @endphp
                                    <button type="button" class="dt-sort {{ $isActive ? 'active' : '' }}" data-sort="{{ $sortKey }}" data-dir="{{ $isActive ? $dir : '' }}">
                                        <span>{{ $col['label'] }}</span>
                                        <span class="dt-sort-ic">
                                            <i class="fas fa-sort-up {{ $isActive && $dir === 'asc' ? 'on' : '' }}"></i>
                                            <i class="fas fa-sort-down {{ $isActive && $dir === 'desc' ? 'on' : '' }}"></i>
                                        </span>
                                    </button>
                                @else
                                    {{ $col['label'] }}
                                @endif
                            </th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    {{ $slot }}
                </tbody>
            </table>
        </div>

        @if($paginator)
            <div class="dt-footer">
                @include('components.partials.dt-pager', ['paginator' => $paginator, 'perPageOptions' => $perPageOptions, 'position' => 'bottom'])
            </div>
        @elseif(isset($footer))
            <div class="dt-footer">{{ $footer }}</div>
        @endif
    </div>
</div>

@once
@push('styles')
<style>
    :root {
        --dt-border: #e9edf3;
        --dt-bg: #ffffff;
        --dt-head-bg: #f8fafc;
        --dt-text: #1e293b;
        --dt-muted: #64748b;
        --dt-primary: #4f46e5;
        --dt-primary-soft: #eef2ff;
        --dt-radius: 16px;
    }
    .dt-root { --dt-row-py: 13px; font-size: 0.86rem; color: var(--dt-text); }

    /* Stats */
    .dt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
    .dt-stat { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--dt-border); border-radius: 14px; padding: 16px 18px; transition: .2s; }
    .dt-stat:hover { box-shadow: 0 8px 24px rgba(15,23,42,.06); transform: translateY(-2px); }
    .dt-stat-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem; color: var(--ic); background: color-mix(in srgb, var(--ic) 12%, white); }
    .dt-stat-val { font-size: 1.4rem; font-weight: 800; line-height: 1; color: #0f172a; }
    .dt-stat-lbl { font-size: .76rem; color: var(--dt-muted); font-weight: 600; margin-top: 4px; }

    /* Header */
    .dt-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
    .dt-head-title { display: flex; align-items: center; gap: 14px; }
    .dt-head-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--dt-primary-soft); color: var(--dt-primary); font-size: 1.15rem; }
    .dt-head-title h1 { font-size: 1.35rem; font-weight: 800; margin: 0; color: #0f172a; letter-spacing: -.01em; }
    .dt-head-title p { margin: 2px 0 0; font-size: .82rem; color: var(--dt-muted); }
    .dt-head-actions { display: flex; align-items: center; gap: 10px; }

    /* Buttons */
    .dt-btn { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 650; border-radius: 11px; padding: 9px 15px; border: 1px solid transparent; cursor: pointer; transition: .18s; text-decoration: none; line-height: 1; white-space: nowrap; }
    .dt-btn-sm { padding: 7px 12px; font-size: .78rem; }
    .dt-btn-primary { background: var(--dt-primary); color: #fff; box-shadow: 0 6px 16px rgba(79,70,229,.22); }
    .dt-btn-primary:hover { background: #4338ca; transform: translateY(-1px); color: #fff; }
    .dt-btn-ghost { background: #fff; color: #475569; border-color: var(--dt-border); }
    .dt-btn-ghost:hover { border-color: #cbd5e1; color: #1e293b; background: #f8fafc; }
    .dt-mini-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--dt-muted); font-size: .78rem; font-weight: 650; cursor: pointer; padding: 6px 8px; border-radius: 8px; transition: .15s; }
    .dt-mini-btn:hover { background: #f1f5f9; color: #0f172a; }
    .dt-pill { background: var(--dt-primary); color: #fff; border-radius: 999px; font-size: .66rem; font-weight: 800; min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; }

    /* Toolbar */
    .dt-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--dt-border); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; }
    .dt-search { position: relative; flex: 1 1 260px; min-width: 220px; display: flex; align-items: center; }
    .dt-search > i { position: absolute; left: 14px; color: #94a3b8; font-size: .85rem; }
    .dt-search input { width: 100%; border: 1.5px solid var(--dt-border); background: #f8fafc; border-radius: 11px; padding: 10px 36px 10px 38px; font-size: .85rem; color: #0f172a; transition: .18s; }
    .dt-search input:focus { outline: none; border-color: var(--dt-primary); background: #fff; box-shadow: 0 0 0 4px rgba(79,70,229,.08); }
    .dt-search-clear { position: absolute; right: 12px; color: #94a3b8; font-size: .78rem; }
    .dt-search-clear:hover { color: #ef4444; }
    .dt-toolbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

    /* Filters */
    .dt-filters { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding-top: 14px; margin-top: 2px; border-top: 1px dashed var(--dt-border); }
    .dt-filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 160px; }
    .dt-filter-field label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dt-muted); }
    .dt-select { border: 1.5px solid var(--dt-border); background: #f8fafc; border-radius: 10px; padding: 8px 12px; font-size: .82rem; color: #0f172a; cursor: pointer; transition: .18s; }
    .dt-select:focus { outline: none; border-color: var(--dt-primary); background: #fff; box-shadow: 0 0 0 4px rgba(79,70,229,.08); }
    .dt-filter-actions { display: flex; gap: 8px; margin-left: auto; }

    /* Settings popover */
    .dt-settings-wrap { position: relative; }
    .dt-settings-panel { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; width: 300px; background: #fff; border: 1px solid var(--dt-border); border-radius: 16px; box-shadow: 0 24px 60px rgba(15,23,42,.18); padding: 14px; animation: dtPop .16s ease; }
    .dt-settings-panel[hidden] { display: none; }
    @keyframes dtPop { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    .dt-settings-arrow { position: absolute; top: -7px; right: 16px; width: 13px; height: 13px; background: #fff; border-left: 1px solid var(--dt-border); border-top: 1px solid var(--dt-border); transform: rotate(45deg); }
    .dt-settings-head { font-size: .82rem; font-weight: 800; color: #0f172a; margin-bottom: 12px; }
    .dt-settings-sec { padding: 10px 0; border-top: 1px solid #f1f5f9; }
    .dt-settings-sec:first-of-type { border-top: none; padding-top: 2px; }
    .dt-settings-lbl { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--dt-muted); margin-bottom: 9px; }
    .dt-coltoggles { display: flex; flex-direction: column; gap: 2px; max-height: 210px; overflow-y: auto; }
    .dt-coltoggle { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; cursor: pointer; font-size: .82rem; font-weight: 600; color: #334155; transition: .12s; }
    .dt-coltoggle:hover { background: #f8fafc; }
    .dt-coltoggle input { display: none; }
    .dt-coltoggle-box { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #cbd5e1; display: grid; place-items: center; color: #fff; font-size: .6rem; transition: .15s; flex-shrink: 0; }
    .dt-coltoggle input:checked + .dt-coltoggle-box { background: var(--dt-primary); border-color: var(--dt-primary); }
    .dt-coltoggle input:not(:checked) + .dt-coltoggle-box i { opacity: 0; }
    .dt-coltoggle-name { user-select: none; }

    .dt-seg { display: flex; background: #f1f5f9; border-radius: 10px; padding: 3px; gap: 2px; }
    .dt-seg button { flex: 1; border: none; background: transparent; font-size: .74rem; font-weight: 700; color: var(--dt-muted); padding: 7px 6px; border-radius: 8px; cursor: pointer; transition: .15s; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
    .dt-seg button.active { background: #fff; color: var(--dt-primary); box-shadow: 0 2px 6px rgba(15,23,42,.08); }

    .dt-settings-switches { display: flex; flex-direction: column; gap: 4px; }
    .dt-switch { display: flex; align-items: center; justify-content: space-between; padding: 7px 4px; font-size: .82rem; font-weight: 600; color: #334155; cursor: pointer; }
    .dt-switch input { display: none; }
    .dt-switch-ui { width: 38px; height: 21px; border-radius: 999px; background: #cbd5e1; position: relative; transition: .2s; flex-shrink: 0; }
    .dt-switch-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
    .dt-switch input:checked + .dt-switch-ui { background: var(--dt-primary); }
    .dt-switch input:checked + .dt-switch-ui::after { transform: translateX(17px); }
    .dt-settings-foot { padding-top: 12px; border-top: 1px solid #f1f5f9; margin-top: 4px; text-align: center; }

    /* Bulk bar — ekranın altında yüzen modal çubuk */
    .dt-bulkbar {
        position: fixed;
        bottom: 22px;
        left: calc(var(--sidebar-width, 0px) + 24px);
        right: 24px;
        z-index: 1045;
        display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
        background: linear-gradient(135deg, #4f46e5, #4338ca);
        color: #fff; border-radius: 16px; padding: 13px 20px;
        box-shadow: 0 18px 44px rgba(49, 46, 129, .42), 0 2px 8px rgba(0,0,0,.12);
        border: 1px solid rgba(255,255,255,.12);
        transition: left .38s cubic-bezier(.4,0,.2,1);
    }
    .dt-bulkbar:not([hidden]) { animation: dtBulkUp .26s cubic-bezier(.16,1,.3,1); }
    @keyframes dtBulkUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
    .dt-bulkbar[hidden] { display: none; }
    .agency-sidebar.collapsed + .main-content .dt-bulkbar { left: calc(var(--sidebar-collapsed-width, 0px) + 24px); }
    @media (max-width: 991px) { .dt-bulkbar { left: 16px; right: 16px; bottom: 16px; } }
    .dt-bulkbar-info { font-weight: 800; font-size: .88rem; display: flex; align-items: center; gap: 9px; }
    .dt-bulkbar-info > i { font-size: 1.05rem; opacity: .9; }
    .dt-bulkbar-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .dt-bulkbar .dt-mini-btn { color: rgba(255,255,255,.92); font-weight: 700; padding: 7px 12px; }
    .dt-bulkbar .dt-mini-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
    .dt-bulkbar .dt-bulk-clear { margin-left: 6px; border-left: 1px solid rgba(255,255,255,.22); border-radius: 0 8px 8px 0; padding-left: 14px; }

    /* Table card */
    .dt-card { background: #fff; border: 1px solid var(--dt-border); border-radius: var(--dt-radius); overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.04); }
    .dt-table-wrap { overflow-x: auto; }
    .dt-table { width: 100%; border-collapse: collapse; }
    .dt-table thead th { background: var(--dt-head-bg); color: var(--dt-muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .045em; text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--dt-border); white-space: nowrap; }
    .dt-table tbody td { padding: var(--dt-row-py) 16px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: #334155; }
    .dt-table tbody tr { transition: background .12s; }
    .dt-table tbody tr:hover { background: #f8faff; }
    .dt-table tbody tr:last-child td { border-bottom: none; }
    .text-center { text-align: center !important; }
    .text-end { text-align: right !important; }

    /* Sort header */
    .dt-sort { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; font-weight: 800; padding: 0; transition: color .15s; }
    .dt-sort:hover { color: var(--dt-primary); }
    .dt-sort.active { color: var(--dt-primary); }
    .dt-sort-ic { display: inline-grid; line-height: .5; font-size: .62rem; color: #cbd5e1; }
    .dt-sort-ic i { display: block; }
    .dt-sort-ic i.on { color: var(--dt-primary); }
    .dt-sort:not(.active) .dt-sort-ic i { color: #cbd5e1; }

    /* Density */
    .dt-root.dt-density-compact { --dt-row-py: 7px; }
    .dt-root.dt-density-comfortable { --dt-row-py: 19px; }
    /* Striped */
    .dt-root.dt-striped .dt-table tbody tr:nth-child(even) { background: #fbfcfe; }
    .dt-root.dt-striped .dt-table tbody tr:nth-child(even):hover { background: #f3f6fd; }
    /* Sticky head */
    .dt-root.dt-sticky .dt-table-wrap { max-height: 72vh; overflow-y: auto; }
    .dt-root.dt-sticky .dt-table thead th { position: sticky; top: 0; z-index: 2; }
    /* Bordered */
    .dt-root.dt-bordered .dt-table td, .dt-root.dt-bordered .dt-table th { border-right: 1px solid #f1f5f9; }
    .dt-root.dt-bordered .dt-table td:last-child, .dt-root.dt-bordered .dt-table th:last-child { border-right: none; }

    /* Checkbox */
    .dt-col-select { width: 44px; }
    .dt-check { display: inline-flex; cursor: pointer; }
    .dt-check input { width: 17px; height: 17px; accent-color: var(--dt-primary); cursor: pointer; }

    /* Footer */
    .dt-footer { padding: 14px 16px; border-top: 1px solid var(--dt-border); background: #fcfdfe; }
    .dt-footer .pagination { margin: 0; justify-content: flex-end; }

    /* Pager (üst + alt sayfalama çubuğu) */
    .dt-pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
    .dt-pager-top { padding: 11px 16px; border-bottom: 1px solid var(--dt-border); background: #fcfdfe; }
    .dt-pager-info { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--dt-muted); }
    .dt-pager-info i { font-size: .78rem; color: #94a3b8; }
    .dt-pager-info strong { color: #0f172a; font-weight: 800; }
    .dt-pager-right { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; }

    .dt-perpage { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; color: var(--dt-muted); }
    .dt-perpage-select { border: 1.5px solid var(--dt-border); background: #fff; border-radius: 9px; padding: 6px 28px 6px 10px; font-size: .8rem; font-weight: 700; color: #0f172a; cursor: pointer; transition: .18s;
        appearance: none; -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 10px center; }
    .dt-perpage-select:focus { outline: none; border-color: var(--dt-primary); box-shadow: 0 0 0 4px rgba(79,70,229,.08); }

    .dt-pages { display: inline-flex; align-items: center; gap: 4px; }
    .dt-page-btn { min-width: 32px; height: 32px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 9px; border: 1px solid var(--dt-border); background: #fff; color: #475569; font-size: .8rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: .15s; }
    .dt-page-btn:hover { border-color: var(--dt-primary); color: var(--dt-primary); background: var(--dt-primary-soft); }
    .dt-page-btn.active { background: var(--dt-primary); border-color: var(--dt-primary); color: #fff; box-shadow: 0 4px 12px rgba(79,70,229,.22); cursor: default; }
    .dt-page-btn.disabled { opacity: .4; pointer-events: none; }
    .dt-page-gap { padding: 0 4px; color: #94a3b8; font-weight: 800; user-select: none; }
    @media (max-width: 575px) {
        .dt-pager { justify-content: center; }
        .dt-pager-right { margin-left: 0; justify-content: center; }
    }

    /* Empty */
    .dt-empty { text-align: center; padding: 50px 20px; color: var(--dt-muted); }
    .dt-empty i { font-size: 2.4rem; color: #cbd5e1; margin-bottom: 12px; display: block; }
    .dt-empty h4 { font-size: 1rem; font-weight: 700; color: #475569; margin-bottom: 6px; }

    /* Helper cell pieces */
    .dt-cell-main { font-weight: 700; color: #0f172a; }
    .dt-cell-sub { font-size: .74rem; color: var(--dt-muted); }
    .dt-thumb { width: 46px; height: 36px; border-radius: 8px; object-fit: cover; background: #f1f5f9; flex-shrink: 0; }
    .dt-thumb-ph { width: 46px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: #f1f5f9; color: #cbd5e1; flex-shrink: 0; }
    .dt-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700; padding: 4px 9px; border-radius: 8px; line-height: 1; }
    .dt-badge-green { background: #dcfce7; color: #166534; }
    .dt-badge-amber { background: #fef3c7; color: #92400e; }
    .dt-badge-red { background: #fee2e2; color: #991b1b; }
    .dt-badge-slate { background: #f1f5f9; color: #475569; }
    .dt-badge-indigo { background: #eef2ff; color: #4338ca; }
    .dt-rowact { display: inline-flex; gap: 4px; }
    .dt-iconbtn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 9px; border: 1px solid var(--dt-border); background: #fff; color: #64748b; cursor: pointer; transition: .15s; font-size: .8rem; text-decoration: none; }
    .dt-iconbtn:hover { border-color: var(--dt-primary); color: var(--dt-primary); background: var(--dt-primary-soft); }
    .dt-iconbtn.danger:hover { border-color: #ef4444; color: #ef4444; background: #fee2e2; }
    .dt-iconbtn.warn:hover { border-color: #f59e0b; color: #f59e0b; background: #fef3c7; }
    .dt-iconbtn.success:hover { border-color: #22c55e; color: #16a34a; background: #dcfce7; }
</style>
@endpush

@push('scripts')
<script>
(function () {
    function initDataTable(root) {
        if (root.dataset.dtInit) return;
        root.dataset.dtInit = '1';

        const module = root.dataset.module || 'table';
        const KEY = 'dt-settings:' + module;
        const form = root.querySelector('.dt-toolbar');

        let defaultHidden = [];
        try { defaultHidden = JSON.parse(root.dataset.defaultHidden || '[]'); } catch (e) {}
        const defaults = { hidden: defaultHidden, density: 'normal', striped: true, sticky: true, bordered: false };
        let settings = Object.assign({}, defaults);
        try { settings = Object.assign(settings, JSON.parse(localStorage.getItem(KEY) || '{}')); } catch (e) {}

        function save() { localStorage.setItem(KEY, JSON.stringify(settings)); }

        // ── Kolon görünürlüğü ──
        function applyColumns() {
            root.querySelectorAll('[data-col]').forEach(el => {
                const key = el.getAttribute('data-col');
                if (key === '_select' || key === '_actions') return;
                el.style.display = settings.hidden.includes(key) ? 'none' : '';
            });
            root.querySelectorAll('[data-col-toggle]').forEach(cb => {
                cb.checked = !settings.hidden.includes(cb.getAttribute('data-col-toggle'));
            });
        }
        root.querySelectorAll('[data-col-toggle]').forEach(cb => {
            cb.addEventListener('change', function () {
                const key = this.getAttribute('data-col-toggle');
                settings.hidden = settings.hidden.filter(k => k !== key);
                if (!this.checked) settings.hidden.push(key);
                save(); applyColumns();
            });
        });

        // ── Yoğunluk / anahtarlar ──
        function applyFlags() {
            root.classList.remove('dt-density-compact', 'dt-density-normal', 'dt-density-comfortable');
            root.classList.add('dt-density-' + settings.density);
            root.classList.toggle('dt-striped', !!settings.striped);
            root.classList.toggle('dt-sticky', !!settings.sticky);
            root.classList.toggle('dt-bordered', !!settings.bordered);
            root.querySelectorAll('.dt-seg[data-setting="density"] button').forEach(b => {
                b.classList.toggle('active', b.getAttribute('data-val') === settings.density);
            });
            root.querySelectorAll('[data-setting-toggle]').forEach(t => {
                t.checked = !!settings[t.getAttribute('data-setting-toggle')];
            });
        }
        root.querySelectorAll('.dt-seg[data-setting="density"] button').forEach(b => {
            b.addEventListener('click', function () { settings.density = this.getAttribute('data-val'); save(); applyFlags(); });
        });
        root.querySelectorAll('[data-setting-toggle]').forEach(t => {
            t.addEventListener('change', function () { settings[this.getAttribute('data-setting-toggle')] = this.checked; save(); applyFlags(); });
        });

        // ── Ayar paneli aç/kapa ──
        const sToggle = root.querySelector('.dt-settings-toggle');
        const sPanel = root.querySelector('.dt-settings-panel');
        if (sToggle && sPanel) {
            sToggle.addEventListener('click', e => { e.stopPropagation(); sPanel.hidden = !sPanel.hidden; });
            sPanel.addEventListener('click', e => e.stopPropagation());
            document.addEventListener('click', e => { if (!root.querySelector('.dt-settings-wrap').contains(e.target)) sPanel.hidden = true; });
        }
        const resetBtn = root.querySelector('.dt-settings-reset');
        if (resetBtn) resetBtn.addEventListener('click', () => { settings = Object.assign({}, defaults); save(); applyColumns(); applyFlags(); });

        // ── Filtre paneli ──
        const fToggle = root.querySelector('.dt-filter-toggle');
        const fPanel = root.querySelector('.dt-filters');
        if (fToggle && fPanel) fToggle.addEventListener('click', () => { fPanel.hidden = !fPanel.hidden; });

        // ── Otomatik gönderim (filtre select) ──
        root.querySelectorAll('.dt-autosubmit').forEach(s => s.addEventListener('change', () => form.submit()));

        // ── Sayfa başına kayıt seçimi ──
        root.querySelectorAll('[data-dt-perpage]').forEach(sel => {
            sel.addEventListener('change', function () {
                const url = new URL(window.location.href);
                url.searchParams.set('per_page', this.value);
                url.searchParams.delete('page'); // sayfa boyutu değişince 1. sayfaya dön
                window.location.href = url.toString();
            });
        });

        // ── Sıralama ──
        root.querySelectorAll('.dt-sort').forEach(btn => {
            btn.addEventListener('click', function () {
                const sortKey = this.getAttribute('data-sort');
                const cur = this.getAttribute('data-dir');
                const next = cur === 'asc' ? 'desc' : 'asc';
                form.querySelector('.dt-sort-input').value = sortKey;
                form.querySelector('.dt-dir-input').value = cur ? next : 'asc';
                form.submit();
            });
        });

        // ── Toplu seçim ──
        const checkAll = root.querySelector('.dt-checkall');
        const bulkbar = root.querySelector('.dt-bulkbar');
        const bulkCount = root.querySelector('.dt-bulk-count');
        function rowChecks() { return Array.from(root.querySelectorAll('.dt-rowcheck')); }
        function syncBulk() {
            const sel = rowChecks().filter(c => c.checked);
            if (bulkCount) bulkCount.textContent = sel.length;
            if (bulkbar) bulkbar.hidden = sel.length === 0;
            if (checkAll) {
                const all = rowChecks();
                checkAll.checked = all.length > 0 && sel.length === all.length;
                checkAll.indeterminate = sel.length > 0 && sel.length < all.length;
            }
        }
        if (checkAll) checkAll.addEventListener('change', function () { rowChecks().forEach(c => c.checked = this.checked); syncBulk(); });
        rowChecks().forEach(c => c.addEventListener('change', syncBulk));
        const bulkClear = root.querySelector('.dt-bulk-clear');
        if (bulkClear) bulkClear.addEventListener('click', () => { rowChecks().forEach(c => c.checked = false); syncBulk(); });
        // Toplu işlem butonları için seçili id'leri global erişime aç
        root.dtSelected = () => rowChecks().filter(c => c.checked).map(c => c.value);

        applyColumns();
        applyFlags();
    }

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.dt-root').forEach(initDataTable);
    });
})();
</script>
@endpush
@endonce