@extends('layouts.admin')

@section('title', 'Agregar Método de Pago')

@section('content')
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Agregar Método de Pago</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.metodos-pago.index') }}">Métodos de Pago</a></li>
                        <li class="breadcrumb-item active">Agregar</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Información del Método de Pago</h4>
                </div>
                <div class="card-body">
                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('admin.metodos-pago.store') }}" method="POST" id="formMetodoPago">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="tipo_pago" class="form-label">Tipo de Pago <span class="text-danger">*</span></label>
                                    <select class="form-select @error('tipo_pago') is-invalid @enderror" 
                                            id="tipo_pago" name="tipo_pago" required>
                                        <option value="">Seleccionar tipo de pago</option>
                                        @foreach($tiposPago as $key => $tipo)
                                            <option value="{{ $key }}" {{ old('tipo_pago') == $key ? 'selected' : '' }}>
                                                {{ $tipo }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('tipo_pago')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Selecciona el tipo de método de pago</div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="nombre" class="form-label">Nombre del Método <span class="text-danger">*</span></label>
                                    <input type="text" 
                                           class="form-control @error('nombre') is-invalid @enderror" 
                                           id="nombre" 
                                           name="nombre" 
                                           value="{{ old('nombre') }}" 
                                           placeholder="Ej: Efectivo, Transferencia Bancaria, etc."
                                           required>
                                    @error('nombre')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Nombre descriptivo del método de pago</div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="descripcion" class="form-label">Descripción</label>
                            <textarea class="form-control @error('descripcion') is-invalid @enderror" 
                                      id="descripcion" 
                                      name="descripcion" 
                                      rows="3" 
                                      placeholder="Descripción opcional del método de pago...">{{ old('descripcion') }}</textarea>
                            @error('descripcion')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Información adicional sobre el método de pago (opcional)</div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" 
                                               type="checkbox" 
                                               id="requiere_comprobante" 
                                               name="requiere_comprobante"
                                               {{ old('requiere_comprobante') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="requiere_comprobante">
                                            Requiere Comprobante/Imagen
                                        </label>
                                    </div>
                                    <div class="form-text">Marcar si este método requiere adjuntar comprobante o imagen</div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" 
                                               type="checkbox" 
                                               id="activo" 
                                               name="activo"
                                               {{ old('activo', true) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="activo">
                                            Estado Activo
                                        </label>
                                    </div>
                                    <div class="form-text">Determina si el método está disponible para usar</div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('admin.metodos-pago.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i> Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> Guardar Método de Pago
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Información de Ayuda</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h6><i class="fas fa-info-circle me-1"></i> Tipos de Pago</h6>
                        <ul class="mb-0">
                            <li><strong>Efectivo:</strong> Pagos en dinero físico</li>
                            <li><strong>Transferencia:</strong> Transferencias bancarias</li>
                            <li><strong>Depósito:</strong> Depósitos bancarios</li>
                        </ul>
                    </div>

                    <div class="alert alert-warning">
                        <h6><i class="fas fa-exclamation-triangle me-1"></i> Comprobantes</h6>
                        <p class="mb-0">Si marcas "Requiere Comprobante", los usuarios deberán adjuntar una imagen o documento como prueba del pago.</p>
                    </div>

                    <div class="alert alert-success">
                        <h6><i class="fas fa-lightbulb me-1"></i> Consejos</h6>
                        <ul class="mb-0">
                            <li>Usa nombres descriptivos y claros</li>
                            <li>Agrega descripciones para métodos complejos</li>
                            <li>Activa solo los métodos que realmente uses</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Vista Previa</h5>
                </div>
                <div class="card-body">
                    <div id="preview-card" class="border rounded p-3" style="display: none;">
                        <div class="d-flex align-items-center mb-2">
                            <div class="flex-grow-1">
                                <h6 class="mb-0" id="preview-nombre">Nombre del método</h6>
                                <small class="text-muted" id="preview-tipo">Tipo de pago</small>
                            </div>
                            <div class="flex-shrink-0">
                                <span class="badge bg-primary" id="preview-estado">Activo</span>
                            </div>
                        </div>
                        <p class="text-muted mb-2" id="preview-descripcion" style="display: none;">Descripción</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <small class="text-muted">
                                <i class="fas fa-receipt me-1"></i>
                                <span id="preview-comprobante">No requiere comprobante</span>
                            </small>
                        </div>
                    </div>
                    <div id="preview-placeholder" class="text-center text-muted">
                        <i class="fas fa-eye fa-2x mb-2"></i>
                        <p>Completa el formulario para ver la vista previa</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    console.log('Payment methods create form loaded');
    
    // Vista previa en tiempo real
    function updatePreview() {
        try {
            const nombre = $('#nombre').val() || '';
            const tipo = $('#tipo_pago').val() || '';
            const descripcion = $('#descripcion').val() || '';
            const requiereComprobante = $('#requiere_comprobante').is(':checked');
            const activo = $('#activo').is(':checked');

            console.log('Updating preview:', { nombre, tipo, descripcion, requiereComprobante, activo });

            if (nombre.trim() || tipo) {
                $('#preview-card').show();
                $('#preview-placeholder').hide();

                $('#preview-nombre').text(nombre.trim() || 'Nombre del método');
                
                const tipoTexto = $('#tipo_pago option:selected').text() || 'Tipo de pago';
                $('#preview-tipo').text(tipoTexto);

                if (descripcion.trim()) {
                    $('#preview-descripcion').text(descripcion.trim()).show();
                } else {
                    $('#preview-descripcion').hide();
                }

                $('#preview-estado').text(activo ? 'Activo' : 'Inactivo')
                                    .removeClass('bg-primary bg-secondary')
                                    .addClass(activo ? 'bg-primary' : 'bg-secondary');

                $('#preview-comprobante').text(requiereComprobante ? 'Requiere comprobante' : 'No requiere comprobante');
            } else {
                $('#preview-card').hide();
                $('#preview-placeholder').show();
            }
        } catch (error) {
            console.error('Error updating preview:', error);
        }
    }

    // Eventos para actualizar vista previa
    $('#nombre, #tipo_pago, #descripcion').on('input change keyup', function() {
        console.log('Input changed:', $(this).attr('id'), $(this).val());
        updatePreview();
    });
    
    $('#requiere_comprobante, #activo').on('change', function() {
        console.log('Checkbox changed:', $(this).attr('id'), $(this).is(':checked'));
        updatePreview();
    });

    // Validación del formulario
    $('#formMetodoPago').on('submit', function(e) {
        console.log('Form submitted');
        let isValid = true;
        
        // Limpiar errores previos
        $('.is-invalid').removeClass('is-invalid');
        
        // Validar nombre
        const nombre = $('#nombre').val().trim();
        if (!nombre) {
            isValid = false;
            $('#nombre').addClass('is-invalid');
            console.log('Validation error: nombre is required');
        }

        // Validar tipo de pago
        const tipoPago = $('#tipo_pago').val();
        if (!tipoPago) {
            isValid = false;
            $('#tipo_pago').addClass('is-invalid');
            console.log('Validation error: tipo_pago is required');
        }

        if (!isValid) {
            e.preventDefault();
            alert('Por favor completa todos los campos requeridos');
            return false;
        }
        
        console.log('Form validation passed');
    });

    // Sugerencias automáticas basadas en el tipo
    $('#tipo_pago').on('change', function() {
        const tipo = $(this).val();
        const nombreInput = $('#nombre');
        
        console.log('Tipo changed to:', tipo);
        
        if (!nombreInput.val().trim()) {
            switch(tipo) {
                case 'efectivo':
                    nombreInput.val('Efectivo');
                    break;
                case 'transferencia':
                    nombreInput.val('Transferencia Bancaria');
                    break;
                case 'deposito':
                    nombreInput.val('Depósito Bancario');
                    break;
            }
        }

        // Sugerir si requiere comprobante
        if (tipo === 'transferencia' || tipo === 'deposito') {
            $('#requiere_comprobante').prop('checked', true);
        } else if (tipo === 'efectivo') {
            $('#requiere_comprobante').prop('checked', false);
        }
        
        updatePreview();
    });

    // Inicializar vista previa
    setTimeout(function() {
        updatePreview();
    }, 100);
    
    console.log('Payment methods form initialized');
});
</script>
@endsection