@extends('admin.layout')

@section('title','Puestos')
@section('content')
<div class="container col-md-10 col-md-offset-1">

    <div class="">
        <div class="card card-info card-outline collapsed-card">
            <div class="card-header">
                <h3 class="card-title">Puesto</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fa fa-plus-circle fa-lg" style="color:#81be4d"></i><a style="color:#81be4d; font-size:20px;">&nbsp;&nbsp;Agregar</a>
                    </button>
                </div>
                <!-- /.card-tools -->
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <div>
                    <form class="form-horizontal">
                        <fieldset>
                            <div class="form-group">
                                <label class="text-dark" for="textinput">Puesto</label>
                                <div class="">
                                    <input id="clave" name="clave" type="text" placeholder="" class="form-control input-md">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="text-dark" for="textinput">Salario Base</label>
                                <div class="">
                                    <input id="nombre" name="nombre" type="text" placeholder="" class="form-control input-md">
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
        <!-- /.card-body -->
    </div>


    <hr>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Catalogo de puestos</h3>
        </div>
        <!-- /.card-header -->
        <div class="card-body">
            <div id="example1_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4">
                <div class="table" >

        <table id="puestos" class="table table-striped table-bordered nowrap table-sm" style="width:100%">
        <thead>
            <tr>
                <th>Identificador</th>
                <th>Puesto</th>
                <th>Salario Base</th>
                <th>Clasificador Unidad Responsable</th>
                <th>Opciones</th>
            </tr>
            </thead>
            <tbody>

            @foreach ($puestos as $puesto)

                <tr>
                    <td>{{ $puesto->id }}</td>
                    <td>{{ $puesto->nombre }}</td>
                    <td>{{ $puesto->salario_base }}<</td>
                    <td>{{ $puesto->clasificador_id }}<</td>
                    <td>
                        <a href="#" onclick="editar('{{$puesto->id}}')" class="btn btn-info btn-sm"><i class="fa fa-edit fa-sm"></i></a>
                        <a href="#" onclick="eliminar('{{$puesto->id}}')" class="btn btn-danger btn-sm"><i class="fa fa-trash-o fa-sm"></i></a>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
    <script>
        $(function(){

            document.getElementById('pue').className='nav-link active';
            $('#puestos tfoot th').each( function () {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
            } );

            var table = $('#puestos').DataTable({
                "scrollX": true});

            // Apply the search
            table.columns().every( function () {
                var that = this;

                $( 'input', this.footer() ).on( 'keyup change', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                } );
            } );

        });
    </script>
@endsection