@extends('adminlte::page')

@section('title', 'Nuevo Pago a Proveedor')
@section('plugins.Select2', true)
@section('plugins.Sweetalert2', true)

@section('content_header')
    <h4>Registrar Pago a Proveedor</h4>
@stop

@section('css')
<style>
    .select2-container--bootstrap4 .select2-selection {
        border: 1px solid #ced4da !important;
        min-height: 38px !important;
    }

    .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
        line-height: 36px !important;
    }

    .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }
</style>
@stop

@section('content')
    <form action="{{ route('pagos-proveedores.store') }}" method="POST" id="formPago">
        @csrf

        <div class="card">
            <div class="card-header bg-primary">
                <h3 class="card-title text-white">
                    <i class="fas fa-dollar-sign mr-2"></i>Datos del Pago
                </h3>
            </div>
            <div class="card-body">
                @if($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <h5><i class="icon fas fa-ban"></i> Error!</h5>
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="row">
                    <!-- Proveedor -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="proveedor_id">Proveedor <span class="text-danger">*</span></label>
                            <select name="proveedor_id" id="proveedor_id" class="form-control select2" required>
                                <option value="">Seleccione un proveedor</option>
                                @foreach($proveedores as $proveedor)
                                    <option value="{{ $proveedor->id }}"
                                            data-saldo="{{ $proveedor->saldo_actual }}"
                                            {{ old('proveedor_id', $proveedorId) == $proveedor->id ? 'selected' : '' }}>
                                        {{ $proveedor->razon_social }} - Saldo: S/ {{ number_format($proveedor->saldo_actual, 2) }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="form-text text-muted" id="saldoProveedor"></small>
                        </div>
                    </div>

                    <!-- Empresa Compradora -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="empresa_compradora_id">Empresa Compradora <span class="text-danger">*</span></label>
                            <select name="empresa_compradora_id" id="empresa_compradora_id" class="form-control select2" required>
                                <option value="">Seleccione una empresa compradora</option>
                                @foreach($empresasCompradoras as $empresa)
                                    <option value="{{ $empresa->id }}"
                                            {{ old('empresa_compradora_id', $empresaCompradoraId) == $empresa->id ? 'selected' : '' }}>
                                        {{ $empresa->razon_social }} (RUC: {{ $empresa->ruc }})
                                    </option>
                                @endforeach
                            </select>
                            <small class="form-text text-muted" id="saldoEmpresa">
                                <i class="fas fa-info-circle"></i> Seleccione proveedor y empresa para ver el saldo actual
                            </small>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Compra (opcional) -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="compra_id">Compra a Pagar (Opcional)</label>
                            <select name="compra_id" id="compra_id" class="form-control select2">
                                <option value="">Pago a cuenta (sin compra específica)</option>
                                @if($compra)
                                    {{-- Si viene de una compra específica, mostrar solo esa --}}
                                    <option value="{{ $compra->id }}"
                                            data-saldo="{{ $compra->saldo_pendiente }}"
                                            selected>
                                        {{ $compra->numero_factura }} - Pendiente: S/ {{ number_format($compra->saldo_pendiente, 2) }}
                                    </option>
                                @else
                                    {{-- Mostrar todas las compras pendientes del proveedor --}}
                                    @foreach($compras as $compraItem)
                                        <option value="{{ $compraItem->id }}"
                                                data-saldo="{{ $compraItem->saldo_pendiente }}"
                                                {{ old('compra_id', $compraId) == $compraItem->id ? 'selected' : '' }}>
                                            {{ $compraItem->numero_factura }} - Pendiente: S/ {{ number_format($compraItem->saldo_pendiente, 2) }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            <small class="form-text text-muted" id="saldoCompra"></small>
                        </div>
                    </div>

                    <!-- Fecha de Pago -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="fecha_pago">Fecha de Pago <span class="text-danger">*</span></label>
                            <input type="date"
                                   name="fecha_pago"
                                   id="fecha_pago"
                                   class="form-control"
                                   value="{{ old('fecha_pago', now()->format('Y-m-d')) }}"
                                   required>
                        </div>
                    </div>


                </div>

                <div class="row">


                    <!-- Método de Pago -->
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="metodo_pago">Método de Pago <span class="text-danger">*</span></label>
                            <select name="metodo_pago" id="metodo_pago" class="form-control" required>
                                <option value="">Seleccione método</option>
                                @foreach($metodosPago as $metodo)
                                    <option value="{{ $metodo->nombre }}"
                                            {{ old('metodo_pago') == $metodo->nombre ? 'selected' : '' }}>
                                        {{ ucfirst($metodo->nombre) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>


                    <!-- Monto -->
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="monto">Monto a Pagar <span class="text-danger">*</span></label>
                            <input type="number"
                                   name="monto"
                                   id="monto"
                                   class="form-control"
                                   value="{{ old('monto', $compra->saldo_pendiente ?? 0) }}"
                                   step="0.01"
                                   required>
                        </div>
                    </div>


                </div>

                <div class="row">
                    <!-- Caja (solo si es efectivo) -->
                    <div class="col-md-6" id="divCaja" style="display: none;">
                        <div class="form-group">
                            <label for="caja_id">Caja <span class="text-danger">*</span></label>
                            <select name="caja_id" id="caja_id" class="form-control">
                                <option value="">Seleccione una caja</option>
                                @foreach($cajas as $caja)
                                    <option value="{{ $caja->id }}" {{ old('caja_id') == $caja->id ? 'selected' : '' }}>
                                        Caja #{{ $caja->id }} - Usuario: {{ $caja->usuario->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Banco Origen (solo si es transferencia/depósito) -->
                    <div class="col-md-6" id="divBanco" style="display: none;">
                        <div class="form-group">
                            <label for="banco_id">Cuenta Origen (Nuestra) <span class="text-danger">*</span></label>
                            <select name="banco_id" id="banco_id" class="form-control select2">
                                <option value="">Seleccione cuenta origen</option>
                                @foreach($bancos as $banco)
                                    <option value="{{ $banco->id }}" {{ old('banco_id') == $banco->id ? 'selected' : '' }}>
                                        {{ $banco->name }} - Saldo: S/ {{ number_format($banco->current_balance, 2) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Cuenta Destino (solo si es transferencia/depósito) -->
                    <div class="col-md-6" id="divCuentaDestino" style="display: none;">
                        <div class="form-group">
                            <label for="cuenta_destino_id">Cuenta Destino (Proveedor) <span class="text-danger">*</span></label>
                            <select name="cuenta_destino_id" id="cuenta_destino_id" class="form-control select2">
                                <option value="">Seleccione cuenta destino</option>
                                @foreach($bancos as $banco)
                                    <option value="{{ $banco->id }}" {{ old('cuenta_destino_id') == $banco->id ? 'selected' : '' }}>
                                        {{ $banco->name }} - Saldo: S/ {{ number_format($banco->current_balance, 2) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Número de Operación -->
                    <div class="col-md-6" id="divOperacion" style="display: none;">
                        <div class="form-group">
                            <label for="numero_operacion">Nº Operación/Cheque <span class="text-danger">*</span></label>
                            <input type="text"
                                   name="numero_operacion"
                                   id="numero_operacion"
                                   class="form-control"
                                   value="{{ old('numero_operacion') }}"
                                   placeholder="Ej: 001234567890">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Observaciones -->
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="observaciones">Observaciones</label>
                            <textarea name="observaciones"
                                      id="observaciones"
                                      class="form-control"
                                      rows="2"
                                      placeholder="Notas adicionales sobre el pago">{{ old('observaciones') }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-info">
                            <p>Si el monto es positivo, es deuda pendiente. <br> Si el monto es negativo, es saldo a favor.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-footer">
                <button type="submit" class="btn btn-success mr-2" id="btnGuardar">
                    <i class="fas fa-save mr-1"></i> Registrar Pago
                </button>
                <a href="{{ route('pagos-proveedores.index') }}" class="btn btn-warning">
                    <i class="fas fa-list mr-1"></i> Lista de Pagos
                </a>
            </div>
        </div>
    </form>
@stop

@section('js')
<script>
$(document).ready(function() {
    // Inicializar Select2
    $('.select2').select2({
        theme: 'bootstrap4',
        width: '100%'
    });

    // Variable para saber si ya hay una compra pre-seleccionada
    const compraPreSeleccionada = {{ $compraId ?? 'null' }};

    // Mostrar saldo del proveedor al seleccionar
    $('#proveedor_id').change(function() {
        const option = $(this).find('option:selected');
        const saldo = option.data('saldo');

        if (saldo !== undefined) {
            const color = saldo > 0 ? 'text-danger' : (saldo < 0 ? 'text-success' : 'text-secondary');
            $('#saldoProveedor').html(`<strong class="${color}">Saldo actual: S/ ${parseFloat(saldo).toFixed(2)}</strong>`);
        } else {
            $('#saldoProveedor').html('');
        }

        // Solo cargar compras pendientes si NO hay una compra pre-seleccionada
        if (!compraPreSeleccionada && $(this).val()) {
            cargarComprasPendientes($(this).val());
        } else if (!$(this).val()) {
            $('#compra_id').html('<option value="">Pago a cuenta (sin compra específica)</option>');
        }

        // Cargar saldo de empresa si ambos están seleccionados
        const empresaId = $('#empresa_compradora_id').val();
        if ($(this).val() && empresaId) {
            cargarSaldoEmpresa($(this).val(), empresaId);
        }
    });

    // Cargar saldo de empresa al seleccionar empresa compradora
    $('#empresa_compradora_id').change(function() {
        const proveedorId = $('#proveedor_id').val();
        if ($(this).val() && proveedorId) {
            cargarSaldoEmpresa(proveedorId, $(this).val());
        } else {
            $('#saldoEmpresa').html('<i class="fas fa-info-circle"></i> Seleccione proveedor y empresa para ver el saldo actual');
        }
    });

    // Mostrar saldo de la compra al seleccionar
    $('#compra_id').change(function() {
        const option = $(this).find('option:selected');
        const saldo = option.data('saldo');

        if (saldo !== undefined && saldo > 0) {
            $('#saldoCompra').html(`<strong class="text-danger">Saldo pendiente: S/ ${parseFloat(saldo).toFixed(2)}</strong>`);
            $('#monto').val(parseFloat(saldo).toFixed(2));
        } else {
            $('#saldoCompra').html('');
        }
    });

    // Mostrar/ocultar campos según método de pago
    $('#metodo_pago').change(function() {
        const metodo = $(this).val();

        // Ocultar todos
        $('#divCaja, #divBanco, #divCuentaDestino, #divOperacion').hide();
        $('#caja_id, #banco_id, #cuenta_destino_id, #numero_operacion').prop('required', false);

        // Mostrar según método
        if (metodo === 'efectivo') {
            $('#divCaja').show();
            $('#caja_id').prop('required', true);
        } else if (metodo === 'transferencia') {
            $('#divBanco').show();
            $('#divOperacion').show();
            $('#banco_id, #numero_operacion').prop('required', true);
        } else if (metodo === 'deposito') {
            $('#divBanco').show();
            $('#divOperacion').show();
            $('#banco_id, #numero_operacion').prop('required', true);
        } else if (metodo === 'cheque') {
            $('#divBanco').show();
            $('#divOperacion').show();
            $('#banco_id, #numero_operacion').prop('required', true);
        }
    });

    // Trigger inicial solo si NO hay compra pre-seleccionada
    if (!compraPreSeleccionada) {
        $('#proveedor_id').trigger('change');
    } else {
        // Si hay compra pre-seleccionada, solo mostrar el saldo del proveedor
        const option = $('#proveedor_id').find('option:selected');
        const saldo = option.data('saldo');
        if (saldo !== undefined) {
            const color = saldo > 0 ? 'text-danger' : (saldo < 0 ? 'text-success' : 'text-secondary');
            $('#saldoProveedor').html(`<strong class="${color}">Saldo actual: S/ ${parseFloat(saldo).toFixed(2)}</strong>`);
        }
    }

    $('#compra_id').trigger('change');
    $('#metodo_pago').trigger('change');

    // Cargar saldo actual por empresa compradora
    function cargarSaldoEmpresa(proveedorId, empresaId) {
        if (!proveedorId || !empresaId) {
            $('#saldoEmpresa').html('<i class="fas fa-info-circle"></i> Seleccione proveedor y empresa para ver el saldo actual');
            return;
        }

        $.ajax({
            url: '/api/saldos-proveedor-empresa',
            method: 'GET',
            data: {
                proveedor_id: proveedorId,
                empresa_compradora_id: empresaId
            },
            success: function(data) {
                const saldo = parseFloat(data.saldo_actual || 0);
                let color, icon, texto;

                if (saldo > 0) {
                    color = 'text-danger';
                    icon = 'fas fa-exclamation-triangle';
                    texto = `Saldo pendiente: S/ ${saldo.toFixed(2)}`;
                } else if (saldo < 0) {
                    color = 'text-success';
                    icon = 'fas fa-check-circle';
                    texto = `Saldo a favor: S/ ${Math.abs(saldo).toFixed(2)}`;
                } else {
                    color = 'text-secondary';
                    icon = 'fas fa-info-circle';
                    texto = 'Saldo en cero';
                }

                $('#saldoEmpresa').html(`<i class="${icon}"></i> <strong class="${color}">${texto}</strong>`);
            },
            error: function() {
                $('#saldoEmpresa').html('<i class="fas fa-info-circle"></i> Seleccione proveedor y empresa para ver el saldo actual');
            }
        });
    }

    // Cargar compras pendientes via AJAX
    function cargarComprasPendientes(proveedorId) {
        $('#compra_id').html('<option value="">Cargando...</option>');

        $.ajax({
            url: '/api/proveedores/' + proveedorId + '/compras-pendientes',
            method: 'GET',
            success: function(data) {
                let options = '<option value="">Pago a cuenta (sin compra específica)</option>';

                data.forEach(function(compra) {
                    options += `<option value="${compra.id}" data-saldo="${compra.saldo_pendiente}">
                        ${compra.numero_factura} - Pendiente: S/ ${parseFloat(compra.saldo_pendiente).toFixed(2)}
                    </option>`;
                });

                $('#compra_id').html(options);
            },
            error: function() {
                $('#compra_id').html('<option value="">Error al cargar compras</option>');
            }
        });
    }

    // Validar antes de enviar con SweetAlert
    $('#formPago').submit(function(e) {
        e.preventDefault(); // Prevenir envío automático

        // Obtener datos del formulario
        const proveedor = $('#proveedor_id option:selected').text();
        const empresa = $('#empresa_compradora_id option:selected').text();
        const metodoPago = $('#metodo_pago option:selected').text();
        const monto = $('#monto').val();
        const fecha = $('#fecha_pago').val();

        // Mensaje de confirmación
        let mensaje = `¿Está seguro de registrar el pago?<br>`;
        mensaje += `Proveedor: ${proveedor}<br>`;
        mensaje += `Empresa: ${empresa}<br>`;
        mensaje += `Método: ${metodoPago}<br>`;
        mensaje += `Monto: S/ ${parseFloat(monto).toFixed(2)}<br>`;
        mensaje += `Fecha: ${fecha}`;

        Swal.fire({
            title: 'Confirmar Pago',
            html: mensaje,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#dc3545',
            confirmButtonText: 'Sí, registrar pago',
            cancelButtonText: 'Cancelar',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                // Deshabilitar botón y mostrar loading
                $('#btnGuardar').prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-1"></i> Procesando...');

                // Enviar formulario
                this.submit();
            }
        });
    });
});
</script>
@stop