@extends('layouts.app')

@section('content')

<div style="padding: 20px; max-width: 1400px; margin: 0 auto;">
  <div style="margin-bottom: 30px;">
    <h2 style="color: white; font-size: 2rem; font-weight: bold; margin-bottom: 10px;">🛒 Carrinho</h2>
    <p style="color: rgba(255,255,255,0.7);">Confere os itens e segue para o pagamento.</p>
    <a href="{{ route('products.index') }}" style="display: inline-block; margin-top: 15px; padding: 10px 20px; background: #1aa860; color: white; text-decoration: none; border-radius: 8px; font-weight: bold;">← Continuar a comprar</a>
  </div>

  @if(empty($cart))
    <div style="text-align: center; padding: 60px 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;">
      <div style="font-size: 3rem; margin-bottom: 20px;">🛍️</div>
      <h3 style="color: white; margin: 0 0 10px 0;">O teu carrinho está vazio</h3>
      <p style="color: rgba(255,255,255,0.7); margin: 0 0 20px 0;">Escolhe um produto e adiciona ao carrinho.</p>
      <a href="{{ route('products.index') }}" style="display: inline-block; padding: 12px 30px; background: #1aa860; color: white; text-decoration: none; border-radius: 8px; font-weight: bold;">Ver produtos</a>
    </div>
  @else
    <div style="display: grid; grid-template-columns: 1fr 380px; gap: 30px;">
      
      {{-- TABELA DE ITENS --}}
      <div>
        <div style="background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 20px; overflow-x: auto;">
          <h5 style="color: white; margin: 0 0 20px 0; font-weight: bold;">Itens ({{ count($cart) }})</h5>

          <div style="overflow-x: auto;">
            <table style="width: 100%; color: white; border-collapse: collapse;">
              <thead>
                <tr style="border-bottom: 1px solid rgba(255,255,255,0.1);">
                  <th style="text-align: left; padding: 12px; color: rgba(255,255,255,0.7); font-weight: 600;">Produto</th>
                  <th style="text-align: center; padding: 12px; color: rgba(255,255,255,0.7); font-weight: 600; width: 120px;">Qtd</th>
                  <th style="text-align: right; padding: 12px; color: rgba(255,255,255,0.7); font-weight: 600; width: 140px;">Preço</th>
                  <th style="text-align: right; padding: 12px; color: rgba(255,255,255,0.7); font-weight: 600; width: 140px;">Subtotal</th>
                  <th style="text-align: center; padding: 12px; width: 80px;"></th>
                </tr>
              </thead>
              <tbody>
                @php $total = 0; @endphp
                @foreach($cart as $productId => $item)
                  @php
                    $id = (int)$productId;
                    $subtotal = ($item['price'] ?? 0) * ($item['quantity'] ?? 1);
                    $total += $subtotal;
                    $img = $item['image'] ?? null;
                    $imgUrl = $img ? (str_starts_with($img,'http') ? $img : asset($img)) : asset('images/default.png');
                  @endphp
                  <tr style="border-bottom: 1px solid rgba(255,255,255,0.06);">
                    <td style="padding: 15px 12px;">
                      <div style="display: flex; gap: 12px; align-items: center;">
                        <img src="{{ $imgUrl }}" alt="{{ $item['name'] ?? 'Produto' }}" style="width: 50px; height: 50px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);">
                        <div>
                          <div style="font-weight: 800; margin-bottom: 4px;">{{ $item['name'] ?? 'Produto' }}</div>
                          <div style="color: rgba(255,255,255,0.6); font-size: 0.875rem;">SKU #{{ $id }}</div>
                        </div>
                      </div>
                    </td>
                    <td style="padding: 15px 12px; text-align: center;">
                      <form action="{{ route('cart.update', ['product' => $id]) }}" method="POST" style="display: flex; gap: 8px; justify-content: center; align-items: center;">
                        @csrf
                        @method('PATCH')
                        <input type="number" name="quantity" value="{{ $item['quantity'] ?? 1 }}" min="1" style="width: 60px; padding: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: white; border-radius: 6px; text-align: center;">
                        <button style="padding: 8px 14px; background: #1aa860; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.875rem;">OK</button>
                      </form>
                    </td>
                    <td style="padding: 15px 12px; text-align: right; color: #F5B800; font-weight: 800;">Kz {{ number_format(($item['price'] ?? 0), 2, ',', '.') }}</td>
                    <td style="padding: 15px 12px; text-align: right; color: #F5B800; font-weight: 800;">Kz {{ number_format($subtotal, 2, ',', '.') }}</td>
                    <td style="padding: 15px 12px; text-align: center;">
                      <form action="{{ route('cart.remove', ['product' => $id]) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <button style="background: rgba(255,0,0,0.15); color: #ff6b6b; border: none; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-weight: 600; font-size: 0.75rem;">🗑️ Remover</button>
                      </form>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {{-- RESUMO DE PAGAMENTO --}}
      <div>
        <div style="background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 20px; position: sticky; top: 20px;">
          <h5 style="color: white; margin: 0 0 20px 0; font-weight: bold;">Resumo</h5>
          
          <div style="margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;">
            <span style="color: rgba(255,255,255,0.7);">Subtotal</span>
            <strong style="color: white;">Kz {{ number_format($total, 2, ',', '.') }}</strong>
          </div>

          <div style="margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center;">
            <span style="color: rgba(255,255,255,0.7);">Entrega</span>
            <strong style="color: #1aa860; font-size: 0.95rem;">Grátis</strong>
          </div>

          <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
            <span style="color: white; font-weight: bold; font-size: 1.1rem;">Total</span>
            <span style="color: #F5B800; font-weight: 900; font-size: 1.2rem;">Kz {{ number_format($total, 2, ',', '.') }}</span>
          </div>

          @auth
          <form action="{{ route('order.store') }}" method="POST" style="margin-bottom: 15px;">
            @csrf
            <button style="width: 100%; padding: 14px; background: linear-gradient(135deg, #1aa860, #16d97a); color: white; border: none; border-radius: 8px; font-weight: bold; font-size: 1rem; cursor: pointer;">💳 Finalizar Pagamento</button>
          </form>
          @else
          <a href="{{ route('login') }}" style="display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; background: linear-gradient(135deg, #1aa860, #16d97a); color: white; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 1rem;">🔐 Entrar para Pagar</a>
          @endauth

          <div style="margin-top: 20px; padding: 12px; background: rgba(26,168,96,0.1); border: 1px solid rgba(26,168,96,0.3); border-radius: 8px;">
            <div style="display: flex; gap: 8px; align-items: center; color: #1aa860; font-size: 0.875rem; margin-bottom: 10px;">
              <span>✓</span>
              <span>Pagamento 100% seguro</span>
            </div>
            <div style="display: flex; gap: 8px; margin-top: 8px;">
              <img src="{{ asset('images/multicaixa.png') }}" alt="Multicaixa" style="height: 20px; width: auto;">
              <img src="{{ asset('images/multicaixa-express.png') }}" alt="Multicaixa Express" style="height: 20px; width: auto;">
            </div>
          </div>
        </div>
      </div>

    </div>
  @endif
</div>

@endsection