<?php

use yii\helpers\Html;
use yii\web\View;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;

$baseUrl = Yii::$app->getUrlManager()->getBaseUrl();
$this->title = 'Reporte de Pedidos';
$this->params['breadcrumbs'][] = $this->title;
?>
<?php $form = ActiveForm::begin(); ?>

<section class="" style="min-height:180px!important;padding-bottom: 0px!important">
    <div class="card ">
        <div class="card-header with-border justify-content-between">
            <strong>Filtros</strong>
            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-2">
                    <div class="form-group">
                        <i class="fa fa-calendar"></i>
                        <label>F Creaci&oacute;n Inicio</label>
                        <?= $form->field($model, 'finicio')->widget(\yii\jui\DatePicker::class, [
                            'dateFormat' => 'dd-MM-yyyy',
                            'options' => ['autocomplete' => 'off', 'class' => 'form-control'],
                            'clientOptions' => [
                                'monthNames' => [
                                    'Enero',
                                    'Febrero',
                                    'Marzo',
                                    'Abril',
                                    'Mayo',
                                    'Junio',
                                    'Julio',
                                    'Agosto',
                                    'Septiembre',
                                    'Octubre',
                                    'Noviembre',
                                    'Diciembre'
                                ],
                            ],
                        ])->label(false) ?>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <i class="fa fa-calendar"></i>
                        <label>F Creaci&oacute;n Fin</label>
                        <?= $form->field($model, 'ffin')->widget(\yii\jui\DatePicker::class, [
                            'dateFormat' => 'dd-MM-yyyy',
                            'options' => ['autocomplete' => 'off', 'class' => 'form-control'],
                            'clientOptions' => [
                                'monthNames' => [
                                    'Enero',
                                    'Febrero',
                                    'Marzo',
                                    'Abril',
                                    'Mayo',
                                    'Junio',
                                    'Julio',
                                    'Agosto',
                                    'Septiembre',
                                    'Octubre',
                                    'Noviembre',
                                    'Diciembre'
                                ],
                            ],
                        ])->label(false) ?>
                    </div>
                </div>

                <div class="col-md-2">
                    <div class="form-group">
                        <i class="fa fa-bookmark"></i>
                        <label>Tipo</label>
                        <?= $form->field($model, "tipo")->dropDownList(["1" => "Pedido", "2" => "No Pedido"],['prompt' => 'Seleccione'])->label(false) ?>
                    </div>
                </div>

            </div>
            <div class="card-footer">
                <?= Html::button('Buscar', ['class' => 'butt btn btn-success py-1 px-2', 'onclick' => 'fn_search()']) ?>
                <?= Html::button('Exportar', ['class' => 'butt btn btn-warning py-1 px-2', 'onclick' => 'fn_export()']) ?>
            </div>
        </div>
</section>

<section class="">
    <div class="card card-default">
        <div class="card-header with-border justify-content-between">
            <strong>Resultados</strong>
            <div class=" box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div>
        </div>
        <div class="card-body ">
            <div class="table-responsive-yoha">
                <table id="datatablex" class="table table-bordered  table-sm table-hover border-top ">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Cod.Vendedor</th>
                            <th>Nom. Vendedor</th>
                            <th>Cod. Codigo</th>
                            <th>Nom. Cliente</th>
                            <th>Condici&oacute;n</th>
                            <th>Total</th>
                            <th>F.Registro</th>
                            <th>Comentario</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>Id</th>
                            <th>Cod.Vendedor</th>
                            <th>Nom. Vendedor</th>
                            <th>Cod. Codigo</th>
                            <th>Nom. Cliente</th>
                            <th>Condici&oacute;n</th>
                            <th>Total</th>
                            <th>F.Registro</th>
                            <th>Comentario</th>
                            <th>Acciones</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</section>
<?php ActiveForm::end(); ?>

<div class="modal fade" id="modalDetalle" tabindex="-1" aria-labelledby="modalDetalleLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header d-flex justify-content-between">
                <h4 class="modal-title">Detalle del Inventario</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="detalle">
                <!-- Aquí se cargará el contenido dinámico -->
            </div>
        </div>
    </div>
</div>



<?php


$this->registerJs('

var table = $("#datatablex").DataTable( {
    retrieve: true,
    paging: false,
    dom: "rtip",
});

function fn_search(){
    if($("#reporte-finicio").val() == "" && $("#reporte-ffin").val() == ""){
        show_message("Debe seleccionar un rango de fechas");
        return;
    }
    table.destroy();
    table = $("#datatablex").DataTable(
    {
            "responsive": true,
            "processing": true,
            "serverSide": true,
            "scrollX": false,
            "ordering": false,
            "searching": false,
            "dom": "rtip",
            "columns": [
                {"data":"id"},
                {"data":"usr_pk"},
                {"data":"usr_nombre"},
                {"data":"cli_codigo"},                
                {"data":"cli_nombre"},
                {"data":"condicion"},  
                {"data":"total"},
                {"data":"fecha_registro"},
                {"data":"observacion"},
                {
                    mRender: function(data, type, row) {
                        return "<a class=\"btn btn-primary btn-sm bi bi-pencil\" onclick=\"fn_detalle(\'" + row.id + "\')\"></a>";
                    }    
                }             
            ],            
            fixedColumns: true,
           
            "ajax": {
                url: "' . $baseUrl . '/reporte/pedido-ajax", 
                data: {
                    "finicio":$("#reporte-finicio").val(),
                    "ffin":$("#reporte-ffin").val(),
                    "tipo":$("#reporte-tipo").val(),
                },
                type: "post",  
            },
            error: function () {  // error handling
                $(".employee-grid-error").html("");
                $("#employee-grid").append("<tbody class=\"employee-grid-error\"><tr><th colspan=\"3\">No data found in the server</th></tr></tbody>");
                $("#employee-grid_processing").css("display", "none");
            },
            "language": {
                processing: "<i class=\"fa fa-spinner fa-spin fa-3x fa-fw\"></i><span class=\"sr-only\">Cargando...</span>"
            }
    });
}

function show_message(message){
    Swal.fire({	
        title:"Mensaje",
        html: message,
        icon: "warning",
        allowEscapeKey: false,
        allowOutsideClick: false,
        confirmButtonText: "Aceptar",
    }).then((result) => {
        if (result.isConfirmed) {		    		    				
        }
    });	
}

function fn_detalle(id) {  
    var url = "' . $baseUrl . '/reporte/pedido-detalle?id=" + id;
    document.getElementById("detalle").innerHTML = "<p>Cargando...</p>";

    fetch(url)
        .then(response => response.text())
        .then(data => {
            document.getElementById("detalle").innerHTML = data;
        })
        .catch(error => {
            document.getElementById("detalle").innerHTML = "<p>Error al cargar el contenido.</p>";
            console.error("Error en la carga del modal:", error);
        });

    var modal = new bootstrap.Modal(document.getElementById("modalDetalle"));
    modal.show();
}

function fn_export(){
    var finicio = $("#reporte-finicio").val();
    var ffin = $("#reporte-ffin").val();
    var tipo = $("#reporte-tipo").val();

    var url = "' . $baseUrl . '/reporte/export-pedido?finicio="+finicio+"&ffin="+ffin+"&tipo="+tipo;
    location.href = url;
}

', View::POS_END);
?>
<?php
$this->registerCss("
");
?>