@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto">
    <!-- Cabeçalho -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">
            Meus Pedidos
        </h1>
        <p class="text-gray-600">
            Acompanhe o status de todas as suas campanhas de publicidade
        </p>
    </div>

    <!-- Filtros e Ações -->
    <div class="bg-white rounded-xl shadow-md p-6 mb-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
            <div class="flex items-center space-x-4">
                <span class="text-sm font-medium text-gray-700">Total de pedidos:</span>
                <span class="bg-purple-100 text-purple-800 text-sm font-bold px-3 py-1 rounded-full">
                    {{ $pedidos->total() }}
                </span>
            </div>
            <a href="{{ route('pedido.empresa') }}" class="inline-flex items-center px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-bold rounded-lg transition duration-300 shadow-lg">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Nova Campanha
            </a>
        </div>
    </div>

    @if($pedidos->count() > 0)
        <!-- Lista de Pedidos -->
        <div class="space-y-4">
            @foreach($pedidos as $pedido)
                <div class="bg-white rounded-xl shadow-md hover:shadow-xl transition duration-300 overflow-hidden">
                    <div class="p-6">
                        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
                            <!-- Informações do Pedido -->
                            <div class="flex-1">
                                <div class="flex items-start space-x-4">
                                    <!-- Preview da Imagem -->
                                    <div class="flex-shrink-0">
                                        <img
                                            src="{{ asset('storage/' . $pedido->arquivo_criativo) }}"
                                            alt="{{ $pedido->nome_criativo }}"
                                            class="w-24 h-24 object-cover rounded-lg shadow-md"
                                        >
                                    </div>

                                    <!-- Detalhes -->
                                    <div class="flex-1 min-w-0">
                                        <div class="flex items-center space-x-3 mb-2">
                                            <h3 class="text-xl font-bold text-gray-900 truncate">
                                                {{ $pedido->nome_criativo }}
                                            </h3>
                                            <span class="flex-shrink-0 inline-block px-3 py-1 text-xs 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 class="grid grid-cols-2 gap-3 text-sm">
                                            <div>
                                                <span class="text-gray-600">Código:</span>
                                                <span class="font-mono font-semibold text-gray-900 ml-1">{{ $pedido->codigo_pedido }}</span>
                                            </div>
                                            <div>
                                                <span class="text-gray-600">Periodicidade:</span>
                                                <span class="font-semibold text-gray-900 ml-1">{{ ucfirst($pedido->periodicidade) }}</span>
                                            </div>
                                            <div>
                                                <span class="text-gray-600">Período:</span>
                                                <span class="font-semibold text-gray-900 ml-1">
                                                    {{ \Carbon\Carbon::parse($pedido->data_inicio)->format('d/m/Y') }} -
                                                    {{ \Carbon\Carbon::parse($pedido->data_fim)->format('d/m/Y') }}
                                                </span>
                                            </div>
                                            <div>
                                                <span class="text-gray-600">Criado em:</span>
                                                <span class="font-semibold text-gray-900 ml-1">{{ $pedido->created_at->format('d/m/Y H:i') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Valor e Ações -->
                            <div class="mt-4 lg:mt-0 lg:ml-6 flex flex-col items-end space-y-3">
                                <div class="text-right">
                                    <p class="text-sm text-gray-600">Valor Total</p>
                                    <p class="text-2xl font-extrabold text-purple-600">
                                        R$ {{ number_format($pedido->valor_total, 2, ',', '.') }}
                                    </p>
                                </div>

                                <a href="{{ route('pedido.detalhes', $pedido->id) }}" class="inline-flex items-center px-6 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold rounded-lg transition duration-200">
                                    Ver Detalhes
                                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Barra de Status (se aguardando pagamento) -->
                    @if($pedido->status === 'aguardando_pagamento')
                        <div class="bg-yellow-50 border-t border-yellow-200 px-6 py-3">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <svg class="h-5 w-5 text-yellow-400 mr-2" 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>
                                    <span class="text-sm font-medium text-yellow-800">
                                        Aguardando pagamento para processar
                                    </span>
                                </div>
                                <button class="text-sm font-semibold text-yellow-800 hover:text-yellow-900 underline">
                                    Pagar Agora
                                </button>
                            </div>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>

        <!-- Paginação -->
        <div class="mt-8">
            {{ $pedidos->links() }}
        </div>

    @else
        <!-- Estado Vazio -->
        <div class="bg-white rounded-xl shadow-md p-12 text-center">
            <div class="mx-auto flex items-center justify-center h-24 w-24 rounded-full bg-gray-100 mb-6">
                <svg class="h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>

            <h3 class="text-2xl font-bold text-gray-900 mb-2">
                Nenhum pedido encontrado
            </h3>
            <p class="text-gray-600 mb-8">
                Você ainda não criou nenhuma campanha de publicidade
            </p>

            <a href="{{ route('pedido.empresa') }}" class="inline-flex items-center px-8 py-3 bg-purple-600 hover:bg-purple-700 text-white font-bold rounded-lg transition duration-300 shadow-lg">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Criar Primeira Campanha
            </a>
        </div>
    @endif
</div>
@endsection