@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto">
    <!-- Card de Sucesso -->
    <div class="bg-white rounded-2xl shadow-xl p-8 text-center">
        <!-- Ícone de Sucesso -->
        <div class="mb-6">
            <div class="mx-auto flex items-center justify-center h-24 w-24 rounded-full bg-green-100 animate-bounce">
                <svg class="h-16 w-16 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
            </div>
        </div>

        <h1 class="text-4xl font-extrabold text-gray-900 mb-4">
            Pedido Criado com Sucesso!
        </h1>

        <p class="text-xl text-gray-600 mb-8">
            Seu pedido foi registrado e está aguardando pagamento
        </p>

        <!-- Código do Pedido -->
        <div class="bg-gradient-to-r from-purple-50 to-green-50 border-2 border-purple-200 rounded-xl p-6 mb-8">
            <p class="text-sm text-gray-600 mb-2">Código do Pedido</p>
            <p class="text-3xl font-bold text-purple-600 font-mono mb-4">
                {{ $pedido->codigo_pedido }}
            </p>
            <p class="text-sm text-gray-500">
                Guarde este código para acompanhar seu pedido
            </p>
        </div>

        <!-- Detalhes do Pedido -->
        <div class="bg-gray-50 rounded-xl p-6 mb-8 text-left">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Resumo do Pedido</h3>

            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-gray-600">Empresa:</span>
                    <span class="font-semibold text-gray-900">{{ $pedido->empresa->name }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Criativo:</span>
                    <span class="font-semibold text-gray-900">{{ $pedido->nome_criativo }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Período:</span>
                    <span class="font-semibold text-gray-900">
                        {{ \Carbon\Carbon::parse($pedido->data_inicio)->format('d/m/Y') }} até
                        {{ \Carbon\Carbon::parse($pedido->data_fim)->format('d/m/Y') }}
                    </span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Periodicidade:</span>
                    <span class="font-semibold text-gray-900">{{ ucfirst($pedido->periodicidade) }}</span>
                </div>
                <div class="border-t pt-3 flex justify-between items-center">
                    <span class="text-lg font-bold text-gray-900">Valor Total:</span>
                    <span class="text-2xl font-extrabold text-purple-600">
                        R$ {{ number_format($pedido->valor_total, 2, ',', '.') }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Status -->
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-8">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class="ml-3 text-left">
                    <h3 class="text-sm font-medium text-yellow-800">
                        Aguardando Pagamento
                    </h3>
                    <p class="mt-1 text-sm text-yellow-700">
                        Complete o pagamento para que seu criativo seja enviado para análise
                    </p>
                </div>
            </div>
        </div>

        <!-- Próximos Passos -->
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-8 text-left">
            <h3 class="text-lg font-semibold text-blue-900 mb-4">Próximos Passos</h3>
            <ol class="space-y-3 text-sm text-blue-800">
                <li class="flex items-start">
                    <span class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-200 text-blue-800 flex items-center justify-center font-bold mr-3">1</span>
                    <span>Complete o pagamento via Mercado Pago (link enviado por e-mail)</span>
                </li>
                <li class="flex items-start">
                    <span class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-200 text-blue-800 flex items-center justify-center font-bold mr-3">2</span>
                    <span>Aguarde a confirmação do pagamento (geralmente instantâneo)</span>
                </li>
                <li class="flex items-start">
                    <span class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-200 text-blue-800 flex items-center justify-center font-bold mr-3">3</span>
                    <span>Seu criativo será enviado para análise do franqueado</span>
                </li>
                <li class="flex items-start">
                    <span class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-200 text-blue-800 flex items-center justify-center font-bold mr-3">4</span>
                    <span>Após aprovação, sua campanha começará a ser exibida</span>
                </li>
            </ol>
        </div>

        <!-- Botões de Ação -->
        <div class="grid md:grid-cols-2 gap-4">
            <a href="{{ route('meus-pedidos') }}" class="block bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 px-6 rounded-lg transition duration-300 transform hover:scale-105 shadow-lg">
                Ver Meus Pedidos
            </a>
            <a href="{{ route('home') }}" class="block bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-4 px-6 rounded-lg transition duration-300">
                Voltar ao Início
            </a>
        </div>
    </div>

    <!-- Informação Adicional -->
    <div class="mt-6 text-center">
        <p class="text-sm text-gray-600">
            Dúvidas? Entre em contato com seu franqueado ou visite nossa
            <a href="#" class="text-purple-600 hover:text-purple-800 font-medium">central de ajuda</a>
        </p>
    </div>
</div>
@endsection