@extends('layouts.frontend.mobile_app')

@section('title')
    Search
@endsection

@section('content')
<div class="page faq">

    <div class="row">
        <div class="col-12">
            <h4>Search</h4>
            <div class="search-panel">
                <div class="search-bar p-3 mb-4 bg-primary">

                    <form action="{{ route('search') }}">
                        <div class="input-group position-relative">
                            <input type="text"
                                   id="search-keyword"
                                   name="q"
                                   class="form-control rounded-pill-start"
                                   placeholder="Search by Keyword"
                                   aria-label="Search by Keyword"
                                   aria-describedby="Search by Keyword"
                                   value="{{ request('q') }}"
                            >

                            <select id="search-website" class="form-control" name="template">
                                <option value="">All Websites</option>
                                @foreach(division_list() as $site)
                                    <option value="{{ $site['division'] }}" @if(request('template') === $site['division']) selected @endif>{{ $site['name'] }}</option>
                                @endforeach
                            </select>

                            <div class="input-group-append">
                                <a href="{{ route('search') }}" class="btn bg-white rounded-0 border border-1">
                                    <i id="clean-keyword" class="far fa-times-circle"></i>
                                </a>
                            </div>

                            <div class="input-group-append">
                                <button class="btn btn-secondary rounded-pill-end px-4" type="submit">
                                    <i class="fas fa-search"></i> <span class="d-none d-sm-inline-block">Search</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-4">
    @if($results->total())
        @foreach ($results as $menuItem)
            <div class="col-12">
                <div style="{{ _style('border-radius', $menuItem, 10, 'px') }} {{ _style('padding', $menuItem->height) }}"
                     class="template-menu-item" id="item-{{ $menuItem->id }}"
                >

                    <a class="faq-wrapper" href="{{ item_url($menuItem, ['template' => request('template')]) }}">
                        <div class="{{ $menuItem->disabled_menu_title ? 'hidden' : 'menu-item-title' }}">
                            {!! $menuItem->name !!}
                            <span class="text-warning d-block d-sm-inline-block">
                                @for($i = 1; $i <= 5; $i++)

                                    @if($menuItem->rating == $i)
                                        <i class="fas fa-star"></i>
                                    @elseif($menuItem->rating > $i)
                                        @if($menuItem->rating <= $i + 0.5)
                                            <i class="fas fa-star-half-alt"></i>
                                        @else
                                            <i class="fas fa-star"></i>
                                        @endif
                                    @else
                                        @if($menuItem->rating >= $i - 0.5)
                                            <i class="fas fa-star-half-alt"></i>
                                        @else
                                            <i class="far fa-star"></i>
                                        @endif
                                    @endif
                                @endfor

                            </span>
                        </div>
                        <div class="menu-item-meta">
                            <span class="date">{{ optional($menuItem->published_at)->format(setting('site_date_format') . ' H:m') }}</span>@if($menuItem->user_id)<b class="divider">| <span class="fw-normal">by</span></b><span class="creator">{{ $menuItem->user->name }}</span>@endif
                            <div class="d-block d-sm-none"></div>
                            @if($menuItem->categories->count())
                                <b class="divider"><span class="d-none d-sm-inline">|</span> <span class="fw-normal">in</span></b><span class="categories">{{ $menuItem->categories->first()->name }}</span>
                            @endif
                        </div>
                    </a>
                    <a class="view-button btn btn-primary text-white" href="{{ $menuItem->slug }}">View <i class="fas fa-caret-right"></i></a>
                </div>
            </div>
        @endforeach

        <div class="col-12">
            {!! $results->links() !!}
        </div>
    @else
        <div class="col-12">
            <div class="alert alert-info">
                No item is found
            </div>
        </div>
    @endif
    </div>
</div>


@endsection

@push('js')
    <script>
        SearchBar.init({
            url: '{{ route('search') }}'
        });
    </script>
@endpush