@extends('layouts.app')

@section('content')
    @include('partials.navbar')
    <div class="container py-1" style=" border-left:8px double rgb(224, 84, 84);padding-left:20px;">

        <span class="text-warning" style="font-size: 30px; text-transform:uppercase">
            {{ $gadget->brand }}
        </span>
        <span class="badge bg-success" style="float:right; margin-right:10px; ">{{ $gadget->category }}</span>
        <div class="mb-4">
            <h1 class="fw-bold text-light">{{ $gadget->title }}</h1>
            <p
                style="line-height:1.2;font-family: Georgia, Cambria, Times New Roman, Times, serif; font-size:20px; color:whitesmoke !important ">
                <span style="color:whitesmoke">{!! $gadget->short_description !!}</span>
            </p>


            @if (optional($gadget->user)->avatar)
                <img src="{{ asset('storage/' . $gadget->user->avatar) }}" alt="{{ $gadget->user->name }}"
                    class="author-avatar"
                    style="width:50px;height:50px;border-radius:50%;object-fit:cover;margin-right:10px;">
            @endif

            <span style="color: rgb(116, 116, 227)">{{ $gadget->user->name ?? 'Unknown Author' }}</span> |
            <small class="" style="color: whitesmoke">{{ $gadget->created_at->format('F j, Y') }}</small><span
                style="color: wheat"> | 👁 {{ $gadget->views }} views</span>

        </div>
        <div class="mb-1">
            <img src="{{ asset($gadget->image) }}" class="w-100 shadow" style="height:700px;object-fit:cover;">
        </div>
        <div class="d-flex justify-content-between align-items-center mb-5">

            {{-- TAGS --}}
            <div class="tag-wrapper">
                @if ($gadget->tags)
                    @foreach ($gadget->tags as $tag)
                        <span class="tag-item">#{{ $tag }}</span>
                    @endforeach
                @endif
            </div>

            {{-- PRICE --}}
            <div>
                <span class=" text-warning fs-5 m-2" style="font-size: 38px">
                    ~ ${{ $gadget->price }}/-
                </span>
            </div>

        </div>
        <div class="row">

            <div class="col-md-8">


                <section class="mb-1">
                    <h4 style="color:azure"class="mb-3">Overview</h4>
                    <p class=""
                        style="color:beige !important; line-heigt:1.2;font-family: Georgia, Cambria, Times New Roman, Times, serif; font-size:20px ">
                        {!! $gadget->short_description !!}
                    </p>
                </section>


                <section class="mb-1">
                    <h4 style="color:azure" class="mb-3">Product Highlight</h4>
                    <p class=""
                        style="color:beige;line-height:1.2;font-family: Georgia, Cambria, Times New Roman, Times, serif; font-size:20px">
                        {!! $gadget->full_description !!}
                    </p>
                    @if ($gadget->africa_description)
                        <div class="mt-5 p-4 rounded" style="background: #0f172a; border-left: 4px solid #22c55e;">

                            <h5 style="color:#22c55e;">🌍 Why It Matters for Africa</h5>

                            <div style="color:#cbd5f5; line-height:1.7;">
                                {!! $gadget->africa_description !!}
                            </div>

                        </div>
                    @endif
                </section>

                <section class="mb-5 mt-5">
                    <h4 style="color:azure">Pros & Cons</h4>

                    <div class="row">

                        <div class="col-md-6">
                            <div class="card p-3 border-succes" style="background-color:rgb(46, 45, 45) !important ">
                                <h6 class="text-success">GOOD</h6>

                                <ul>
                                    @php
                                        $pros = is_array($gadget->pros)
                                            ? $gadget->pros
                                            : json_decode($gadget->pros, true);
                                    @endphp

                                    @foreach ($pros ?? [] as $pro)
                                        <li style="color: whitesmoke">{{ $pro }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card p-3 border-dange" style="background-color:rgb(41, 39, 39) !important ">
                                <h6 class="text-danger">BAD</h6>

                                <ul>
                                    @php
                                        $cons = is_array($gadget->cons)
                                            ? $gadget->cons
                                            : json_decode($gadget->cons, true);
                                    @endphp

                                    @foreach ($cons ?? [] as $con)
                                        <li style="color: whitesmoke">{{ $con }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>

                    </div>
                </section>




            </div>
            <div class="col-md-4 ">
                <div class="card p-4 shadow-sm sticky-to"
                    style="top:2px; background:#383737;border-right: 12px solid rgb(128, 231, 128); border-radius:0px;">
                    @if ($gadget->specs)
                        <div class="car shadow-sm mt-1">
                            <div class="card-body">
                                <h5 style="color: beige; text-transform:uppercase; font-weight:100">Specifications</h5>
                                @php
                                    $specs = is_array($gadget->specs)
                                        ? $gadget->specs
                                        : json_decode($gadget->specs, true);
                                @endphp

                                @if ($specs)
                                    @foreach ($specs as $key => $value)
                                        <div class="d-flex justify-content-between border-bottom py-2">
                                            <span class="text-warning small">{{ $key }}</span>
                                            <span class="text-info small p-1">{{ $value }}</span>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    @endif
                </div>


                <div class="sticky-to mt-3">
                    @if ($gadget->youtube_embed)
                        <div class="mb-3">


                            <div class="ratio ratio-16x9" style="border-right: 12px solid rgb(128, 231, 128);">
                                <iframe src="{{ $gadget->youtube_embed }}" frameborder="0" allowfullscreen>
                                </iframe>
                            </div>
                        </div>
                    @endif
                </div>
                <div class="card shadow-sm mt-1 sticky-to"
                    style="border-radius:0px; background: #3f3f41;border-right: 12px solid rgb(128, 231, 128); ">
                    <div class="card-header">
                        <span style="color: #F7F6E5;text-transform:uppercase "> Gadget Maker Profile</span>
                    </div>
                    <div class="card-body">
                        <p style="color: #F7F6E5 ">
                            {{ $gadget->maker_bio ?? '' }}
                        </p>

                        <p class="mt-3">

                            @if (!empty($gadget->maker_website))
                                @php
                                    $host = parse_url($gadget->maker_website, PHP_URL_HOST);
                                    $host = preg_replace('/^www\./', '', $host);
                                @endphp

                                <a href="{{ $gadget->maker_website }}" target="_blank"
                                    style="text-decoration: none; font-size:20px">
                                    <i class="fa fa-globe text-success"></i> {{ $host }}
                                </a>
                            @else
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        </div>
        @if (isset($related) && $related->count())
            <div class="mt-5">
                <h4 style="color: #ece8e8">Related Gadgets</h4>
                <div class="row mt-3">
                    @foreach ($related as $item)
                        <div class="col-md-3 mb-3">
                            <div class="card h-100 shadow-sm ">
                                <img src="{{ asset($item->image) }}" class="card-img-top p-2"
                                    style="height:160px;object-fit:cover;">
                                <div class="card-body" style="background: rgb(223, 222, 222)">
                                    <h6 style="color: #1a1919">{{ $item->title }}</h6>

                                    <p> {{ \Illuminate\Support\Str::limit($item->short_description, 240) }}</p>
                                    <a href="{{ route('gadgets.show', $item->slug) }}" class="btn  "
                                        style="color: brown">GADGET DETAILS →</a>

                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
    <br>
    <br>
    <style>
        body {
            background: black;
        }

        .tag-wrapper {
            display: flex;
            flex-wrap: wrap;
            /* ✅ allows wrapping */
            gap: 8px;
            /* ✅ spacing between tags */
        }

        /* TAG STYLE */
        .tag-item {
            background: #e6e3e3;
            color: #373535;
            padding: 6px 12px;
            border-radius: 0px;
            font-size: 13px;
            white-space: nowrap;
            text-transform: uppercase;
            /* keeps tag text clean */
        }

        /* MOBILE OPTIMIZATION */
        @media (max-width: 576px) {
            .tag-item {
                font-size: 12px;
                padding: 5px 10px;
            }
        }

        .sect {
            background-color: #0a0a0a;
            color: #e5e5e5;
        }


        .sect::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 20%, rgba(0, 255, 150, 0.08), transparent 40%),
                radial-gradient(circle at 80% 30%, rgba(0, 120, 255, 0.08), transparent 40%),
                radial-gradient(circle at 50% 80%, rgba(255, 0, 150, 0.06), transparent 50%);
            pointer-events: none;
            z-index: -1;
        }
    </style>
@endsection