@extends('admin.layout')
@section('title','Conceptos')
@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 sombra">
                    <h3 class="card-title">Concepto</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">

                    {!! Form::open(['route' => 'conceptos.store', 'method' => 'post', 'novalidate','class'=>'form-horizontal']) !!}
                    <div class="row col-md-12 ">
                    <div class="col-md-4">
                        <label class="control-label" for="textinput">Concepto</label>

                        <input id="concepto" name="textinput" type="text" placeholder="Concepto" class="form-control input-md">

                    </div>

                    <div class="col-md-4">
                        <label class="control-label" for="selectbasic">Estatus</label>

                        <select id="Estatus" name="selectbasic" class="form-control">
                            <option value="1">Estatus 1</option>
                            <option value="2">Estatus 2</option>
                        </select>

                    </div>

                        <div class="col-md-4">
                            <label>Fecha Inicial</label>
                            <div class='input-group date'  data-target-input="nearest">
                                <input name="fecha_ini" id="fecha_ini" type='text' class="form-control datetimepicker-input" data-target="#fecha_ini" />
                                <div class="input-group-append" data-target="#fecha_ini" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label>Fecha Final</label>
                            <div class='input-group date'  data-target-input="nearest">
                                <input name="fecha_fin" id="fecha_fin" type='text' class="form-control datetimepicker-input" data-target="#fecha_fin" />
                                <div class="input-group-append" data-target="#fecha_fin" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                        </div>
                    <div class="col-md-4 align-center" style="text-align: center">

                        <br>


                        <label class="control-label" for="radios">Tipo Concepto</label>
                        <br>
                        <label class="radio-inline"><input type="radio" class="minimal" name="r1">Percepciones</label> &nbsp; &nbsp;
                        <label class="radio-inline"><input type="radio" class="minimal" name="r1">Deducciones</label>

                    </div>


                        <div class="col-md-4">
                            <label class="control-label" for="textarea">Descripcion</label>

                            <textarea id="descripcion" class="form-control" id="textarea" name="textarea"></textarea>

                        </div>

                    <div class="col-md-4">
                        <label class="control-label" for="selectbasic">Zona</label>

                        <select id="selectbasic" name="selectbasic" class="form-control">
                            <option value="1">Zona 1</option>
                            <option value="2">Zona 2</option>
                        </select>


                        <label class="control-label" for="selectbasic">Importe</label>


                            <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-md">

                    </div>
                    {!! Form::close() !!}
                    </div>
                </div>
            </div>
            <!-- /.card-body -->
        </div>





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

                        <table id="conceptos_tabla" class="table table-striped table-bordered nowrap table-sm" style="width:100%">
                            <thead >
                            <tr>
                                <th>Concepto</th>
                                <th>Descripcion</th>
                                <th>Estatus</th>
                                <th>Tipo Concepto</th>
                                <th>Tipo_concepto_SAT</th>
                                <th>Importe</th>
                                <th>Fecha Inicial</th>
                                <th>Fecha Final</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($conceptos as $concepto)
                                <tr>
                                    <td>{{$concepto->concepto}}</td>
                                    <td>{{$concepto->descripcion}}</td>
                                    <td>{{$concepto->estatus}}</td>
                                    <td>{{$concepto->tipo_concepto}}</td>
                                    <td>{{$concepto->tipo_concepto_sat}}</td>

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

                            @endforeach

                            </tbody>
                            <tfoot>
                            <tr>
                                <th>Concepto</th>
                                <th>Descripcion</th>
                                <th>Estatus</th>
                                <th>Tipo Concepto</th>
                                <th>Tipo_concepto_SAT</th>
                                <th>Importe</th>
                                <th>Fecha Inicial</th>
                                <th>Fecha Final</th>
                                <th></th>
                            </tr>
                            </tfoot>
                        </table>

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

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



@section('scripts')
    <script>

        $(function(){

            document.getElementById('con').className='nav-link active';

            $('#conceptos_tabla tfoot th').each( function () {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
            } );

            var table = $('#conceptos_tabla').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();
                    }
                } );
            } );
            $('#fecha_ini').datepicker({
                autoclose: true
            });
            $('#fecha_fin').datepicker({
                autoclose: true
            });

        });
function editar(cad) {

    alert($('#conceptos').val());

}

    </script>
@endsection
@endsection