@extends('adminlte::page')
@section('content_header')

@section('plugins.Datatables', true)
@section('plugins.DateRangePicker', true)
@section('plugins.jqueryValidation', true)
<h1>Deposito</h1>
@stop

@section('content')

@if(session()->has('success'))
<div class="alert alert-success" role="alert">
  {{session()->get('success')}}
  </div>
@endif

@if(session()->has('danger'))
<div class="alert alert-danger" role="alert">
  {{session()->get('danger')}}
  </div>
@endif

{{-- SM size with single date/time config --}}
@php
$config2 = [
    "singleDatePicker" => true,
    "showDropdowns" => true,
    "startDate" => "js:moment()",
    "minYear" => 2000,
    "maxYear" => "js:parseInt(moment().format('YYYY'),10)",
    "timePicker" => false,
    "timePicker24Hour" => false,
    "timePickerSeconds" => false,
    "cancelButtonClasses" => "btn-danger",
    "locale" => ["format" => "DD-MM-YYYY"],
];
@endphp

{{--Formulario de búsqueda--}}

<form class="form-horizontal"  id="frmEmpresa" action="#" method="POST">
    <x-adminlte-card title="FECHA" theme="lightblue" theme-mode="outline" icon="fas fa-lg fa-envelope" header-class="text-uppercase rounded-bottom border-info">

        <x-adminlte-date-range name="drSizeSm" label="Fecha a consultar" igroup-size="sm" :config="$config2">
            <x-slot name="appendSlot">
                <div class="input-group-text bg-dark">
                    <i class="fas fa-calendar-day"></i>
                </div>
            </x-slot>
        </x-adminlte-date-range>

        <x-slot name="footerSlot">
            <x-adminlte-button label="Buscar" theme="success" icon="fas fa-key" type="button" onclick="buscarDetallePlanta()"/>
          </x-slot>

    </x-adminlte-card>
@csrf
</form>


{{-- Setup data for datatables --}}
@php
$heads = [
    '',
    'Id',
    'Tipo Botellón',
    'Merma',
    'Botellones Entregados',
    'Botellones Recibidos',
    'Valor Recarga',
    'Total',
    'Acción Realizada',
    'Botellones no vendidos',
    'Fecha de Registro',
    'Fecha de Actualización',
    'Actualizar'
];

  $btnEdit = '<button class="btn btn-xs btn-default text-primary mx-1 shadow" title="Edit"><i class="fa fa-lg fa-fw fa-pen"></i></button';
$btnDelete = '<button class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete"><i class="fa fa-lg fa-fw fa-trash"></i></button>';
  $btnShow = '<button class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete"><i class="fa fa-lg fa-fw fa-trash"></i></button>';

    $config = [
    'data' => $depositoPlanta,
    'order' => [[1, 'asc']],
    'columns' => [null, null, null, null,['orderable' => true]],
];

@endphp
<x-adminlte-datatable id="table1" :heads="$heads" head-theme="dark" theme="light" striped hoverable with-buttons with-footer>
    @if(1==2)
    @foreach($config['data'] as $row)
        <tr>
                <td></td>
                <td>{{$row->planta_id}}-{{$row->planta_estado}}</td>
                <td>{{$row->tipo_botellon_glosa}}</td>
                <td>{{$row->planta_merma_entrega}}</td>
                <td>{{$row->planta_cantidad_entregado}}</td>
                <td>{{$row->planta_total_recibido}}</td>
                <td>{{$row->planta_valor_unidad}}</td>
                <td>{{$row->planta_valor_unidad * $row->planta_cantidad_recibido}}</td>
                <td>{{$row->planta_tipo_proceso}}</td>
                <td>{{$row->planta_cantidad_camion}}</td>
                <td>{{date("d-m-Y H:i:sA",strtotime($row->planta_created_at))}}</td>
                <td>{{date("d-m-Y H:i:sA",strtotime($row->planta_updated_at))}}</td>
                @if ($row->planta_estado === 0)
                <td><x-adminlte-button label="Actualizar" theme="success" icon="fas fa-key" type="button" class="btn-sm" onclick="actualizarPlanta({{$row->planta_id}})"/></br><x-adminlte-button label="Finalizar" theme="danger" icon="fas fa-key" type="button" class="btn-sm" onclick="finalizarPlanta({{$row->planta_id}})" id="btnFinalizar{{$row->planta_id}}"/></td>
                @else
                <td></td>
                @endif
                
        </tr>

        <x-adminlte-modal id="modalMin{{$row->planta_id}}" class="modalMin" title="" size='xl'>
            <form class="form-horizontal"  id="frmEmpresa{{$row->planta_id}}" action="#" method="POST">
            <x-adminlte-card theme="primary" theme-mode="outline" title="Detalle Planta">
                
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-3 col-form-label">TIPO DE BOTELLÓN</label>
                    <div class="col-sm-9">
                        <select name="planta_tipo_botellon" id="planta_tipo_botellon" class="form-control">
                            <option value="">Seleccionar...</option>
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-3 col-form-label">MERMA (RECEPCIÓN)</label>
                    <div class="col-sm-9">
                      <input type="number" name="planta_merma" id="planta_merma" class="form-control" min="0" max="300" value="0"/>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-3 col-form-label">BOTELLONES ENTREGADOS</label>
                    <div class="col-sm-9">
                      <input type="number" name="planta_cantidad_entregado" id="planta_cantidad_entregado" class="form-control" min="0" max="300" value="0" readonly/>
                    </div>                    
                </div>

                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-3 col-form-label">BOTELLONES RECIBIDOS</label>
                    <div class="col-sm-9">
                      <input type="number" name="planta_cantidad_recibido" id="planta_cantidad_recibido" class="form-control" min="0" max="300" value="1"/>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-3 col-form-label">BOTELLONES RECIBIDOS</label>
                    <div class="col-sm-9">
                      <input type="number" name="planta_total_recibido" id="planta_total_recibido" class="form-control" readonly/>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-3 col-form-label">BOTELLONES PENDIENTES</label>
                    <div class="col-sm-9">
                      <input type="number" name="planta_total_pendiente" id="planta_total_pendiente" class="form-control" readonly/>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-3 col-form-label">BOTELLONES EN CAMIÓN</label>
                    <div class="col-sm-9">
                      <input type="number" name="planta_cantidad_camion" id="planta_cantidad_camion" class="form-control" min="0" max="300" value="0" readonly/>
                    </div>                    
                </div>

                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-3 col-form-label">VALOR RECARGA</label>
                    <div class="col-sm-9">
                      <input type="number" name="planta_valor_unidad" id="planta_valor_unidad" class="form-control" min="0" max="1000" value="1"/>
                    </div>
                  </div>

              </x-adminlte-card>
        
            <x-slot name="footerSlot">
                <x-adminlte-button theme="success" type="button" label="Actualizar" onclick="actualizarDetallePlanta({{$row->planta_id}})" id="btnActualizar{{$row->planta_id}}"/>
                <x-adminlte-button theme="danger" label="Cerrar" data-dismiss="modal"/>
              </x-slot>
            </form>
            </x-adminlte-modal>
    @endforeach
    @endif
</x-adminlte-datatable>

<x-adminlte-modal id="modalMin" class="modalMin" title="" size='xl'>
    <form class="form-horizontal"  id="frmEmpresa" action="#" method="POST">
    <x-adminlte-card theme="primary" theme-mode="outline" title="Detalle Planta">
        
        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-3 col-form-label">TIPO DE BOTELLÓN</label>
            <div class="col-sm-9">
                <select name="planta_tipo_botellon" id="planta_tipo_botellon" class="form-control">
                    <option value="">Seleccionar...</option>
                </select>
            </div>
        </div>

        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-3 col-form-label">MERMA (RECEPCIÓN)</label>
            <div class="col-sm-9">
              <input type="number" name="planta_merma" id="planta_merma" class="form-control" min="0" max="300" value="0"/>
            </div>
        </div>

        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-3 col-form-label">BOTELLONES ENTREGADOS</label>
            <div class="col-sm-9">
              <input type="number" name="planta_cantidad_entregado" id="planta_cantidad_entregado" class="form-control" min="0" max="300" value="0" readonly/>
            </div>                    
        </div>

        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-3 col-form-label">BOTELLONES RECIBIDOS</label>
            <div class="col-sm-9">
              <input type="number" name="planta_cantidad_recibido" id="planta_cantidad_recibido" class="form-control" min="0" max="300" value="1"/>
            </div>
        </div>

        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-3 col-form-label">BOTELLONES RECIBIDOS</label>
            <div class="col-sm-9">
              <input type="number" name="planta_total_recibido" id="planta_total_recibido" class="form-control" readonly/>
            </div>
        </div>

        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-3 col-form-label">BOTELLONES PENDIENTES</label>
            <div class="col-sm-9">
              <input type="number" name="planta_total_pendiente" id="planta_total_pendiente" class="form-control" readonly/>
            </div>
        </div>
        
        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-3 col-form-label">BOTELLONES EN CAMIÓN</label>
            <div class="col-sm-9">
              <input type="number" name="planta_cantidad_camion" id="planta_cantidad_camion" class="form-control" min="0" max="300" value="0" readonly/>
            </div>                    
        </div>

        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-3 col-form-label">VALOR RECARGA</label>
            <div class="col-sm-9">
              <input type="number" name="planta_valor_unidad" id="planta_valor_unidad" class="form-control" min="1" max="1000"/>
            </div>
          </div>

      </x-adminlte-card>

    <x-slot name="footerSlot">
        <x-adminlte-button theme="success" label="Actualizar" onclick="actualizarDetallePlanta()" id="btnActualizar"/>
        <x-adminlte-button theme="danger" label="Cerrar" data-dismiss="modal"/>
      </x-slot>
      <input type="hidden" name="planta_id" id="planta_id">
    </form>
    </x-adminlte-modal>
@stop

@section('js')
<script type="text/javascript">
$(function(){
    sumarCamposTabla("");
    //listaPendientes();
    $("#btnActualizar").on("click",function(e){
        e.preventDefault();
    });

    listaPendientes();
});

function format(d) {
  let _token = $("input[name='_token']").val();
  let data = ({planta_id:d.planta_id,_token:_token});
  let rr = $.ajax({
    type:'POST',
    url:'{{route('deposito_planta.getDetallePlantaLog')}}',
    data:data,
    dataType:'JSON',
    async:false,
    success : function (response){}
  });

    let dd = "<table class='table table-hover table-condensed table-responsive' id='tblChildRow'>";
      dd+='<thead>';
      dd+='<th>Cantidad Recibida</th>';
      dd+='<th>Valor</th>';
      dd+='<th>Fecha de Registro</th>';
      dd+='<th>Anular</th>';
      dd+='</thead>';
      dd+='<tbody>';
    $.each(rr.responseJSON,function(i,v){
        let fecha_creado = moment(v.log_updated_at);
        dd+='<tr>';
        dd+='<td>'+v.log_recibido+'</td>';
        dd+='<td>$'+v.log_valor+'</td>';
        dd+='<td>'+fecha_creado.format("DD/MM/YYYY HH:mm:ss A")+'</td>';
        dd+='<td><button class="btn btn-sm btn-danger" onclick="anularPlantaLog('+v.log_id+')">Anular</button></td>';
        dd+='</tr>';
    });
    dd+='</tbody></table>';    
    return dd;
}

function listaPendientes()
{
    let fecha = $("#drSizeSm").val();
    let _token = $("input[name=_token]").val();
    let data = ({fecha:fecha,_token:_token});

    table = new DataTable('#table1', {
    responsive:true,
    destroy:true,
    ajax: {
      url:'{{route('deposito_planta.getDetallePlanta')}}',
      data:data,
      type:'POST',
      dataType:'JSON',
      cache:false,
      dataSrc : '',
    },
    columns: [
      {
            className: 'dt-control',
            orderable: false,
            data: null,
            defaultContent: ''
      },
        { data: 'planta_id' },
        { data: 'tipo_botellon_glosa' },
        { data: 'planta_merma_entrega' },
        { data: 'planta_cantidad_entregado' },
        { data: 'planta_total_recibido' },
        { data: 'planta_valor_unidad' },
        { data: '',
            render : function(data,type,row)
            {
                return row.planta_valor_unidad * row.planta_cantidad_recibido;
            }
         },
        { data: 'planta_tipo_proceso' },
        { data: 'planta_cantidad_camion' },
        { data: '',
            render : function(data,type,row)
            {
                let fecha_creado = moment(row.planta_created_at);
                return fecha_creado.format("DD/MM/YYYY HH:mm:ss A");
            }
         },
        { data: '',
            render : function(data,type,row)
            {
                let fecha_actualizado = moment(row.planta_updated_at);
                return fecha_actualizado.format("DD/MM/YYYY HH:mm:ss A");
            }
         },
        { data: '',
            render : function (data,type,row)
            {
                return (parseInt(row.planta_estado) === 0 ? '<button type="button" class="btn btn-sm btn-success" onclick="actualizarPlanta('+row.planta_id+')">Actualizar</button></br><button type="button" class="btn btn-sm btn-danger" onclick="finalizarPlanta('+row.planta_id+')" id="btnFinalizar'+row.planta_id+'">Finalizar</button>' : '');
            }
         },
    ],
    order: [[1, 'asc']]
});

let tableState = {}; // Use an object to track each row's state
table.on('click', 'td.dt-control', function (e) {
    let tr = e.target.closest('tr');
    let row = table.row(tr);
    let rowId = tr.dataset.rowId; // Ensure each row has a unique identifier

    if (tableState[rowId]) {
        tableState[rowId] = false;
        row.child.hide();
    } else {
        tableState[rowId] = true;
        row.child(format(row.data())).show();
    }
});
}

function anularPlantaLog(log_id)
{
    let _token = $("input[name=_token]").val();
    data = ({log_id:log_id,_token:_token});
    $.ajax({
        type:'POST',
        url:'{{route('deposito_planta_log.anular_planta_detalle')}}',
        data:data,
        dataType:'JSON',
        success : function (response)
        {
            console.log(response);
            buscarDetallePlanta();
        }
    })
}

function buscarDetallePlanta()
{
    let fecha = $("#drSizeSm").val();
    let _token = $("input[name=_token]").val();

    let data = ({fecha:fecha,_token:_token});

    table = new DataTable('#table1', {
    responsive:true,
    destroy:true,
    ajax: {
      url:'{{route('deposito_planta.getDetallePlanta')}}',
      data:data,
      type:'POST',
      dataType:'JSON',
      cache:false,
      dataSrc : '',
    },
    columns: [
      {
            className: 'dt-control',
            orderable: false,
            data: null,
            defaultContent: ''
      },
        { data: null,
            render: function(data,type,row)
            {
                return row.planta_id+'-'+row.planta_estado
            }
         },
        { data: 'tipo_botellon_glosa' },
        { data: 'planta_merma_entrega' },
        { data: 'planta_cantidad_entregado' },
        { data: 'planta_total_recibido' },
        { data: 'planta_valor_unidad' },
        { data: '',
            render : function(data,type,row)
            {
                return row.planta_valor_unidad * row.planta_cantidad_recibido;
            }
         },
        { data: 'planta_tipo_proceso' },
        { data: 'planta_cantidad_camion' },
        { data: '',
            render : function(data,type,row)
            {
                let fecha_creado = moment(row.planta_created_at);
                return fecha_creado.format("DD/MM/YYYY HH:MM:SS a");
            }
         },
        { data: '',
            render : function(data,type,row)
            {
                let fecha_actualizado = moment(row.planta_updated_at);
                return fecha_actualizado.format("DD/MM/YYYY HH:MM:SS a");
            }
         },
        { data: '',
            render : function (data,type,row)
            {
                return (parseInt(row.planta_estado) === 0 ? '<button type="button" class="btn btn-sm btn-success" onclick="actualizarPlanta('+row.planta_id+')">Actualizar</button></br><button type="button" class="btn btn-sm btn-danger" onclick="finalizarPlanta('+row.planta_id+')" id="btnFinalizar'+row.planta_id+'">Finalizar</button>' : '');
            }
         },
    ],
    order: [[1, 'asc']]
});

let tableState = {}; // Use an object to track each row's state
table.on('click', 'td.dt-control', function (e) {
    let tr = e.target.closest('tr');
    let row = table.row(tr);
    let rowId = tr.dataset.rowId; // Ensure each row has a unique identifier

    if (tableState[rowId]) {
        tableState[rowId] = false;
        row.child.hide();
    } else {
        tableState[rowId] = true;
        row.child(format(row.data())).show();
    }
});

}


function sumarCamposTabla(data)
{
    if ($.fn.DataTable.isDataTable('#table1')) {
        $('#table1').DataTable().destroy();
       if(data != "")
       {
        $("#table1 tbody").html(data);
       }
    }

    $("#table1").dataTable({
    'footerCallback' : function(row,data,start,end,display){
        var api = this.api();
        var total1 = api.column(1,{ page: 'current' }).data().reduce(function(a,b){
            return parseInt(a) + parseInt(b);
        },0);

        var total2 = api.column(2,{ page: 'current' }).data().reduce(function(a,b){
            return parseInt(a) + parseInt(b);
        },0);

        var total3 = api.column(3,{ page: 'current' }).data().reduce(function(a,b){
            return parseInt(a) + parseInt(b);
        },0);

        var total5 = api.column(5,{ page: 'current' }).data().reduce(function(a,b){
            return parseInt(a) + parseInt(b);
        },0);

        $(api.column(1).footer()).html("Total: "+total1);
        $(api.column(2).footer()).html("Total: "+total2);
        $(api.column(3).footer()).html("Total: "+total3);
        $(api.column(5).footer()).html("Total: "+total5);
    },
        'initComplete': function() {
            this.api().columns().every(function() {
                var column = this;
                // Add event listener for changes in the column data
                column.data().on('change', function() {
                    table.draw(); // Redraw the table to update the footer
                });
            });
        },
        'draw': function() {
        var total1 = table.column(1).data().reduce(function(a,b){
            return parseInt(a) + parseInt(b);
        },0);

        var total2 = table.column(2).data().reduce(function(a,b){
            return parseInt(a) + parseInt(b);
        },0);

        var total3 = table.column(3).data().reduce(function(a,b){
            return parseInt(a) + parseInt(b);
        },0);

        var total5 = table.column(5).data().reduce(function(a,b){
            return parseInt(a) + parseInt(b);
        },0);
        $(table.column(1).footer()).html("Total: "+total1);
        $(table.column(2).footer()).html("Total: "+total2);
        $(table.column(3).footer()).html("Total: "+total3);
        $(table.column(5).footer()).html("Total: "+total5);
    }
});
    
}

function actualizarPlanta(id)
{
    let _token = $("input[name='_token']").val();
    let data = ({planta_id:id,_token:_token});
    
    $.ajax({
        type:'POST',
        url:'{{route('deposito_planta.getDetallePlantaID')}}',
        data:data,
        dataType:'JSON',
        success : function (response)
        {
            $.each(response,function(i,v){
                $("#modalMin #planta_tipo_botellon").html("<option value='0'>"+v.tipo_botellon_glosa+"</option>");
                $("#modalMin #planta_cantidad_entregado").val(v.planta_cantidad_entregado);
                $("#modalMin #planta_cantidad_camion").val(v.planta_cantidad_camion);
                $("#modalMin #planta_merma").val(v.planta_merma_entrega);
                $("#modalMin #planta_total_recibido").val(v.planta_total_recibido);
                $("#modalMin #planta_total_pendiente").val(v.planta_cantidad_entregado - v.planta_total_recibido);
                $("#modalMin #planta_valor_unidad").val(v.planta_valor_unidad);
                $("#modalMin #planta_id").val(v.planta_id);
                $("#modalMin #planta_cantidad_recibido").attr("max",Math.max(v.planta_cantidad_entregado - v.planta_total_recibido));
                $("#modalMin #planta_cantidad_recibido").val(Math.max(v.planta_cantidad_entregado - v.planta_total_recibido));
            });
            $("#modalMin").modal("show");
        }
    })
}

function actualizarDetallePlanta()
{
    let id = $("#modalMin #planta_id").val();
    let _token = $("input[name='_token']").val();
    let planta_merma = $("#modalMin #planta_merma").val();
    let planta_cantidad_recibido = $("#modalMin #planta_cantidad_recibido").val();
    let planta_valor_unidad = $("#modalMin #planta_valor_unidad").val();
    let data = ({_token:_token,planta_merma:planta_merma,planta_cantidad_recibido:planta_cantidad_recibido,planta_valor_unidad:planta_valor_unidad,planta_id:id});
    console.log(data);
    $.ajax({
        type:'POST',
        url:'{{route('deposito_planta.actualizarPlanta')}}',
        data:data,
        dataType:'JSON',
        beforeSend : function()
        {
            $("#btnActualizar").hide();
        },
        success : function (response)
        {
            if(response.Respuesta)
            {
                Swal.fire({
                    icon: "success",
                    title: "Exito",
                    text: "Registro actualizado con éxito",
                });
            }else{
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: "Error al actualizar el registro",
                });
            }
        },
        complete : function()
        {
            $("#modalMin #planta_cantidad_recibido").val(1);
            $("#modalMin").modal("hide");
            buscarDetallePlanta();
            $("#btnActualizar").show();
        }
    })
    
}

function finalizarPlanta(id)
{
    let _token = $("input[name='_token']").val();
    let data = ({planta_id:id,_token:_token});

    $.ajax({
        type:'POST',
        url:'{{route('deposito_planta.finalizarProceso')}}',
        data:data,
        dataType:'JSON',
        beforeSend : function()
        {
            $("#btnFinalizar"+id).hide();
        },
        success : function (response)
        {
            if(response.Respuesta)
            {
                $("#modalMin"+id).modal("hide");
                alert("Detalle actualizado correctamente");
            }else{
                alert("Error al actualizar el registro");
            }
        },
        complete : function()
        {
            buscarDetallePlanta();
        }
    })
}
</script>
@stop