<div class="row mt-2 mb-3">
    <div class="col-sm">
        <button type="button" class="btn btn-primary ml-2" data-toggle="modal" data-target="#modalForm" onclick="nuevo();">Nuevo</button>
        <button type="button" class="btn btn-primary ml-2" data-toggle="modal" data-target="#modalForm" onclick="editar();">Editar</button>
        <button type="button" class="btn btn-primary ml-2" onclick="eliminar();">Eliminar</button>
    </div>
</div>

<table id="table" class="display" style="width: 100%">
    <thead>
        <tr>
            <th>id_planilla_dia</th>
            <th>cliente_cod</th>
            <th hidden="hidden">exportador_cod</th>
            <th>Exportador</th>
            <th hidden="hidden">Packing</th>
            <th>Packing</th>
            <th>fecha_proceso</th>
            <th>sincro</th>
            <th>Ingresar</th>
        </tr>
    </thead>
    <tbody>
        <?php
        //echo $cliente;
        date_default_timezone_set('America/Santiago');
        $fecha_actual = date("Y-m-d");
        $rs = mysql_query("SELECT * FROM pro_planilla_dia INNER JOIN cal_exportadoras ON cal_exportadoras.exportador_cod = pro_planilla_dia.exportador_cod INNER JOIN cal_packing ON cal_packing.packing_id = pro_planilla_dia.packing_cod WHERE pro_planilla_dia.usu_crea = '$rut'");

        while ($row = mysql_fetch_array($rs)) {
        ?>
            <tr>
                <td><?php echo $row['id_planilla_dia']; ?></td>
                <td><?php echo $row['cliente_cod']; ?></td>
                <td hidden="hidden"><?php echo $row['exportador_cod']; ?></td>
                <td><?php echo $row['exportador_nombre']; ?></td>
                <td hidden="hidden"><?php echo $row['packing_id']; ?></td>
                <td><?php echo $row['packing_nombre']; ?></td>
                <td><?php echo $row['fecha_proceso']; ?></td>
                <td><?php echo $row['sincro']; ?></td>
                <td><a href="inspector.php?inspeccion=ingresoproceso&id_planilla_dia=<?php echo $row['id_planilla_dia']; ?>" type="button" class="btn btn-success">Ingresar</a></td>
            </tr>
        <?php
        }
        ?>
    </tbody>
</table>


<!-- Modal  NUEVO-->
<div class="modal fade" id="modalForm" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" width="100%">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Crear</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
                    <div class="jumbotron" style="padding: 5px; height: 10%; margin: 0px;">
                        <div class="row" style="display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap: 12px; ">
                            <div class="col-sm" style="min-width:200px">
                                <label for="c">Fecha Proceso</label>
                                <input class="form-control" id="fecha_proceso" name="fecha_proceso" type="date">
                            </div>
                            <div class="col-sm" style="min-width:200px">
                                <label for="c">Exportador</label>
                                <select class="form-control" id="exportador_cod" name="exportador_cod">
                                    <?php

                                    $rs = mysql_query("SELECT * FROM cal_exportadoras WHERE cliente_id='$cliente'");
                                    while ($row = mysql_fetch_array($rs)) {
                                    ?>
                                        <option value="<?php echo $row['exportador_cod']; ?>"><?php echo $row['exportador_nombre']; ?></option>
                                    <?php
                                    }
                                    ?>
                                </select>
                            </div>

                            <div class="col-sm" style="min-width:200px">
                                <label for="c">Packing</label>
                                <select class="form-control editable" id="packing_cod" name="packing_cod">
                                    <?php
                                    $rs = mysql_query("SELECT * FROM cal_packing WHERE cliente_id='$cliente'");
                                    while ($row = mysql_fetch_array($rs)) {
                                    ?>
                                        <option value="<?php echo $row['packing_id']; ?>"><?php echo $row['packing_nombre']; ?></option>
                                    <?php
                                    }
                                    ?>
                                </select>
                            </div>

                        </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="guardar();">Guardar</button>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap core JavaScript
    ================================================== -->
<script>
    $(document).ready(function() {
        $(".editable").chosen({
            width: "100%"

        });
    });
</script>
<script type="text/javascript">
    var events;
    var table;
    var rowData;
    var arreglo = "";
    $(document).ready(function() {
        //$('#planilla').DataTable();
        //events = $('#events');
        table = $('#table').DataTable({
            select: true,
            "scrollX": true
        });

        table
            .on('select', function(e, dt, type, indexes) {
                var rowData = table.rows(indexes).data().toArray();
                //events.prepend( '<div><b>'+type+' selection</b> - '+JSON.stringify( rowData )+'</div>' ); listar fila
                arreglo = rowData;
            })
            .on('deselect', function(e, dt, type, indexes) {
                var rowData = table.rows(indexes).data().toArray();
                //events.prepend( '<div><b>'+type+' <i>de</i>selection</b> - '+JSON.stringify( rowData )+'</div>' ); listar fila
                arreglo = "";
            });
    });

    var url;

    function nuevo() {
        var fecha = <?php echo json_encode($fecha_actual); ?>;
        $('#fecha_proceso').val(fecha);

        url = 'Ingreso/Planillas_procesos_activos/save.php';
    }

    function editar() {
        if (arreglo != "") {
            $('#fecha_proceso').val(arreglo[0][6]);
            $('#exportador_cod').val(arreglo[0][2]);
            $('#packing_cod').val(arreglo[0][4]);
            $('#packing_cod').trigger("chosen:updated");
            $('#sincro').val(arreglo[0][7]);

            url = 'Ingreso/Planillas_procesos_activos/update.php?id_planilla_dia=' + arreglo[0][0] + '&sincro=' + arreglo[0][7];
        } else {
            alert("Seleccione un Registro");
            location.reload();
        }
    }

    function guardar() {
        var fecha_proceso = $('#fecha_proceso').val();
        var exportador_cod = $('#exportador_cod').val();
        var packing_cod = $('#packing_cod').val();

        $.ajax({
            type: 'POST',
            url: url,
            data: {
                "fecha_proceso": fecha_proceso,
                "exportador_cod": exportador_cod,
                "packing_cod": packing_cod
            },
            dataType: 'json',
            cache: false,
            success: function(result) {
                if (result.success) {
                    $('#modalForm').modal('toggle');
                    location.reload();
                } else {
                    alert("Error al registrar, verifique la informacion.");
                    alert(result.sql_mesage);
                    alert(result.result);
                }

            },
        });

    }

    function eliminar() {
        if (arreglo != "") {
          

            if (confirm("Desea Borrar la planilla " + arreglo[0][0] + "?")) {
                $.ajax({
                    type: 'POST',
                    url: 'Ingreso/Planillas_procesos_activos/eliminar.php',
                    data: {
                        "id_planilla_dia": arreglo[0][0]
                    },
                    dataType: 'json',
                    cache: false,
                    success: function(result) {

                        if (result.success) {
                            
                            location.reload();
                        } else {
                            alert("Error al registrar, verifique la informacion.");
                        }

                    },
                });
            }
        } else {
            alert("Seleccione un Registro");
            location.reload();
        }


    }
</script>