@extends('layouts.cliente.app')

@section('title', 'Meu Carrinho')

@section('content')

@php
    $discountRate = 0.05;
@endphp

<div class="container py-4">

{{-- HEADER --}}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h3 class="fw-bold">🛒 Meu Carrinho</h3>
</div>

@if($cart->items->count() > 0)

{{-- TABLE --}}
<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
<div class="table-responsive">

<table class="table align-middle mb-0">

<thead class="table-dark">
<tr>
    <th>Produto</th>
    <th>Preço</th>
    <th>Qtd</th>
    <th>Subtotal</th>
    <th></th>
</tr>
</thead>

<tbody id="cart-body">

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

@php
    $product = $item->product;

    $basePrice = $product->price;
    $price = $basePrice * (1 - $discountRate);
    $stock = $product->quantity;
@endphp

<tr data-id="{{ $item->id }}"
    data-stock="{{ $stock }}"
    data-price="{{ $price }}">

    {{-- PRODUTO --}}
    <td>
        <div class="d-flex align-items-center gap-3">
            <img src="{{ asset('storage/'.optional($product->primaryImage)->image ?? $product->images->first()->image ?? 'images/no-image.png') }}"
                 width="55" height="55"
                 class="rounded border"
                 style="object-fit:cover">

            <div>
                <div class="fw-semibold">{{ $product->name }}</div>
                <small class="text-muted">Stock: {{ $stock }}</small>
            </div>
        </div>
    </td>

    {{-- PREÇO --}}
    <td class="fw-semibold text-info price">
        {{ number_format($price,2,',','.') }} Kz
    </td>

    {{-- QTD --}}
    <td>
        <div class="input-group input-group-sm quantity-box" style="max-width:140px">

            <button class="btn btn-outline-secondary btn-minus">−</button>

            <input type="number"
                   class="form-control text-center quantity-input"
                   value="{{ $item->quantity }}"
                   min="1"
                   max="{{ $stock }}">

            <button class="btn btn-outline-secondary btn-plus">+</button>

        </div>
    </td>

    {{-- SUBTOTAL --}}
    <td class="fw-bold text-success subtotal">
        {{ number_format($item->quantity * $price,2,',','.') }} Kz
    </td>

    {{-- DELETE --}}
    <td>
        <form method="POST"
              action="{{ route('dashboard.cliente.carrinho.destroy',$item->id) }}">
            @csrf
            @method('DELETE')
            <button class="btn btn-sm btn-outline-danger">✕</button>
        </form>
    </td>

</tr>

@endforeach

</tbody>

</table>

</div>
</div>

{{-- TOTAL --}}
<div class="card mt-4 border-0 shadow-sm rounded-4">
<div class="card-body">

<h4 class="fw-bold">
    Total:
    <span id="cart-total" class="text-success">
        {{ number_format($total,2,',','.') }} Kz
    </span>
</h4>

<button class="btn btn-success btn-lg w-100 mt-3"
        data-bs-toggle="modal"
        data-bs-target="#checkoutModal">
    Finalizar Compra
</button>

<small class="text-muted d-block mt-2">
    Desconto de 5% aplicado automaticamente
</small>

</div>
</div>

@else

<div class="text-center py-5">
    <h5 class="text">Carrinho vazio</h5>
</div>

@endif

</div>

{{-- ================= CHECKOUT MODAL ================= --}}
<div class="modal fade" id="checkoutModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content rounded-4">

<div class="modal-header">
    <h5 class="text-dark modal-title fw-bold">Finalizar Compra</h5>
    <button class="btn-close" data-bs-dismiss="modal"></button>
</div>

<form method="POST"
      action="{{ route('dashboard.cliente.orders.store') }}"
      enctype="multipart/form-data">
@csrf

<div class="text-dark modal-body">

    {{-- DADOS CLIENTE --}}
    <input class="form-control mb-2" name="cliente_nome" placeholder="Nome" required>
    <input class="form-control mb-2" name="cliente_telefone" placeholder="Telefone">
    <textarea class="form-control mb-3" name="cliente_endereco" placeholder="Endereço"></textarea>

    {{-- PAGAMENTO --}}
    <label class="form-label fw-semibold">Método de Pagamento</label>
    <select name="payment_method"
            id="paymentMethod"
            class="form-select mb-3"
            required>
        <option value="">Selecionar método</option>
        <option value="transferencia_bfa">Transferência Bancária</option>
        <option value="express">Transferência Express</option>
    </select>

    {{-- INFO BANCO --}}
    <div id="bankInfo"
         class="alert alert-info d-none">
        <strong>Banco de Fomento Angola:</strong><br>
        0005.0000.1234.5678.1234.1
    </div>

    {{-- INFO EXPRESS --}}
    <div id="expressInfo"
         class="alert alert-success d-none">
        <strong>Transferência Express:</strong><br>
        948 159 330
    </div>

    {{-- COMPROVATIVO --}}
    <div id="proofBox" class="d-none mt-3">

        <label class="form-label fw-semibold">
            Comprovativo de Pagamento
        </label>

        <input type="file"
               name="proof_path"
               class="form-control"
               accept="image/*,application/pdf"
               required>

        <small class="text-muted">
            Envie o comprovativo para validação do pagamento.
        </small>

    </div>

</div>

<div class="modal-footer">
    <button class="btn btn-success w-100 fw-bold">
        Confirmar Compra
    </button>
</div>

</form>

</div>
</div>
</div>

{{-- ================= JS FUNCIONAL ================= --}}
<script>

const discountRate = 0.05;

// ================= FORMATADOR =================
function formatMoney(value) {
    return (value || 0).toLocaleString('pt-PT', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    }) + ' Kz';
}

function togglePaymentUI(value)
{
    const bankInfo = document.getElementById('bankInfo');
    const expressInfo = document.getElementById('expressInfo');
    const proofBox = document.getElementById('proofBox');
    const proofInput = document.querySelector('input[name="proof_path"]');

    // reset
    bankInfo.classList.add('d-none');
    expressInfo.classList.add('d-none');
    proofBox.classList.add('d-none');
    proofInput.required = false;

    if (value === 'transferencia_bfa') {
        bankInfo.classList.remove('d-none');
        proofBox.classList.remove('d-none');
        proofInput.required = true;
    }

    if (value === 'express') {
        expressInfo.classList.remove('d-none');
        proofBox.classList.remove('d-none');
        proofInput.required = true;
    }
}

document.addEventListener('DOMContentLoaded', function () {
    const select = document.getElementById('paymentMethod');

    if (select) {
        select.addEventListener('change', function () {
            togglePaymentUI(this.value);
        });
    }
});
// ================= CALCULAR TOTAL (CORRIGIDO) =================
function updateTotal() {
    let total = 0;

    document.querySelectorAll('#cart-body tr').forEach(row => {
        const price = parseFloat(row.dataset.price || 0);
        const qty = parseInt(row.querySelector('.quantity-input')?.value || 0);

        total += price * qty;
    });

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

// ================= SINCRONIZAR COM BACKEND =================
async function sync(row, id, qty) {

    try {
        const res = await fetch(`/dashboard/cliente/carrinho/atualizar/${id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ quantity: qty })
        });

        const data = await res.json();

        // se removido
        if (data.removed) {
            row.remove();
            updateTotal();
            return;
        }

        // atualizar quantidade
        const input = row.querySelector('.quantity-input');
        input.value = data.quantity;

        // recalcular subtotal corretamente
        const price = parseFloat(row.dataset.price);
        const subtotal = price * data.quantity;

        row.querySelector('.subtotal').innerText = formatMoney(subtotal);

        updateTotal();

    } catch (error) {
        console.error('Erro ao atualizar carrinho:', error);
    }
}

// ================= CONTROLO DE QTD =================
function bindEvents() {

    document.querySelectorAll('#cart-body tr').forEach(row => {

        const input = row.querySelector('.quantity-input');
        const minus = row.querySelector('.btn-minus');
        const plus = row.querySelector('.btn-plus');
        const id = row.dataset.id;

        const stock = parseInt(row.dataset.stock || 0);

        function setQty(qty) {

            qty = parseInt(qty || 1);

            if (qty < 1) qty = 1;
            if (qty > stock) qty = stock;

            input.value = qty;

            sync(row, id, qty);
        }

        minus?.addEventListener('click', () => {
            setQty(parseInt(input.value) - 1);
        });

        plus?.addEventListener('click', () => {
            setQty(parseInt(input.value) + 1);
        });

        input?.addEventListener('change', () => {
            setQty(input.value);
        });
    });
}

// ================= INIT =================
document.addEventListener('DOMContentLoaded', () => {
    bindEvents();
    updateTotal();
});

</script>
{{-- ================= STYLE ================= --}}
<style>

.quantity-box input{
    max-width:60px;
}

.table td{
    vertical-align:middle;
}

.card{
    border-radius:16px;
}

</style>

@endsection