@extends('adminlte::page')

@section('title', 'Nuevo Pago a Proveedor')
@section('plugins.Select2', 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-success">
                <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>

                    <!-- 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>
                </div>

                <div class="row">
                    <!-- Fecha de Pago -->
                    <div class="col-md-4">
                        <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>

                    <!-- 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"
                                   min="0.01"
                                   required>
                        </div>
                    </div>

                    <!-- 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>
                                <option value="efectivo" {{ old('metodo_pago') == 'efectivo' ? 'selected' : '' }}>Efectivo</option>
                                <option value="transferencia" {{ old('metodo_pago') == 'transferencia' ? 'selected' : '' }}>Transferencia</option>
                                <option value="deposito" {{ old('metodo_pago') == 'deposito' ? 'selected' : '' }}>Depósito</option>
                                <option value="cheque" {{ old('metodo_pago') == 'cheque' ? 'selected' : '' }}>Cheque</option>
                            </select>
                        </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>

            <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>');
        }
    });

    // 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, #divCuentaDestino, #divOperacion').show();
            $('#banco_id, #cuenta_destino_id, #numero_operacion').prop('required', true);
        } else if (metodo === 'deposito') {
            $('#divCuentaDestino, #divOperacion').show();
            $('#cuenta_destino_id, #numero_operacion').prop('required', true);
        } else if (metodo === 'cheque') {
            $('#divOperacion').show();
            $('#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 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
    $('#formPago').submit(function() {
        $('#btnGuardar').prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-1"></i> Procesando...');
    });
});
</script>
@stop