@extends('layouts.app')

@section('title', 'Visualizar Patrocínio')

@push('styles-custom')
<style>
    .info-card {
        border-left: 4px solid var(--phoenix-primary);
        transition: all 0.3s ease;
    }

    .info-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .badge-custom {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }

    .evento-card {
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 0.75rem;
    }

    .percentual-badge {
        background-color: #e3f2fd;
        color: #1976d2;
        font-weight: 600;
    }
</style>
@endpush

@section('content')
<div class="content pt-3">
    <nav class="mb-3" aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('patrocinios.index') }}">Patrocínios</a></li>
            <li class="breadcrumb-item active">Visualizar Patrocínio #{{ $patrocinio->id }}</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="row align-items-center justify-content-between g-3 mb-4">
        <div class="col-auto">
            <h2 class="mb-0">Patrocínio #{{ $patrocinio->id }}</h2>
            <p class="text-muted mb-0">{{ $patrocinio->descricao }}</p>
        </div>
        <div class="col-auto">
            <a href="{{ route('patrocinios.edit', $patrocinio) }}" class="btn btn-phoenix-warning">
                <i class="fas fa-edit me-2"></i>Editar
            </a>
            @if($patrocinio->anexo_contrato)
                <a href="{{ route('patrocinios.download-anexo', $patrocinio) }}" class="btn btn-phoenix-secondary">
                    <i class="fas fa-download me-2"></i>Baixar Anexo
                </a>
            @endif
        </div>
    </div>

    <!-- Informações Gerais -->
    <div class="card mb-4">
        <div class="card-header bg-body-tertiary">
            <h5 class="mb-0">
                <i class="fas fa-info-circle me-2 text-primary"></i>
                Informações Gerais
            </h5>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <div class="info-card card h-100">
                        <div class="card-body">
                            <h6 class="text-muted mb-2">Status</h6>
                            <span class="badge badge-custom {{ $patrocinio->status_badge }}">
                                {{ $patrocinio->status_label }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="info-card card h-100">
                        <div class="card-body">
                            <h6 class="text-muted mb-2">Valor Total</h6>
                            <h4 class="mb-0 text-success">{{ $patrocinio->valor_formatado }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="info-card card h-100">
                        <div class="card-body">
                            <h6 class="text-muted mb-2">Período</h6>
                            <p class="mb-0">
                                @if($patrocinio->data_inicio && $patrocinio->data_fim)
                                    {{ $patrocinio->data_inicio }} - {{ $patrocinio->data_fim }}
                                @else
                                    <span class="text-muted">Não definido</span>
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="info-card card h-100">
                        <div class="card-body">
                            <h6 class="text-muted mb-2">Forma de Pagamento</h6>
                            <p class="mb-0">{{ $patrocinio->forma_pagamento ?: 'Não informada' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Partes Envolvidas -->
    <div class="card mb-4">
        <div class="card-header bg-body-tertiary">
            <h5 class="mb-0">
                <i class="fas fa-users me-2 text-success"></i>
                Partes Envolvidas
            </h5>
        </div>
        <div class="card-body">
            <div class="row g-4">
                <div class="col-md-6">
                    <h6 class="text-primary mb-3">
                        <i class="fas fa-user-tie me-2"></i>
                        Cliente (Patrocinador)
                    </h6>
                    <div class="card border-primary">
                        <div class="card-body">
                            <h6 class="card-title">{{ $patrocinio->cliente->razao_social }}</h6>
                            <p class="card-text mb-1">
                                <strong>Documento:</strong> {{ $patrocinio->cliente->documento }}
                            </p>
                            <p class="card-text mb-1">
                                <strong>Email:</strong> {{ $patrocinio->cliente->email ?: 'Não informado' }}
                            </p>
                            <p class="card-text mb-0">
                                <strong>Telefone:</strong> {{ $patrocinio->cliente->telefone ?: 'Não informado' }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <h6 class="text-success mb-3">
                        <i class="fas fa-building me-2"></i>
                        Empresa (Patrocinada)
                    </h6>
                    <div class="card border-success">
                        <div class="card-body">
                            <h6 class="card-title">{{ $patrocinio->empresa->razao_social }}</h6>
                            <p class="card-text mb-1">
                                <strong>Documento:</strong> {{ $patrocinio->empresa->documento }}
                            </p>
                            <p class="card-text mb-1">
                                <strong>Email:</strong> {{ $patrocinio->empresa->email ?: 'Não informado' }}
                            </p>
                            <p class="card-text mb-0">
                                <strong>Telefone:</strong> {{ $patrocinio->empresa->telefone ?: 'Não informado' }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            @if($patrocinio->artista)
                <div class="row mt-4">
                    <div class="col-12">
                        <h6 class="text-purple mb-3">
                            <i class="fas fa-microphone me-2"></i>
                            Artista Associado
                        </h6>
                        <div class="card border-purple">
                            <div class="card-body">
                                <h6 class="card-title">
                                    {{ $patrocinio->artista->nome_real }}
                                    @if($patrocinio->artista->nome_artistico)
                                        <small class="text-muted">({{ $patrocinio->artista->nome_artistico }})</small>
                                    @endif
                                </h6>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <!-- Eventos e Proporcionalidade -->
    <div class="card mb-4">
        <div class="card-header bg-body-tertiary">
            <h5 class="mb-0">
                <i class="fas fa-calendar-alt me-2 text-warning"></i>
                Eventos e Proporcionalidade
            </h5>
        </div>
        <div class="card-body">
            <div class="alert alert-info mb-4">
                <i class="fas fa-info-circle me-2"></i>
                Tipo de proporcionalidade: <strong>{{ $patrocinio->proporcionalidade_tipo == 'automatica' ? 'Automática' : 'Manual' }}</strong>
            </div>

            <h6 class="mb-3">Eventos Vinculados ({{ $patrocinio->eventos->count() }})</h6>

            @foreach($patrocinio->eventos as $evento)
                <div class="evento-card">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h6 class="mb-1">{{ $evento->nome }}</h6>
                            <p class="mb-0 text-muted">
                                <i class="fas fa-calendar me-1"></i> {{ $evento->data }}
                                <i class="fas fa-map-marker-alt ms-3 me-1"></i> {{ $evento->cidade }}/{{ $evento->uf }}
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            <span class="badge percentual-badge me-2">
                                {{ number_format($evento->pivot->percentual, 2) }}%
                            </span>
                            <span class="text-success fw-bold">
                                R$ {{ number_format($evento->pivot->valor_proporcional, 2, ',', '.') }}
                            </span>
                        </div>
                    </div>
                </div>
            @endforeach

            <div class="row mt-4">
                <div class="col-12 text-end">
                    <h5>
                        Total: <span class="text-success">{{ $patrocinio->valor_formatado }}</span>
                    </h5>
                </div>
            </div>
        </div>
    </div>

    <!-- Contas a Receber -->
    @if($patrocinio->contasAReceber->count() > 0)
        <div class="card mb-4">
            <div class="card-header bg-body-tertiary">
                <h5 class="mb-0">
                    <i class="fas fa-money-check-alt me-2 text-success"></i>
                    Contas a Receber Geradas
                </h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Descrição</th>
                                <th>Evento</th>
                                <th>Vencimento</th>
                                <th>Valor</th>
                                <th>Status</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($patrocinio->contasAReceber as $conta)
                                <tr>
                                    <td>{{ $conta->id }}</td>
                                    <td>{{ Str::limit($conta->descricao, 50) }}</td>
                                    <td>
                                        @if($conta->evento)
                                            <span class="badge bg-soft-info text-info">
                                                {{ $conta->evento->nome }}
                                            </span>
                                        @endif
                                    </td>
                                    <td>{{ $conta->data_vencimento }}</td>
                                    <td class="text-end">{{ $conta->valor_formatado }}</td>
                                    <td class="text-center">
                                        @if($conta->isPago())
                                            <span class="badge bg-success">Pago</span>
                                        @else
                                            <span class="badge bg-warning">Em Aberto</span>
                                        @endif
                                    </td>
                                    <td>
                                        <a href="{{ route('contas-a-receber.show', $conta) }}"
                                           class="btn btn-sm btn-phoenix-info"
                                           data-bs-toggle="tooltip"
                                           title="Visualizar">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="fw-bold">
                                <td colspan="4" class="text-end">Total:</td>
                                <td class="text-end">
                                    R$ {{ number_format($patrocinio->contasAReceber->sum('valor'), 2, ',', '.') }}
                                </td>
                                <td colspan="2"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    @endif

    <!-- Observações -->
    @if($patrocinio->observacoes)
        <div class="card mb-4">
            <div class="card-header bg-body-tertiary">
                <h5 class="mb-0">
                    <i class="fas fa-sticky-note me-2 text-info"></i>
                    Observações
                </h5>
            </div>
            <div class="card-body">
                <p class="mb-0">{!! nl2br(e($patrocinio->observacoes)) !!}</p>
            </div>
        </div>
    @endif

    <!-- Ações -->
    <div class="d-flex justify-content-between align-items-center">
        <a href="{{ route('patrocinios.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>
            Voltar
        </a>
        <div>
            <a href="{{ route('patrocinios.edit', $patrocinio) }}" class="btn btn-warning">
                <i class="fas fa-edit me-1"></i>
                Editar
            </a>
            @if($patrocinio->contasAReceber->count() == 0)
                <button type="button" class="btn btn-danger" onclick="confirmarExclusao({{ $patrocinio->id }})">
                    <i class="fas fa-trash me-1"></i>
                    Excluir
                </button>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts-custom')
<script>
$(document).ready(function() {
    // Inicializar tooltips
    $('[data-bs-toggle="tooltip"]').tooltip();
});

function confirmarExclusao(patrocinioId) {
    if (confirm('Tem certeza que deseja excluir este patrocínio?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/patrocinios/${patrocinioId}`;

        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);

        const methodField = document.createElement('input');
        methodField.type = 'hidden';
        methodField.name = '_method';
        methodField.value = 'DELETE';
        form.appendChild(methodField);

        document.body.appendChild(form);
        form.submit();
    }
}
</script>
@endpush