@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 Turno
                        <div class="col-auto btn-actions-pane-right">
                            <a href="{{route('formshift')}}" 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('listshift')}}">
                        @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="listshift" class="table nowrap table-hover table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th style='width:0px'>#</th>
                                            <th>nombre</th>
                                            <th>Hora de inicio</th>
                                            <th>Hora Final</th>

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

                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($Shift as $row )
                                        <tr>
                                            <td>{{$row->id}}</td>
                                            <td>{{$row->name}}</td>
                                            <td>{{$row->start_time_name}}</td>
                                            <td>{{$row->end_time_name}}</td>



                                            <td> <input type="checkbox" id="idstatus{{$row->id}}" value="{{$row->id}}" onchange="javascript:update_status('{{route('updateshift')}}',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('formshift',['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_shift = $('#listshift').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_shift.on('page.dt', function() {
            var paginaActualshift = table_shift.page.info().page;
            //console.log(paginaActualshift);
            sessionStorage.setItem('paginaActualshift', paginaActualshift);
        });
        table_shift.on('search.dt', function() {
            var valorBusquedashift = table_shift.search();
            sessionStorage.setItem('valorBusquedashift', valorBusquedashift);
        });


        var paginaGuardada = sessionStorage.getItem('paginaActualshift');
        var valorBusquedashiftGuardado = sessionStorage.getItem('valorBusquedashift');
        if (paginaGuardada) {
            table_shift.page(parseInt(paginaGuardada)).draw(false);
        }
        if (valorBusquedashiftGuardado) {
            table_shift.search(valorBusquedashiftGuardado).draw();
        }




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




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




    });

</script>

@endsection