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

    <section class="content">
        <div class="row">
            <div class="col-md-12">

                <?php if(tiene_permiso('clientes_crear')): ?>
                    <a href="<?php echo base_url('index.php/ventas/clientes/create'); ?>" class="btn btn-success">
                        <i class="fa fa-plus"></i> Nuevo Cliente
                    </a>
                <?php endif; ?>

                <br><br>

                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <strong>Listado de clientes</strong>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table id="tablaClientes" class="table table-bordered table-hover table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Código</th>
                                        <th>Documento</th>
                                        <th>Razón Social</th>
                                        <th>Ubigeo</th>
                                        <th>Moneda</th>
                                        <th>Forma Pago</th>
                                        <th>Vendedor</th>
                                        <th>Estado</th>
                                        <th style="width:180px;">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach($clientes as $item): ?>
                                        <tr>
                                            <td><?php echo $item->id; ?></td>
                                            <td><?php echo $item->codigo; ?></td>
                                            <td><?php echo $item->tipdoc_abreviado . ' - ' . $item->nro_documento; ?></td>
                                            <td><?php echo $item->razon_social; ?></td>
                                            <td><?php echo $item->ubigeo_id . ' - ' . $item->distrito_nombre; ?></td>
                                            <td><?php echo $item->moneda_abreviado; ?></td>
                                            <td><?php echo !empty($item->forma_pago) ? $item->forma_pago : '-'; ?></td>
                                            <td><?php echo !empty($item->vendedor) ? $item->vendedor : '-'; ?></td>
                                            <td>
                                                <?php if($item->estado == 1): ?>
                                                    <span class="label label-success">Activo</span>
                                                <?php else: ?>
                                                    <span class="label label-danger">Inactivo</span>
                                                <?php endif; ?>
                                            </td>
                                            <td>
                                                <a href="<?php echo base_url('index.php/ventas/clientes/ver/'.$item->id); ?>" class="btn btn-info btn-xs">
                                                    <i class="fa fa-eye"></i>
                                                </a>

                                                <?php if(tiene_permiso('clientes_editar')): ?>
                                                    <a href="<?php echo base_url('index.php/ventas/clientes/edit/'.$item->id); ?>" class="btn btn-warning btn-xs">
                                                        <i class="fa fa-pencil"></i>
                                                    </a>
                                                <?php endif; ?>

                                                <?php if(tiene_permiso('clientes_eliminar')): ?>
                                                    <?php if($item->estado == 1): ?>
                                                        <button type="button"
                                                                class="btn btn-danger btn-xs btn-cambiar-estado-cliente"
                                                                data-url="<?php echo base_url('index.php/ventas/clientes/estado/'.$item->id); ?>"
                                                                data-accion="desactivar"
                                                                data-nombre="<?php echo $item->razon_social; ?>">
                                                            <i class="fa fa-times"></i>
                                                        </button>
                                                    <?php else: ?>
                                                        <button type="button"
                                                                class="btn btn-success btn-xs btn-cambiar-estado-cliente"
                                                                data-url="<?php echo base_url('index.php/ventas/clientes/estado/'.$item->id); ?>"
                                                                data-accion="activar"
                                                                data-nombre="<?php echo $item->razon_social; ?>">
                                                            <i class="fa fa-check"></i>
                                                        </button>
                                                    <?php endif; ?>
                                                    <button type="button"
                                                            class="btn btn-primary btn-xs btn-contactos-cliente"
                                                            data-id="<?php echo $item->id; ?>"
                                                            data-nombre="<?php echo $item->razon_social; ?>">
                                                        <i class="fa fa-address-book"></i>
                                                    </button>
                                                    <button type="button"
                                                            class="btn btn-default btn-xs btn-locales-cliente"
                                                            data-id="<?php echo $item->id; ?>"
                                                            data-nombre="<?php echo $item->razon_social; ?>">
                                                        <i class="fa fa-building"></i>
                                                    </button>
                                                <?php endif; ?>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

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

<div class="modal fade" id="modalContactosCliente" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">
                    Contactos del cliente: <span id="clienteNombreModal"></span>
                </h4>
            </div>

            <div class="modal-body">
                <?php if(tiene_permiso('cliente_contacto_crear')): ?>
                    <button type="button" class="btn btn-success" id="btnNuevoContacto">
                        <i class="fa fa-plus"></i> Nuevo Contacto
                    </button>
                <?php endif; ?>

                <br><br>

                <input type="hidden" id="cliente_id_contacto">

                <div class="table-responsive">
                    <table id="tablaContactosCliente" class="table table-bordered table-hover table-striped" width="100%">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Nombre</th>
                                <th>Email</th>
                                <th>Celular</th>
                                <th>Sexo</th>
                                <th>F. Nacimiento</th>
                                <th>Cargo</th>
                                <th>Estado</th>
                                <th style="width:160px;">Acciones</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

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

<div class="modal fade" id="modalFormularioContacto" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">

            <form id="formContactoCliente">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" id="tituloModalContacto">Nuevo Contacto</h4>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="contacto_id" name="contacto_id">
                    <input type="hidden" id="cliente_id_hidden" name="cliente_id">

                    <div class="form-group">
                        <label>Nombre</label>
                        <input type="text" name="nombre" id="contacto_nombre" class="form-control" maxlength="100" required>
                    </div>

                    <div class="form-group">
                        <label>Email</label>
                        <input type="email" name="email" id="contacto_email" class="form-control" maxlength="120">
                    </div>

                    <div class="form-group">
                        <label>Celular</label>
                        <input type="text" name="celular" id="contacto_celular" class="form-control" maxlength="20">
                    </div>

                    <div class="form-group">
                        <label>Sexo</label>
                        <select name="sexo" id="contacto_sexo" class="form-control">
                            <option value="">Seleccione</option>
                            <option value="M">Masculino</option>
                            <option value="F">Femenino</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Fecha de nacimiento</label>
                        <input type="date" name="fecha_nacimiento" id="contacto_fecha_nacimiento" class="form-control">
                    </div>

                    <div class="form-group">
                        <label>Cargo</label>
                        <input type="text" name="cargo" id="contacto_cargo" class="form-control" maxlength="100">
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-save"></i> Guardar
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                </div>
            </form>

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

<div class="modal fade" id="modalLocalesCliente" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">
                    Locales del cliente: <span id="clienteNombreModalLocal"></span>
                </h4>
            </div>

            <div class="modal-body">
                <?php if(tiene_permiso('cliente_local_crear')): ?>
                    <button type="button" class="btn btn-success" id="btnNuevoLocal">
                        <i class="fa fa-plus"></i> Nuevo Local
                    </button>
                <?php endif; ?>

                <br><br>

                <input type="hidden" id="cliente_id_local">

                <div class="table-responsive">
                    <table id="tablaLocalesCliente" class="table table-bordered table-hover table-striped" width="100%">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Dirección</th>
                                <th>Estado</th>
                                <th style="width:160px;">Acciones</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

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

<div class="modal fade" id="modalFormularioLocal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">

            <form id="formLocalCliente">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" id="tituloModalLocal">Nuevo Local</h4>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="local_id" name="local_id">
                    <input type="hidden" id="cliente_id_local_hidden" name="cliente_id">

                    <div class="form-group">
                        <label>Dirección</label>
                        <textarea name="direccion" id="local_direccion" class="form-control" rows="3" maxlength="255" required></textarea>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="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>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Provincia</label>
                        <select id="provincia" class="form-control" disabled>
                            <option value="">Seleccione</option>
                        </select>
                    </div>
                </div>  
                <div class="modal-body">
                    <div class="form-group">
                        <label>Distrito</label>
                        <select id="ubigeo_id" name="ubigeo_id" class="form-control" disabled>
                            <option value="">Seleccione</option>
                        </select>
                    </div>
                </div>                                               

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-save"></i> Guardar
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                </div>
            </form>

        </div>
    </div>
</div>
<script>
window.addEventListener('load', function () {
    $('#tablaClientes').DataTable({
        language: {
            lengthMenu: "Mostrar _MENU_ registros",
            zeroRecords: "No se encontraron resultados",
            info: "Mostrando registros del _START_ al _END_ de un total de _TOTAL_",
            infoEmpty: "Mostrando registros del 0 al 0",
            infoFiltered: "(filtrado de un total de _MAX_ registros)",
            search: "Buscar:",
            paginate: {
                first: "Primero",
                last: "Último",
                next: "Siguiente",
                previous: "Anterior"
            }
        },
        pageLength: 10,
        order: [[0, "desc"]]
    });

    $(document).on('click', '.btn-cambiar-estado-cliente', function(e) {
        e.preventDefault();

        var url = $(this).data('url');
        var accion = $(this).data('accion');
        var nombre = $(this).data('nombre');

        Swal.fire({
            title: '¿Estás seguro?',
            text: 'Vas a ' + accion + ' al cliente: ' + nombre,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, continuar',
            cancelButtonText: 'Cancelar'
        }).then(function(result) {
            if (result.isConfirmed) {
                window.location.href = url;
            }
        });
    });
});



window.addEventListener('load', function () {
    var tablaContactos = null;

    $(document).on('click', '.btn-contactos-cliente', function() {
        var clienteId = $(this).data('id');
        var clienteNombre = $(this).data('nombre');

        $('#cliente_id_contacto').val(clienteId);
        $('#cliente_id_hidden').val(clienteId);
        $('#clienteNombreModal').text(clienteNombre);

        if (tablaContactos !== null) {
            tablaContactos.destroy();
            $('#tablaContactosCliente').empty();
            $('#tablaContactosCliente').html(
                '<thead><tr>' +
                '<th>ID</th><th>Nombre</th><th>Email</th><th>Celular</th><th>Sexo</th><th>F. Nacimiento</th><th>Cargo</th><th>Estado</th><th style="width:160px;">Acciones</th>' +
                '</tr></thead>'
            );
        }

        tablaContactos = $('#tablaContactosCliente').DataTable({
            ajax: {
                url: '<?php echo base_url("index.php/ventas/cliente-contactos/listar/"); ?>' + clienteId,
                type: 'GET',
                dataSrc: 'data'
            },
            language: {
                lengthMenu: "Mostrar _MENU_ registros",
                zeroRecords: "No se encontraron resultados",
                info: "Mostrando registros del _START_ al _END_ de un total de _TOTAL_",
                infoEmpty: "Mostrando registros del 0 al 0",
                infoFiltered: "(filtrado de un total de _MAX_ registros)",
                search: "Buscar:",
                paginate: {
                    first: "Primero",
                    last: "Último",
                    next: "Siguiente",
                    previous: "Anterior"
                }
            },
            pageLength: 5,
            order: [[0, "desc"]]
        });

        $('#modalContactosCliente').modal('show');
    });

    $('#btnNuevoContacto').on('click', function() {
        $('#formContactoCliente')[0].reset();
        $('#contacto_id').val('');
        $('#cliente_id_hidden').val($('#cliente_id_contacto').val());
        $('#tituloModalContacto').text('Nuevo Contacto');
        $('#modalFormularioContacto').modal('show');
    });

    $('#formContactoCliente').on('submit', function(e) {
        e.preventDefault();

        var contactoId = $('#contacto_id').val();
        var url = contactoId
            ? '<?php echo base_url("index.php/ventas/cliente-contactos/actualizar/"); ?>' + contactoId
            : '<?php echo base_url("index.php/ventas/cliente-contactos/guardar"); ?>';

        $.ajax({
            url: url,
            type: 'POST',
            data: $(this).serialize(),
            dataType: 'json',
            success: function(resp) {
                if (resp.status) {
                    $('#modalFormularioContacto').modal('hide');
                    tablaContactos.ajax.reload(null, false);

                    Swal.fire({
                        icon: 'success',
                        title: 'Correcto',
                        text: resp.message,
                        timer: 1800,
                        showConfirmButton: false
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: resp.message
                    });
                }
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Ocurrió un error en la petición AJAX'
                });
            }
        });
    });

    $(document).on('click', '.btn-editar-contacto', function() {
        var id = $(this).data('id');

        $.ajax({
            url: '<?php echo base_url("index.php/ventas/cliente-contactos/obtener/"); ?>' + id,
            type: 'GET',
            dataType: 'json',
            success: function(resp) {
                if (resp.status) {
                    $('#contacto_id').val(resp.data.id);
                    $('#cliente_id_hidden').val(resp.data.cliente_id);
                    $('#contacto_nombre').val(resp.data.nombre);
                    $('#contacto_email').val(resp.data.email);
                    $('#contacto_celular').val(resp.data.celular);
                    $('#contacto_sexo').val(resp.data.sexo);
                    $('#contacto_fecha_nacimiento').val(resp.data.fecha_nacimiento);
                    $('#contacto_cargo').val(resp.data.cargo);
                    $('#tituloModalContacto').text('Editar Contacto');
                    $('#modalFormularioContacto').modal('show');
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: resp.message
                    });
                }
            }
        });
    });

    $(document).on('click', '.btn-estado-contacto', function() {
        var id = $(this).data('id');
        var accion = $(this).data('accion');
        var nombre = $(this).data('nombre');

        Swal.fire({
            title: '¿Estás seguro?',
            text: 'Vas a ' + accion + ' el contacto: ' + nombre,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, continuar',
            cancelButtonText: 'Cancelar'
        }).then(function(result) {
            if (result.isConfirmed) {
                $.ajax({
                    url: '<?php echo base_url("index.php/ventas/cliente-contactos/estado/"); ?>' + id,
                    type: 'POST',
                    dataType: 'json',
                    success: function(resp) {
                        if (resp.status) {
                            tablaContactos.ajax.reload(null, false);

                            Swal.fire({
                                icon: 'success',
                                title: 'Correcto',
                                text: resp.message,
                                timer: 1800,
                                showConfirmButton: false
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: resp.message
                            });
                        }
                    },
                    error: function() {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Ocurrió un error al cambiar el estado'
                        });
                    }
                });
            }
        });
    });
});


window.addEventListener('load', function () {
    var tablaLocales = null;

    $(document).on('click', '.btn-locales-cliente', function() {
        var clienteId = $(this).data('id');
        var clienteNombre = $(this).data('nombre');

        $('#cliente_id_local').val(clienteId);
        $('#cliente_id_local_hidden').val(clienteId);
        $('#clienteNombreModalLocal').text(clienteNombre);

        if (tablaLocales !== null) {
            tablaLocales.destroy();
            $('#tablaLocalesCliente').empty();
            $('#tablaLocalesCliente').html(
                '<thead><tr>' +
                '<th>ID</th><th>Dirección</th><th>Estado</th><th style="width:160px;">Acciones</th>' +
                '</tr></thead>'
            );
        }

        tablaLocales = $('#tablaLocalesCliente').DataTable({
            ajax: {
                url: '<?php echo base_url("index.php/ventas/cliente-locales/listar/"); ?>' + clienteId,
                type: 'GET',
                dataSrc: 'data'
            },
            language: {
                lengthMenu: "Mostrar _MENU_ registros",
                zeroRecords: "No se encontraron resultados",
                info: "Mostrando registros del _START_ al _END_ de un total de _TOTAL_",
                infoEmpty: "Mostrando registros del 0 al 0",
                infoFiltered: "(filtrado de un total de _MAX_ registros)",
                search: "Buscar:",
                paginate: {
                    first: "Primero",
                    last: "Último",
                    next: "Siguiente",
                    previous: "Anterior"
                }
            },
            pageLength: 5,
            order: [[0, "desc"]]
        });

        $('#modalLocalesCliente').modal('show');
    });

    $('#btnNuevoLocal').on('click', function() {
        $('#formLocalCliente')[0].reset();
        $('#local_id').val('');
        $('#cliente_id_local_hidden').val($('#cliente_id_local').val());
        $('#tituloModalLocal').text('Nuevo Local');
        $('#modalFormularioLocal').modal('show');
    });

    $('#formLocalCliente').on('submit', function(e) {
        e.preventDefault();

        var localId = $('#local_id').val();
        var url = localId
            ? '<?php echo base_url("index.php/ventas/cliente-locales/actualizar/"); ?>' + localId
            : '<?php echo base_url("index.php/ventas/cliente-locales/guardar"); ?>';

        $.ajax({
            url: url,
            type: 'POST',
            data: $(this).serialize(),
            dataType: 'json',
            success: function(resp) {
                if (resp.status) {
                    $('#modalFormularioLocal').modal('hide');
                    tablaLocales.ajax.reload(null, false);

                    Swal.fire({
                        icon: 'success',
                        title: 'Correcto',
                        text: resp.message,
                        timer: 1800,
                        showConfirmButton: false
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: resp.message
                    });
                }
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Ocurrió un error en la petición AJAX'
                });
            }
        });
    });

    $(document).on('click', '.btn-editar-local', function() {
        var id = $(this).data('id');

        $.ajax({
            url: '<?php echo base_url("index.php/ventas/cliente-locales/obtener/"); ?>' + id,
            type: 'GET',
            dataType: 'json',
            success: function(resp) {
                if (resp.status) {
                    $('#local_id').val(resp.data.id);
                    $('#cliente_id_local_hidden').val(resp.data.cliente_id);
                    $('#local_direccion').val(resp.data.direccion);
                    $('#tituloModalLocal').text('Editar Local');
                    $('#modalFormularioLocal').modal('show');
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: resp.message
                    });
                }
            }
        });
    });

    $(document).on('click', '.btn-estado-local', function() {
        var id = $(this).data('id');
        var accion = $(this).data('accion');
        var direccion = $(this).data('direccion');

        Swal.fire({
            title: '¿Estás seguro?',
            text: 'Vas a ' + accion + ' el local: ' + direccion,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, continuar',
            cancelButtonText: 'Cancelar'
        }).then(function(result) {
            if (result.isConfirmed) {
                $.ajax({
                    url: '<?php echo base_url("index.php/ventas/cliente-locales/estado/"); ?>' + id,
                    type: 'POST',
                    dataType: 'json',
                    success: function(resp) {
                        if (resp.status) {
                            tablaLocales.ajax.reload(null, false);

                            Swal.fire({
                                icon: 'success',
                                title: 'Correcto',
                                text: resp.message,
                                timer: 1800,
                                showConfirmButton: false
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: resp.message
                            });
                        }
                    },
                    error: function() {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Ocurrió un error al cambiar el estado'
                        });
                    }
                });
            }
        });
    });

    $('#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/ventas/clientes/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/ventas/clientes/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>