@extends('admin.layout')
@section('title','Sindicatos')
@section('content')

    <div class="container">
        <div class="row">
            <div class="card" style="width: 100%">
                <div class="col-md-12 card-body">
                    <form class="panel-group" id="form_id">
                        <div class="panel panel-default panel-success">
                            <input type="hidden" id="id">
                            <div class="panel-heading">
                                <h4 class="panel-title ">
                                    <a data-toggle="collapse" data-parent="#form_id" href="#collapseOne"><span
                                                class="glyphicon glyphicon-file">
                                </span>Agregar nuevo sindicato</a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="key">Key</label>
                                                <input id="key" name="key" placeholder="Key"
                                                       class="form-control">
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="Description">Description</label>
                                                <input id="description" name="description"
                                                       placeholder="description"
                                                       class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <button type="submit">Guardar</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <table style="width:100%" id="table_id" class="display">
            <thead>
            <tr>
                <th>Key</th>
                <th>Description</th>
                <th>Acciones</th>
            </tr>
            </thead>
        </table>
    </div>

    <!-- Modal -->
    <div class="modal" tabindex="-1" role="dialog" id="modal_editar">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Editar sindicato</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="panel-group" id="formEditar">
                        {{ csrf_field()}}
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="key">Key</label>
                            <div class="col-md-12">
                                <input id="key_modal" name="key_modal" placeholder="Key"
                                       class="form-control input-md">
                                <label hidden id="ide">hola</label>
                            </div>
                        </div>

                        <!-- Text input-->
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="description">Description</label>
                            <div class="col-md-12">
                                <input id="description_modal" name="description_modal" placeholder="description"
                                       class="form-control input-md">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Guardar cambios</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('scripts')
    <script src="js/sindicatos.js"></script>
@endsection