@extends('theme.layout')
@section('content-layout')




<style>
    div.dataTables_wrapper {
        width: 95vw;
        margin: 0 auto;
    }

</style>


<div class="tab-content">
    <div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
        <div class="row">
            <div class="col-md-12">
                <div class="main-card mb-3 card">
                    <div class="card-header"> <i class="header-icon pe-7s-news-paper icon-gradient bg-love-kiss"></i>Listado de Control de Equipos
                        <div class="col-auto btn-actions-pane-right">
                            <a href="{{route('formequipmentcontrol')}}" class="btn-icon btn btn-success"><i class="pe-7s-add-user btn-icon-wrapper"></i>Agregar nuevo registro</a>
                        </div>
                    </div>

                    <form method="post" autocomplete="off" id="formid" action="{{route('listequipmentcontrol')}}">
                        @csrf
                        <div class='row mb-3 mb-3 justify-content-center row g-3 align-items-end'>

                            @if(session('mensaje'))
                            <div class='alert alert-success error-validation-form-backend'>
                                {{ session('mensaje') }}
                            </div>
                            @endif



                    </form>

                    <hr>

                    <div class="row">
                        <div class="col-md-12 ">
                            <div class="form-group mb3">


                                <table style="width: 100%;" id="listequipmentcontrol" class="table nowrap table-hover table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th style='width:0px'>#</th>
                                            <th>Fecha</th>
                                            <th>Area</th>
                                            <th>Turno</th>
                                            <th>Operador</th>
                                            <th>Equipo</th>


                                            <th style='width:0px'>Estado</th>
                                            <th style='width:0px'>Editar</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($EquipmentControl as $row )
                                        <tr>
                                            <td>{{$row->id}}</td>
                                            <td>{{$row->date_work}}</td>
                                            <td>{{$row->zone_work_name}}</td>
                                            <td>{{$row->shift_name}}</td>
                                            <td>{{$row->operator_name}}</td>
                                            <td>{{$row->equipment_name}}</td>

                                            <td> <input type="checkbox" id="idstatus{{$row->id}}" value="{{$row->id}}" onchange="javascript:update_status('{{route('updateequipmentcontrol')}}',this.id)" data-toggle="toggle" data-onstyle="success" data-offstyle="default" data-size="mini" data-on="Activo" data-off="Inactivo" @if($row->status==1) checked @endif> </td>

                                            <td>
                                                <a href="{{route('formequipmentcontrol',['id'=>$row->id])}}" class="btn mb-2 me-2 btn-icon btn-pill btn btn-outline-focus btn-sm" role="button"><i class="pe-7s-upload btn-icon-wrapper"></i>Editar</a>

                                            </td>
                                        </tr>

                                        @endforeach



                                    </tbody>

                                </table>
                            </div>

                        </div>

                    </div>
                </div>




            </div>

        </div>

    </div>

</div>

</div>

<script>
    $(function() {
        var table_equipmentcontrol = $('#listequipmentcontrol').DataTable({
           // dom: 'Bfrtip'
      
            columnDefs: [{
                    "width": "5px"
                    , "targets": -1
                }, // Define el ancho de la primera columna como 200px
                {
                    "width": "5px"
                    , "targets": -2
                },

            ]
            , scrollX: true, // Activar el scroll horizontal


            autoWidth: true

        });

        table_equipmentcontrol.on('page.dt', function() {
            var paginaActualequipmentcontrol = table_equipmentcontrol.page.info().page;
            //console.log(paginaActualequipmentcontrol);
            sessionStorage.setItem('paginaActualequipmentcontrol', paginaActualequipmentcontrol);
        });
        table_equipmentcontrol.on('search.dt', function() {
            var valorBusquedaequipmentcontrol = table_equipmentcontrol.search();
            sessionStorage.setItem('valorBusquedaequipmentcontrol', valorBusquedaequipmentcontrol);
        });


        var paginaGuardada = sessionStorage.getItem('paginaActualequipmentcontrol');
        var valorBusquedaequipmentcontrolGuardado = sessionStorage.getItem('valorBusquedaequipmentcontrol');
        if (paginaGuardada) {
            table_equipmentcontrol.page(parseInt(paginaGuardada)).draw(false);
        }
        if (valorBusquedaequipmentcontrolGuardado) {
            table_equipmentcontrol.search(valorBusquedaequipmentcontrolGuardado).draw();
        }







        $('.dt-button').removeClass('dt-button');




        $.validate({
            form: '#formid'
            , lang: 'es'
        , });


        $('#date_work').datepicker({
            trigger: "#date_work_trig"
            , format: 'yyyy-mm-dd'
            , autoHide: true,

        });


    });

</script>

@endsection