@extends('layouts.app')

@section('content')

@php
    $now = now();

    $onPromo = $product->promo_price
        && $product->promo_start
        && $product->promo_end
        && $now->between($product->promo_start, $product->promo_end);

    $price = $onPromo ? $product->promo_price : $product->price;
@endphp


{{-- ================= BACKGROUND ================= --}}
<section class="lux-product-section py-5">

<div class="container">

    {{-- BREADCRUMB --}}
    <nav class="lux-breadcrumb mb-4">
        <a href="{{ url('/') }}">Início</a>
        <span>/</span>
        <a href="{{ route('categories.show', $product->category->slug) }}">
            {{ $product->category->name }}
        </a>
        <span>/</span>
        <span>{{ $product->name }}</span>
    </nav>

    <div class="row g-5">

        {{-- IMAGENS --}}
        <div class="col-lg-6">

            <div class="lux-main-image">

                <img id="mainProductImage"
                     src="{{ $product->images->first()
                        ? asset('storage/'.$product->images->first()->image)
                        : asset('images/no-image.png') }}">

                @if($onPromo)
                    <span class="badge-promo">Promo</span>
                @endif

            </div>

            <div class="lux-thumbs mt-3">
                @foreach($product->images as $image)
                    <img src="{{ asset('storage/'.$image->image) }}"
                         onclick="showImage(this.src)">
                @endforeach
            </div>

        </div>

        {{-- INFO --}}
        <div class="col-lg-6">

            <h2 class="lux-title">{{ $product->name }}</h2>

            <p class="lux-meta">{{ $product->brand }} • {{ $product->model }}</p>

            {{-- PRICE --}}
            <div class="lux-price">
                @if($onPromo)
                    <span class="old">
                        {{ number_format($product->price,2,',','.') }} Kz
                    </span>
                @endif

                <span class="new">
                    {{ number_format($price,2,',','.') }} Kz
                </span>
            </div>

            {{-- STOCK --}}
            <div class="lux-stock">
                Stock: {{ $product->quantity }}
            </div>

            {{-- QTY --}}
            <div class="lux-qty mt-4">
                <button onclick="changeQty(-1)">−</button>
                <input type="number" id="qty" value="1" min="1" max="{{ $product->quantity }}">
                <button onclick="changeQty(1)">+</button>
            </div>

            {{-- TOTAL --}}
            <div class="lux-total mt-3">
                Total:
                <span id="totalPrice">
                    {{ number_format($price,2,',','.') }} Kz
                </span>
            </div>

            {{-- ACTIONS --}}
            <div class="lux-actions mt-4">

<button onclick="addToCart({{ $product->id }})"
        class="btn-cart-pro"
        id="btnAddCart">

    <span class="btn-text">
        🛒 Adicionar ao Carrinho
    </span>

    <span class="loader d-none" id="cartLoader"></span>
</button>
            </div>
{{-- TOASTS --}}
<div id="cartToast" class="cart-toast success"></div>
<div id="cartError" class="cart-toast error"></div>

            {{-- DETAILS --}}
            <div class="lux-details mt-4">
                <p><b>Categoria:</b> {{ $product->category->name }}</p>
                <p><b>Capacidade:</b> {{ $product->capacity }}</p>
                <p>
                    <b>Status:</b>
                    @if($product->is_available)
                        <span class="ok">Disponível</span>
                    @else
                        <span class="off">Indisponível</span>
                    @endif
                </p>
            </div>

            <div class="lux-desc mt-4">
                <h6>Descrição</h6>
                <p>{{ $product->specifications }}</p>
            </div>

        </div>

    </div>

</div>

</section>

{{-- ================= STYLE ================= --}}
<style>
.lux-product-section{
    background: radial-gradient(circle at top,#0b0f1a,#111827,#020617);
    color:#fff;
}

.lux-breadcrumb{font-size:13px;color:#9ca3af;}
.lux-breadcrumb a{color:#fb923c;text-decoration:none;}

.lux-main-image{
    background:#fff;
    border-radius:18px;
    padding:20px;
    text-align:center;
    position:relative;
}

.lux-main-image img{
    max-height:420px;
    max-width:100%;
    object-fit:contain;
}

.badge-promo{
    position:absolute;
    top:12px;
    left:12px;
    background:#ef4444;
    color:#fff;
    padding:4px 10px;
    border-radius:20px;
    font-size:11px;
}

.lux-thumbs{display:flex;gap:10px;}
.lux-thumbs img{
    width:60px;height:60px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    border:2px solid transparent;
}
.lux-thumbs img:hover{border-color:#fb923c;}

.lux-title{font-size:28px;font-weight:700;}
.lux-meta{color:#9ca3af;}

.lux-price{margin-top:10px;}
.lux-price .old{
    color:#ef4444;
    text-decoration:line-through;
    margin-right:10px;
}
.lux-price .new{
    font-size:22px;
    font-weight:700;
    color:#fb923c;
}

.lux-stock{margin-top:8px;color:#9ca3af;}

.lux-qty{display:flex;gap:10px;align-items:center;}
.lux-qty button{
    background:#1f2937;border:none;color:#fff;
    width:36px;height:36px;border-radius:8px;
}
.lux-qty input{
    width:60px;text-align:center;
    background:#111827;border:1px solid #1f2937;
    color:#fff;border-radius:8px;
}

.lux-actions{display:flex;gap:10px;}

.btn-cart-pro{
    background: linear-gradient(135deg,#fb923c,#f97316);
    border:none;
    color:#fff;
    padding:12px 20px;
    border-radius:12px;
    font-weight:600;
    display:flex;
    gap:8px;
    align-items:center;
}

.loader{
    width:18px;height:18px;
    border:2px solid #fff;
    border-top:2px solid transparent;
    border-radius:50%;
    animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.cart-toast{
    position:fixed;
    bottom:30px;
    right:30px;
    padding:14px 22px;
    border-radius:12px;
    font-weight:600;
    opacity:0;
    transform:translateY(20px);
    transition:.3s;
    z-index:9999;
}
.cart-toast.show{opacity:1;transform:translateY(0);}

.cart-toast.success{background:#16a34a;}
.cart-toast.error{background:#ef4444;}
</style>

{{-- ================= SCRIPT ================= --}}
<script>

function showImage(src){
    document.getElementById('mainProductImage').src = src;
}

function changeQty(v){
    let i = document.getElementById('qty');
    let val = parseInt(i.value) + v;

    if(val < 1) val = 1;
    if(val > {{ $product->quantity }}) val = {{ $product->quantity }};

    i.value = val;
    updateTotal();
}

function updateTotal(){
    let qty = document.getElementById('qty').value;
    let price = {{ $price }};
    document.getElementById('totalPrice').innerText =
        (qty * price).toLocaleString('pt-PT') + ' Kz';
}

function addToCart(productId)
{
    let qty = document.getElementById('qty').value;
    let btn = document.getElementById('btnAddCart');
    let loader = document.getElementById('cartLoader');

    btn.disabled = true;
    loader.classList.remove('d-none');

    fetch("{{ route('public.carrinho.add') }}", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": "{{ csrf_token() }}"
        },
        body: JSON.stringify({
            product_id: productId,
            quantity: qty
        })
    })
    .then(async (res) => {
        const data = await res.json();

        btn.disabled = false;
        loader.classList.add('d-none');

        if (!res.ok) {
            throw new Error(data.error || data.message || 'Erro ao adicionar ao carrinho');
        }

        // 🔥 TOAST
        showToast(data.message || 'Produto adicionado com sucesso');

        // 🔥 REDIRECIONA PARA CARRINHO (PEDIDO TEU)
        setTimeout(() => {
            window.location.href = "{{ route('public.carrinho.index') }}";
        }, 800);
    })
    .catch(err => {
        btn.disabled = false;
        loader.classList.add('d-none');

        showError(err.message);
    });
}
function showToast(msg){
    let t = document.getElementById('cartToast');
    t.innerText = msg;
    t.classList.add('show');
    setTimeout(()=>t.classList.remove('show'),2500);
}

function showError(msg){
    let t = document.getElementById('cartError');
    t.innerText = msg;
    t.classList.add('show');
    setTimeout(()=>t.classList.remove('show'),3000);
}

</script>

@endsection