{{--
    Shared listing screen. Every resource renders this unless it ships its own
    `admin.<resource>.index` view. Columns and the AJAX URL come from the
    controller; optional per-resource filters live in `admin.<resource>.filters`.
--}}
@extends('admin.layouts.app')

@php
    $title = $title ?? __('admin.menu.'.str_replace('-', '_', $route), [], app()->getLocale());
    $filtersView = 'admin.'.$route.'.filters';
    $hasFilters = view()->exists($filtersView);
    $canCreate = app('router')->has('admin.'.$route.'.create');
@endphp

@section('title', $title)
@section('page-title', $title)

@section('page-actions')
    @if ($canCreate)
        <a href="{{ route('admin.'.$route.'.create') }}" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg"></i> {{ __('admin.actions.create') }}
        </a>
    @endif
@endsection

@section('content')
    @if ($hasFilters)
        <div class="card mb-3">
            <div class="card-body">
                <form id="filterForm" class="row g-2 align-items-end">
                    @include($filtersView)

                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="bi bi-funnel"></i> {{ __('admin.actions.filter') }}
                        </button>
                        <button type="reset" class="btn btn-light btn-sm" id="filterReset">
                            {{ __('admin.actions.reset') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @endif

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle w-100" id="dataTable">
                    <thead>
                    <tr>
                        @foreach ($columns as $column)
                            <th>{{ $column['title'] }}</th>
                        @endforeach
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function () {
            const table = $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                order: [[0, 'desc']],
                pageLength: 25,
                lengthMenu: [10, 25, 50, 100],
                language: window.Admin.dataTableLanguage,
                ajax: {
                    url: @json($dataUrl),
                    data: function (params) {
                        // Merge the toolbar filters into every server-side request.
                        $('#filterForm').serializeArray().forEach(function (field) {
                            if (field.value !== '') params[field.name] = field.value;
                        });
                    },
                },
                columns: @json($columns),
            });

            $('#filterForm').on('submit', function (event) {
                event.preventDefault();
                table.ajax.reload();
            });

            $('#filterReset').on('click', function () {
                const form = $('#filterForm')[0];
                form.reset();
                $(form).find('select').val('').trigger('change');
                setTimeout(() => table.ajax.reload(), 50);
            });
        });
    </script>
@endpush