@extends('contentNavbarLayout')

@section('content')
<div class="card p-4 border-0">
    <h4 class="mb-3">Search Documents</h4>

    {{-- Search + Filter Form --}}
    <form method="GET" action="{{ route('search.global') }}">
        {{-- Search Bar and Buttons --}}
        <div class="d-flex gap-2 mb-3">
            <input 
                type="text" 
                name="keyword" 
                class="form-control form-control-lg" 
                placeholder="Search documents..." 
                value="{{ request('keyword') }}"
            >

            {{-- Filter Dropdown --}}
            <div class="dropdown">
                <button class="btn btn-outline-secondary btn-lg d-flex align-items-center" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bx bx-filter me-1"></i> Filter
                </button>

                <div class="dropdown-menu p-3 shadow-sm" style="min-width: 380px;">
                    <div class="row g-3">
                        {{-- Record Type --}}
                        <div class="col-12">
                            <label class="form-label fw-semibold">Record Type</label>
                            <select name="record_type" class="form-select">
                                <option value="">All Record Types</option>
                                @foreach(App\Models\RecordType::all() as $type)
                                    <option value="{{ $type->name }}" {{ request('record_type') == $type->name ? 'selected' : '' }}>
                                        {{ $type->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Date Filter --}}
                        <div class="col-12">
                            <label class="form-label fw-semibold">Date Filter</label>
                            <select name="date_filter" class="form-select" id="date_filter">
                                <option value="">All Dates</option>
                                <option value="this_month" {{ request('date_filter') == 'this_month' ? 'selected' : '' }}>This Month</option>
                                <option value="last_month" {{ request('date_filter') == 'last_month' ? 'selected' : '' }}>Last Month</option>
                                <option value="last_3_months" {{ request('date_filter') == 'last_3_months' ? 'selected' : '' }}>Last 3 Months</option>
                                <option value="custom" {{ request('date_filter') == 'custom' ? 'selected' : '' }}>Custom Range</option>
                            </select>
                        </div>

                        {{-- Custom Date Range --}}
                        <div class="col-6 custom-date d-none">
                            <label class="form-label fw-semibold">Start Date</label>
                            <input type="date" name="start_date" class="form-control" value="{{ request('start_date') }}">
                        </div>
                        <div class="col-6 custom-date d-none">
                            <label class="form-label fw-semibold">End Date</label>
                            <input type="date" name="end_date" class="form-control" value="{{ request('end_date') }}">
                        </div>

                        {{-- Sort By --}}
                        <div class="col-12">
                            <label class="form-label fw-semibold">Sort By</label>
                            <select name="sort_by" class="form-select">
                                <option value="">Default</option>
                                <option value="name_asc"  {{ request('sort_by') == 'name_asc' ? 'selected' : '' }}>Name (A–Z)</option>
                                <option value="name_desc" {{ request('sort_by') == 'name_desc' ? 'selected' : '' }}>Name (Z–A)</option>
                                <option value="date_asc"  {{ request('sort_by') == 'date_asc' ? 'selected' : '' }}>Date (Earliest)</option>
                                <option value="date_desc" {{ request('sort_by') == 'date_desc' ? 'selected' : '' }}>Date (Latest)</option>
                            </select>
                        </div>
                    </div>

                    {{-- Apply Filters --}}
                    {{-- Apply Filters (smaller) --}}
                                    <div class="d-flex justify-content-end mt-3">
                                        <button type="submit" class="btn btn-primary btn-sm d-flex align-items-center px-3 py-2">
                                            <i class="bx bx-check me-1"></i> Apply Filters
                                        </button>
                                    </div>
                                </div>
                            </div>

                            {{-- Search Button (smaller) --}}
                            <button type="submit" class="btn btn-primary btn-sm d-flex align-items-center px-3 py-2">
                                <i class="bx bx-search me-1"></i> Search
                            </button>

                            {{-- Reset Button (same color & size) --}}
                            <a href="{{ route('search.global') }}" class="btn btn-primary btn-sm d-flex align-items-center px-3 py-2">
                                <i class="bx bx-reset me-1"></i> Reset
                            </a>
                        </div>

    </form>

    {{-- JS for Custom Date Range Toggle --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dateFilter = document.getElementById('date_filter');
            const customFields = document.querySelectorAll('.custom-date');

            function toggleCustomDate() {
                if (dateFilter.value === 'custom') {
                    customFields.forEach(el => el.classList.remove('d-none'));
                } else {
                    customFields.forEach(el => el.classList.add('d-none'));
                }
            }

            toggleCustomDate();
            dateFilter.addEventListener('change', toggleCustomDate);
        });
    </script>

    {{-- Results --}}
    @if(isset($results) && $results->count() > 0)
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Record Type</th>
                        <th>Title</th>
                        <th>Description</th>
                        <th>Created At</th>
                        <th>File</th>
                        <th>Other Properties</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($results as $index => $res)
                        <tr>
                            <td>{{ ($results->currentPage() - 1) * $results->perPage() + $loop->iteration }}</td>
                            <td>{{ $res->record_type }}</td>
                            <td>{{ $res->title ?? '-' }}</td>
                            <td>{{ $res->description ?? '-' }}</td>
                            <td>{{ $res->created_at ?? '-' }}</td>
                            <td>
                                @if(!empty($res->file_path))
                                    <a href="{{ Storage::url($res->file_path) }}" target="_blank">View</a>
                                @else
                                    <span class="text-muted">No File</span>
                                @endif
                            </td>
                            <td>
                                @foreach($res as $key => $value)
                                    @if(!in_array($key, ['id', 'title', 'description', 'file_path', 'record_type', 'created_at', 'updated_at']) && !is_null($value))
                                        <strong>{{ ucwords(str_replace('_', ' ', $key)) }}:</strong> {{ $value }}<br>
                                    @endif
                                @endforeach
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        <div class="mt-4">
            {{ $results->appends(request()->all())->links() }}
        </div>

    @elseif(request('keyword'))
        <div class="alert alert-warning">
            No results found for "<strong>{{ request('keyword') }}</strong>".
        </div>
    @endif
</div>
@endsection