@extends('admin.layout')
@section('title','Empleados')

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

        <div class="">
            <div id="card" class="card card-info card-outline collapsed-card">
                <div class="card-header">
                    <h3 class="card-title">Empleado</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 id="card_empleados" class="card-body">
                    {!! Form::open(['route' => 'empleados.store', 'method' => 'post', 'novalidate','class'=>'form-horizontal','id'=>'form1']) !!}
                    <div class="row col-md-12">
                        <meta name="csrf-token" content="{{ csrf_token() }}"/>
                        <div class="col-md-4">
                            <div>
                                <input type="hidden" id="id" value="">
                            </div>
                            <label class="control-label" for="textinput">Clave</label>
                            <div class="">
                                <input id="clave_empleado" name="clave_empleado" type="text" placeholder=""
                                       class="form-control input-md">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label" for="textinput">Nombre</label>
                            <div class="">
                                <input id="nombre" name="nombre" type="text" placeholder=""
                                       class="form-control input-md">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label" for="textinput">Apellido Paterno</label>
                            <div class="">
                                <input id="apellido_pat" name="apellido_pat" type="text" placeholder=""
                                       class="form-control input-md">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label" for="textinput">Apellido Materno</label>
                            <div class="">
                                <input id="apellido_mat" name="apellido_mat" type="text" placeholder=""
                                       class="form-control input-md">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label" for="creado">Creado Por</label>
                            <div class="">
                                <input id="creado_por" name="creado_por" type="number" placeholder=""
                                       class="form-control input-md">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label" for="editado">Editado Por</label>
                            <div class="">
                                <input id="editado_por" name="editado_por" type="number" placeholder=""
                                       class="form-control input-md">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label" for="categoria">Categoria</label>
                            <div class="">
                                <select id="categoria" name="categoria" class="form-control">
                                    <option value="1">Categoria 1</option>
                                    <option value="2">Categoria 2</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="control-label">
                                <label>Año de Creacion</label>
                                <div class='input-group date' data-target-input="nearest">
                                    <input name="anio_crea" id="anio_crea" type='text'
                                           class="form-control datetimepicker-input" data-target="#anio_crea"/>
                                    <div class="input-group-append" data-target="#anio_crea"
                                         data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label" for="puesto">Puesto</label>
                            <div class="">
                                <select id="puesto" name="puesto" class="form-control">
                                    <option value="1">Puesto 1</option>
                                    <option value="2">Puesto 2</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label" for="regimenc">Regimen de Contratacion</label>
                            <div class="">
                                <select id="id_regimen_contratacion" name="id_regimen_contratacion"
                                        class="form-control">
                                    <option value="1">Regimen 1</option>
                                    <option value="2">Regimen 2</option>
                                </select>
                            </div>
                        </div>


                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Conceptos</label>
                                <select id="conceptos" class="form-control select2" multiple="multiple"
                                        data-placeholder="Select a State"
                                        style="width: 100%;">
                                    <option>Prima Vacacional</option>
                                    <option>Aguinaldo</option>
                                    <option>Bonificacion</option>
                                    <option>Salario Base</option>
                                    <option>ISR</option>
                                    <option>etc</option>
                                </select>
                            </div>
                            <!-- /.form-group -->

                            <!-- /.form-group -->

                        </div>
                        <div class="col-md-6 control-label">
                            <br>
                            <div id="botones">

                            </div>
                        </div>

                    </div>
                    {!! Form::close() !!}

                </div>
            </div>
            <!-- /.card-body -->
        </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <div id="example1_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4">
                        <div >

                        <table id="empleados" class="table table-striped table-bordered nowrap table-sm" style="width:100%">
            <thead>
            <tr class="table-info" >
                <th>Clave</th>
                <th>Nombre</th>
                <th>Apellido paterno</th>
                <th>Apellido materno</th>
                <th>Editado por</th>
                <th>Creado por</th>
                <th>Año creacion</th>
                <th>Regimen de contratacion</th>
                <th>Opciones</th>
            </tr>
            </thead>
                <tbody>
                @if(count($empleados)>0)
                @foreach ($empleados as $empleado)
                    <tr  id="{{$empleado->id}}">
                        <td class="text-dark">{{$empleado->clave_empleado}}</td>
                        <td class="text-dark">{{$empleado->nombre}}</td>
                        <td class="text-dark">{{$empleado->apellido_pat}}</td>
                        <td class="text-dark">{{$empleado->apellido_mat}}</td>
                        <td class="text-dark">{{$empleado->editado_por}}</td>
                        <td class="text-dark">{{$empleado->creado_por}}</td>
                        <td class="text-dark">{{$empleado->anio_crea}}</td>
                        <td class="text-dark">{{$empleado->id_regimen_contratacion}}</td>
                        <td>

                            <a href="#" onclick="editar('{{$empleado->id}}')" class="btn btn-info btn-sm"><i class="fa fa-edit fa-sm"></i></a>
                            <a href="#" onclick="eliminar('{{$empleado->id}}')" class="btn btn-danger btn-sm"><i class="fa fa-trash-o fa-sm"></i></a>

                        </td>
                    </tr>
                    @endforeach
                @endif
                    {!! Form::model($empleado,['route' => ['empleados.update','::ID'], 'method' => 'PUT', 'novalidate','class'=>'form-horizontal','id'=>'form-update']) !!}
                    {!! Form::close() !!}


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

                        <table id="empleados" class="table table-striped table-bordered nowrap table-sm"
                               style="width:100%">
                            <thead>
                            <tr class="table-info">
                                <th>Clave</th>
                                <th>Nombre</th>
                                <th>Apellido paterno</th>
                                <th>Apellido materno</th>
                                <th>Editado por</th>
                                <th>Creado por</th>
                                <th>Año creacion</th>
                                <th>Regimen de contratacion</th>
                                <th>Opciones</th>
                            </tr>
                            </thead>
                            <tbody>
                            @if(count($empleados)>0)
                                @foreach ($empleados as $empleado)
                                    <tr id="{{$empleado->id}}">
                                        <td class="text-dark">{{$empleado->clave_empleado}}</td>
                                        <td class="text-dark">{{$empleado->nombre}}</td>
                                        <td class="text-dark">{{$empleado->apellido_pat}}</td>
                                        <td class="text-dark">{{$empleado->apellido_mat}}</td>
                                        <td class="text-dark">{{$empleado->editado_por}}</td>
                                        <td class="text-dark">{{$empleado->creado_por}}</td>
                                        <td class="text-dark">{{$empleado->anio_crea}}</td>
                                        <td class="text-dark">{{$empleado->id_regimen_contratacion}}</td>
                                        <td>

                                            <a href="#" onclick="editar('{{$empleado->id}}')"
                                               class="btn btn-info btn-sm"><i class="fa fa-edit fa-sm"></i></a>
                                            <a href="#" onclick="eliminar('{{$empleado->id}}')"
                                               class="btn btn-danger btn-sm"><i class="fa fa-trash-o fa-sm"></i></a>

                                        </td>
                                    </tr>
                                    {!! Form::model($empleado,['route' => ['empleados.update','::ID'], 'method' => 'PUT', 'novalidate','class'=>'form-horizontal','id'=>'form-update']) !!}
                                    {!! Form::close() !!}

                                @endforeach
                            @endif
                            </tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- /.card -->
    </div>

    @if(count($empleados)>0)
        {!! Form::model($empleado,['route' => ['empleados.update','::ID'], 'method' => 'PUT', 'novalidate','class'=>'form-horizontal','id'=>'form-update']) !!}
        {!! Form::close() !!}
    @endif

@endsection
@section('scripts')
    <script src="{{asset('js/empleados.js')}}" ></script>
@endsection