@extends('layouts.app')

@section('content')
    <div class="container-fluid movie-page">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <!-- Search & Filter Card -->
                <div class="card mb-4">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <span><span class="iconify" data-icon="mdi:filter-variant"></span> Advanced Search & Filters</span>
                            <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse">
                                <span class="iconify" data-icon="mdi:chevron-down"></span>
                            </button>
                        </div>
                    </div>
                    <div class="collapse" id="filterCollapse">
                        <div class="card-body">
                            <form method="GET" action="{{ route('movie.index') }}">
                                <div class="row">
                                    <!-- Title Search -->
                                    <div class="col-md-4 mb-3">
                                        <label for="title" class="form-label">
                                            <span class="iconify" data-icon="mdi:magnify"></span> Title
                                        </label>
                                        <input type="text" class="form-control" id="title" name="title" value="{{ request('title') }}" placeholder="Search by title...">
                                    </div>

                                    <!-- Genre Filter -->
                                    <div class="col-md-4 mb-3">
                                        <label for="genre" class="form-label">
                                            <span class="iconify" data-icon="mdi:filmstrip"></span> Genre
                                        </label>
                                        <select class="form-select" id="genre" name="genre">
                                            <option value="">All Genres</option>
                                            @foreach($genres as $genre)
                                                <option value="{{ $genre->id }}" {{ request('genre') == $genre->id ? 'selected' : '' }}>
                                                    {{ $genre->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <!-- Rating Range -->
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">
                                            <span class="iconify" data-icon="mdi:star"></span> Rating
                                        </label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" name="rating_min" value="{{ request('rating_min') }}" placeholder="Min" min="0" max="10" step="0.1">
                                            <span class="input-group-text">to</span>
                                            <input type="number" class="form-control" name="rating_max" value="{{ request('rating_max') }}" placeholder="Max" min="0" max="10" step="0.1">
                                        </div>
                                    </div>

                                    <!-- Year Range -->
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">
                                            <span class="iconify" data-icon="mdi:calendar"></span> Release Year
                                        </label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" name="year_min" value="{{ request('year_min') }}" placeholder="From" min="1900" max="{{ date('Y') }}">
                                            <span class="input-group-text">to</span>
                                            <input type="number" class="form-control" name="year_max" value="{{ request('year_max') }}" placeholder="To" min="1900" max="{{ date('Y') }}">
                                        </div>
                                    </div>

                                    <!-- Sort By -->
                                    <div class="col-md-4 mb-3">
                                        <label for="sort_by" class="form-label">
                                            <span class="iconify" data-icon="mdi:sort"></span> Sort By
                                        </label>
                                        <select class="form-select" id="sort_by" name="sort_by">
                                            <option value="release_date" {{ request('sort_by') == 'release_date' ? 'selected' : '' }}>Release Date</option>
                                            <option value="title" {{ request('sort_by') == 'title' ? 'selected' : '' }}>Title</option>
                                            <option value="vote_average" {{ request('sort_by') == 'vote_average' ? 'selected' : '' }}>Rating</option>
                                            <option value="vote_count" {{ request('sort_by') == 'vote_count' ? 'selected' : '' }}>Popularity</option>
                                        </select>
                                    </div>

                                    <!-- Sort Order -->
                                    <div class="col-md-4 mb-3">
                                        <label for="sort_order" class="form-label">
                                            <span class="iconify" data-icon="mdi:sort-variant"></span> Order
                                        </label>
                                        <select class="form-select" id="sort_order" name="sort_order">
                                            <option value="DESC" {{ request('sort_order') == 'DESC' ? 'selected' : '' }}>Descending</option>
                                            <option value="ASC" {{ request('sort_order') == 'ASC' ? 'selected' : '' }}>Ascending</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="d-flex gap-2">
                                    <button type="submit" class="btn btn-primary">
                                        <span class="iconify" data-icon="mdi:magnify"></span> Apply Filters
                                    </button>
                                    <a href="{{ route('movie.index') }}" class="btn btn-outline-secondary">
                                        <span class="iconify" data-icon="mdi:refresh"></span> Clear All
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Results Card -->
                <div class="card">
                    <div class="card-header">
                        Movies
                        @if(request()->hasAny(['title', 'genre', 'rating_min', 'rating_max', 'year_min', 'year_max']))
                            <span class="badge bg-primary ms-2">Filtered</span>
                        @endif
                        <span class="text-muted ms-2">({{ $movies->total() }} results)</span>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach($movies as $movie)
                                <div class="col-md-2">
                                    <div class="movie-card">
                                        <a href="{{ route('movie.show', $movie->slug) }}" title="{{ $movie->title }}">
                                            <img
                                                src="
                                                @if($movie->poster_path)
                                                    http://image.tmdb.org/t/p/w185/{{ $movie->poster_path }}
                                                @else
                                                    /img/no_poster.png
                                                @endif"
                                                alt="{{ $movie->title }}"
                                                title="{{ $movie->title }} @if($movie->release_date) ({{ $movie->release_date->format('Y') }}) @endif"
                                                class="img img-fluid"
                                            >
                                        </a>
                                        <ul class="quick-actions">
                                            <li>
                                                {{--                            <span class="iconify" data-icon="mdi-check-bold"></span>--}}
                                                <a href=""><span class="iconify" data-icon="mdi-check-outline"></span></a>
                                            </li>
                                            <li>
                                                <a href=""><span class="iconify" data-icon="mdi-image-multiple"></span></a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    {{ $movie->vote_average }} <span class="iconify" data-icon="mdi-star"></span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                {{ $movies->links() }}
            </div>
            <div class="col-md-2">
                <div class="card">
                    menu
                </div>
            </div>
        </div>
    </div>
@endsection