@extends('layouts.app')

@section('content')
    @include('partials.navbar')
    <form method="GET" action="{{ route('gadgets.index') }}" class="row g-2 mb-4">

        {{-- SEARCH --}}
        <div class="col-md-3 col-12">
            <input type="text" name="search" class="form-control shadow-none" placeholder="🔍 Search gadgets..."
                value="{{ request('search') }}">
        </div>

        {{-- CATEGORY (DYNAMIC) --}}
        <div class="col-md-3 col-12">
            <select name="category" class="form-select shadow-none">
                <option value="">All Categories</option>

                @foreach ($categories as $cat)
                    <option value="{{ $cat }}" {{ request('category') == $cat ? 'selected' : '' }}>
                        {{ ucfirst($cat) }}
                    </option>
                @endforeach

            </select>
        </div>

        {{-- SORT --}}
        <div class="col-md-2 col-12">
            <select name="sort" class="form-select shadow-none">

                <option value="">Sort: Latest</option>

                <option value="price_low"
                    {{ request('sort') === 'price_low' ? 'selected' : '' }}>
                    💰 Price: Low → High
                </option>

                <option value="price_high"
                    {{ request('sort') === 'price_high' ? 'selected' : '' }}>
                    💎 Price: High → Low
                </option>

            </select>
        </div>

        {{-- BUTTONS --}}
        <div class="col-md-4 col-12 d-flex gap-2">
            <button class="btn btn-dark w-50 shadow-none">Filter</button>

            <a href="{{ route('gadgets.index') }}" class="btn btn-outline-secondary w-50">
                Reset
            </a>
        </div>

    </form>
    <div class="container py-5" style="background:#222222">

        {{-- HERO --}}
        @if ($featured)
            <div class="mb-5 position-relative">

                <img src="{{ asset($featured->image) }}" class="w-100 rounded" style="height:580px;object-fit:cover;">
                <div class="position-absolute bottom-0 p-4 text-white"
                    style="background:linear-gradient(transparent, rgba(0,0,0,0.8));width:100%;">
                    <span class="brand-label">
                        {{ $featured->brand }}
                    </span>
                    <h2 class="gadget-title">{{ $featured->title }}</h2>
                    <p class="gadget-desc">{{ $featured->short_description }}</p>
                    <a href="{{ route('gadgets.show', $featured->slug) }}" class="btn btn-light">MORE DETAILS</a>
                </div>
            </div>
        @endif
        {{-- GRID --}}
        <div class="row bg-dark p-4">
            @foreach ($gadgets as $item)
                <div class="col-md-3 mb-4">
                    <div class="card border-0 shadow-sm h-100 gadget-card">
                        <div class="overflow-hidden">
                            <img src="{{ asset($item->image) }}" class="card-img-top gadget-img"
                                style="height:350px !important">
                        </div>
                        <div class="card-body cyber-box">
                            <small class="brand-labels">{{ $item->brand }}</small>
                            <h6 class="mt-2" style="font-weight: 100">{{ $item->title }}</h6>
                            {{-- <p class="text-light small">
                                {{ Str::limit($item->short_description, 60) }}
                            </p> --}}
                            <span style="text-transform: uppercase; font-size:12px;color:greenyellow">
                                {{ $item->user->name ?? 'Unknown Author' }}</span>
                            {{-- <strong>${{ number_format($item->price) }}</strong> --}}
                        </div>
                        <a href="{{ route('gadgets.show', $item->slug) }}" class="stretched-link"></a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <br>
    <br>
    <style>
        .cyber-box {
            background: #43334C;
            color: white;
        }

        .gadget-card:hover {
            transform: translateY(-5px);
            transition: 0.3s;
        }

        .gadget-img {
            height: 200px;
            object-fit: cover;
            transition: 0.4s;
        }

        .gadget-card:hover .gadget-img {
            transform: scale(1.1);
        }

        .gadget-hero {
            background: #000;
            padding: 30px;
            border-radius: 16px;
            text-align: center;
        }

        /* TITLE */
        .gadget-title {
            font-size: 42px;
            font-weight: 400;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif text-transform: uppercase;

            background: linear-gradient(90deg, #eaecec, #f0f2f0, #ece9eb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            letter-spacing: 2px;

            /* Glow effect */
            text-shadow:
                0 0 5px rgba(50, 52, 52, 0.4),
                0 0 10px rgba(66, 69, 69, 0.3),
                0 0 20px rgba(74, 70, 73, 0.2);

            animation: glowMove 3s infinite alternate;
        }

        .brand-label {
            display: inline-block;
            background: #ff0000;
            color: #fff;
            padding: 8px 16px;
            border-radius: 0px;
            font-size: 14px;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .brand-labels {
            display: inline-block;
            background: #edebeb;
            color: #1b1919;
            padding: 4px 8px;
            border-radius: 0px;
            font-size: 13px;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* DESCRIPTION */
        .gadget-desc {
            margin-top: 15px;
            font-size: 16px;
            color: #ccc;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;

            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 1s ease forwards;
        }

        /* ANIMATIONS */
        @keyframes glowMove {
            0% {
                filter: drop-shadow(0 0 5px #727777);
            }

            100% {
                filter: drop-shadow(0 0 20px #5a5759);
            }
        }

        @keyframes fadeUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
@endsection