@extends('adminlte::page')
@section('title', env('APP_NAME') . ' - Nuevo Ingreso')
@section('plugins.Select2', true)
@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="fas fa-hand-holding-usd text-success"></i> Nuevo Ingreso</h1>
    </div>
@stop

@section('content')
    <div class="ingreso-create-wrap">
    <div class="row">
        <div class="col-lg-8">
            <div class="card card-outline card-success">
                @include('partials.validaciones')

                <div class="card-body">
                    <form action="{{ route('ingresos.store') }}" method="POST" id="form-ingreso" enctype="multipart/form-data">
                        @csrf

                        {{-- Sección 1: Datos del ingreso --}}
                        <h5 class="text-secondary border-bottom pb-2 mb-3">
                            <i class="fas fa-file-invoice-dollar"></i> Datos del ingreso
                        </h5>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="cliente_id">Cliente <span class="text-danger">*</span></label>
                                    <select name="cliente_id" id="cliente_id" class="form-control @error('cliente_id') is-invalid @enderror" required>
                                        <option value="">Seleccione un cliente</option>
                                        @foreach ($clientes as $id => $nombre)
                                            <option value="{{ $id }}" {{ old('cliente_id') == $id ? 'selected' : '' }}>{{ $nombre }}</option>
                                        @endforeach
                                    </select>
                                    @error('cliente_id')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="monto">Monto (S/) <span class="text-danger">*</span></label>
                                    <input type="number" name="monto" id="monto" step="0.01" min="0"
                                        class="form-control @error('monto') is-invalid @enderror"
                                        value="{{ old('monto') }}" placeholder="0.00" required>
                                    @error('monto')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="fecha_registro">Fecha de registro <span class="text-danger">*</span></label>
                                    <input type="datetime-local" name="fecha_registro"
                                        class="form-control @error('fecha_registro') is-invalid @enderror"
                                        value="{{ old('fecha_registro', now()->format('Y-m-d\TH:i')) }}" required>
                                    @error('fecha_registro')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="motivo">Motivo <span class="text-danger">*</span></label>
                            <input type="text" name="motivo" id="motivo" class="form-control @error('motivo') is-invalid @enderror"
                                value="{{ old('motivo') }}" placeholder="Ej.: Pago por adelantado, Ajuste de saldo" required>
                            @error('motivo')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="es_excedente" name="es_excedente" value="1" {{ old('es_excedente') ? 'checked' : '' }}>
                                <label class="custom-control-label" for="es_excedente">
                                    <strong>Pago por adelantado</strong> (genera saldo a favor del cliente)
                                </label>
                            </div>
                            <small class="text-muted">Marque si el cliente deposita dinero por adelantado; se creará una venta con saldo a favor.</small>
                        </div>

                        {{-- Sección 2: Datos del pago (solo si es adelantado) --}}
                        <div id="form-pago-adelantado" style="display: {{ old('es_excedente') ? 'block' : 'none' }};">
                            <hr class="my-4">
                            <h5 class="text-secondary border-bottom pb-2 mb-3">
                                <i class="fas fa-credit-card"></i> Datos del pago
                            </h5>

                            <div class="alert alert-info py-2 mb-3">
                                <i class="fas fa-info-circle"></i> Si el método es &quot;Saldo a favor&quot; no se requiere cuenta ni número de operación.
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="metodo_pago_id">Método de pago <span class="text-danger">*</span></label>
                                        <select name="metodo_pago_id" id="metodo_pago_id" class="form-control">
                                            @foreach ($metodos as $metodo)
                                                <option value="{{ $metodo->id }}">{{ $metodo->descripcion }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group" id="account_id_container">
                                        <label for="account_id">Cuenta bancaria</label>
                                        <select name="account_id" id="account_id" class="form-control @error('account_id') is-invalid @enderror">
                                            <option value="">Seleccione una cuenta bancaria</option>
                                            @foreach ($accounts as $account)
                                                <option value="{{ $account->id }}" {{ old('account_id') == $account->id ? 'selected' : '' }}>
                                                    {{ $account->name }} - {{ $account->number }} ({{ $account->currency_type->description ?? 'N/A' }})
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('account_id')
                                            <span class="invalid-feedback">{{ $message }}</span>
                                        @enderror
                                        <small class="form-text text-muted">Cuenta donde se registra el ingreso (requerido si no es Efectivo/Saldo a favor).</small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group" id="numero_operacion_container">
                                        <label for="numero_operacion">Número de operación</label>
                                        <input type="text" name="numero_operacion" id="numero_operacion" class="form-control" placeholder="Ej.: OPB-001234">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group" id="imagen_container">
                                        <label for="imagen">Captura o imagen del pago</label>
                                        <input type="file" name="imagen" id="imagen" class="form-control-file" accept="image/*">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">
                        <div class="d-flex flex-wrap">
                            <button type="submit" class="btn btn-success mr-2 mb-2" id="btn-registrar">
                                <i class="fas fa-save"></i> Registrar
                            </button>
                            <a href="{{ route('ingresos.index') }}" class="btn btn-warning mb-2">
                                <i class="fas fa-list"></i> Lista de Ingresos
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Panel estado del cliente (solo cuando hay cliente y es pago por adelantado) --}}
        <div class="col-lg-4">
            <div class="card card-outline card-info" id="cardEstadoCliente" style="display: none;">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="fas fa-user-check"></i> Estado del cliente</h5>
                </div>
                <div class="card-body">
                    <div id="estadoClienteCargando" class="text-muted small">
                        <i class="fas fa-spinner fa-spin"></i> Cargando…
                    </div>
                    <div id="estadoClienteContenido" style="display: none;">
                        <p class="mb-2"><strong>Deuda pendiente (ventas actuales):</strong><br>
                            <span id="estadoDeuda" class="h5 text-danger">S/ 0.00</span>
                        </p>
                        <p class="mb-2"><strong>Saldo a favor:</strong><br>
                            <span id="estadoSaldoFavor" class="h5 text-success">S/ 0.00</span>
                        </p>
                        <div id="estadoAlerta" class="alert alert-warning py-2 small mt-2" style="display: none;">
                            <i class="fas fa-exclamation-triangle"></i> El cliente tiene deuda de ventas actuales. Debe saldarla por amortización antes de registrar un ingreso por adelantado.
                        </div>
                        <div id="estadoOk" class="alert alert-success py-2 small mt-2" style="display: none;">
                            <i class="fas fa-check-circle"></i> Puede registrar este ingreso por adelantado.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>{{-- .ingreso-create-wrap --}}
@stop

@push('css')
    <style>
        /* Evitar scroll horizontal en toda la página cuando está el formulario de nuevo ingreso */
        .wrapper:has(.ingreso-create-wrap) { overflow-x: hidden !important; }
        .content-wrapper:has(.ingreso-create-wrap) { overflow-x: hidden !important; }
        .content:has(.ingreso-create-wrap) { overflow-x: hidden !important; }
    </style>
@endpush
@section('css')
    <style>
        /* Contenedor del formulario */
        .ingreso-create-wrap {
            overflow-x: hidden !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0;
        }
        .ingreso-create-wrap .row { max-width: 100%; }
        .ingreso-create-wrap .select2-selection { height: 38px !important; }
        .ingreso-create-wrap .select2-container { width: 100% !important; max-width: 100%; }
        /* Select2: dropdown sin desbordar */
        body .select2-container--open .select2-dropdown--below {
            max-width: calc(100vw - 2rem) !important;
        }
        .card-outline.card-success { border-top-width: 3px; }
        .card-outline.card-info { border-top-width: 3px; }
    </style>
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        @if(session('error'))
        window.flashErrorIngreso = @json(session('error'));
        @endif
        $(document).ready(function() {
            if (window.flashErrorIngreso) {
                Swal.fire({
                    icon: 'error',
                    title: 'No se puede registrar',
                    text: window.flashErrorIngreso,
                    confirmButtonText: 'Entendido'
                });
                delete window.flashErrorIngreso;
                $('.alert-danger').remove();
            }
            $('select[name="cliente_id"]').select2({ placeholder: 'Seleccione un cliente' });
            $('select[name="account_id"]').select2({ placeholder: 'Seleccione una cuenta bancaria', width: '100%' });

            function togglePagoAdelantado() {
                if ($('#es_excedente').is(':checked')) {
                    $('#form-pago-adelantado').slideDown(200);
                    $('#motivo').val($('#motivo').val() || 'Pago por adelantado');
                    consultarEstadoCliente();
                } else {
                    $('#form-pago-adelantado').slideUp(200);
                    if ($('#motivo').val() === 'Pago por adelantado') $('#motivo').val('');
                    $('#cardEstadoCliente').hide();
                }
            }

            function consultarEstadoCliente() {
                var clienteId = $('#cliente_id').val();
                if (!clienteId || !$('#es_excedente').is(':checked')) {
                    $('#cardEstadoCliente').hide();
                    return;
                }
                $('#cardEstadoCliente').show();
                $('#estadoClienteCargando').show();
                $('#estadoClienteContenido').hide();
                $.get('{{ route("ingresos.estado-cliente", ["id" => 0]) }}'.replace(/0$/, clienteId))
                    .done(function(res) {
                        $('#estadoClienteCargando').hide();
                        $('#estadoClienteContenido').show();
                        $('#estadoDeuda').text('S/ ' + parseFloat(res.deuda_pendiente || 0).toFixed(2));
                        $('#estadoSaldoFavor').text('S/ ' + parseFloat(res.saldo_a_favor || 0).toFixed(2));
                        if (res.puede_registrar_ingreso) {
                            $('#estadoOk').show();
                            $('#estadoAlerta').hide();
                        } else {
                            $('#estadoOk').hide();
                            $('#estadoAlerta').show();
                        }
                    })
                    .fail(function() {
                        $('#estadoClienteCargando').hide();
                        $('#estadoClienteContenido').show();
                        $('#estadoDeuda').text('—');
                        $('#estadoSaldoFavor').text('—');
                        $('#estadoOk').hide();
                        $('#estadoAlerta').hide();
                    });
            }

            $('#es_excedente').change(togglePagoAdelantado);
            $('#cliente_id').on('change', function() {
                if ($('#es_excedente').is(':checked')) consultarEstadoCliente();
            });

            $('#metodo_pago_id').change(function() {
                var texto = $(this).find('option:selected').text().toLowerCase();
                if (texto.indexOf('saldo a favor') !== -1) {
                    $('#account_id_container, #numero_operacion_container, #imagen_container').slideUp(200);
                    $('#account_id').val(null).trigger('change');
                    $('#numero_operacion').val('');
                    $('#imagen').val('');
                } else {
                    $('#account_id_container, #numero_operacion_container, #imagen_container').slideDown(200);
                }
            });

            if ($('#es_excedente').is(':checked')) {
                togglePagoAdelantado();
                $('#metodo_pago_id').trigger('change');
            }

            $('#form-ingreso').on('submit', function(e) {
                e.preventDefault();
                if ($('#es_excedente').is(':checked') && !$('#account_id').val()) {
                    var metodo = $('#metodo_pago_id').find('option:selected').text().toLowerCase();
                    if (metodo.indexOf('saldo a favor') === -1) {
                        Swal.fire({
                            title: 'Error de validación',
                            text: 'Debe seleccionar una cuenta bancaria para pagos por adelantado (excepto cuando el método es Saldo a favor).',
                            icon: 'error',
                            confirmButtonText: 'Entendido'
                        });
                        return;
                    }
                }
                Swal.fire({
                    title: '¿Registrar ingreso?',
                    text: 'Se guardará el ingreso con los datos indicados.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Sí, registrar',
                    cancelButtonText: 'Cancelar'
                }).then(function(result) {
                    if (result.isConfirmed) e.target.submit();
                });
            });
        });
    </script>
@stop