@props([
    'action',
    'filters' => [],
    'export' => false,
    'date' => false,
    'exportRoute' => null,
    'searchName' => 'search',
    'searchPlaceholder' => 'search',
    'startDateName' => 'start_date',
    'endDateName' => 'end_date',
    'perPageName' => 'per_page',
    'formId' => 'table-controls-form',
    'filterLabels' => [],
    'saveRoute' => null,
    'clearUrl' => null,
])

<form action="{{ $action }}" method="GET" id="{{ $formId }}"
    class="d-inline-flex align-items-center gap-3 flex-nowrap mb-0 table-controls-form">

    {{ $slot }}

    {{-- Per Page --}}
    <select name="{{ $perPageName }}" class="form-select form-select-sm w-auto table-control-auto-submit">
        @foreach ([5, 10, 25, 50, 100, 150] as $count)
            <option value="{{ $count }}" {{ request($perPageName, 10) == $count ? 'selected' : '' }}>
                {{ $count }}
            </option>
        @endforeach
    </select>

    {{-- Custom Filters --}}
    @foreach ($filters as $name => $options)
        <select name="{{ $name }}" class="form-select form-select-sm w-auto table-control-auto-submit">
            <option value="">{{ $filterLabels[$name] ?? ucfirst(str_replace('_', ' ', $name)) }}</option>
            @foreach ($options as $value => $label)
                <option value="{{ $value }}" {{ request($name) == $value ? 'selected' : '' }}>
                    {{ $label }}
                </option>
            @endforeach
        </select>
    @endforeach

    {{-- Search --}}
    <div class="input-group input-group-sm w-auto">
        <input type="text" class="form-control table-control-search" name="{{ $searchName }}"
            placeholder="{{ $searchPlaceholder }}" value="{{ request($searchName) }}" autocomplete="off">
        <button class="btn btn-outline-secondary" type="submit">
            <iconify-icon icon="ion:search-outline"></iconify-icon>
        </button>
    </div>

    {{-- Date Range --}}
    @if (isset($date) && $date === true)
        <div class="d-flex gap-2 align-items-center">
            <input type="date" name="{{ $startDateName }}"
                class="form-control form-control-sm table-control-auto-submit" value="{{ request($startDateName) }}">
            <input type="date" name="{{ $endDateName }}"
                class="form-control form-control-sm table-control-auto-submit" value="{{ request($endDateName) }}">
        </div>
    @endif

    {{-- Export --}}
    @if (isset($export) && $export === true)
        <div class="input-group input-group-sm w-auto">
            <select name="format" id="export-format-{{ $formId }}" class="form-select form-select-sm">
                <option value="" disabled selected>Export</option>
                <option value="xlsx">Excel</option>
                <option value="csv">CSV</option>
                <option value="pdf">PDF</option>
            </select>
            <button class="btn btn-outline-success btn-sm" type="button"
                onclick="handleExport_{{ str_replace('-', '_', $formId) }}()">
                <iconify-icon icon="mdi:download"></iconify-icon>
            </button>
        </div>

        <script>
            function handleExport_{{ str_replace('-', '_', $formId) }}() {
                const format = document.getElementById('export-format-{{ $formId }}').value;
                if (!format) {
                    alert('Please select an export format');
                    return;
                }

                const form = document.getElementById('{{ $formId }}');
                const originalAction = form.action;
                const exportRoute = @json($exportRoute);

                form.action = exportRoute;
                form.submit();

                setTimeout(() => {
                    form.action = originalAction;
                }, 100);
            }
        </script>
    @endif
    @if (isset($saveRoute) && $saveRoute)
        <button class="btn btn-outline-primary btn-sm" type="button"
            onclick="handleSave_{{ str_replace('-', '_', $formId) }}()">
            Save
        </button>

        <script>
            function handleSave_{{ str_replace('-', '_', $formId) }}() {
                const form = document.getElementById('{{ $formId }}');
                const originalAction = form.action;
                const saveRoute = @json($saveRoute);

                form.action = saveRoute;
                form.submit();

                setTimeout(() => {
                    form.action = originalAction;
                }, 100);
            }
        </script>
    @endif

    {{-- Clear Filters --}}
    <a href="{{ $clearUrl ?? $action }}" class="btn btn-outline-danger btn-sm">
        Clear
    </a>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById(@json($formId));
        if (!form) return;

        let isSubmitting = false;
        let searchTimer = null;

        const submitForm = () => {
            if (isSubmitting) return;
            isSubmitting = true;
            form.submit();
        };

        // أي select أو date يعمل submit فورًا
        form.querySelectorAll('.table-control-auto-submit').forEach(element => {
            element.addEventListener('change', submitForm);
        });

        const searchInput = form.querySelector('.table-control-search');
        if (searchInput) {
            searchInput.addEventListener('input', function() {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(() => {
                    submitForm();
                }, 500);
            });

            searchInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    clearTimeout(searchTimer);
                }
            });
        }
    });
</script>