@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto">
    <!-- Progress Bar -->
    <x-wizard-progress :currentStep="4" />

    <!-- Card Principal -->
    <div class="bg-white rounded-2xl shadow-xl p-8">
        <h2 class="text-3xl font-bold text-gray-900 mb-2">
            Finalizar Pedido
        </h2>
        <p class="text-gray-600 mb-8">
            Revise os dados do seu pedido e efetue o pagamento
        </p>

        <!-- Resumo Completo do Pedido -->
        <div class="space-y-6 mb-8">
            <!-- Empresa -->
            <div class="border-b border-gray-200 pb-4">
                <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Empresa</h3>
                <div class="flex items-center">
                    <div class="bg-purple-100 p-3 rounded-lg mr-4">
                        <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-lg font-semibold text-gray-900">{{ $wizard['empresa']['name'] }}</p>
                        <p class="text-sm text-gray-600">Código: {{ $wizard['empresa']['codigo'] }}</p>
                    </div>
                </div>
            </div>

            <!-- Criativo -->
            <div class="border-b border-gray-200 pb-4">
                <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Criativo</h3>
                <div class="flex items-start space-x-4">
                    <div class="flex-shrink-0">
                        <img
                            src="{{ asset('storage/' . $wizard['arquivo_criativo']) }}"
                            alt="{{ $wizard['nome_criativo'] }}"
                            class="w-32 h-32 object-cover rounded-lg shadow-md"
                        >
                    </div>
                    <div class="flex-1">
                        <p class="text-lg font-semibold text-gray-900 mb-1">{{ $wizard['nome_criativo'] }}</p>
                        <p class="text-sm text-gray-600">Tipo: {{ strtoupper(pathinfo($wizard['arquivo_criativo'], PATHINFO_EXTENSION)) }}</p>
                    </div>
                </div>
            </div>

            <!-- Período -->
            <div class="border-b border-gray-200 pb-4">
                <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Período de Exibição</h3>
                <div class="grid md:grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm text-gray-600 mb-1">Data de Início</p>
                        <p class="text-lg font-semibold text-gray-900">
                            {{ \Carbon\Carbon::parse($wizard['data_inicio'])->format('d/m/Y') }}
                        </p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600 mb-1">Data de Fim</p>
                        <p class="text-lg font-semibold text-gray-900">
                            {{ \Carbon\Carbon::parse($wizard['data_fim'])->format('d/m/Y') }}
                        </p>
                    </div>
                </div>
                <div class="mt-3">
                    <p class="text-sm text-gray-600 mb-1">Periodicidade</p>
                    <span class="inline-block bg-purple-100 text-purple-800 text-sm font-semibold px-3 py-1 rounded-full">
                        {{ ucfirst($wizard['periodicidade']) }}
                    </span>
                </div>
            </div>

            <!-- Valor -->
            <div class="bg-gradient-to-r from-purple-50 to-green-50 border-2 border-purple-200 rounded-xl p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-600 mb-1">Valor Total</p>
                        <p class="text-4xl font-extrabold text-purple-600">
                            R$ {{ number_format($wizard['valor_total'], 2, ',', '.') }}
                        </p>
                    </div>
                    <div class="bg-white rounded-lg p-4 shadow-md">
                        <svg class="w-12 h-12 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <!-- Informação sobre Pagamento -->
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-blue-800">
                        Sobre o Pagamento
                    </h3>
                    <div class="mt-2 text-sm text-blue-700">
                        <ul class="list-disc list-inside space-y-1">
                            <li>Pagamento seguro via Mercado Pago</li>
                            <li>Você será redirecionado para completar o pagamento</li>
                            <li>Após confirmação, seu criativo será enviado para análise</li>
                            <li>A aprovação geralmente leva até 24 horas</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Formulário de Pagamento -->
        <form method="POST" action="{{ route('pedido.pagamento') }}">
            @csrf

            <!-- Termos e Condições -->
            <div class="mb-6">
                <label class="flex items-start cursor-pointer">
                    <input
                        type="checkbox"
                        name="aceite_termos"
                        class="mt-1 h-5 w-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                        required
                    >
                    <span class="ml-3 text-sm text-gray-700">
                        Eu li e concordo com os
                        <a href="#" class="text-purple-600 hover:text-purple-800 font-medium">termos e condições</a>
                        e a
                        <a href="#" class="text-purple-600 hover:text-purple-800 font-medium">política de privacidade</a>
                    </span>
                </label>
            </div>

            <!-- Botões -->
            <div class="flex items-center justify-between pt-4">
                <a href="{{ route('pedido.datas') }}" class="text-gray-600 hover:text-gray-900 font-medium transition duration-300">
                    ← Voltar
                </a>
                <button
                    type="submit"
                    class="px-8 py-3 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-bold rounded-lg transition duration-300 transform hover:scale-105 shadow-lg flex items-center space-x-2"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span>Finalizar e Pagar</span>
                </button>
            </div>
        </form>

        <!-- Opção de Cancelar -->
        <div class="mt-6 text-center">
            <a href="{{ route('pedido.cancelar') }}" class="text-sm text-red-600 hover:text-red-800 font-medium">
                Cancelar pedido
            </a>
        </div>
    </div>
</div>
@endsection