@extends('layouts.principal')

@section('titulo', 'Meus Pedidos - MNGD Sistemas')

@section('conteudo')
<div class="pedidos-container">
    <!-- Header -->
    <div class="page-header">
        <div class="header-content">
            <h1>Meus Pedidos</h1>
            <p>Histórico completo de suas licenças e compras</p>
        </div>
        <div class="header-actions">
            <a href="{{ route('cliente.dashboard') }}" class="btn-secondary">
                <i class="fas fa-arrow-left"></i>
                <span>Voltar</span>
            </a>
        </div>
    </div>

    @if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif

    <!-- Filtros -->
    <div class="filters-section">
        <div class="filter-group">
            <label for="status-filter">Status:</label>
            <select id="status-filter" class="filter-select">
                <option value="">Todos</option>
                <option value="ativa">Ativa</option>
                <option value="pendente">Pendente</option>
                <option value="expirado">Expirado</option>
                <option value="cancelado">Cancelado</option>
                <option value="trial">Trial</option>
            </select>
        </div>

        <div class="filter-group">
            <label for="produto-filter">Produto:</label>
            <select id="produto-filter" class="filter-select">
                <option value="">Todos</option>
                @foreach($licencas->unique('produto_id') as $licenca)
                <option value="{{ $licenca->produto->id }}">{{ $licenca->produto->nome }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <!-- Lista de Licenças -->
    @if($licencas->count() > 0)
    <div class="licencas-list">
        @foreach($licencas as $licenca)
        <div class="licenca-item" data-status="{{ $licenca->status }}" data-produto="{{ $licenca->produto->id }}">
            <div class="licenca-main">
                <div class="licenca-info">
                    <div class="licenca-header">
                        <h3>{{ $licenca->produto->nome }}</h3>
                        <span class="licenca-status {{ $licenca->status }}">
                            {{ ucfirst($licenca->status) }}
                        </span>
                    </div>
                    <p class="licenca-desc">{{ $licenca->produto->descricao }}</p>
                </div>

                <div class="licenca-details">
                    <div class="detail-row">
                        <div class="detail-item">
                            <span class="label">Data de Início:</span>
                            <span class="value">
                                @if($licenca->created_at)
                                {{ $licenca->created_at->format('d/m/Y') }}
                                @else
                                <span class="text-muted">N/A</span>
                                @endif
                            </span>
                        </div>
                        <div class="detail-item">
                            <span class="label">Data de Expiração:</span>
                            <span class="value">
                                @if($licenca->license_ends_at)
                                    {{ $licenca->license_ends_at->format('d/m/Y') }}
                                @elseif($licenca->paid_until)
                                    {{ $licenca->paid_until->format('d/m/Y') }}
                                @else
                                <span class="text-muted">N/A</span>
                                @endif
                            </span>
                        </div>
                    </div>

                    <div class="detail-row">
                        <div class="detail-item">
                            <span class="label">Valor:</span>
                            <span class="value price">
                                @if($licenca->tipo === 'trial')
                                    Gratuito (Trial)
                                @else
                                    @if($licenca->produto)
                                        R$ {{ number_format($licenca->pagamento->valor, 2, ',', '.') }}
                                    @else
                                        <span class="text-muted">N/A</span>
                                    @endif
                                @endif
                            </span>
                        </div>
                        <div class="detail-item">
                            <span class="label">Dias Restantes:</span>
                            <span class="value {{ ($licenca->license_ends_at && $licenca->license_ends_at->isFuture() && $licenca->license_ends_at->diffInDays(now()) < 30) || ($licenca->paid_until && $licenca->paid_until->isFuture() && $licenca->paid_until->diffInDays(now()) < 30) ? 'warning' : '' }}">
                                @php
                                    $dataValidade = $licenca->license_ends_at ?? $licenca->paid_until;
                                @endphp

                                @if($dataValidade)
                                    @if($dataValidade->isPast())
                                        <span class="text-danger">Expirado</span>
                                    @else
                                        {{ $dataValidade->diffInDays(now()) }} dias
                                @endif

                                @elseif($licenca->license_ends_at)
                                    @php
                                        $license_ends_at = $licenca->license_ends_at;
                                    @endphp
                                    @if($license_ends_at->isPast())
                                        <span class="text-danger">Expirado</span>
                                    @else
                                        {{ $license_ends_at->diffInDays(now()) }} dias
                                @endif

                                @else
                                    <span class="text-muted">N/A</span>
                                @endif

                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="licenca-actions">
                @php
                $dataValidade = $licenca->license_ends_at ?? $licenca->paid_until;
                $diasRestantes = $dataValidade ? $dataValidade->diffInDays(now()) : null;
                @endphp

                @if($licenca->status === 'ativa' && $diasRestantes !== null && $diasRestantes < 30)
                    <a href="{{ route('licenca.renovar') }}" class="btn-primary btn-small">
                    <i class="fas fa-sync"></i>
                    <span>Renovar</span>
                    </a>
                    @endif

                    @if($licenca->status !== 'ativa' && $licenca->status !== 'pendente')
                    <a href="{{ route('licenca.comprar') }}" class="btn-primary btn-small">
                        <i class="fas fa-shopping-cart"></i>
                        <span>Comprar Novamente</span>
                    </a>
                    @endif

                    @if($licenca->status === 'pendente')
                    <a href="{{ route('licenca.index') }}" class="btn-secondary btn-small">
                        <i class="fas fa-info-circle"></i>
                        <span>Ver Detalhes</span>
                    </a>
                    @endif
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div class="empty-state">
        <div class="empty-icon">
            <i class="fas fa-receipt"></i>
        </div>
        <h3>Nenhum pedido encontrado</h3>
        <p>Você ainda não possui licenças. Comece explorando nossos produtos!</p>
        <a href="{{ route('product.index') }}" class="btn-primary">
            <i class="fas fa-shopping-cart"></i>
            <span>Ver Produtos</span>
        </a>
    </div>
    @endif
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const statusFilter = document.getElementById('status-filter');
        const produtoFilter = document.getElementById('produto-filter');
        const licencaItems = document.querySelectorAll('.licenca-item');

        function filterLicencas() {
            const statusValue = statusFilter.value;
            const produtoValue = produtoFilter.value;

            licencaItems.forEach(item => {
                const status = item.getAttribute('data-status');
                const produto = item.getAttribute('data-produto');

                const statusMatch = !statusValue || status === statusValue;
                const produtoMatch = !produtoValue || produto === produtoValue;

                if (statusMatch && produtoMatch) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        }

        statusFilter.addEventListener('change', filterLicencas);
        produtoFilter.addEventListener('change', filterLicencas);
    });
</script>

<style>
    .text-muted {
        color: #a0aec0;
        font-style: italic;
    }

    .text-danger {
        color: #e53e3e;
        font-weight: 600;
    }

    .warning {
        color: #d69e2e;
        font-weight: 600;
    }

    .pedidos-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }

    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .header-content h1 {
        margin: 0 0 0.5rem 0;
        color: #2d3748;
    }

    .header-content p {
        margin: 0;
        color: #718096;
    }

    .filters-section {
        display: flex;
        gap: 1rem;
        margin-bottom: 2rem;
        flex-wrap: wrap;
    }

    .filter-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .filter-group label {
        color: #4a5568;
        font-weight: 600;
        font-size: 0.875rem;
    }

    .filter-select {
        padding: 0.5rem 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        background: white;
        color: #2d3748;
        font-size: 1rem;
    }

    .filter-select:focus {
        outline: none;
        border-color: #667eea;
    }

    .licencas-list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .licenca-item {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .licenca-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .licenca-main {
        display: flex;
        justify-content: space-between;
        gap: 2rem;
        flex-wrap: wrap;
    }

    .licenca-info {
        flex: 1;
        min-width: 250px;
    }

    .licenca-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .licenca-header h3 {
        margin: 0;
        color: #2d3748;
        font-size: 1.25rem;
    }

    .licenca-status {
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-size: 0.875rem;
        font-weight: 600;
    }

    .licenca-status.ativa {
        background: #c6f6d5;
        color: #22543d;
    }

    .licenca-status.pendente {
        background: #fed7d7;
        color: #742a2a;
    }

    .licenca-status.expirado {
        background: #e2e8f0;
        color: #2d3748;
    }

    .licenca-status.cancelado {
        background: #fed7d7;
        color: #742a2a;
    }

    .licenca-status.trial {
        background: #feebc8;
        color: #7c2d12;
    }

    .licenca-desc {
        color: #718096;
        margin: 0;
    }

    .licenca-details {
        flex: 1;
        min-width: 300px;
    }

    .detail-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .detail-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .detail-item .label {
        color: #718096;
        font-size: 0.875rem;
    }

    .detail-item .value {
        color: #2d3748;
        font-weight: 600;
    }

    .detail-item .value.price {
        color: #667eea;
        font-size: 1.125rem;
    }

    .licenca-actions {
        display: flex;
        gap: 0.75rem;
        margin-top: 1rem;
        flex-wrap: wrap;
    }

    .btn-small {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 12px;
    }

    .empty-icon {
        font-size: 4rem;
        color: #cbd5e0;
        margin-bottom: 1rem;
    }

    .empty-state h3 {
        color: #2d3748;
        margin-bottom: 0.5rem;
    }

    .empty-state p {
        color: #718096;
        margin-bottom: 2rem;
    }

    @media (max-width: 768px) {
        .pedidos-container {
            padding: 1rem;
        }

        .page-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .licenca-main {
            flex-direction: column;
        }

        .detail-row {
            grid-template-columns: 1fr;
        }
    }
</style>
@endsection