<div class="content-wrapper">
    <section class="content-header">
        <h1>Nueva Nota de Crédito — Paso 1</h1>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-8">
                <div class="panel panel-primary">
                    <div class="panel-heading"><strong>Selección de tipo y comprobante de referencia</strong></div>
                    <div class="panel-body">

                        <form id="formPaso1" method="post" action="<?php echo base_url('index.php/ventas/nota_credito/create_paso2'); ?>">

                            <input type="hidden" name="comprob_id" id="comprob_id">
                            <input type="hidden" name="cliente_id" id="cliente_id_hidden">

                            <!-- TIPO NC Y FECHA -->
                            <div class="row">
                                <div class="col-md-7 form-group">
                                    <label>Tipo de Nota de Crédito <span class="text-danger">*</span></label>
                                    <select name="tipo_nc_id" id="tipo_nc_id" class="form-control" required>
                                        <option value="">Seleccione el tipo</option>
                                        <?php foreach($tipos_nc as $item): ?>
                                            <option value="<?php echo $item->id; ?>"
                                                    data-codigo="<?php echo $item->codigo; ?>">
                                                <?php echo $item->codigo; ?> — <?php echo $item->descripcion; ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>Fecha de emisión <span class="text-danger">*</span></label>
                                    <input type="date" name="fecha" class="form-control"
                                           value="<?php echo date('Y-m-d'); ?>" required>
                                </div>
                            </div>

                            <!-- BUSCAR COMPROBANTE -->
                            <div class="row">
                                <div class="col-md-7 form-group">
                                    <label>Comprobante de referencia <span class="text-danger">*</span></label>
                                    <input type="text" id="comprob_busqueda" class="form-control"
                                           placeholder="Buscar por serie, número o cliente..." autocomplete="off">
                                    <small class="text-muted">Ingresa al menos 2 caracteres para buscar</small>
                                </div>
                            </div>

                            <!-- DATOS DEL COMPROBANTE SELECCIONADO -->
                            <div id="bloqueComprobante" style="display:none;">
                                <div class="panel panel-default">
                                    <div class="panel-heading" style="background:#ecf0f1;">
                                        <strong><i class="fa fa-file-text-o"></i> Comprobante seleccionado</strong>
                                    </div>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <strong>Comprobante:</strong><br>
                                                <span id="info_comprob_num" class="text-primary"></span>
                                            </div>
                                            <div class="col-md-2">
                                                <strong>Tipo:</strong><br>
                                                <span id="info_tipo_comprob"></span>
                                            </div>
                                            <div class="col-md-2">
                                                <strong>F. Emisión:</strong><br>
                                                <span id="info_fecha_emision"></span>
                                            </div>
                                            <div class="col-md-3">
                                                <strong>Cliente:</strong><br>
                                                <span id="info_cliente"></span>
                                            </div>
                                            <div class="col-md-2">
                                                <strong>Total:</strong><br>
                                                <span id="info_total" class="text-success"></span>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top:5px;">
                                            <div class="col-md-4">
                                                <strong>RUC:</strong>
                                                <span id="info_ruc" class="text-muted"></span>
                                            </div>
                                            <div class="col-md-3">
                                                <strong>Moneda:</strong>
                                                <span id="info_moneda"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fa fa-arrow-right"></i> Continuar
                                </button>
                                <a href="<?php echo base_url('index.php/ventas/nota_credito'); ?>" class="btn btn-default btn-lg">
                                    Cancelar
                                </a>
                            </div>

                        </form>
                    </div>
                </div>
            </div>

            <!-- LEYENDA TIPOS -->
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading"><strong>Guía de tipos</strong></div>
                    <div class="panel-body" style="padding:10px;">
                        <table class="table table-condensed table-bordered" style="font-size:12px; margin:0;">
                            <thead>
                                <tr style="background:#ecf0f1;">
                                    <th>Código</th>
                                    <th>Descripción</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach($tipos_nc as $item): ?>
                                    <tr>
                                        <td class="text-center"><strong><?php echo $item->codigo; ?></strong></td>
                                        <td><?php echo $item->descripcion; ?></td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </section>
</div>

<script>
window.addEventListener('load', function () {

    // Autocomplete comprobante
    $('#comprob_busqueda').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '<?php echo base_url("index.php/ventas/nota_credito/buscar_comprobante"); ?>',
                dataType: 'json',
                data: { term: request.term },
                success: function(data) { response(data); }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            $('#comprob_id').val(ui.item.id);
            $('#cliente_id_hidden').val(ui.item.cliente_id);
            $('#comprob_busqueda').val(ui.item.value);

            // Mostrar datos
            $('#info_comprob_num').text(ui.item.serie + '-' + ui.item.numero);
            $('#info_tipo_comprob').text(ui.item.tipo_comprobante);
            $('#info_fecha_emision').text(ui.item.fecha ? ui.item.fecha.substring(0, 10) : '');
            $('#info_cliente').text(ui.item.cliente);
            $('#info_ruc').text(ui.item.cliente_ruc);
            $('#info_total').text(ui.item.moneda + ' ' + ui.item.total);
            $('#info_moneda').text(ui.item.moneda);

            $('#bloqueComprobante').show();
            return false;
        }
    });

    // Validar antes de continuar
    $('#formPaso1').on('submit', function(e) {
        if (!$('#tipo_nc_id').val()) {
            e.preventDefault();
            Swal.fire({ icon: 'warning', title: 'Atención', text: 'Debes seleccionar el tipo de nota de crédito' });
            return false;
        }
        if (!$('#comprob_id').val()) {
            e.preventDefault();
            Swal.fire({ icon: 'warning', title: 'Atención', text: 'Debes seleccionar un comprobante de referencia' });
            return false;
        }
    });

});
</script>
