@props([
    'id' => 'dataTable',
    'placeholder' => 'Cari data...',
    'showExport' => true
])

<div class="dt-filters-box mb-4 p-3 border rounded-xl" style="background: #ffffff; border-color: #f1f5f9 !important; border-radius: 12px;">
    <div class="filter-controls-row d-flex flex-wrap align-items-end" style="gap: 12px; width: 100%;">
        <!-- Search Input -->
        <div class="filter-control-item filter-search" style="width: 260px; max-width: 100%;">
            <label class="filter-label font-weight-bold mb-1 text-secondary" style="font-size: 0.8rem; letter-spacing: 0.025em;">Cari Data</label>
            <div class="input-group-filter d-flex align-items-center border px-2 bg-white" style="height: 40px; border-radius: 10px; border-color: #e2e8f0 !important; width: 100%;">
                <span class="text-muted mr-2"><i class="fas fa-search"></i></span>
                <input type="text" id="{{ $id }}_search" class="form-control border-0 p-0 bg-transparent" placeholder="{{ $placeholder }}" style="box-shadow: none; font-size: 0.9rem; height: 100%; width: 100%;">
            </div>
        </div>

        <!-- Custom Filters slots -->
        {{ $slot }}

        <!-- Export Buttons (aligned to right on desktop) -->
        @if ($showExport)
            <div class="filter-control-item filter-actions ml-auto-desktop" style="margin-left: auto;">
                <label class="filter-label d-none d-md-block" style="height: 18px; margin-bottom: 0;">&nbsp;</label>
                <div class="dt-buttons-wrapper d-inline-flex" style="gap: 8px;">
                    <button type="button" id="{{ $id }}_btn_excel" class="btn btn-success font-weight-bold" style="height: 40px; border-radius: 8px; background-color: #10b981 !important; border-color: #10b981 !important; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px;">
                        <i class="fas fa-file-excel"></i> Excel
                    </button>
                    <button type="button" id="{{ $id }}_btn_print" class="btn btn-primary font-weight-bold" style="height: 40px; border-radius: 8px; background-color: #2563eb !important; border-color: #2563eb !important; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px;">
                        <i class="fas fa-print"></i> Print
                    </button>
                </div>
            </div>
        @endif
    </div>
</div>