@extends('layouts.app')

@section('content')

<section class="cart-page py-4">

<div class="container-fluid">

@if(session('success_order'))
<div class="alert alert-success text-center mb-4">
    <h5>Compra realizada com sucesso!</h5>
    <p>Pedido: <strong>{{ session('success_order.numero') }}</strong></p>
</div>
@endif

<div class="row g-4">

{{-- ================= PRODUTOS ================= --}}
<div class="col-lg-8">

    <div class="d-flex justify-content-between mb-3">
        <h4 class="text-white">Continue comprando</h4>
        <span class="badge bg-info text-dark">{{ $products->count() }}</span>
    </div>

    <div class="row g-3">

        @foreach($products as $product)

            @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

            <div class="col-xl-3 col-md-4 col-sm-6">

                <div class="product-card">

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

                    <div class="product-body text-center">

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

                        <div class="product-price">
                            {{ number_format($price,0,',','.') }} Kz
                        </div>

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

                        <button class="btn btn-primary btn-sm w-100 mt-2"
                                onclick="addToCart({{ $product->id }}, {{ $product->quantity }})">
                            🛒 Adicionar
                        </button>

                    </div>

                </div>

            </div>

        @endforeach

    </div>

</div>

{{-- ================= CARRINHO ================= --}}
<div class="col-lg-4">

    <div class="cart-box">

        <h5 class="text-white mb-3">🛒 Carrinho</h5>

        <div id="cart-container">

            @forelse($cart->items as $item)

                @php
                    $subtotal = $item->price * $item->quantity;
                @endphp

                <div class="cart-item" id="item-{{ $item->id }}">

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

                    <div class="flex-fill">

                        <div class="text-white small">
                            {{ $item->product->name }}
                        </div>

                        <div class="cart-controls">

                            <button onclick="changeQty({{ $item->id }}, -1)">−</button>

                            <span id="qty-{{ $item->id }}">{{ $item->quantity }}</span>

                            <button onclick="changeQty({{ $item->id }}, 1)">+</button>

                            <button class="btn-remove"
                                    onclick="removeItem({{ $item->id }})">
                                remover
                            </button>

                        </div>

                    </div>

                    <div class="text-success fw-bold">
                        <span
                            id="subtotal-{{ $item->id }}"
                            data-price="{{ $item->price }}"
                            data-subtotal="{{ $subtotal }}"
                        >
                            {{ number_format($subtotal,0,',','.') }}
                        </span>
                    </div>

                </div>

            @empty
                <p class="text-muted text-center">Carrinho vazio</p>
            @endforelse

        </div>

        <hr>

        <div class="d-flex justify-content-between text-success fw-bold">
            <span>Total:</span>
            <span id="cart-total">
                {{ number_format($cart->items->sum(fn($i)=>$i->price*$i->quantity),0,',','.') }} Kz
            </span>
        </div>
        <div class="d-grid mt-3">
            <a href="{{ route('public.checkout') }}"
            class="btn btn-success fw-bold py-2">
                🛒 Comprar Agora
            </a>
        </div>

    </div>

</div>

</div>
</div>

</section>

@endsection

<style>
    .cart-page{
    background:#020617;
    min-height:80vh;
}

/* PRODUCT */
.product-card{
    background:#0f172a;
    border-radius:14px;
    overflow:hidden;
    color:#fff;
    transition:.2s;
}
.product-card:hover{
    transform:translateY(-5px);
}

.product-img{
    background:#fff;
    height:160px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.product-img img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.product-body{
    padding:12px;
}

.product-title{
    font-size:14px;
    font-weight:600;
}

.product-price{
    color:#22c55e;
    font-weight:700;
}

.product-stock{
    font-size:12px;
    color:#94a3b8;
}

/* CART */
.cart-box{
    background:#0f172a;
    padding:18px;
    border-radius:16px;
    position:sticky;
    top:20px;
    color:#fff;
}

.cart-item{
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:12px;
}

.cart-item img{
    width:50px;
    height:50px;
    object-fit:contain;
    background:#fff;
    border-radius:8px;
}

.cart-info{
    flex:1;
}

.cart-name{
    font-size:13px;
    font-weight:600;
}

.cart-qty{
    display:flex;
    gap:6px;
    align-items:center;
    font-size:12px;
}

.cart-qty button{
    width:24px;
    height:24px;
    border:none;
    background:#38bdf8;
    border-radius:6px;
}

/* REMOVE */
.btn-remove{
    background:#ef4444;
    border:none;
    color:#fff;
    font-size:11px;
    padding:2px 6px;
    border-radius:6px;
}

/* SUBTOTAL */
.cart-subtotal{
    font-weight:700;
    color:#22c55e;
}

/* TOTAL */
.cart-total{
    display:flex;
    justify-content:space-between;
    font-weight:700;
    color:#22c55e;
    font-size:16px;
}
</style>
<script>

// ================= ADD TO CART =================
function addToCart(productId, stock)
{
    if(stock < 1){
        alert("Sem stock");
        return;
    }

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

        if(data.error){
            alert(data.error);
            return;
        }

        location.reload();
    });
}


// ================= CHANGE QTY =================
function changeQty(itemId, change)
{
    const qtyEl = document.getElementById('qty-' + itemId);
    const subtotalEl = document.getElementById('subtotal-' + itemId);

    let qty = parseInt(qtyEl.innerText);
    let newQty = qty + change;

    if(newQty < 1) return;

    fetch(`/carrinho/update/${itemId}`, {
        method:"POST",
        headers:{
            "Content-Type":"application/json",
            "X-CSRF-TOKEN":"{{ csrf_token() }}"
        },
        body: JSON.stringify({ quantity: newQty })
    })
    .then(r => r.json())
    .then(data => {

        if(data.error){
            alert(data.error);
            return;
        }

        // ✔ qty
        qtyEl.innerText = newQty;

        // ✔ preço unitário correto
        let unitPrice = parseFloat(subtotalEl.dataset.price);

        // ✔ novo subtotal (NÚMERO PURO)
        let newSubtotal = unitPrice * newQty;

        // ✔ guarda valor REAL no dataset
        subtotalEl.dataset.subtotal = newSubtotal;

        // ✔ mostra formatado
        subtotalEl.innerText = formatMoney(newSubtotal);

        updateTotal();
    });
}

// ================= REMOVE =================
function removeItem(itemId)
{
    fetch(`/carrinho/remove/${itemId}`, {
        method:"DELETE",
        headers:{
            "X-CSRF-TOKEN":"{{ csrf_token() }}"
        }
    })
    .then(() => {
        document.getElementById('item-' + itemId).remove();
        updateTotal();
    });
}


// ================= TOTAL GLOBAL =================
function updateTotal()
{
    let total = 0;

    document.querySelectorAll('[id^="subtotal-"]').forEach(el => {
        total += parseFloat(el.dataset.subtotal || 0);
    });

    document.getElementById('cart-total').innerText =
        formatMoney(total);
}

// ================= FORMATADOR =================
function formatMoney(value)
{
    return new Intl.NumberFormat('pt-PT', {
        minimumFractionDigits: 0
    }).format(value) + ' Kz';
}
</script>