@extends('layouts.app')

@section('content')

<section class="checkout-section py-5">

<div class="container">

<div class="row g-4">

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

    <div class="checkout-box">

        <h4 class="text-white mb-4">🛒 Resumo do Pedido</h4>

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

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

            <div class="checkout-item">

                <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 fw-semibold">
                        {{ $item->product->name }}
                    </div>

                    <div class="text-light small">
                        Qtd: {{ $item->quantity }} × {{ number_format($item->price,0,',','.') }} Kz
                    </div>

                </div>

                <div class="text-success fw-bold">
                    {{ number_format($subtotal,0,',','.') }} Kz
                </div>

            </div>

        @endforeach

        <hr>

        <h5 class="text-center text-success fw-bold">
            Total: {{ number_format($total,0,',','.') }} Kz
        </h5>

    </div>

</div>

{{-- ================= FORM ================= --}}
<div class="col-lg-5">

<div class="checkout-box">

<h4 class="text-white mb-4">💳 Finalizar Compra</h4>

<form method="POST"
      action="{{ route('public.checkout.process') }}"
      enctype="multipart/form-data">

@csrf

<input class="form-control mb-2" name="name" placeholder="Nome completo" required>
<input class="form-control mb-2" name="nif" placeholder="NIF" required>
<input class="form-control mb-2" name="phone" placeholder="WhatsApp" required>
<textarea class="form-control mb-3" name="address" placeholder="Localização" required></textarea>

<select name="payment_method"
        class="form-select mb-3"
        onchange="togglePayment(this.value)"
        required>

    <option value="">Forma de pagamento</option>
    <option value="bank">Transferência Bancária</option>
    <option value="express">Transferência Express</option>

</select>

{{-- BANK INFO --}}
<div id="bankInfo" class="text-center alert alert-info" style="display:none;">
    <b>Banco de Fomento Angola</b><br>
    IBAN: 0006.0000.1234.5678.1234.1
</div>

{{-- EXPRESS --}}
<div id="expressInfo" class="text-center alert alert-success" style="display:none;">
    <b>Transferência Express:</b><br>
    948 159 330
</div>

<input type="file"
       name="proof"
       class="form-control mb-3"
       required>

<button class="btn btn-success w-100 fw-bold py-2">
    Confirmar Pagamento
</button>

</form>

</div>

</div>

</div>

</div>

</section>

@endsection
<style>
    .checkout-section{
    background:#020617;
    min-height:80vh;
}

.checkout-box{
    background:#0f172a;
    padding:20px;
    border-radius:16px;
    color:#fff;
}

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

.checkout-item img{
    width:55px;
    height:55px;
    object-fit:contain;
    background:#fff;
    border-radius:8px;
    padding:4px;
}
</style>
<script>
function togglePayment(value)
{
    const bank = document.getElementById('bankInfo');
    const express = document.getElementById('expressInfo');

    // esconde tudo primeiro
    bank.style.display = 'none';
    express.style.display = 'none';

    if (value === 'bank') {
        bank.style.display = 'block';
    }

    if (value === 'express') {
        express.style.display = 'block';
    }
}
</script>