{% extends 'base.html.twig' %}

{% block title %}Tienda{% endblock %}

{% block body %}

<div id="cart-float" onclick="toggleCart()">

    <div style="font-size:22px;">
        🛒 <span id="cart-count">0</span>
    </div>

    <div id="cart-money"
         style="font-size:13px;font-weight:bold;margin-top:4px;">
        $0.00
    </div>

</div>


<style>
    
#cart-float{
    position:fixed;
    top:80px;
    right:15px;
    background:#28a745;
    color:white;
    padding:12px 15px;
    border-radius:50px;
    cursor:pointer;
    z-index:9999;
    font-size:18px;
    box-shadow:0 3px 10px rgba(0,0,0,0.3);
}

#cart-modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    z-index:9998;
}

#cart-box{
    background:white;
    width:90%;
    max-width:500px;
    margin:80px auto;
    padding:15px;
    border-radius:10px;
}

.product-card{
    border:1px solid #dcdcdc;
    border-radius:12px;
    background:#fff;
    overflow:hidden;
    transition:.25s;
    height:100%;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.product-card:hover{
    border-color:#28a745;
    transform:translateY(-4px);
    box-shadow:0 8px 18px rgba(0,0,0,.15);
}

.product-card .card-body{
    padding:12px;
}

</style>
<div class="container mt-4">

    <h2 class="mb-4">🛒 Tienda de Productos</h2>

    {# =========================
       PRODUCTOS
    ========================== #}
   <div class="row">

    <div class="col-12 mb-3">
        <h4>Productos</h4>
    </div>

    {% for p in productos %}
        <div class="col-md-3 col-sm-6 mb-3">

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

    <img src="{{ asset(p.foto) }}"
     class="card-img-top"
     style="
        width:100%;
        height:100px;
        object-fit:contain;
        background:#fff;
        padding:10px;
     ">

    <div class="card-body p-2">

        <h6 class="mb-1">{{ p.texto }}</h6>

        <div style="font-size:16px;font-weight:bold;color:#28a745;">
    Precio: ${{ p.precio }}
</div>

        <button class="btn btn-sm btn-primary w-100 mt-2"
                onclick="addToCart('product','{{ p.codigo }}','{{ p.texto }}','{{ p.precio }}')">
            ➕ Añadir al carrito
        </button>

    </div>

</div>

        </div>
    {% endfor %}

</div>

    <hr>

    {# =========================
       FIRMAS / PLANES
    ========================== #}
    <div class="row mt-4">

        <div class="col-12">
            <h4>Planes / Firmas</h4>
        </div>

        {% for f in firmas %}
            <div class="col-md-4">
               <div class="product-card text-center">

<div style="position:relative; overflow:hidden;">

    <img src="{{ asset('images/productos/firma.png') }}"
         class="card-img-top"
         style="
            width:100%;
            height:100px;
            object-fit:cover;
            opacity:.45;
         ">

    <!-- Franja negra -->
    <div style="
        position:absolute;
        top:15px;
        left:0;
        width:100%;
        background:rgba(0,0,0,.70);
        padding:12px 0;
        text-align:center;
    ">

        <div style="
            color:#ffffff;
            font-size:18px;
            font-weight:bold;
            margin-bottom:4px;
            letter-spacing:1px;
        ">
            TIEMPO
        </div>

        <div style="
            color:#FFD700;
            font-size:40px;
            font-weight:bold;
            line-height:1;
            text-shadow:2px 2px 8px rgba(0,0,0,.9);
        ">
            {{ f.nombreFirma }}
        </div>

    </div>

</div>
     
    <div class="card-body">

        <h5>{{ f.nombreFirma }}</h5>

        <div style="font-size:16px;font-weight:bold;color:#28a745;">
    Precio: ${{ f.precioFirmaPvp }}
</div>

        <small class="d-block">Tiempo: {{ f.nombreFirma }}</small>
        <br>

        <button class="btn btn-sm btn-success w-100 mt-2"
                onclick="addToCart('plan','{{ f.codigoFirma }}','{{ f.nombreFirma }}','{{ f.precioFirmaPvp }}')">
            ➕ Añadir al carrito
        </button>

    </div>

</div>
            </div>
        {% else %}
            <p>No hay planes disponibles.</p>
        {% endfor %}

    </div>

</div>


<hr>

<div id="cart-modal" onclick="toggleCart()">
    <div id="cart-box" onclick="event.stopPropagation()">

        <h4>🛒 Tu Carrito</h4>

        <ul id="cart-list" class="list-group mb-3"></ul>

        <h5>Total: $<span id="cart-total">0</span></h5>

<div class="d-grid gap-2">

    <button class="btn btn-danger" onclick="clearCart()">
        🗑 Vaciar carrito
    </button>

    <button class="btn btn-success" onclick="checkoutWhatsApp()">
        Finalizar compra por WhatsApp
    </button>

</div>

    </div>
</div>




<script>

let cart = [];

function addToCart(type,id,name,price){

    let key = type + '-' + id;

    let found = cart.find(i => i.key === key);

    if(found){
        found.qty++;
    }else{
        cart.push({
            key:key,
            type:type,
            id:id,
            name:name,
            price:parseFloat(price),
            qty:1
        });
    }

    updateCart();
}

function updateCart(){

    let list = document.getElementById("cart-list");
    list.innerHTML = "";

    let total = 0;
    let count = 0;

    cart.forEach(i=>{
        total += i.price * i.qty;
        count += i.qty;

        list.innerHTML += `
            <li class="list-group-item d-flex justify-content-between">
                <span>${i.name} x${i.qty}</span>
                <b>$${(i.price*i.qty).toFixed(2)}</b>
            </li>
        `;
    });

    document.getElementById("cart-total").innerText = total.toFixed(2);
document.getElementById("cart-count").innerText = count;
document.getElementById("cart-money").innerText = "$" + total.toFixed(2);
}

function toggleCart(){
    let modal = document.getElementById("cart-modal");
    modal.style.display = (modal.style.display === "block") ? "none" : "block";
}

function checkoutWhatsApp(){

    if(cart.length === 0){
        alert("Carrito vacío");
        return;
    }

    let user = "{{ app.user.username }}";

    let msg = "NUEVO PEDIDO%0A%0A";
    msg += "Cliente: " + user + "%0A%0A";

    let total = 0;

    cart.forEach(i=>{
        msg += "• " + i.name + " x" + i.qty + " = $" + (i.price*i.qty).toFixed(2) + "%0A";
        total += i.price*i.qty;
    });

    msg += "%0ATOTAL: $" + total.toFixed(2);

    window.open("https://wa.me/593987635146?text="+msg,"_blank");
}



function clearCart(){

    if(!confirm("¿Deseas vaciar el carrito?")){
        return;
    }

    cart = [];

    updateCart();
}

</script>


{% endblock %}