<div class="content-wrapper">
    <section class="content-header">
        <h1>Nuevo Proveedor</h1>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-10">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <strong>Registro de proveedor</strong>
                    </div>
                    <div class="panel-body">

                        <?php echo validation_errors('<div class="alert alert-danger">', '</div>'); ?>

                        <form method="post" action="<?php echo base_url('index.php/logistica/proveedores/store'); ?>">

                            <!-- FILA 1: Código / Razón Social -->
                            <div class="row">
                                <div class="col-md-3 form-group">
                                    <label>Código <span class="text-danger">*</span></label>
                                    <input type="text" name="codigo" class="form-control" maxlength="10"
                                           value="<?php echo set_value('codigo'); ?>" required>
                                </div>
                                <div class="col-md-9 form-group">
                                    <label>Razón Social <span class="text-danger">*</span></label>
                                    <input type="text" id="razon_social" name="razon_social" class="form-control" maxlength="150"
                                           value="<?php echo set_value('razon_social'); ?>" required>
                                </div>
                            </div>

                            <!-- FILA 2: Tipo doc / Nro doc -->
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>Tipo de documento <span class="text-danger">*</span></label>
                                    <select id="documento_identidad_id" name="documento_identidad_id" class="form-control" required>
                                        <option value="">Seleccione</option>
                                        <?php foreach($documentos as $item): ?>
                                            <option value="<?php echo $item->id; ?>">
                                                <?php echo $item->nombre; ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>Nro. documento <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="text" id="nro_documento" name="nro_documento" class="form-control" maxlength="20" autocomplete="off"
                                               value="<?php echo set_value('nro_documento'); ?>" required>
                                        <span class="input-group-addon" id="nro_documento_status" style="min-width:38px;">
                                            <i class="fa fa-search text-muted"></i>
                                        </span>
                                    </div>
                                    <small class="text-muted" id="nro_documento_help"></small>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>Teléfono</label>
                                    <input type="text" name="telefono" class="form-control" maxlength="30"
                                           value="<?php echo set_value('telefono'); ?>">
                                </div>
                            </div>

                            <!-- FILA 3: Contacto / Cargo -->
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label>Persona de contacto</label>
                                    <input type="text" name="contacto" class="form-control" maxlength="60"
                                           value="<?php echo set_value('contacto'); ?>">
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>Cargo del contacto</label>
                                    <input type="text" name="contacto_cargo" class="form-control" maxlength="60"
                                           value="<?php echo set_value('contacto_cargo'); ?>">
                                </div>
                            </div>

                            <!-- FILA 4: Email -->
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label>Email</label>
                                    <input type="email" name="email" class="form-control" maxlength="50"
                                           value="<?php echo set_value('email'); ?>">
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>Domicilio fiscal</label>
                                    <input type="text" id="domicilio_fiscal" name="domicilio_fiscal" class="form-control" maxlength="255"
                                           value="<?php echo set_value('domicilio_fiscal'); ?>">
                                </div>
                            </div>

                            <!-- FILA 5: Ubigeo -->
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>Departamento</label>
                                    <select id="departamento" class="form-control">
                                        <option value="">Seleccione</option>
                                        <?php foreach($departamentos as $dep): ?>
                                            <option value="<?php echo $dep->codigo; ?>">
                                                <?php echo $dep->nombre; ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>Provincia</label>
                                    <select id="provincia" class="form-control" disabled>
                                        <option value="">Seleccione</option>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>Distrito</label>
                                    <select id="ubigeo_id" name="ubigeo_id" class="form-control" disabled>
                                        <option value="">Seleccione</option>
                                    </select>
                                </div>
                            </div>

                            <!-- FILA 6: Moneda / Forma pago / Sector negocio -->
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>Moneda</label>
                                    <select name="moneda_id" class="form-control">
                                        <option value="">Seleccione</option>
                                        <?php foreach($monedas as $item): ?>
                                            <option value="<?php echo $item->id; ?>">
                                                <?php echo $item->nombre; ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>Forma de pago</label>
                                    <select name="fp_id" class="form-control">
                                        <option value="">Seleccione</option>
                                        <?php foreach($formas_pago as $item): ?>
                                            <option value="<?php echo $item->id; ?>">
                                                <?php echo $item->nombre; ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>Sector de negocio</label>
                                    <select name="sn_id" class="form-control">
                                        <option value="">Seleccione</option>
                                        <?php foreach($sectores_negocio as $item): ?>
                                            <option value="<?php echo $item->id; ?>">
                                                <?php echo $item->nombre; ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>

                            <!-- FILA 7: Descripción forma pago -->
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label>Descripción forma de pago</label>
                                    <input type="text" name="fp_descripcion" class="form-control" maxlength="60"
                                           value="<?php echo set_value('fp_descripcion'); ?>">
                                </div>
                            </div>

                            <!-- FILA 8: Observaciones -->
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label>Observaciones</label>
                                    <textarea name="obs" class="form-control" rows="3"><?php echo set_value('obs'); ?></textarea>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-save"></i> Guardar
                            </button>
                            <a href="<?php echo base_url('index.php/logistica/proveedores'); ?>" class="btn btn-default">
                                Cancelar
                            </a>

                        </form>

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

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

    // ---------------------------------------------------------
    // Selecciona en cascada departamento -> provincia -> distrito
    // a partir de los códigos devueltos por la consulta de documento
    // ---------------------------------------------------------
    function autoseleccionarUbigeo(depCodigo, provCodigo, ubigeoId) {
        if (!depCodigo) return;

        $('#departamento').val(depCodigo);

        $('#provincia').html('<option value="">Cargando...</option>');

        $.ajax({
            url: '<?php echo base_url("index.php/logistica/proveedores/provincias_ajax"); ?>',
            type: 'POST',
            data: { departamento: depCodigo },
            dataType: 'json',
            success: function(resp) {
                $('#provincia').html('<option value="">Seleccione</option>');
                $.each(resp, function(i, item) {
                    $('#provincia').append('<option value="' + item.codigo + '">' + item.nombre + '</option>');
                });
                $('#provincia').prop('disabled', false);

                if (provCodigo) {
                    $('#provincia').val(provCodigo);

                    $('#ubigeo_id').html('<option value="">Cargando...</option>');

                    $.ajax({
                        url: '<?php echo base_url("index.php/logistica/proveedores/distritos_ajax"); ?>',
                        type: 'POST',
                        data: { departamento: depCodigo, provincia: provCodigo },
                        dataType: 'json',
                        success: function(resp2) {
                            $('#ubigeo_id').html('<option value="">Seleccione</option>');
                            $.each(resp2, function(i, item) {
                                $('#ubigeo_id').append('<option value="' + item.id + '">' + item.nombre + '</option>');
                            });
                            $('#ubigeo_id').prop('disabled', false);

                            if (ubigeoId) {
                                $('#ubigeo_id').val(ubigeoId);
                            }
                        }
                    });
                }
            }
        });
    }

    // ---------------------------------------------------------
    // Indicador visual del estado de la búsqueda
    // ---------------------------------------------------------
    function setEstadoBusqueda(estado, mensaje) {
        var $icono = $('#nro_documento_status i');
        var $help  = $('#nro_documento_help');

        $help.text(mensaje || '');

        if (estado === 'cargando') {
            $icono.attr('class', 'fa fa-spinner fa-spin text-info');
            $help.removeClass('text-danger text-success').addClass('text-muted');
        } else if (estado === 'ok') {
            $icono.attr('class', 'fa fa-check text-success');
            $help.removeClass('text-danger text-muted').addClass('text-success');
        } else if (estado === 'error') {
            $icono.attr('class', 'fa fa-exclamation-triangle text-danger');
            $help.removeClass('text-success text-muted').addClass('text-danger');
        } else {
            $icono.attr('class', 'fa fa-search text-muted');
            $help.removeClass('text-danger text-success').addClass('text-muted');
        }
    }

    // ---------------------------------------------------------
    // Consulta RUC/DNI al completar 8 u 11 dígitos
    // ---------------------------------------------------------
    $('#nro_documento').on('input', function() {
        var numero = $(this).val().replace(/\D/g, '');
        $(this).val(numero);

        if (numero.length !== 8 && numero.length !== 11) {
            setEstadoBusqueda('idle', '');
            return;
        }

        setEstadoBusqueda('cargando', 'Buscando...');

        $.ajax({
            url: '<?php echo base_url("index.php/logistica/proveedores/consultar_documento_ajax"); ?>',
            type: 'POST',
            data: { numero: numero },
            dataType: 'json',
            success: function(resp) {
                if (resp.status) {
                    setEstadoBusqueda('ok', 'Datos encontrados');

                    if (resp.razon_social) {
                        $('#razon_social').val(resp.razon_social.toUpperCase());
                    }
                    if (resp.direccion) {
                        $('#domicilio_fiscal').val(resp.direccion.toUpperCase());
                    }
                    if (resp.documento_identidad_id) {
                        $('#documento_identidad_id').val(resp.documento_identidad_id);
                    }
                    if (resp.departamento_codigo) {
                        autoseleccionarUbigeo(resp.departamento_codigo, resp.provincia_codigo, resp.ubigeo_id);
                    }
                } else {
                    setEstadoBusqueda('error', resp.message || 'No se encontraron datos');
                }
            },
            error: function() {
                setEstadoBusqueda('error', 'Error al conectar con el servicio de consulta');
            }
        });
    });

    $('#departamento').on('change', function() {
        var departamento = $(this).val();

        $('#provincia').html('<option value="">Seleccione</option>').prop('disabled', true);
        $('#ubigeo_id').html('<option value="">Seleccione</option>').prop('disabled', true);

        if (departamento !== '') {
            $('#provincia').html('<option value="">Cargando...</option>');

            $.ajax({
                url: '<?php echo base_url("index.php/logistica/proveedores/provincias_ajax"); ?>',
                type: 'POST',
                data: {departamento: departamento},
                dataType: 'json',
                success: function(resp) {
                    $('#provincia').html('<option value="">Seleccione</option>');
                    $.each(resp, function(i, item) {
                        $('#provincia').append('<option value="' + item.codigo + '">' + item.nombre + '</option>');
                    });
                    $('#provincia').prop('disabled', false);
                }
            });
        }
    });

    $('#provincia').on('change', function() {
        var departamento = $('#departamento').val();
        var provincia    = $(this).val();

        $('#ubigeo_id').html('<option value="">Seleccione</option>').prop('disabled', true);

        if (departamento !== '' && provincia !== '') {
            $('#ubigeo_id').html('<option value="">Cargando...</option>');

            $.ajax({
                url: '<?php echo base_url("index.php/logistica/proveedores/distritos_ajax"); ?>',
                type: 'POST',
                data: {departamento: departamento, provincia: provincia},
                dataType: 'json',
                success: function(resp) {
                    $('#ubigeo_id').html('<option value="">Seleccione</option>');
                    $.each(resp, function(i, item) {
                        $('#ubigeo_id').append('<option value="' + item.id + '">' + item.nombre + '</option>');
                    });
                    $('#ubigeo_id').prop('disabled', false);
                }
            });
        }
    });

});
</script>