@extends('layouts.app')

@section('title', $cliente->nome)

@section('content')
<div class="mx-n4 px-4 mx-lg-n6 px-lg-6 bg-body-emphasis border-bottom border-300 pt-7 border-bottom-sm-0 pb-7">
    <div class="page-header">
        <div class="row align-items-center justify-content-between">
            <div class="col-auto">
                <nav class="mb-2" aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ route('clientes.index') }}">Clientes</a></li>
                        <li class="breadcrumb-item active">{{ $cliente->nome }}</li>
                    </ol>
                </nav>
                <h1 class="page-header-title">
                    <span class="page-header-icon">
                        @if($cliente->logo_url)
                            <img src="{{ $cliente->logo_url }}" alt="{{ $cliente->nome }}" 
                                 class="avatar avatar-l rounded-circle">
                        @else
                            <span class="fa-solid fa-user-circle"></span>
                        @endif
                    </span>
                    {{ $cliente->nome }}
                </h1>
                <p class="page-header-subtitle mt-2">
                    Informações completas do cliente
                    @if(!$cliente->ativo)
                        <span class="badge badge-phoenix badge-phoenix-secondary ms-2">Inativo</span>
                    @endif
                </p>
            </div>
            <div class="col-auto">
                <div class="d-flex gap-2">
                    <a href="{{ route('clientes.edit', $cliente) }}" class="btn btn-phoenix-primary">
                        <span class="fa-solid fa-edit me-2"></span>Editar
                    </a>
                    <a href="{{ route('clientes.index') }}" class="btn btn-phoenix-secondary">
                        <span class="fa-solid fa-arrow-left me-2"></span>Voltar
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="row g-3">
        <!-- Coluna Principal -->
        <div class="col-xxl-9">
            <!-- Informações Básicas -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0">
                        <span class="fa-solid fa-info-circle me-2"></span>
                        Informações Básicas
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-body-emphasis">Nome do Cliente</label>
                            <p class="mb-0">{{ $cliente->nome }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-body-emphasis">Status</label>
                            <p class="mb-0">
                                @if($cliente->ativo)
                                    <span class="badge badge-phoenix badge-phoenix-success">
                                        <span class="fa-solid fa-check me-1"></span>Ativo
                                    </span>
                                @else
                                    <span class="badge badge-phoenix badge-phoenix-secondary">
                                        <span class="fa-solid fa-times me-1"></span>Inativo
                                    </span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-body-emphasis">Data de Criação</label>
                            <p class="mb-0">{{ $cliente->created_at->format('d/m/Y H:i') }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-body-emphasis">Última Atualização</label>
                            <p class="mb-0">{{ $cliente->updated_at->format('d/m/Y H:i') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Logo do Cliente -->
            @if($cliente->logo_url)
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0">
                        <span class="fa-solid fa-image me-2"></span>
                        Logo do Cliente
                    </h6>
                </div>
                <div class="card-body text-center">
                    <img src="{{ $cliente->logo_url }}" alt="{{ $cliente->nome }}" 
                         class="img-fluid rounded shadow-sm" style="max-height: 200px;">
                </div>
            </div>
            @endif

            <!-- Cores da Marca -->
            @if($cliente->cores_marca_formatada && count($cliente->cores_marca_formatada) > 0)
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0">
                        <span class="fa-solid fa-palette me-2"></span>
                        Cores da Marca
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        @foreach($cliente->cores_marca_formatada as $index => $cor)
                        <div class="col-md-4">
                            <div class="d-flex align-items-center">
                                <div class="color-preview me-3" 
                                     style="width: 50px; height: 50px; background-color: {{ $cor['hex'] }}; border-radius: 8px; border: 2px solid #e5e7eb;">
                                </div>
                                <div>
                                    <h6 class="mb-1">{{ ['Principal', 'Secundária', 'Apoio'][$index] ?? 'Cor ' . ($index + 1) }}</h6>
                                    <p class="mb-0 font-monospace text-uppercase">{{ $cor['hex'] }}</p>
                                    <small class="text-body-tertiary">
                                        RGB({{ $cor['rgb']['r'] }}, {{ $cor['rgb']['g'] }}, {{ $cor['rgb']['b'] }})
                                    </small>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            <!-- Guidelines -->
            @if($cliente->guidelines && isset($cliente->guidelines['path']))
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0">
                        <span class="fa-solid fa-file-pdf me-2"></span>
                        Guidelines da Marca
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center p-3 bg-body-secondary rounded">
                        <span class="fa-solid fa-file-pdf fa-3x text-danger me-3"></span>
                        <div class="flex-1">
                            <h6 class="mb-1">{{ $cliente->guidelines['original_name'] ?? 'Guidelines.pdf' }}</h6>
                            <p class="mb-1 fs-9 text-body-tertiary">
                                {{ isset($cliente->guidelines['size']) ? number_format($cliente->guidelines['size'] / 1024, 2) . ' KB' : 'Documento da marca' }}
                            </p>
                            @if(isset($cliente->guidelines['uploaded_at']))
                            <small class="text-body-tertiary">
                                Enviado em {{ \Carbon\Carbon::parse($cliente->guidelines['uploaded_at'])->format('d/m/Y H:i') }}
                            </small>
                            @endif
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ asset('storage/' . $cliente->guidelines['path']) }}" target="_blank" 
                               class="btn btn-phoenix-primary">
                                <span class="fa-solid fa-download me-1"></span>Download
                            </a>
                            <a href="{{ asset('storage/' . $cliente->guidelines['path']) }}" target="_blank" 
                               class="btn btn-phoenix-info">
                                <span class="fa-solid fa-eye me-1"></span>Visualizar
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- Redes Sociais -->
            <x-clientes.redes-sociais :cliente="$cliente" :show-actions="true" />
        </div>

        <!-- Sidebar -->
        <div class="col-xxl-3">
            <!-- Ações Rápidas -->
            <div class="card mb-3 position-sticky top-0">
                <div class="card-header">
                    <h6 class="mb-0">Ações</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('clientes.edit', $cliente) }}" class="btn btn-primary">
                            <span class="fa-solid fa-edit me-2"></span>Editar Cliente
                        </a>
                        
                        @if($cliente->ativo)
                            <button class="btn btn-warning" type="button" onclick="toggleStatus(false)">
                                <span class="fa-solid fa-pause me-2"></span>Desativar
                            </button>
                        @else
                            <button class="btn btn-success" type="button" onclick="toggleStatus(true)">
                                <span class="fa-solid fa-play me-2"></span>Ativar
                            </button>
                        @endif
                        
                        <button class="btn btn-danger" type="button" onclick="confirmarExclusao()">
                            <span class="fa-solid fa-trash me-2"></span>Excluir
                        </button>
                        
                        <a href="{{ route('clientes.index') }}" class="btn btn-phoenix-secondary">
                            <span class="fa-solid fa-arrow-left me-2"></span>Voltar
                        </a>
                    </div>
                </div>
            </div>

            <!-- Estatísticas -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0">Estatísticas</h6>
                </div>
                <div class="card-body">
                    <div class="row g-0 text-center">
                        <div class="col-6">
                            <div class="border-end border-300 pe-2">
                                <h4 class="mb-1 text-primary">{{ $cliente->redesSociais->count() }}</h4>
                                <p class="fs-10 text-body-tertiary mb-0">Redes Sociais</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="ps-2">
                                <h4 class="mb-1 text-success">{{ $cliente->redesSociaisAtivas->count() }}</h4>
                                <p class="fs-10 text-body-tertiary mb-0">Ativas</p>
                            </div>
                        </div>
                    </div>
                    
                    @if($cliente->cores_marca_formatada && count($cliente->cores_marca_formatada) > 0)
                    <hr class="my-3">
                    <div class="text-center">
                        <h6 class="fs-9 text-body-tertiary text-uppercase mb-2">Paleta de Cores</h6>
                        <div class="d-flex justify-content-center gap-1">
                            @foreach($cliente->cores_marca_formatada as $cor)
                                <div class="rounded-circle" 
                                     style="width: 20px; height: 20px; background-color: {{ $cor['hex'] }}; border: 1px solid #e5e7eb;"
                                     title="{{ $cor['hex'] }}"></div>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Informações do Sistema -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">Informações do Sistema</h6>
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <small class="text-body-tertiary">ID:</small>
                        <span class="float-end">#{{ $cliente->id }}</span>
                    </div>
                    <div class="mb-2">
                        <small class="text-body-tertiary">Criado:</small>
                        <span class="float-end">{{ $cliente->created_at->format('d/m/Y') }}</span>
                    </div>
                    <div class="mb-2">
                        <small class="text-body-tertiary">Modificado:</small>
                        <span class="float-end">{{ $cliente->updated_at->format('d/m/Y') }}</span>
                    </div>
                    @if($cliente->deleted_at)
                    <div class="mb-0">
                        <small class="text-danger">Deletado:</small>
                        <span class="float-end text-danger">{{ $cliente->deleted_at->format('d/m/Y') }}</span>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Confirmação de Exclusão -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirmar Exclusão</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex align-items-center mb-3">
                    <span class="fa-solid fa-triangle-exclamation fa-2x text-warning me-3"></span>
                    <div>
                        <h6 class="mb-1">Tem certeza que deseja excluir este cliente?</h6>
                        <p class="mb-0 text-body-tertiary">
                            <strong>{{ $cliente->nome }}</strong>
                        </p>
                    </div>
                </div>
                <div class="alert alert-warning-emphasis border border-warning-subtle">
                    <h6 class="mb-1">
                        <span class="fa-solid fa-info-circle me-2"></span>Atenção
                    </h6>
                    <p class="mb-0">Esta ação irá excluir:</p>
                    <ul class="mb-0">
                        <li>Todas as redes sociais ({{ $cliente->redesSociais->count() }})</li>
                        <li>Arquivos de logo e guidelines</li>
                        <li>Todas as configurações da marca</li>
                    </ul>
                </div>
                <p class="text-warning-emphasis mb-0">
                    <small><span class="fa-solid fa-info me-1"></span>Esta ação pode ser desfeita posteriormente.</small>
                </p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancelar</button>
                <button class="btn btn-danger" type="button" id="confirmDelete">
                    <span class="fa-solid fa-trash me-2"></span>Excluir Cliente
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const deleteModal = document.getElementById('deleteModal');
    const confirmDeleteBtn = document.getElementById('confirmDelete');
    
    window.confirmarExclusao = function() {
        new bootstrap.Modal(deleteModal).show();
    };
    
    confirmDeleteBtn.addEventListener('click', function() {
        excluirCliente();
    });
    
    window.toggleStatus = function(ativo) {
        const action = ativo ? 'ativar' : 'desativar';
        
        if (confirm(`Tem certeza que deseja ${action} este cliente?`)) {
            // Implementar toggle de status via AJAX
            fetch(`{{ route('clientes.update', $cliente) }}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    nome: '{{ $cliente->nome }}',
                    ativo: ativo
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.reload();
                } else {
                    alert('Erro ao atualizar status: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao atualizar status');
            });
        }
    };
    
    function excluirCliente() {
        fetch(`{{ route('clientes.destroy', $cliente) }}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.href = '{{ route("clientes.index") }}';
            } else {
                alert('Erro ao excluir cliente: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Erro:', error);
            alert('Erro ao excluir cliente');
        });
    }
});
</script>
@endpush