@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 
                        <div class="col-auto btn-actions-pane-right"> 
                        </div>
                    </div>

                    <form method="post" autocomplete="off" id="formid" action="{{route('listworkdetail')}}">
                        @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="listworkdetail"
                                    class="table nowrap table-hover table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th style='width:0px'>#</th>                                             <th>operador</th>                                            <th>cambio</th>                                            <th>trabajo de zona</th>                                            <th>Detalle de trabajo por zonas</th>                                            <th>estado de asistencia</th>                                            <th>Fecha de trabajo</th>                                            <th>nombre</th>                                            <th>supervisor</th>                                            <th>trabajo de estatus</th>                                            <th>trabajar</th>

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

                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($WorkDetail as $row )
                                        <tr>
                                            <td>{{$row->id}}</td>
                     <td>{{$row->date_work}}</td>
                     <td>{{$row->name}}</td>                                            <td>{{$row->operator_name}}</td>                                            <td>{{$row->shift_name}}</td>                                            <td>{{$row->zone_work_name}}</td>                                            <td>{{$row->zone_work_detail_name}}</td>                                            <td>{{$row->status_attendance_name}}</td>                                            <td>{{$row->supervisor_name}}</td>                                            <td>{{$row->status_work_name}}</td>                                            <td>{{$row->work_name}}</td>



                                            <td>    @if($row->status==1) Activo @else Inactivo @endif     </td>

                                            <td> 

                                            </td>
                                        </tr>

                                        @endforeach



                                    </tbody>

                                </table>
                            </div>

                        </div>

                    </div>
                </div>




            </div>

        </div>

    </div>

</div>

</div>

<script>
$(function() {  
       var table_workdetail =  $('#listworkdetail').DataTable({

        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_workdetail.on('page.dt', function () {
var paginaActualworkdetail = table_workdetail.page.info().page;
//console.log(paginaActualworkdetail);
sessionStorage.setItem('paginaActualworkdetail', paginaActualworkdetail);
});
table_workdetail.on('search.dt', function () {
var valorBusquedaworkdetail = table_workdetail.search();
sessionStorage.setItem('valorBusquedaworkdetail', valorBusquedaworkdetail);
});


var paginaGuardada = sessionStorage.getItem('paginaActualworkdetail');
var valorBusquedaworkdetailGuardado = sessionStorage.getItem('valorBusquedaworkdetail');
if (paginaGuardada) {
table_workdetail.page(parseInt(paginaGuardada)).draw(false);
}
if (valorBusquedaworkdetailGuardado) {
table_workdetail.search(valorBusquedaworkdetailGuardado).draw();
}




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




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




});
</script>

@endsection