@extends('layouts.head')

@section('content')

    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid">
                <div class="row ">
                    <div class="col-md-12">
                        {{-- <div class="card card-color row">
                            <div class="card-header" >
                                <h3 style="color:white" class="card-title"><b>Gestion de Menus</b> </h3>
                            </div>
                            <form id="form_usuario"  method="POST" enctype="multipart/form-data">
                                {{ csrf_field() }}
                                <input type="hidden" id="idedit" name="idedit">
                                
                                <div class="card-body">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="cedula">Cédula *</label>
                                                <input type="number" class="form-control" id="cedula" name="cedula" placeholder="Ingrese cédula" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="nombre">Nombre y apellidos *</label>
                                                <input type="text" class="form-control" id="nombres" name="nombres" placeholder="Ingrese nombre y apellidos" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="placa">Sexo *</label>
                                                <select name="sexo" id="sexo" class="form-control" required>
                                                    <option value="M">Masculino</option>
                                                    <option value="F">Femenino</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="placa">Direcci&oacute;n</label>
                                                <input type="text" class="form-control" id="direccion" name="direccion" placeholder="Direccion">
                                            </div>                                              
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="placa">Correo *</label>
                                                <input type="email" class="form-control" id="correo" name="correo" placeholder="ejemplo@pedernales.gob.ec" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="placa">Contraseña *</label>
                                                <input type="password" class="form-control" id="password" name="password" placeholder="Contraseña" required>
                                            </div>                                              
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer" id="btn_footer">
                                    <button type="submit" class="btn btn-color"> <i class="fa fa-save"></i> Registrar</button>
                                </div>
                            </form>
                        </div>
                        <hr> --}}
                        
                        <div class="container-fluid">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="table-responsive">
                                                <table id="table_menu" class="table table-sm table-bordered" style="width:100%">
                                                    <thead>
                                                        <tr align="center"> 
                                                            <th>
                                                                Menu
                                                                <button class="btn btn-sm btn-primary" onclick="modal_menu()" style="float: right;"><i class="fa fa-plus"></i> Nuevo</button>
                                                            </th>
                                                            <th>Acciones Menu</th>
                                                            <th>Opci&oacute;nes</th>
                                                            <th>Acciones Opciones</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="body_menu">
                                                        @include("administracion.menu_tabla")                                                                                     
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <hr>
                
            </div>
        </section>
    </div>

    <!-- Modal Menu -->
    <div class="modal fade" id="modal_menu" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static" >
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Gesti&oacute;n de Men&uacute;</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-bs-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    
                    <form id="form_menu"  method="POST" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <input type="hidden" id="idmenu" name="idmenu">
                        
                        <div class="card-body">
                            <div class="form-group row">
                                <label for="menu_detalle" class="col-sm-3 col-form-label">Detalle men&uacute;</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="detalle" id="menu_detalle">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="menu_icono" class="col-sm-3 col-form-label">Icono</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="icono" id="menu_icono">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="menu_orden" class="col-sm-3 col-form-label">Orden</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="orden" id="menu_orden">
                                </div>
                            </div>
                        </div>
                        <div id="menu_footer" style="text-align: right;">
                            <hr>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-success"> <i class="fa fa-save"></i> Registrar</button>
                        </div>
                    </form>

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

    <!-- Modal Menu Opciones -->
    <div class="modal fade" id="modal_menu_opcion" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static" >
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Gesti&oacute;n de Opciones Men&uacute;</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-bs-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    
                    <form id="form_menu_opcion"  method="POST" enctype="multipart/form-data">
                        {{ csrf_field() }}

                        <input type="hidden" id="idmenu_opcion" name="idmenu_opcion">                        
                        <input type="hidden" id="menu_id" name="menu_id">
                        
                        <div class="card-body">
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Menu</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="menu_text" disabled>
                                </div>
                            </div>
                            <hr>
                            <div class="form-group row">
                                <label for="opcion_detalle" class="col-sm-3 col-form-label">Detalle Opci&oacute;n</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="detalle" id="opcion_detalle">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="opcion_icono" class="col-sm-3 col-form-label">Icono</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="icono" id="opcion_icono">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="opcion_ruta" class="col-sm-3 col-form-label">Ruta</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="ruta" id="opcion_ruta">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="opcion_orden" class="col-sm-3 col-form-label">Orden</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="orden" id="opcion_orden">
                                </div>
                            </div>
                        </div>
                        <div style="text-align: right;">
                            <hr>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-success"> <i class="fa fa-save"></i> Registrar</button>
                        </div>
                    </form>

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

    <script src="{{asset('js/administracion/gestion_menu.js?v='.rand())}}"></script>

@endsection