@extends('layouts.app')

@section('title', 'Meu Carrinho | AMD-TOPOGRAFIA, LDA.')

@section('content')
<div class="min-h-screen bg-slate-50/50 text-slate-800 pt-32 pb-24 px-6 md:px-12 relative z-10">
    <div class="max-w-[1280px] mx-auto">
        
        {{-- ▼▼▼ CABEÇALHO COM FLUXO DE COMPRA (Design Elite) ▼▼▼ --}}
        <div class="mb-12 text-center max-w-xl mx-auto space-y-4 fade-in-up">
            <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[#06458F]/5 text-[#06458F] text-[10px] font-bold uppercase tracking-widest">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
                </svg>
                Ambiente de Compra Seguro
            </span>
            <h1 class="text-3xl sm:text-4xl font-bold tracking-tight text-[#06458F] uppercase">
                Meu <span class="text-[#636D7D] font-light">Carrinho</span>
            </h1>
            
            {{-- Indicador de Passos --}}
            <div class="flex items-center justify-center gap-3 pt-2 text-[10px] sm:text-xs font-bold uppercase tracking-widest text-slate-400">
                <span class="text-[#06458F] flex items-center gap-1.5">
                    <span class="w-5 h-5 rounded-full bg-[#06458F] text-white flex items-center justify-center text-[10px]">1</span>
                    Carrinho
                </span>
                <svg class="w-3 h-3 text-slate-300" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
                <span class="flex items-center gap-1.5">
                    <span class="w-5 h-5 rounded-full border border-slate-300 flex items-center justify-center text-[10px]">2</span>
                    Fatura / Pagamento
                </span>
            </div>
        </div>

        {{-- ▼▼▼ GRID PRINCIPAL DO CARRINHO ▼▼▼ --}}
        @if(empty($carrinho))
            {{-- Estado Vazio Premium --}}
            <div class="text-center py-20 bg-white rounded-3xl border border-slate-100 shadow-[0_10px_40px_rgba(0,0,0,0.02)] fade-in max-w-2xl mx-auto">
                <div class="w-20 h-20 bg-slate-50 border border-slate-100 rounded-full flex items-center justify-center mx-auto mb-6">
                    <svg class="w-9 h-9 text-[#06458F]/60" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/>
                    </svg>
                </div>
                <h2 class="text-2xl font-bold text-[#06458F] mb-3 uppercase tracking-tight">O seu carrinho está vazio</h2>
                <p class="text-[#636D7D] mb-8 max-w-sm mx-auto text-xs sm:text-sm font-light leading-relaxed">
                    Ainda não adicionou nenhum equipamento ou acessório geotecnológico de alta precisão ao seu pedido.
                </p>
                <a href="{{ route('loja.index') }}" 
                   class="inline-flex items-center gap-2 px-8 py-4 bg-[#06458F] hover:bg-[#0A529F] text-white font-bold rounded-xl transition-all duration-300 uppercase tracking-widest text-xs shadow-md hover:scale-[1.02] active:scale-95">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
                    </svg>
                    Explorar Equipamentos
                </a>
            </div>
        @else
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start fade-in-up">
                
                {{-- ▼ LISTA DE ITENS (Lado Esquerdo - 8 Colunas) ▼ --}}
                <div class="lg:col-span-8 space-y-4">
                    @foreach($carrinho as $chave => $item)
                        <div class="bg-white border border-slate-100 p-5 rounded-3xl flex flex-col sm:flex-row gap-5 relative hover:shadow-[0_12px_36px_rgba(6,69,143,0.04)] transition-all duration-300 group">
                            
                            {{-- Foto do Equipamento — Studio Background --}}
                            <div class="flex-shrink-0 w-full sm:w-28 h-28 bg-slate-50 rounded-2xl flex items-center justify-center border border-slate-100 p-3 relative overflow-hidden">
                                @if($item['imagem'])
                                    <img src="{{ asset('storage/' . $item['imagem']) }}" 
                                         class="max-h-full max-w-full object-contain transform group-hover:scale-[1.05] transition duration-500"
                                         alt="{{ $item['nome'] }}">
                                @else
                                    {{-- Placeholder Premium se não houver foto --}}
                                    <div class="flex flex-col items-center gap-1">
                                        <svg class="w-8 h-8 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 0 0 0 1.5-1.5V6a1.5 0 0 0-1.5-1.5H3.75A1.5 0 0 0 2.25 6v12a1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/>
                                        </svg>
                                        <span class="text-[8px] font-bold text-slate-400 uppercase tracking-wider">Sem Foto</span>
                                    </div>
                                @endif
                            </div>

                            {{-- Informações e Ações --}}
                            <div class="flex-grow flex flex-col justify-between py-1">
                                <div class="space-y-1.5 pr-8">
                                    {{-- Nome & Tipo --}}
                                    <div class="flex flex-wrap items-center gap-2">
                                        <h3 class="text-base font-bold text-[#06458F] uppercase tracking-tight">{{ $item['nome'] }}</h3>
                                        <span class="px-2 py-0.5 rounded text-[8px] font-bold uppercase tracking-widest
                                                     {{ $item['tipo'] === 'aluguer' ? 'bg-amber-50 text-amber-600 border border-amber-200' : 'bg-[#EAF6DB] text-[#4C7A23] border border-[#8BCB4A]/50' }}">
                                            {{ $item['tipo'] === 'aluguer' ? 'Aluguer' : 'Venda' }}
                                        </span>
                                    </div>
                                    
                                    {{-- Preço unitário --}}
                                    <p class="text-slate-400 text-xs font-semibold">
                                        Unitário: <span class="text-slate-600 font-bold">{{ number_format($item['preco_unitario'] ?? $item['preco'], 2, ',', '.') }} Kz</span>
                                    </p>
                                    
                                    {{-- Detalhes do Aluguer --}}
                                    @if(isset($item['aluguer_periodo']) && $item['aluguer_periodo'])
                                        <div class="inline-flex flex-col gap-0.5 bg-[#06458F]/5 border border-[#06458F]/15 px-3 py-1.5 rounded-xl max-w-md mt-1">
                                            <span class="text-[9px] font-bold uppercase text-[#06458F] tracking-wider">Período: {{ $item['aluguer_periodo'] }}</span>
                                            @if(isset($item['aluguer_datas']) && $item['aluguer_datas'])
                                                <span class="text-[9px] font-semibold text-slate-500 italic">{{ $item['aluguer_datas'] }}</span>
                                            @endif
                                        </div>
                                    @endif
                                </div>

                                {{-- Ações inferiores (Quantidade Stepper e Subtotal) --}}
                                <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mt-4 pt-3 border-t border-slate-50">
                                    
                                    {{-- Stepper de Quantidade Moderno --}}
                                    <form action="{{ route('carrinho.atualizar', $chave) }}" method="POST" class="flex items-center gap-2">
                                        @csrf @method('PUT')
                                        <div class="flex items-center bg-slate-50 border border-slate-200 rounded-xl overflow-hidden p-1">
                                            <button type="button" 
                                                    onclick="this.nextElementSibling.stepDown(); this.form.submit();"
                                                    class="w-8 h-8 flex items-center justify-center text-slate-500 hover:bg-slate-200/60 rounded-lg transition-colors font-bold text-sm">-</button>
                                            <input type="number" 
                                                   name="quantidade" 
                                                   value="{{ $item['quantidade'] }}" 
                                                   min="1" 
                                                   class="w-10 bg-transparent text-center text-xs font-bold text-[#06458F] outline-none"
                                                   onchange="this.form.submit();">
                                            <button type="button" 
                                                    onclick="this.previousElementSibling.stepUp(); this.form.submit();"
                                                    class="w-8 h-8 flex items-center justify-center text-slate-500 hover:bg-slate-200/60 rounded-lg transition-colors font-bold text-sm">+</button>
                                        </div>
                                        <span class="text-[10px] text-slate-400 font-medium">Qtd</span>
                                    </form>

                                    {{-- Subtotal do Item --}}
                                    <div class="flex items-center gap-1.5">
                                        <span class="text-xs text-slate-400 font-medium">Subtotal:</span>
                                        <span class="text-base font-bold text-[#06458F]">{{ number_format($item['preco'] * $item['quantidade'], 2, ',', '.') }} Kz</span>
                                    </div>

                                </div>
                            </div>

                            {{-- Botão Remover Absoluto no Canto Superior Direito --}}
                            <form action="{{ route('carrinho.remover', $chave) }}" method="POST" class="absolute top-4 right-4">
                                @csrf @method('DELETE')
                                <button type="submit" 
                                        class="w-8 h-8 rounded-full bg-red-50 hover:bg-red-100 text-red-400 hover:text-red-600 flex items-center justify-center transition-all duration-250"
                                        title="Remover do Carrinho">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                                    </svg>
                                </button>
                            </form>

                        </div>
                    @endforeach
                </div>

                {{-- ▼ PAINEL RESUMO INVOICE (Lado Direito - 4 Colunas) ▼ --}}
                <div class="lg:col-span-4 sticky top-32">
                    <div class="bg-white border border-slate-100 rounded-3xl p-6 space-y-6 shadow-[0_15px_45px_rgba(6,69,143,0.025)]">
                        
                        {{-- Título do Painel --}}
                        <div class="border-b border-slate-100 pb-4">
                            <h3 class="text-xs font-bold uppercase tracking-widest text-[#06458F]">Resumo do Pedido</h3>
                        </div>

                        {{-- Tabela de Preços e Valores --}}
                        <div class="space-y-3.5 text-xs">
                            <div class="flex justify-between text-slate-500 font-medium">
                                <span>Quantidade de Artigos</span>
                                <span class="font-bold text-slate-800">{{ array_sum(array_column($carrinho, 'quantidade')) }}</span>
                            </div>
                            
                            {{-- Extras de Confiança (Valores Inclusos) --}}
                            <div class="flex justify-between text-slate-500 font-medium">
                                <span>Calibração e Certificação</span>
                                <span class="text-[#4C7A23] font-bold uppercase tracking-wider text-[10px]">Gratuito</span>
                            </div>

                            <div class="flex justify-between text-slate-500 font-medium">
                                <span>Seguro de Transporte</span>
                                <span class="text-[#4C7A23] font-bold uppercase tracking-wider text-[10px]">Incluído</span>
                            </div>

                            {{-- Separador --}}
                            <div class="h-px bg-slate-100 my-2"></div>

                            {{-- Total Geral --}}
                            <div class="flex justify-between items-end">
                                <span class="text-slate-800 font-bold text-sm">Total a Pagar</span>
                                <div class="text-right">
                                    <span class="text-2xl font-bold text-[#06458F] tracking-tight">{{ number_format($total, 2, ',', '.') }} Kz</span>
                                    <p class="text-[9px] text-slate-400 font-medium mt-0.5">Sem taxas ocultas adicionais</p>
                                </div>
                            </div>
                        </div>

                        {{-- Botões de Acção --}}
                        <div class="space-y-3 pt-2">
                            <form action="{{ route('carrinho.finalizar') }}" method="POST">
                                @csrf
                                <button type="submit" 
                                        class="w-full bg-[#06458F] hover:bg-[#0A529F] text-white font-bold py-4 rounded-xl transition-all duration-300 uppercase tracking-widest text-[10px] shadow-md hover:scale-[1.01] active:scale-95">
                                    Finalizar Encomenda
                                </button>
                            </form>

                            <button type="button" 
                                    onclick="abrirModalProforma()" 
                                    class="w-full bg-white border border-slate-200 text-[#06458F] hover:bg-slate-50 font-bold py-4 rounded-xl transition-all duration-300 uppercase tracking-widest text-[10px] flex items-center justify-center gap-2 hover:scale-[1.01] active:scale-95">
                                <svg class="w-4 h-4 text-[#06458F]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/>
                                </svg>
                                Emitir Orçamento PDF (Proforma)
                            </button>
                        </div>

                        {{-- ▼ BADGES DE CONFIANÇA/GARANTIA ▼ --}}
                        <div class="pt-4 border-t border-slate-50 space-y-3">
                            <div class="flex items-center gap-3 text-[10px] text-slate-500 font-medium">
                                <svg class="w-4 h-4 text-[#8BCB4A] shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/>
                                </svg>
                                <span>Equipamentos 100% Homologados</span>
                            </div>
                            <div class="flex items-center gap-3 text-[10px] text-slate-500 font-medium">
                                <svg class="w-4 h-4 text-sky-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A1.5 1.5 0 0 0 19.5 21l2.25-2.25a1.5 1.5 0 0 0 0-2.12l-5.83-5.83m-4.5 4.5V12a3 3 0 1 1-6 0v-.828a3 3 0 0 1 .879-2.121l5.83-5.83a1.5 1.5 0 0 1 2.122 0l2.25 2.25a1.5 1.5 0 0 1 0 2.122l-5.83 5.83m-4.5 4.5L13.5 4.5M10.5 22.5h3"/>
                                </svg>
                                <span>Suporte Técnico Especializado em Luanda</span>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        @endif

    </div>
</div>

{{-- ▼▼▼ MODAL PROFORMA (Design Elite) ▼▼▼ --}}
<div id="modalProforma" data-has-errors="{{ $errors->any() ? '1' : '0' }}" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm hidden z-[110] flex items-center justify-center p-4">
    <div class="bg-white rounded-[2rem] max-w-md w-full p-8 shadow-2xl border border-slate-100 relative fade-in">
        
        {{-- Fechar --}}
        <button onclick="fecharModalProforma()" class="absolute top-6 right-6 text-slate-400 hover:text-slate-600 transition p-1.5 rounded-full hover:bg-slate-50">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
        </button>

        {{-- Cabeçalho Modal --}}
        <div class="mb-6 space-y-1">
            <h2 class="text-2xl font-bold text-[#06458F] uppercase tracking-tight">Emitir Orçamento</h2>
            <p class="text-slate-500 text-xs font-light">Preencha os dados abaixo para gerar a Fatura Proforma oficial em formato PDF.</p>
        </div>

        @if ($errors->any())
            <div class="mb-4 p-3.5 bg-red-50 border border-red-200 rounded-2xl text-red-600 text-[11px] font-medium leading-relaxed">
                <ul class="list-disc list-inside">
                    @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                </ul>
            </div>
        @endif

        {{-- Formulário --}}
        <form action="{{ route('proforma.gerar') }}" method="POST" class="space-y-4">
            @csrf
            <div>
                <label class="block text-slate-500 text-[9px] font-bold uppercase tracking-wider mb-2">Nome Completo / Empresa *</label>
                <input type="text" name="cliente_nome" required value="{{ old('cliente_nome') }}" 
                       class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-slate-800 focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none transition-smooth text-xs font-semibold">
            </div>
            
            <div>
                <label class="block text-slate-500 text-[9px] font-bold uppercase tracking-wider mb-2">Endereço de E-mail *</label>
                <input type="email" name="cliente_email" required value="{{ old('cliente_email') }}" 
                       class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-slate-800 focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none transition-smooth text-xs font-semibold">
            </div>
            
            <div>
                <label class="block text-slate-500 text-[9px] font-bold uppercase tracking-wider mb-2">Localização / Cidade *</label>
                <input type="text" name="cliente_localizacao" required value="{{ old('cliente_localizacao') }}" 
                       class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-slate-800 focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none transition-smooth text-xs font-semibold">
            </div>
            
            <div>
                <label class="block text-slate-500 text-[9px] font-bold uppercase tracking-wider mb-2">NIF (Opcional)</label>
                <input type="text" name="cliente_nif" value="{{ old('cliente_nif') }}" 
                       class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-slate-800 focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none transition-smooth text-xs font-semibold">
            </div>

            <div class="flex gap-3 pt-4">
                <button type="submit" class="flex-1 bg-[#06458F] hover:bg-[#0A529F] text-white font-bold py-4 rounded-xl uppercase text-[10px] tracking-widest transition-all duration-300 shadow-md active:scale-95">
                    Gerar Orçamento
                </button>
                <button type="button" onclick="fecharModalProforma()" class="flex-1 bg-slate-50 border border-slate-200 text-[#636D7D] hover:bg-slate-100 font-bold py-4 rounded-xl uppercase text-[10px] tracking-widest transition-all duration-300 active:scale-95">
                    Cancelar
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function abrirModalProforma() { document.getElementById('modalProforma').classList.remove('hidden'); }
    function fecharModalProforma() { document.getElementById('modalProforma').classList.add('hidden'); }
    
    if (document.getElementById('modalProforma').dataset.hasErrors === '1') {
        abrirModalProforma();
    }

    // Abertura automática caso venha do Cart Drawer com ?finalizar=1
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('finalizar') === '1') {
        abrirModalProforma();
    }

    window.addEventListener('keydown', (e) => { if(e.key === 'Escape') fecharModalProforma(); });
    document.getElementById('modalProforma').addEventListener('click', (e) => { if(e.target.id === 'modalProforma') fecharModalProforma(); });
</script>
@endsection