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

@php
    $clearQuerySource = is_array($clearPreserveQuery) ? $clearPreserveQuery : $preserveQuery;
    $filledClearQuery = array_filter($clearQuerySource, fn ($value) => filled($value));
@endphp

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

    {{ $slot }}

    {{-- Preserve Query --}}
    @foreach ($preserveQuery as $name => $value)
        @if (filled($value))
            <input type="hidden" name="{{ $name }}" value="{{ $value }}">
        @endif
    @endforeach

    {{-- 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 && $exportRoute)
        <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>
    @endif

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

    {{-- Clear Filters --}}
    <a href="{{ $clearUrl ?? (count($filledClearQuery) ? $action . '?' . http_build_query($filledClearQuery) : $action) }}"
        class="btn btn-outline-danger btn-sm">
        Clear
    </a>
</form>

<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);
    }

    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);
    }

    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();
        };

        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>