@extends('layouts.app')

@section('title', 'Configuraciones Globales del Sistema')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-dark">
                <i class="fas fa-cog me-2 text-primary"></i>Configuraciones Globales del Sistema
            </h1>
            <p class="text-muted mb-0 small">Centralice todas las configuraciones del sistema</p>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <form action="{{ route('admin.settings.update') }}" method="POST">
        @csrf
        
        <ul class="nav nav-tabs" id="settingsTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab">
                    <i class="fas fa-building me-2"></i>General
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="contabilidad-tab" data-bs-toggle="tab" data-bs-target="#contabilidad" type="button" role="tab">
                    <i class="fas fa-book me-2"></i>Contabilidad
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="notificaciones-tab" data-bs-toggle="tab" data-bs-target="#notificaciones" type="button" role="tab">
                    <i class="fas fa-envelope me-2"></i>Plantillas de Notificación
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="comisiones-tab" data-bs-toggle="tab" data-bs-target="#comisiones" type="button" role="tab">
                    <i class="fas fa-percent me-2"></i>Comisiones
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="notificaciones-cxc-tab" data-bs-toggle="tab" data-bs-target="#notificaciones-cxc" type="button" role="tab">
                    <i class="fas fa-bell me-2"></i>Notificaciones CxC
                </button>
            </li>
        </ul>

        <div class="tab-content card border-top-0 rounded-top-0">
            
            <div class="tab-pane fade show active p-4" id="general" role="tabpanel">
                <h4 class="mb-4"><i class="fas fa-building me-2 text-primary"></i>Información de la Empresa</h4>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="company_name" class="form-label">Nombre de la Empresa <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="company_name" name="company_name" 
                                   value="{{ config('settings.company_name', old('company_name', config('app.name'))) }}" required>
                            <small class="text-muted">Este nombre aparecerá en los correos y documentos</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade p-4" id="contabilidad" role="tabpanel">
                <h4 class="mb-4"><i class="fas fa-book me-2 text-primary"></i>Cuentas Contables por Defecto</h4>
                <p class="text-muted mb-4">Configure los códigos de las cuentas contables que se usarán automáticamente al crear asientos.</p>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="acct_receivable_code" class="form-label">Cuenta: Cuentas por Cobrar <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="acct_receivable_code" name="acct_receivable_code" 
                                   value="{{ config('settings.acct_receivable_code', old('acct_receivable_code', '1102-01')) }}" required>
                            <small class="text-muted">Ejemplo: 1102-01</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="acct_sales_revenue_code" class="form-label">Cuenta: Ingresos por Ventas <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="acct_sales_revenue_code" name="acct_sales_revenue_code" 
                                   value="{{ config('settings.acct_sales_revenue_code', old('acct_sales_revenue_code', '4101-01')) }}" required>
                            <small class="text-muted">Ejemplo: 4101-01</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="acct_cash_box_code" class="form-label">Cuenta: Caja/Banco General <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="acct_cash_box_code" name="acct_cash_box_code" 
                                   value="{{ config('settings.acct_cash_box_code', old('acct_cash_box_code', '1101-01')) }}" required>
                            <small class="text-muted">Ejemplo: 1101-01</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade p-4" id="notificaciones" role="tabpanel">
                <h4 class="mb-4"><i class="fas fa-envelope me-2 text-primary"></i>Plantillas de Confirmación de Pago</h4>
                
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Placeholders disponibles:</strong>
                    <ul class="mb-0 mt-2">
                        <li><code>[cliente_nombre]</code> - Nombre del cliente</li>
                        <li><code>[factura_numero]</code> - Número de factura</li>
                        <li><code>[monto_usd]</code> - Monto en USD</li>
                        <li><code>[monto_local]</code> - Monto en moneda local</li>
                        <li><code>[moneda_local]</code> - Código de moneda local (VEF, USD, etc.)</li>
                        <li><code>[referencia]</code> - Número de referencia del pago</li>
                        <li><code>[saldo_pendiente]</code> - Saldo pendiente en USD</li>
                    </ul>
                </div>

                <hr class="my-4">

                <h5 class="mb-3"><i class="fab fa-whatsapp me-2 text-success"></i>Plantilla de WhatsApp</h5>
                <div class="mb-4">
                    <label for="template_whatsapp_payment" class="form-label">Mensaje de WhatsApp</label>
                    <textarea class="form-control" id="template_whatsapp_payment" name="template_whatsapp_payment" rows="6" required>{{ config('settings.template_whatsapp_payment', old('template_whatsapp_payment', '¡Hola [cliente_nombre]! Te confirmamos que hemos recibido tu pago de *[moneda_local] [monto_local]* (Ref: *[referencia]*) aplicado a la factura *[factura_numero]*. Tu nuevo saldo pendiente es: *$[saldo_pendiente] USD*. Gracias por tu confianza.')) }}</textarea>
                    <small class="text-muted">Use *texto* para negrita en WhatsApp</small>
                </div>

                <hr class="my-4">

                <h5 class="mb-3"><i class="fas fa-envelope me-2 text-primary"></i>Plantilla de Correo Electrónico</h5>
                <div class="mb-3">
                    <label for="template_email_subject" class="form-label">Asunto del Correo</label>
                    <input type="text" class="form-control" id="template_email_subject" name="template_email_subject" 
                           value="{{ config('settings.template_email_subject', old('template_email_subject', 'Confirmación de Recibo de Pago - Factura [factura_numero]')) }}" required>
                </div>
                <div class="mb-4">
                    <label for="template_email_body" class="form-label">Cuerpo del Correo (HTML permitido)</label>
                    <textarea class="form-control font-monospace" id="template_email_body" name="template_email_body" rows="10" required>{{ config('settings.template_email_body', old('template_email_body', 'Hola [cliente_nombre],<br><br>Hemos recibido y aplicado exitosamente tu pago.<br><br><b>Detalles del Pago:</b><br>Monto Aplicado (USD): $[monto_usd]<br>Monto en Moneda Local: [moneda_local] [monto_local]<br>Referencia: [referencia]<br><br><b>Estado de tu Factura ([factura_numero]):</b><br>Saldo Pendiente: <b>$[saldo_pendiente] USD</b><br><br>Gracias por tu confianza.')) }}</textarea>
                    <small class="text-muted">Puede usar etiquetas HTML como &lt;b&gt;, &lt;br&gt;, etc.</small>
                </div>
            </div>

            <div class="tab-pane fade p-4" id="comisiones" role="tabpanel">
                <h4 class="mb-4"><i class="fas fa-percent me-2 text-primary"></i>Configuración de Comisiones de Vendedores</h4>
                <p class="text-muted mb-4">Configure cómo se calculan y adjudican las comisiones de los vendedores.</p>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="commission_calculation_base" class="form-label">Base del Cálculo de Comisión <span class="text-danger">*</span></label>
                            @php $comm_base = config('settings.commission_calculation_base', 'subtotal'); @endphp
                            <select class="form-select" id="commission_calculation_base" name="commission_calculation_base" required>
                                <option value="subtotal" {{ $comm_base == 'subtotal' ? 'selected' : '' }}>Subtotal (Venta sin Impuestos)</option>
                                <option value="total" {{ $comm_base == 'total' ? 'selected' : '' }}>Total (Venta con Impuestos)</option>
                            </select>
                            <small class="text-muted">Define si la comisión se calcula sobre el subtotal o el total de la venta.</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="commission_payment_days" class="form-label">Días Límite para Pagar la Comisión <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="commission_payment_days" name="commission_payment_days" 
                                   value="{{ config('settings.commission_payment_days', old('commission_payment_days', 30)) }}" 
                                   min="1" max="365" required>
                            <small class="text-muted">Si la factura se cobra después de estos días, el vendedor pierde la comisión.</small>
                        </div>
                    </div>
                </div>

                <div class="alert alert-info mt-3">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Nota:</strong> El porcentaje de comisión se define por producto. Si un producto tiene un porcentaje específico, se usará ese; de lo contrario, se usará el porcentaje general del vendedor.
                </div>
            </div>

            <div class="tab-pane fade p-4" id="notificaciones-cxc" role="tabpanel">
                <h4 class="mb-4"><i class="fas fa-bell me-2 text-primary"></i>Plantillas de Notificación de Cuentas por Cobrar</h4>
                <p class="text-muted mb-4">Configure los mensajes que se enviarán a los clientes como recordatorio de pago pendiente.</p>
                
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Placeholders disponibles:</strong>
                    <ul class="mb-0 mt-2">
                        <li><code>[cliente_nombre]</code> - Nombre o razón social del cliente</li>
                        <li><code>[cliente_contacto]</code> - Nombre de contacto del cliente</li>
                        <li><code>[factura_numero]</code> - Número de factura o nota de crédito</li>
                        <li><code>[cuenta_numero]</code> - Número de cuenta por cobrar</li>
                        <li><code>[monto_original]</code> - Monto original de la cuenta</li>
                        <li><code>[saldo_actual]</code> - Saldo actual pendiente</li>
                        <li><code>[monto_pagado]</code> - Monto total pagado</li>
                        <li><code>[fecha_vencimiento]</code> - Fecha de vencimiento</li>
                        <li><code>[dias_vencido]</code> - Días vencidos (si aplica)</li>
                        <li><code>[empresa_nombre]</code> - Nombre de la empresa</li>
                        <li><code>[empresa_telefono]</code> - Teléfono de la empresa</li>
                        <li><code>[empresa_email]</code> - Email de la empresa</li>
                    </ul>
                </div>

                <hr class="my-4">

                <h5 class="mb-3"><i class="fab fa-whatsapp me-2 text-success"></i>Plantilla de WhatsApp</h5>
                <div class="mb-4">
                    <label for="notification_whatsapp_template" class="form-label">Mensaje de WhatsApp para Recordatorio de Pago</label>
                    <textarea class="form-control" id="notification_whatsapp_template" name="notification_whatsapp_template" rows="8" required>{{ config('settings.notification_whatsapp_template', old('notification_whatsapp_template', '¡Hola [cliente_nombre]! 

Te recordamos que tienes un saldo pendiente de pago:

📋 *Factura:* [factura_numero]
💰 *Monto Original:* $[monto_original]
💵 *Saldo Actual:* $[saldo_actual]
📅 *Fecha de Vencimiento:* [fecha_vencimiento]

Por favor, realiza el pago correspondiente a la brevedad posible.

Para más información, contáctanos:
📞 [empresa_telefono]
📧 [empresa_email]

Gracias por tu atención.')) }}</textarea>
                    <small class="text-muted">Use *texto* para negrita en WhatsApp. El mensaje se enviará vía WhatsApp Web (sin API).</small>
                </div>

                <hr class="my-4">

                <h5 class="mb-3"><i class="fas fa-envelope me-2 text-primary"></i>Plantilla de Correo Electrónico</h5>
                <div class="mb-3">
                    <label for="notification_email_subject" class="form-label">Asunto del Correo</label>
                    <input type="text" class="form-control" id="notification_email_subject" name="notification_email_subject" 
                           value="{{ config('settings.notification_email_subject', old('notification_email_subject', 'Recordatorio de Pago Pendiente - Factura [factura_numero]')) }}" required>
                </div>
                <div class="mb-4">
                    <label for="notification_email_body" class="form-label">Cuerpo del Correo (HTML permitido)</label>
                    <textarea class="form-control font-monospace" id="notification_email_body" name="notification_email_body" rows="12" required>{{ config('settings.notification_email_body', old('notification_email_body', '<p>Estimado/a <strong>[cliente_nombre]</strong>,</p>

<p>Le recordamos que tiene un saldo pendiente de pago:</p>

<table style="border-collapse: collapse; width: 100%; margin: 20px 0;">
    <tr>
        <td style="padding: 8px; border-bottom: 1px solid #ddd;"><strong>Factura:</strong></td>
        <td style="padding: 8px; border-bottom: 1px solid #ddd;">[factura_numero]</td>
    </tr>
    <tr>
        <td style="padding: 8px; border-bottom: 1px solid #ddd;"><strong>Monto Original:</strong></td>
        <td style="padding: 8px; border-bottom: 1px solid #ddd;">$[monto_original]</td>
    </tr>
    <tr>
        <td style="padding: 8px; border-bottom: 1px solid #ddd;"><strong>Saldo Actual:</strong></td>
        <td style="padding: 8px; border-bottom: 1px solid #ddd;"><strong style="color: #dc3545;">$[saldo_actual]</strong></td>
    </tr>
    <tr>
        <td style="padding: 8px; border-bottom: 1px solid #ddd;"><strong>Fecha de Vencimiento:</strong></td>
        <td style="padding: 8px; border-bottom: 1px solid #ddd;">[fecha_vencimiento]</td>
    </tr>
</table>

<p>Por favor, realice el pago correspondiente a la brevedad posible.</p>

<p>Para más información, puede contactarnos:</p>
<ul>
    <li><strong>Teléfono:</strong> [empresa_telefono]</li>
    <li><strong>Email:</strong> [empresa_email]</li>
</ul>

<p>Gracias por su atención.</p>

<p>Atentamente,<br>
<strong>[empresa_nombre]</strong></p>')) }}</textarea>
                    <small class="text-muted">Puede usar etiquetas HTML como &lt;b&gt;, &lt;br&gt;, &lt;table&gt;, etc.</small>
                </div>
            </div>

        </div>

        <div class="card-footer bg-white border-top">
            <div class="d-flex justify-content-end">
                <button type="submit" class="btn btn-primary btn-lg">
                    <i class="fas fa-save me-2"></i>Guardar Configuraciones
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Inicializar tabs de Bootstrap 5
    var triggerTabList = [].slice.call(document.querySelectorAll('#settingsTabs button'))
    triggerTabList.forEach(function (triggerEl) {
        var tabTrigger = new bootstrap.Tab(triggerEl)

        triggerEl.addEventListener('click', function (event) {
            event.preventDefault()
            tabTrigger.show()
        })
    });
});
</script>
@endpush