@extends('layouts.app')

@section('title', 'Nueva Interacción - Call Center')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800 text-gradient-primary">
                        <i class="fas fa-phone-alt me-2"></i>Nueva Interacción
                    </h1>
                    <p class="text-muted mb-0">Registrar una nueva interacción con un cliente</p>
                </div>
                <div>
                    <a href="{{ route('admin.call-center.logs.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i>Volver
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Mensajes de Error -->
    @if ($errors->any())
        <div class="row mb-4">
            <div class="col-12">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <h5 class="alert-heading"><i class="fas fa-exclamation-triangle me-2"></i>Errores en el formulario</h5>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        </div>
    @endif

    @if (session('error'))
        <div class="row mb-4">
            <div class="col-12">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-triangle me-2"></i>{{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        </div>
    @endif

    <!-- Formulario -->
    <div class="row">
        <div class="col-md-8">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-info-circle me-2"></i>Información de la Interacción
                    </h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.call-center.logs.store') }}" method="POST" id="interaction-form">
                        @csrf

                               <!-- Buscador de Cliente -->
                               <div class="form-group mb-3">
                                   <label for="client_search" class="form-label">Cliente <span class="text-danger">*</span></label>
                                   <div class="position-relative">
                                       <input type="text" 
                                              class="form-control @error('client_id') is-invalid @enderror" 
                                              id="client_search" 
                                              name="client_search"
                                              placeholder="Buscar cliente por nombre, {{ getTaxDocumentLabel() }}, teléfono..."
                                              autocomplete="off"
                                              value="{{ old('client_search', $client ? $client->business_name : '') }}">
                                       <input type="hidden" id="client_id" name="client_id" value="{{ old('client_id', $clientId ?? '') }}">
                                       <div id="client_search_results" class="position-absolute w-100 bg-white border rounded shadow-lg" style="display: none; z-index: 1000; max-height: 300px; overflow-y: auto;">
                                           <!-- Los resultados se mostrarán aquí -->
                                       </div>
                                   </div>
                                   @error('client_id')
                                       <div class="text-danger small mt-1">{{ $message }}</div>
                                   @enderror
                                   <div id="selected_client_display" class="mt-2" style="display: {{ $clientId ? 'block' : 'none' }};">
                                       <div class="alert alert-info mb-0">
                                           <strong id="selected_client_name">{{ $client ? $client->business_name : '' }}</strong>
                                           <button type="button" class="btn btn-sm btn-link float-end" onclick="clearClientSelection()">
                                               <i class="fas fa-times"></i> Cambiar
                                           </button>
                                       </div>
                                   </div>
                               </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="interaction_type" class="form-label">Tipo de Interacción <span class="text-danger">*</span></label>
                                    <select class="form-control @error('interaction_type') is-invalid @enderror" 
                                            id="interaction_type" 
                                            name="interaction_type" 
                                            required>
                                        <option value="">Seleccionar tipo</option>
                                        <option value="Llamada" {{ old('interaction_type') == 'Llamada' ? 'selected' : '' }}>Llamada</option>
                                        <option value="Email" {{ old('interaction_type') == 'Email' ? 'selected' : '' }}>Email</option>
                                        <option value="Visita" {{ old('interaction_type') == 'Visita' ? 'selected' : '' }}>Visita</option>
                                        <option value="Mensaje" {{ old('interaction_type') == 'Mensaje' ? 'selected' : '' }}>Mensaje</option>
                                        <option value="Reunión" {{ old('interaction_type') == 'Reunión' ? 'selected' : '' }}>Reunión</option>
                                    </select>
                                    @error('interaction_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="status" class="form-label">Estado <span class="text-danger">*</span></label>
                                    <select class="form-control @error('status') is-invalid @enderror" 
                                            id="status" 
                                            name="status" 
                                            required>
                                        <option value="">Seleccionar estado</option>
                                        <option value="Completado" {{ old('status') == 'Completado' ? 'selected' : '' }}>Completado</option>
                                        <option value="No Contesta" {{ old('status') == 'No Contesta' ? 'selected' : '' }}>No Contesta</option>
                                        <option value="Seguimiento" {{ old('status') == 'Seguimiento' ? 'selected' : '' }}>Seguimiento</option>
                                        <option value="Pendiente" {{ old('status') == 'Pendiente' ? 'selected' : '' }}>Pendiente</option>
                                        <option value="Rechazado" {{ old('status') == 'Rechazado' ? 'selected' : '' }}>Rechazado</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="duration" class="form-label">Duración</label>
                                    <input type="text" 
                                           class="form-control @error('duration') is-invalid @enderror" 
                                           id="duration" 
                                           name="duration" 
                                           value="{{ old('duration') }}"
                                           placeholder="Ej: 15 min, 30 min, 1h 30m">
                                    @error('duration')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Duración de la llamada o interacción</small>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="outcome" class="form-label">Resultado</label>
                                    <select class="form-control @error('outcome') is-invalid @enderror" 
                                            id="outcome" 
                                            name="outcome">
                                        <option value="">Seleccionar resultado</option>
                                        <option value="Pago Programado" {{ old('outcome') == 'Pago Programado' ? 'selected' : '' }}>Pago Programado</option>
                                        <option value="Interesado" {{ old('outcome') == 'Interesado' ? 'selected' : '' }}>Interesado</option>
                                        <option value="No Interesado" {{ old('outcome') == 'No Interesado' ? 'selected' : '' }}>No Interesado</option>
                                        <option value="Rechazado" {{ old('outcome') == 'Rechazado' ? 'selected' : '' }}>Rechazado</option>
                                        <option value="Información Solicitada" {{ old('outcome') == 'Información Solicitada' ? 'selected' : '' }}>Información Solicitada</option>
                                        <option value="Problema Resuelto" {{ old('outcome') == 'Problema Resuelto' ? 'selected' : '' }}>Problema Resuelto</option>
                                        <option value="Escalado" {{ old('outcome') == 'Escalado' ? 'selected' : '' }}>Escalado</option>
                                        <option value="Otro" {{ old('outcome') == 'Otro' ? 'selected' : '' }}>Otro</option>
                                    </select>
                                    @error('outcome')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label for="notes" class="form-label">Notas de la Interacción <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('notes') is-invalid @enderror" 
                                      id="notes" 
                                      name="notes" 
                                      rows="5" 
                                      required
                                      placeholder="Describe lo que se habló con el cliente, sus respuestas, compromisos, etc.">{{ old('notes') }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3" id="follow_up_date_group" style="display: none;">
                                    <label for="follow_up_date" class="form-label">Fecha de Seguimiento <span class="text-danger">*</span></label>
                                    <input type="datetime-local" 
                                           class="form-control @error('follow_up_date') is-invalid @enderror" 
                                           id="follow_up_date" 
                                           name="follow_up_date" 
                                           value="{{ old('follow_up_date') }}">
                                    @error('follow_up_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Fecha y hora para realizar el seguimiento</small>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group mb-3" id="scheduled_payment_date_group" style="display: none;">
                                    <label for="scheduled_payment_date" class="form-label">Fecha de Pago Programado <span class="text-danger">*</span></label>
                                    <input type="date" 
                                           class="form-control @error('scheduled_payment_date') is-invalid @enderror" 
                                           id="scheduled_payment_date" 
                                           name="scheduled_payment_date" 
                                           value="{{ old('scheduled_payment_date') }}">
                                    @error('scheduled_payment_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Fecha en que el cliente programó realizar el pago</small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>Guardar Interacción
                            </button>
                            <a href="{{ route('admin.call-center.logs.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i>Cancelar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Información del Cliente -->
        <div class="col-md-4">
            <div class="card shadow" id="client-info-card" style="display: none;">
                <div class="card-header py-3 bg-primary text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-user me-2"></i>Información del Cliente
                    </h6>
                </div>
                <div class="card-body" id="client-info-content">
                    <div class="text-center py-3">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Cargando...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
#client_search_results {
    top: 100%;
    left: 0;
    margin-top: 2px;
}

.client-result-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #e9ecef;
}

.client-result-item:hover {
    background-color: #f8f9fa;
}

.client-result-item:last-child {
    border-bottom: none;
}

.client-info-section {
    margin-bottom: 20px;
}

.client-info-section h6 {
    color: #495057;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
let searchTimeout;
let selectedClientId = null;

$(document).ready(function() {
    // Buscador de clientes
    $('#client_search').on('input', function() {
        const query = $(this).val();
        
        if (query.length < 2) {
            $('#client_search_results').hide();
            return;
        }

        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            searchClients(query);
        }, 300);
    });

    // Ocultar resultados al hacer clic fuera
    $(document).on('click', function(e) {
        if (!$(e.target).closest('#client_search, #client_search_results').length) {
            $('#client_search_results').hide();
        }
    });

    // Toggle campos según estado y resultado
    $('#status').on('change', toggleFollowUpDate);
    $('#outcome').on('change', toggleScheduledPaymentDate);

    // Validar formulario antes de enviar
    $('#interaction-form').on('submit', function(e) {
        // Verificar que el cliente esté seleccionado
        const clientId = $('#client_id').val();
        if (!clientId || !selectedClientId) {
            e.preventDefault();
            alert('Debe seleccionar un cliente. Por favor, busque y seleccione un cliente de la lista.');
            $('#client_search').focus();
            return false;
        }

        console.log('Enviando formulario con client_id:', clientId);

        // Verificar que si el estado es "Seguimiento", haya fecha de seguimiento
        if ($('#status').val() === 'Seguimiento' && !$('#follow_up_date').val()) {
            e.preventDefault();
            alert('Debe especificar una fecha de seguimiento cuando el estado es "Seguimiento".');
            $('#follow_up_date').focus();
            return false;
        }

        // Verificar que si el resultado es "Pago Programado", haya fecha de pago
        if ($('#outcome').val() === 'Pago Programado' && !$('#scheduled_payment_date').val()) {
            e.preventDefault();
            alert('Debe especificar una fecha de pago programado cuando el resultado es "Pago Programado".');
            $('#scheduled_payment_date').focus();
            return false;
        }

        // Asegurar que el client_id esté presente en el formulario
        if (!$('#client_id').val()) {
            e.preventDefault();
            alert('Error: No se pudo obtener el ID del cliente. Por favor, seleccione el cliente nuevamente.');
            return false;
        }
    });
});

function searchClients(query) {
    $.ajax({
        url: '{{ route("admin.call-center.clients.search") }}',
        method: 'GET',
        data: { q: query },
        success: function(clients) {
            if (clients.length === 0) {
                $('#client_search_results').html('<div class="p-3 text-muted">No se encontraron clientes</div>').show();
                return;
            }

            let html = '';
            clients.forEach(function(client) {
                html += `
                    <div class="client-result-item" onclick="selectClient(${client.id}, '${escapeHtml(client.business_name)}', '${client.tax_id || ''}', '${client.phone || ''}')">
                        <strong>${escapeHtml(client.business_name)}</strong><br>
                        <small class="text-muted">
                            {{ getTaxDocumentLabel() }}: ${client.tax_id || 'N/A'} | 
                            Tel: ${client.phone || 'N/A'}
                        </small>
                    </div>
                `;
            });
            $('#client_search_results').html(html).show();
        },
        error: function() {
            $('#client_search_results').html('<div class="p-3 text-danger">Error al buscar clientes</div>').show();
        }
    });
}

function selectClient(clientId, clientName, taxId, phone) {
    selectedClientId = clientId;
    $('#client_id').val(clientId);
    $('#client_search').val(clientName);
    $('#client_search_results').hide();
    $('#selected_client_display').show();
    $('#selected_client_name').text(clientName + ' - ' + (phone || 'Sin teléfono'));
    
    // Validar que el campo se haya llenado correctamente
    if (!$('#client_id').val() || $('#client_id').val() != clientId) {
        console.error('Error: No se pudo establecer el client_id');
        alert('Error al seleccionar el cliente. Por favor, intente nuevamente.');
        return;
    }
    
    console.log('Cliente seleccionado:', clientId, clientName);
    console.log('client_id field value:', $('#client_id').val());
    
    // Cargar información del cliente
    loadClientInfo(clientId);
}

function clearClientSelection() {
    selectedClientId = null;
    $('#client_id').val('');
    $('#client_search').val('');
    $('#selected_client_display').hide();
    $('#client-info-card').hide();
}

function loadClientInfo(clientId) {
    $('#client-info-card').show();
    $('#client-info-content').html(`
        <div class="text-center py-3">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Cargando...</span>
            </div>
        </div>
    `);

    $.ajax({
        url: `{{ url('admin/call-center/clients') }}/${clientId}/info`,
        method: 'GET',
        success: function(data) {
            renderClientInfo(data);
        },
        error: function() {
            $('#client-info-content').html('<div class="alert alert-danger">Error al cargar información del cliente</div>');
        }
    });
}

function renderClientInfo(data) {
    const client = data.client;
    const totalDebt = parseFloat(data.total_debt || 0);
    const overdueAmount = parseFloat(data.overdue_amount || 0);
    const overdueCount = data.overdue_count || 0;
    const creditLimit = parseFloat(data.credit_limit || 0);
    const creditUsed = parseFloat(data.credit_used || 0);
    const creditAvailable = parseFloat(data.credit_available || 0);

    let html = '';

    // Información básica
    html += `
        <div class="client-info-section">
            <h6><i class="fas fa-info-circle me-1"></i>Información Básica</h6>
            <p class="mb-1"><strong>Nombre:</strong> ${escapeHtml(client.business_name)}</p>
            ${client.phone ? `<p class="mb-1"><strong>Teléfono:</strong> ${escapeHtml(client.phone)}</p>` : ''}
            ${client.email ? `<p class="mb-1"><strong>Email:</strong> ${escapeHtml(client.email)}</p>` : ''}
            ${client.salesman ? `<p class="mb-0"><strong>Vendedor:</strong> ${escapeHtml(client.salesman.first_name)} ${escapeHtml(client.salesman.last_name)}</p>` : ''}
        </div>
    `;

    // Deuda
    html += `
        <div class="client-info-section">
            <h6><i class="fas fa-dollar-sign me-1"></i>Deuda</h6>
            <p class="mb-1"><strong>Total Deuda:</strong> <span class="badge bg-${totalDebt > 0 ? 'danger' : 'success'}">$${formatNumber(totalDebt)}</span></p>
            ${overdueCount > 0 ? `<p class="mb-1"><strong>Cuentas Vencidas:</strong> <span class="badge bg-warning">${overdueCount}</span></p>` : ''}
            ${overdueAmount > 0 ? `<p class="mb-0"><strong>Monto Vencido:</strong> <span class="badge bg-danger">$${formatNumber(overdueAmount)}</span></p>` : ''}
        </div>
    `;

    // Crédito
    if (creditLimit > 0) {
        const creditPercentage = (creditUsed / creditLimit) * 100;
        html += `
            <div class="client-info-section">
                <h6><i class="fas fa-credit-card me-1"></i>Línea de Crédito</h6>
                <p class="mb-1"><strong>Límite:</strong> $${formatNumber(creditLimit)}</p>
                <p class="mb-1"><strong>Usado:</strong> $${formatNumber(creditUsed)}</p>
                <p class="mb-1"><strong>Disponible:</strong> $${formatNumber(creditAvailable)}</p>
                <div class="progress" style="height: 20px;">
                    <div class="progress-bar ${creditPercentage > 80 ? 'bg-danger' : creditPercentage > 50 ? 'bg-warning' : 'bg-success'}" 
                         role="progressbar" 
                         style="width: ${creditPercentage}%">
                        ${creditPercentage.toFixed(1)}%
                    </div>
                </div>
            </div>
        `;
    }

    // Documentos de deuda
    if (data.debt_documents && data.debt_documents.length > 0) {
        html += `
            <div class="client-info-section">
                <h6><i class="fas fa-file-invoice me-1"></i>Documentos de Deuda (${data.debt_documents.length})</h6>
                <div style="max-height: 150px; overflow-y: auto;">
        `;
        data.debt_documents.forEach(function(doc) {
            const dueDate = new Date(doc.due_date);
            const isOverdue = dueDate < new Date();
            html += `
                <div class="border-bottom pb-2 mb-2">
                    <small><strong>${doc.account_number || 'N/A'}</strong></small><br>
                    <small>Balance: $${formatNumber(doc.current_balance)}</small><br>
                    <small class="${isOverdue ? 'text-danger' : ''}">
                        Vence: ${dueDate.toLocaleDateString()}
                        ${isOverdue ? ' (Vencido)' : ''}
                    </small>
                </div>
            `;
        });
        html += `</div></div>`;
    }

    // Historial reciente de compras
    if (data.recent_invoices && data.recent_invoices.length > 0) {
        html += `
            <div class="client-info-section">
                <h6><i class="fas fa-shopping-cart me-1"></i>Últimas Compras</h6>
                <div style="max-height: 150px; overflow-y: auto;">
        `;
        data.recent_invoices.forEach(function(invoice) {
            html += `
                <div class="border-bottom pb-2 mb-2">
                    <small><strong>Factura ${invoice.invoice_number || 'N/A'}</strong></small><br>
                    <small>Fecha: ${new Date(invoice.invoice_date).toLocaleDateString()}</small><br>
                    <small>Total: $${formatNumber(invoice.total_amount_usd || 0)}</small>
                </div>
            `;
        });
        html += `</div></div>`;
    }

    // Historial reciente de pagos
    if (data.recent_payments && data.recent_payments.length > 0) {
        html += `
            <div class="client-info-section">
                <h6><i class="fas fa-money-bill-wave me-1"></i>Últimos Pagos</h6>
                <div style="max-height: 150px; overflow-y: auto;">
        `;
        data.recent_payments.forEach(function(payment) {
            html += `
                <div class="border-bottom pb-2 mb-2">
                    <small><strong>$${formatNumber(payment.payment_amount || 0)}</strong></small><br>
                    <small>Fecha: ${new Date(payment.payment_date).toLocaleDateString()}</small><br>
                    <small>Cuenta: ${payment.accounts_receivable?.account_number || 'N/A'}</small>
                </div>
            `;
        });
        html += `</div></div>`;
    }

    $('#client-info-content').html(html);
}

function toggleFollowUpDate() {
    if ($('#status').val() === 'Seguimiento') {
        $('#follow_up_date_group').show();
        $('#follow_up_date').attr('required', true);
    } else {
        $('#follow_up_date_group').hide();
        $('#follow_up_date').attr('required', false).val('');
    }
}

function toggleScheduledPaymentDate() {
    if ($('#outcome').val() === 'Pago Programado') {
        $('#scheduled_payment_date_group').show();
        $('#scheduled_payment_date').attr('required', true);
    } else {
        $('#scheduled_payment_date_group').hide();
        $('#scheduled_payment_date').attr('required', false).val('');
    }
}

function escapeHtml(text) {
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return text ? text.replace(/[&<>"']/g, m => map[m]) : '';
}

function formatNumber(num) {
    return parseFloat(num || 0).toLocaleString('es-ES', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });
}

// Inicializar estado de campos
$(document).ready(function() {
    toggleFollowUpDate();
    toggleScheduledPaymentDate();
});
</script>
@endpush