@props(['query', 'columns', 'buttons'])
@php
    use Hekmatinasser\Verta\Verta;

    $sort = request('sort', 'id');
    $dir  = request('dir', 'desc');
    $length = request('length', 15);

    $builder = clone $query;

    // فیلتر ستون‌ها
    foreach ($columns as $col) {
        $field = $col['field'];
        if ($value = request("filter.$field")) {
            if (($col['search'] ?? null) === 'date') {
                $gregorian = Verta::parse($value)->datetime();
                $builder->whereDate($field, $gregorian);
            } elseif (($col['search'] ?? null) === 'select') {
                $builder->where($field, $value);
            } else {
                $builder->where($field, 'like', "%{$value}%");
            }
        }
    }

    $builder->orderBy($sort, $dir);
    $items = $builder->paginate($length)->appends(request()->query());
    $invert = $dir === 'asc' ? 'desc' : 'asc';
@endphp

@section('external_css')
    <link rel="stylesheet" href="{{ asset('assets/vendor/persian-datepicker/css/persianDatepicker-lightorang.css') }}">
@endsection

<div class="card">
    <div class="card-header d-flex justify-content-between flex-wrap gap-2">
        <form method="GET" class="d-flex gap-2 align-items-center flex-wrap w-100">
            {{-- انتخاب تعداد رکورد --}}
            <select name="length" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
                <option value="10" {{ $length==10 ? 'selected' : '' }}>۱۰</option>
                <option value="15" {{ $length==15 ? 'selected' : '' }}>۱۵</option>
                <option value="25" {{ $length==25 ? 'selected' : '' }}>۲۵</option>
                <option value="50" {{ $length==50 ? 'selected' : '' }}>۵۰</option>
            </select>

            <button type="button" id="reset-filters" class="btn btn-primary btn-sm">پاک کردن فیلترها</button>

            {{-- ستون‌ها --}}
            <div class="dropdown ms-auto">
                <button class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown">ستون‌ها</button>
                <ul class="dropdown-menu p-3" style="min-width:200px">
                    @foreach($columns as $col)
                        <li>
                            <label class="form-check">
                                <input class="form-check-input column-toggle"
                                       data-column="{{ $col['field'] }}"
                                       type="checkbox"
                                    {{ ($col['visible'] ?? false) ? 'checked' : '' }}>
                                {{ $col['label'] }}
                            </label>
                        </li>
                    @endforeach
                </ul>
            </div>
        </form>
    </div>

    <div class="table-responsive">
        <form method="GET" id="filter-form">
            <table class="table table-bordered table-hover table-sm">
                <thead>
                <tr>
                    <th>#</th>
                    @foreach($columns as $col)
                        <th data-col="{{ $col['field'] }}">
                            <a href="?sort={{ $col['field'] }}&dir={{ $invert }}">{{ $col['label'] }}</a>
                        </th>
                    @endforeach
                    @if($buttons)
                        <th></th>
                    @endif
                </tr>
                {{-- فیلتر ستون‌ها --}}
                <tr>
                    <th></th>
                    @foreach($columns as $col)
                        <th data-col="{{ $col['field'] }}">
                            @php $type = $col['search'] ?? 'text'; @endphp

                            @if($type === 'select')
                                <select class="form-select" name="filter[{{ $col['field'] }}]"
                                        onchange="document.getElementById('filter-form').submit()">
                                    <option value="">انتخاب کنید</option>
                                    @foreach($col['options'] as $key => $label)
                                        <option
                                            value="{{ $key }}" {{ request("filter.{$col['field']}") == $key ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>

                            @elseif($type === 'date')
                                <input type="text" class="form-control persian-date"
                                       name="filter[{{ $col['field'] }}]"
                                       value="{{ request("filter.{$col['field']}") }}"
                                       onchange="document.getElementById('filter-form').submit()">

                            @else
                                <input type="text" class="form-control" name="filter[{{ $col['field'] }}]"
                                       value="{{ request("filter.{$col['field']}") }}"
                                       onchange="document.getElementById('filter-form').submit()">
                            @endif
                        </th>
                    @endforeach
                </tr>
                </thead>

                <tbody>
                @foreach($items as $key => $item)
                    <tr>
                        <td>{{ ++$key }}</td>
                        @foreach($columns as $col)
                            <td data-col="{{ $col['field'] }}">
                                @if($col['field']=='row_number')
                                    {{ ($items->currentPage()-1)*$items->perPage() + $loop->iteration }}
                                @elseif(isset($col['render']) && is_callable($col['render']))
                                    {!! $col['render']($item) !!}
                                @else
                                    {{ data_get($item, $col['field']) }}
                                @endif
                            </td>
                        @endforeach
                        @if($buttons)
                            <td>
                                {!! $buttons['render']($item) !!}
                            </td>
                        @endif
                    </tr>
                @endforeach
                </tbody>
            </table>
        </form>
    </div>

    <div class="card-footer">
        {{ $items->withQueryString()->links() }}
    </div>
</div>

@section('external_scripts')
    <script src="{{ asset('assets/vendor/persian-datepicker/js/persianDatepicker.min.js') }}"></script>
@endsection
@push('internal_scripts')
    <script>
        const STORAGE_KEY = 'table-columns';
        let columnPrefs = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');

        document.querySelectorAll('.column-toggle').forEach(chk => {
            const col = chk.dataset.column;

            if (columnPrefs[col] === false) chk.checked = false;

            // اعمال نمایش/مخفی ستون‌ها
            document.querySelectorAll(`[data-col="${col}"]`).forEach(td => td.style.display = chk.checked ? '' : 'none');

            chk.addEventListener('change', e => {
                document.querySelectorAll(`[data-col="${col}"]`).forEach(td => td.style.display = chk.checked ? '' : 'none');
                columnPrefs[col] = chk.checked;
                localStorage.setItem(STORAGE_KEY, JSON.stringify(columnPrefs));
            });
        });

        // Reset Filter
        document.getElementById('reset-filters').addEventListener('click', () => {
            const url = new URL(window.location.href);
            url.searchParams.forEach((v, k) => {
                if (k.startsWith('filter')) url.searchParams.delete(k)
            });
            window.location.href = url.toString();
        });

        // Persian datepicker
        $(document).ready(function () {
            $('.persian-date').persianDatepicker({
                format: 'YYYY/MM/DD',
                autoClose: true
            });
        });
    </script>
@endpush