{{--
    Shared report filter bar.
    $filters   - array returned by ReportController::filters()
    $route     - route name of the current report (for the form action)
    $showSearch - whether to render the account search box
--}}
@php
    $showSearch = $showSearch ?? false;
    $showExport = $showExport ?? true;
@endphp

<div class="card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route($route) }}" class="row g-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label small text-muted text-uppercase fw-bold">Period</label>
                <select name="period" class="form-select" onchange="toggleCustomRange(this.value)">
                    @foreach(\App\Http\Controllers\ReportController::PERIODS as $key => $label)
                        <option value="{{ $key }}" @selected($filters['period'] === $key)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2 js-custom-range" style="{{ $filters['period'] === 'custom' ? '' : 'display:none' }}">
                <label class="form-label small text-muted text-uppercase fw-bold">From</label>
                <input type="date" name="start_date" class="form-control"
                       value="{{ request('start_date', $filters['start']->format('Y-m-d')) }}">
            </div>

            <div class="col-md-2 js-custom-range" style="{{ $filters['period'] === 'custom' ? '' : 'display:none' }}">
                <label class="form-label small text-muted text-uppercase fw-bold">To</label>
                <input type="date" name="end_date" class="form-control"
                       value="{{ request('end_date', $filters['end']->format('Y-m-d')) }}">
            </div>

            @if($filters['is_super_admin'])
                <div class="col-md-3">
                    <label class="form-label small text-muted text-uppercase fw-bold">Company</label>
                    <select name="company_id" class="form-select">
                        <option value="">All Companies</option>
                        @foreach($filters['companies'] as $company)
                            <option value="{{ $company->id }}" @selected($filters['company_id'] === $company->id)>
                                {{ $company->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            @endif

            @if($showSearch)
                <div class="col-md-3">
                    <label class="form-label small text-muted text-uppercase fw-bold">Account / Client</label>
                    <input type="text" name="search" class="form-control" placeholder="Name or account #"
                           value="{{ $filters['search'] }}">
                </div>
            @endif

            <div class="col-md-2 d-flex gap-2">
                <button type="submit" class="btn btn-primary flex-grow-1">
                    <i class="fas fa-filter me-1"></i> Apply
                </button>
                <a href="{{ route($route) }}" class="btn btn-outline-secondary" title="Reset filters">
                    <i class="fas fa-rotate-left"></i>
                </a>
            </div>
        </form>

        <div class="d-flex justify-content-between align-items-center mt-3 pt-3 border-top">
            <small class="text-muted">
                <i class="far fa-calendar me-1"></i>
                Showing <strong>{{ $filters['start']->format('M d, Y') }}</strong>
                to <strong>{{ $filters['end']->format('M d, Y') }}</strong>
                @if($filters['company_id'] || !$filters['is_super_admin'])
                    &middot; {{ $filters['company']->name ?? 'Company' }}
                @else
                    &middot; All companies
                @endif
            </small>
            @if($showExport)
                <div class="d-flex gap-2">
                    <a href="{{ request()->fullUrlWithQuery(['export' => 'csv']) }}" class="btn btn-sm btn-outline-success">
                        <i class="fas fa-file-csv me-1"></i> Export CSV
                    </a>
                    <button type="button" onclick="window.print()" class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-print me-1"></i> Print
                    </button>
                </div>
            @endif
        </div>
    </div>
</div>

@once
    <style>
        @media print {
            .aside-container, .topnavbar-wrapper, .footer-container,
            .card form, .btn, .pagination { display: none !important; }
            .section-container { margin-left: 0 !important; width: 100% !important; }
            .table { font-size: 11px; }
        }
        .report-table thead th { white-space: nowrap; font-size: .75rem; text-transform: uppercase; }
        .report-table td, .report-table th { vertical-align: middle; }
        .report-table tfoot td { font-weight: 700; background: #f8f9fa; }
        .report-sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; }
        .report-table tfoot .report-sticky-col { background: #f8f9fa; }
    </style>
    <script>
        function toggleCustomRange(value) {
            document.querySelectorAll('.js-custom-range').forEach(function (el) {
                el.style.display = value === 'custom' ? '' : 'none';
            });
        }
    </script>
@endonce