<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-danger ml-2" onclick="eliminar();">Eliminar</button>
        <button type="button" class="btn btn-info ml-2" data-toggle="modal" data-target="#modalForm2" onclick="cerrar();">Cerrar</button>
    </div>
</div>

<table id="table" class="display" style="width: 100%">
    <thead>
        <tr>
            <th>Folio Planilla</th>
            <th>Fecha Inspeccion</th>
            <th hidden="hidden">Exportador</th>
            <th>Exportador</th>
            <th hidden="hidden">Especie</th>
            <th>Especie</th>
            <th>N° Contenedor</th>
            <th>N° Orden/Embarque/Instructivo</th>
            <th>Cantidad Pallet</th>
            <th>Ingresar</th>
            <th>Cumple</th>
            <th>sincro</th>
            <th hidden="hidden">Obs</th>
        </tr>
    </thead>
    <tbody>
        <?php
        date_default_timezone_set('America/Santiago');
        $fecha_actual = date("Y-m-d");
        $rs = mysql_query("SELECT * FROM contenedor_planilla INNER JOIN cal_exportadoras ON cal_exportadoras.exportador_cod = contenedor_planilla.exportador_cod INNER JOIN cal_especies ON cal_especies.especie_id = contenedor_planilla.especie_cod WHERE contenedor_planilla.inspecctor = '$rut'");

        while ($row = mysql_fetch_array($rs)) {
        ?>
            <tr>
                
                <td><?php echo $row['folio_planilla']; ?></td>
                <td><?php echo $row['fecha_inspeccion']; ?></td>
                <td hidden="hidden"><?php echo $row['exportador_cod']; ?></td>
                <td><?php echo $row['exportador_nombre']; ?></td>
                <td hidden="hidden"><?php echo $row['especie_id']; ?></td>
                <td><?php echo $row['especie_nombre']; ?></td>
                <td><?php echo $row['num_contenedor']; ?></td>
                <td><?php echo $row['num_orden']; ?></td>
                <td><?php echo $row['cant_pallet']; ?></td>
                <?php
                if($row['estado']!=""){
                    echo "<td>CERRADA</td>";
                }else{
                ?>
                <td><a href="inspector.php?inspeccion=ingresocont&folio_planilla=<?php echo $row['folio_planilla'];?>" type="button" class="btn btn-success">Ingresar</a></td>
                <?php
                }
                ?>
                <td><?php echo $row['cumple_norma']; ?></td>
                <td><?php echo $row['sincro']; ?></td>
                <td hidden="hidden"><?php echo $row['observacion']; ?></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 Inspección</label>
                                <input class="form-control" id="fecha_inspeccion" name="fecha_inspeccion" 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">Especie</label>
                                <select class="form-control" id="especie_cod" name="especie_cod">
                                    <?php
                                    $rs = mysql_query("SELECT * FROM cal_especies WHERE cliente_id='$cliente'");
                                    while ($row = mysql_fetch_array($rs)) {
                                    ?>
                                        <option value="<?php echo $row['especie_id']; ?>"><?php echo $row['especie_nombre']; ?></option>
                                    <?php
                                    }
                                    ?>
                                </select>
                            </div>
                            <div class="col-sm" style="min-width:200px">
                                <label for="c">Num Contenedor</label>
                                <input class="form-control" id="num_contenedor" name="num_contenedor" type="text">
                            </div>
                            <div class="col-sm" style="min-width:200px">
                                <label for="c">N° Orden/Embarque/Instructivo</label>
                                <input class="form-control" id="num_orden" name="num_orden" type="text">
                            </div>
                            <div class="col-sm" style="min-width:200px">
                                <label for="c">Cant Pallet</label>
                                <input class="form-control" id="cant_pallet" name="cant_pallet" type="number">
                            </div>
                
                        </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>

<!-- Modal  CERRAR PLANILLA-->
<div class="modal fade" id="modalForm2" 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">Cerrar</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">OBSERVACION</label>
                                <input class="form-control" id="observacion" name="observacion" type="text">
                            </div>
                            
                
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">x</button>
                <button type="button" class="btn btn-primary" onclick="guardar_cerrar();">Cerrar Contenedor</button>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap core JavaScript
    ================================================== -->
<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_inspeccion').val(fecha);
        $('#num_contenedor').val("");
        $('#cant_pallet').val("20");

        url = 'Ingreso/Planillas/save.php';
    }
    
    function editar() {
        if (arreglo != "") {
            $('#folio_planilla').val(arreglo[0][0]);
            $('#fecha_inspeccion').val(arreglo[0][1]);
            $('#exportador_cod').val(arreglo[0][2]);
            $('#especie_cod').val(arreglo[0][4]);
            $('#num_contenedor').val(arreglo[0][6]);
            $('#num_orden').val(arreglo[0][7]);
            $('#cant_pallet').val(arreglo[0][8]);


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

    function guardar() {
        var fecha_inspeccion = $('#fecha_inspeccion').val();
        var exportador_cod = $('#exportador_cod').val();
        var especie_cod = $('#especie_cod').val();
        var num_contenedor = $('#num_contenedor').val();
        var cant_pallet = $('#cant_pallet').val();
        var num_orden = $('#num_orden').val();

        $.ajax({
            type: 'POST',
            url: url,
            data: {
                "fecha_inspeccion": fecha_inspeccion,
                "exportador_cod": exportador_cod,
                "especie_cod": especie_cod,
                "num_contenedor": num_contenedor,
                "cant_pallet": cant_pallet,
                "num_orden": num_orden
            },
            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/eliminar.php',
                    data: {
                        "folio_planilla": 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();
        }


    }
    
    function cerrar() {
        if (arreglo != "") {
            $('#folio_planilla').val(arreglo[0][0]);
            
            $('#observacion').val(arreglo[0][12]);


            url = 'Ingreso/Planillas/cerrar.php?folio_planilla=' + arreglo[0][0] + '&sincro=' + arreglo[0][11];
        } else {
            alert("Seleccione un Registro");
            location.reload();
        }
    }
    
    function guardar_cerrar() {
        
        
        var observacion = $('#observacion').val();

        $.ajax({
            type: 'POST',
            url: url,
            data: {
                "observacion": observacion
            },
            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);
                }

            },
        });

    }
</script>