@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Breadcrumb -->
    <div class="mb-6">
        <nav class="flex" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    <a href="{{ route('home') }}" class="text-gray-600 hover:text-purple-600">
                        Início
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-4 h-4 text-gray-400 mx-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                        </svg>
                        <a href="{{ route('meus-pedidos') }}" class="text-gray-600 hover:text-purple-600">
                            Meus Pedidos
                        </a>
                    </div>
                </li>
                <li aria-current="page">
                    <div class="flex items-center">
                        <svg class="w-4 h-4 text-gray-400 mx-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                        </svg>
                        <span class="text-gray-500">{{ $pedido->codigo_pedido }}</span>
                    </div>
                </li>
            </ol>
        </nav>
    </div>

    <!-- Card Principal -->
    <div class="bg-white rounded-2xl shadow-xl p-8">
        <!-- Cabeçalho -->
        <div class="flex items-center justify-between mb-8 pb-6 border-b border-gray-200">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 mb-2">
                    Detalhes do Pedido
                </h1>
                <p class="text-gray-600 font-mono text-lg">
                    {{ $pedido->codigo_pedido }}
                </p>
            </div>
            <div class="text-right">
                <span class="inline-block px-4 py-2 text-sm font-semibold rounded-full {{ $pedido->statusBadge['color'] === 'success' ? 'bg-green-100 text-green-800' : ($pedido->statusBadge['color'] === 'warning' ? 'bg-yellow-100 text-yellow-800' : ($pedido->statusBadge['color'] === 'danger' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800')) }}">
                    {{ $pedido->statusBadge['text'] }}
                </span>
            </div>
        </div>

        <!-- Informações Principais -->
        <div class="grid md:grid-cols-2 gap-8 mb-8">
            <!-- Coluna Esquerda -->
            <div class="space-y-6">
                <!-- Empresa -->
                <div>
                    <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">{{ $pedido->empresa->name }}</p>
                            <p class="text-sm text-gray-600">Código: {{ $pedido->codigo_empresa }}</p>
                        </div>
                    </div>
                </div>

                <!-- Período -->
                <div>
                    <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Período de Exibição</h3>
                    <div class="bg-gray-50 rounded-lg p-4 space-y-2">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Início:</span>
                            <span class="font-semibold text-gray-900">
                                {{ \Carbon\Carbon::parse($pedido->data_inicio)->format('d/m/Y') }}
                            </span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Fim:</span>
                            <span class="font-semibold text-gray-900">
                                {{ \Carbon\Carbon::parse($pedido->data_fim)->format('d/m/Y') }}
                            </span>
                        </div>
                        <div class="flex justify-between pt-2 border-t border-gray-200">
                            <span class="text-gray-600">Periodicidade:</span>
                            <span class="inline-block bg-purple-100 text-purple-800 text-sm font-semibold px-3 py-1 rounded-full">
                                {{ ucfirst($pedido->periodicidade) }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Valores -->
                <div>
                    <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Valores</h3>
                    <div class="bg-gradient-to-r from-purple-50 to-green-50 border-2 border-purple-200 rounded-lg p-4 space-y-2">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Valor Unitário:</span>
                            <span class="font-semibold text-gray-900">
                                R$ {{ number_format($pedido->valor_unitario, 2, ',', '.') }}
                            </span>
                        </div>
                        <div class="flex justify-between pt-2 border-t border-purple-200">
                            <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>
            </div>

            <!-- Coluna Direita -->
            <div class="space-y-6">
                <!-- Criativo -->
                <div>
                    <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Criativo</h3>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <p class="text-lg font-semibold text-gray-900 mb-3">{{ $pedido->nome_criativo }}</p>
                        <img
                            src="{{ asset('storage/' . $pedido->arquivo_criativo) }}"
                            alt="{{ $pedido->nome_criativo }}"
                            class="w-full h-auto rounded-lg shadow-md mb-3"
                        >
                        <div class="flex justify-between text-sm text-gray-600">
                            <span>Formato:</span>
                            <span class="font-semibold text-gray-900 uppercase">
                                {{ pathinfo($pedido->arquivo_criativo, PATHINFO_EXTENSION) }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Timeline / Histórico -->
        <div class="border-t border-gray-200 pt-8">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Histórico</h3>
            <div class="space-y-4">
                <!-- Criação -->
                <div class="flex items-start">
                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
                        <svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <div class="ml-4 flex-1">
                        <p class="font-semibold text-gray-900">Pedido Criado</p>
                        <p class="text-sm text-gray-600">{{ $pedido->created_at->format('d/m/Y \à\s H:i') }}</p>
                    </div>
                </div>

                @if($pedido->status === 'aguardando_pagamento')
                    <div class="flex items-start">
                        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center">
                            <svg class="w-5 h-5 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
                                <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-4 flex-1">
                            <p class="font-semibold text-gray-900">Aguardando Pagamento</p>
                            <p class="text-sm text-gray-600">Complete o pagamento para prosseguir</p>
                            <button class="mt-2 text-sm font-semibold text-purple-600 hover:text-purple-800">
                                Pagar Agora →
                            </button>
                        </div>
                    </div>
                @endif

                @if($pedido->status === 'aprovado')
                    <div class="flex items-start">
                        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
                            <svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                        </div>
                        <div class="ml-4 flex-1">
                            <p class="font-semibold text-gray-900">Pedido Aprovado</p>
                            <p class="text-sm text-gray-600">{{ $pedido->updated_at->format('d/m/Y \à\s H:i') }}</p>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <!-- Ações -->
        <div class="border-t border-gray-200 pt-6 mt-8">
            <div class="flex items-center justify-between">
                <a href="{{ route('meus-pedidos') }}" class="text-gray-600 hover:text-gray-900 font-medium transition duration-300">
                    ← Voltar para Meus Pedidos
                </a>

                <div class="flex space-x-3">
                    @if($pedido->status === 'aguardando_pagamento')
                        <button class="px-6 py-3 bg-green-600 hover:bg-green-700 text-white font-bold rounded-lg transition duration-300 shadow-lg">
                            Pagar Agora
                        </button>
                    @endif

                    <button class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold rounded-lg transition duration-200">
                        Baixar Comprovante
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Informações Adicionais -->
    @if($pedido->status === 'aguardando_pagamento')
        <div class="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-6">
            <div class="flex">
                <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="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-yellow-800">
                        Ação Necessária
                    </h3>
                    <div class="mt-2 text-sm text-yellow-700">
                        <p>
                            Seu pedido foi criado com sucesso, mas está aguardando pagamento. Complete o pagamento via Mercado Pago para que seu criativo seja enviado para análise do franqueado.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    @elseif($pedido->status === 'em_analise')
        <div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-6 w-6 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">
                        Em Análise
                    </h3>
                    <div class="mt-2 text-sm text-blue-700">
                        <p>
                            Seu criativo está sendo analisado pelo franqueado. Este processo geralmente leva até 24 horas. Você será notificado quando houver uma atualização.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection