@extends('template_pages.session')

@section('page_title', 'Detalhes do Cliente Institucional #' . $client->id)
@section('page_icon', 'handshake')

@php
    $module = request()->segment(1);
@endphp

@section('content_page')
<div class="card-body">
    <div class="ibox-content">

        <!-- Informações Básicas -->
        <div class="d-flex align-items-center gap-1">
            <i data-lucide="text" class="fs-4"></i>
            <h4 class="mb-0">Informações Básicas</h4>
        </div>
        <div class="row mt-3">
            <div class="col-md-4">
                <div class="p-2 border rounded bg-light mb-2">
                    <small class="text-muted">Nome Empresarial</small>
                    <div>{{ $client->name ?? 'Não informado' }}</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-2 border rounded bg-light mb-2">
                    <small class="text-muted">Website</small>
                    <div>
                        @if($client->website)
                            <a href="{{ $client->website }}" target="_blank">{{ $client->website }}</a>
                        @else
                            Não informado
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-2 border rounded bg-light mb-2">
                    <small class="text-muted">Tipo Empresa</small>
                    <div>{{ $client->client_type ?? 'Não informado' }}</div>
                </div>
            </div>
        </div>

        <div class="row mt-2">
            <div class="col-md-4">
                <div class="p-2 border rounded bg-light mb-2">
                    <small class="text-muted">Status</small>
                    <div id="status-display">
                        @if($client->status)
                            <span class="badge text-bg-success fs-xxs">Ativo</span>
                        @else
                            <span class="badge text-bg-danger fs-xxs">Desativado</span>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-2 border rounded bg-light mb-2">
                    <small class="text-muted">Monday ID</small>
                    <div>
                        @if($client->monday_id)
                            #{{ $client->monday_id }} {{ $mondayClientName ?? '' }}
                        @else
                            Não informado
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-2 border rounded bg-light mb-2">
                    <small class="text-muted">Data de Cadastro</small>
                    <div>{{ $client->created_at ? $client->created_at->format('d/m/Y H:i') : 'Não informado' }}</div>
                </div>
            </div>
        </div>

        <div class="border-top border-dashed my-3"></div>

        <!-- Todos os Contatos -->
        <div class="d-flex align-items-center gap-1">
            <i data-lucide="users" class="fs-4"></i>
            <h4 class="mb-0">Todos os Contatos ({{ $client->contacts->count() }})</h4>
        </div>
        <div class="row mt-3 align-items-stretch g-3">
            @foreach($client->contacts as $contact)
                <div class="col-md-6 mb-3">
                    <div class="card border {{ $client->contacts->count() > 1 ? 'h-100' : '' }}">
                        <div class="card-body p-3 d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h6 class="mb-0">{{ $contact->name }}</h6>
                                <span class="badge {{ $contact->is_primary ? 'bg-primary' : 'bg-secondary' }} text-white">
                                    {{ $contact->is_primary ? 'Principal' : 'Contato Adicional' }}
                                </span>
                            </div>
                            
                            <div class="flex-grow-1">
                                @if($contact->position)
                                    <div class="text-muted mb-2">
                                        <i data-lucide="briefcase" class="me-1" style="width: 16px; height: 16px;"></i>
                                        {{ $contact->position }}
                                    </div>
                                @endif
                                
                                @if($contact->email)
                                    <div class="mb-2">
                                        <i data-lucide="mail" class="me-1" style="width: 16px; height: 16px;"></i>
                                        <a href="mailto:{{ $contact->email }}" class="text-decoration-none">{{ $contact->email }}</a>
                                    </div>
                                @endif
                                
                                @if($contact->phone)
                                    <div class="mb-2">
                                        <i data-lucide="phone" class="me-1" style="width: 16px; height: 16px;"></i>
                                        {{ format_phone($contact->phone) }}
                                    </div>
                                @endif
                            </div>
                            
                            @if($contact->notes)
                                <div class="mt-auto pt-2 border-top">
                                    <small class="text-muted">
                                        <i data-lucide="sticky-note" class="me-1" style="width: 14px; height: 14px;"></i>
                                        {{ $contact->notes }}
                                    </small>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Botões -->
        <div class="border-top border-dashed my-3"></div>
        <div class="row mt-2">
            <div class="btn-list col-12 col-lg-auto">
                <a href="{{ route('clients.institutional.editview', ['module' => $module, 'id' => $client->id]) }}" class="btn btn-secondary">Editar</a>                
            </div>
            <div class="col-12 col-lg btn-list text-lg-end text-left mt-lg-0 mt-2">
                <a id="toggleStatus" class="btn {{ $client->status ? 'btn-danger' : 'btn-success' }}" href="javascript: void(0);">
                    {{ $client->status ? 'Desativar' : 'Ativar' }}
                </a>
            </div> 
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$("#toggleStatus").click(function() {
    const button = $(this);
    const clientId = {{ $client->id }};
    const module = '{{ $module }}';
    const isActive = button.hasClass('btn-danger'); // Se tem classe danger, está ativo
    
    const title = isActive ? "Desativar Cliente Institucional?" : "Ativar Cliente Institucional?";
    const text = isActive ? "Tem certeza que deseja desativar este cliente institucional?" : "Tem certeza que deseja ativar este cliente institucional?";
    
    showAlert("confirm", {
        title: title,
        text: text
    }, {
        onConfirm: () => {
            // Fazer requisição AJAX
            $.ajax({
                url: `{{ route('clients.institutional.toggle.status', ['module' => $module, 'id' => $client->id]) }}`,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        // Atualizar o botão
                        if (response.status) {
                            // Cliente ativado - botão deve ser "Desativar" (vermelho)
                            button.removeClass('btn-success').addClass('btn-danger');
                            button.text('Desativar');
                            // Atualizar o badge de status
                            $('#status-display').html('<span class="badge text-bg-success fs-xxs">Ativo</span>');
                        } else {
                            // Cliente desativado - botão deve ser "Ativar" (verde)
                            button.removeClass('btn-danger').addClass('btn-success');
                            button.text('Ativar');
                            // Atualizar o badge de status
                            $('#status-display').html('<span class="badge text-bg-danger fs-xxs">Desativado</span>');
                        }
                        
                        showAlert("successToast", { text: response.message });
                    } else {
                        showAlert("errorToast", { text: response.message });
                    }
                },
                error: function(xhr) {
                    let errorMessage = 'Erro interno do servidor';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    showAlert("errorToast", { text: errorMessage });
                }
            });
        },
        onCancel: () => {
            showAlert("canceledToast", { text: "Ação cancelada!" });
        }
    });
});
</script>
@endpush