@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('show.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>

                                    <!-- Network Filter -->
                                    <div class="col-md-4 mb-3">
                                        <label for="network" class="form-label">
                                            <span class="iconify" data-icon="mdi:television"></span> Network
                                        </label>
                                        <select class="form-select" id="network" name="network">
                                            <option value="">All Networks</option>
                                            @foreach($networks as $network)
                                                <option value="{{ $network->id }}" {{ request('network') == $network->id ? 'selected' : '' }}>
                                                    {{ $network->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> First Air 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>

                                    <!-- Status Filter -->
                                    <div class="col-md-4 mb-3">
                                        <label for="status" class="form-label">
                                            <span class="iconify" data-icon="mdi:progress-check"></span> Status
                                        </label>
                                        <select class="form-select" id="status" name="status">
                                            <option value="">All Status</option>
                                            <option value="Returning Series" {{ request('status') == 'Returning Series' ? 'selected' : '' }}>Returning Series</option>
                                            <option value="Ended" {{ request('status') == 'Ended' ? 'selected' : '' }}>Ended</option>
                                            <option value="Canceled" {{ request('status') == 'Canceled' ? 'selected' : '' }}>Canceled</option>
                                            <option value="In Production" {{ request('status') == 'In Production' ? 'selected' : '' }}>In Production</option>
                                        </select>
                                    </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="first_air_date" {{ request('sort_by') == 'first_air_date' ? 'selected' : '' }}>First Air Date</option>
                                            <option value="name" {{ request('sort_by') == 'name' ? '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('show.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">
                        TV Shows
                        @if(request()->hasAny(['title', 'genre', 'network', 'rating_min', 'rating_max', 'year_min', 'year_max', 'status']))
                            <span class="badge bg-primary ms-2">Filtered</span>
                        @endif
                        <span class="text-muted ms-2">({{ $shows->total() }} results)</span>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach($shows as $show)
                                <div class="col-md-2">
                                    <div class="movie-card">
                                        <a href="{{ route('show.show', $show->slug) }}" title="{{ $show->name }}">
                                            <img
                                                src="
                                                @if($show->poster_path)
                                                    http://image.tmdb.org/t/p/w185/{{ $show->poster_path }}
                                                @else
                                                    /img/no_poster.png
                                                @endif"
                                                alt="{{ $show->name }}"
                                                title="{{ $show->name }} @if($show->first_air_date) ({{ $show->first_air_date->format('Y') }}) @endif"
                                                class="img img-fluid"
                                            >
                                        </a>
                                        <ul class="quick-actions">
                                            <li>
                                                <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="">
                                                    {{ $show->vote_average }} <span class="iconify" data-icon="mdi-star"></span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                {{ $shows->links() }}
            </div>
            <div class="col-md-2">
                <div class="card">
                    menu
                </div>
            </div>
        </div>
    </div>
@endsection