@extends('layouts.app')

@section('title', 'Search Results: ' . $keyword)
@section('meta_description', 'Search results for "' . $keyword . '"')

@push('head')
<style>
.search-results-container {
    padding: 60px 0;
}

.search-header {
    margin-bottom: 40px;
    text-align: center;
}

.search-header h1 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.search-header .keyword {
    color: var(--primary-color, #007bff);
    font-weight: bold;
}

.search-section {
    margin-bottom: 50px;
}

.search-section h3 {
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007bff;
    font-size: 1.5rem;
}

.search-section h3 i {
    margin-right: 10px;
    color: #007bff;
}

.search-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.search-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.search-card h5 {
    margin-bottom: 10px;
    font-size: 1.25rem;
}

.search-card h5 a {
    color: #333;
    text-decoration: none;
}

.search-card h5 a:hover {
    color: #007bff;
}

.search-card-summary {
    color: #666;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.search-card-meta {
    color: #999;
    font-size: 0.875rem;
}

.search-card-meta span:not(:last-child)::after {
    content: "•";
    margin: 0 8px;
}

.no-results {
    text-align: center;
    padding: 60px 20px;
}

.no-results h4 {
    color: #666;
    margin-bottom: 15px;
}

.search-again {
    background: #f8f9fa;
    padding: 40px;
    border-radius: 10px;
    margin-top: 50px;
}

.search-again form {
    max-width: 600px;
    margin: 0 auto;
}

.search-again .input-group {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.search-again input {
    border-radius: 25px 0 0 25px;
    padding: 12px 20px;
    border: none;
}

.search-again button {
    border-radius: 0 25px 25px 0;
    padding: 12px 30px;
}
</style>
@endpush

@section('content')
<main class="search-results-container">
    <div class="container">
        <div class="search-header">
            <h1>Search Results for <span class="keyword">"{{ $keyword }}"</span></h1>
        </div>

        @if(collect($results)->flatten()->isEmpty())
            <div class="no-results">
                <h4>No results found</h4>
                <p class="text-muted">Please try a different search term.</p>
            </div>
        @else
            {{-- 게시판 결과 --}}
            @if(!empty($results['boards']) && count($results['boards']) > 0)
                <section class="search-section">
                    <h3><i class="bi bi-file-text"></i> Board Posts</h3>
                    @foreach($results['boards'] as $item)
                        <div class="search-card">
                            <h5>
                                @if($item['url'] && $item['url'] !== '#')
                                    <a href="{{ $item['url'] }}">{{ $item['title'] }}</a>
                                @else
                                    {{ $item['title'] }}
                                @endif
                            </h5>
                            @if($item['summary'])
                                <div class="search-card-summary">{{ $item['summary'] }}</div>
                            @endif
                            <div class="search-card-meta">
                                <span>{{ $item['board_name'] }}</span>
                                <span>{{ $item['created_at'] }}</span>
                            </div>
                        </div>
                    @endforeach
                </section>
            @endif

            {{-- 메뉴 결과 --}}
            @if(!empty($results['menus']) && count($results['menus']) > 0)
                <section class="search-section">
                    <h3><i class="bi bi-list-ul"></i> Pages</h3>
                    @foreach($results['menus'] as $item)
                        <div class="search-card">
                            <h5>
                                @if($item['url'] && $item['url'] !== '#')
                                    <a href="{{ $item['url'] }}">{{ $item['title'] }}</a>
                                @else
                                    {{ $item['title'] }}
                                @endif
                            </h5>
                            @if($item['summary'])
                                <div class="search-card-summary">{{ $item['summary'] }}</div>
                            @endif
                        </div>
                    @endforeach
                </section>
            @endif
        @endif

        {{-- 새로운 검색 폼 --}}
        <section class="search-again">
            <form action="/search" method="GET">
                <div class="input-group">
                    <input type="text" name="search-keyword" class="form-control" 
                           placeholder="Search for courses, activities, and more..." value="{{ $keyword }}">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search"></i> Search
                    </button>
                </div>
            </form>
        </section>
    </div>
</main>
@endsection