@component('components.master') @slot('body')
@verbatim
<div class="layout-px-spacing" id="app">
    <div class="row layout-top-spacing justify-content-md-center">
        <div class="col-sm-8 col-12">
            <div class="page-header mb-3">
                <div class="page-title">
                    <h3>Usuarios por Sucursal</h3>
                </div>
            </div>
            <div class="statbox widget box box-shadow">
                <div class="widget-header">
                    <div class="row">
                        <div class="col-md-12 text-end">
                            <button
                                class="btn btn-primary m-4"
                                data-bs-toggle="modal" data-bs-target="#exampleModal"
                                @click="add=true"
                            >
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="24"
                                    height="24"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    class="feather feather-plus"
                                >
                                    <line x1="12" y1="5" x2="12" y2="19"></line>
                                    <line x1="5" y1="12" x2="19" y2="12"></line>
                                </svg>
                                Nuevo
                            </button>

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

                <div class="widget-content widget-content-area br-8 p-0 ">
                    <div class="table-responsive">
                           <table class="table dt-table-hover"id="table_dt">
                                    <thead>
                                        <tr>

                                            <th class="" scope="col">#</th>

                                            <th scope="col">Perfil</th>
                                            <th scope="col">Persona</th>
                                            <th scope="col">Logo Sucursal</th>
                                            <th scope="col">Sucursal</th>


                                            <th class="text-center" scope="col">Accion</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        <template v-for="(m,i) in data">

                                            <tr>

                                                <td class="">{{i+1}}</td>
                                                <td class="text-cente">
                                                    <a v-if="m.hasOwnProperty('img_perfil')" class=" profile-_perfil" href="javascript: void(0);">
                                                        <img :src="m.img_perfil" alt="product" style="width: 80px;">
                                                    </a>
                                                </td>
                                                <td>
                                                   {{m.user.persona.nombre}}
                                                </td>

                                                <td class="text-cente">
                                                    <a v-if="m.hasOwnProperty('img_sucursal')" class=" profile-_perfil" href="javascript: void(0);">
                                                        <img :src="m.img_sucursal" alt="product" style="width: 80px;">
                                                    </a>
                                                </td>
                                                <td>
                                                   {{m.sucursal.nombre}}
                                                </td>



                                                <td class="text-center">
                                                   <div class="btn-group btn-group-sm" role="group" aria-label="Button group with nested dropdown">
                                                        <button  data-bs-toggle="modal" data-bs-target="#permisoModal"  @click="(add=false,model=m)" type="button" class="btn btn-primary btn-sm">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
                                                        </button>
                                                        <button type="button" class="btn btn-danger btn-sm" @click="deleteItem(m.id)">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
                                                        </button>


                                                    </div>
                                                </td>
                                            </tr>
                                        </template>
                                    </tbody>
                                </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Formulario</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

                        </button>
                    </div>
                    <div class="modal-body">
                         <div class="row">

                            <div class="col-12">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Persona</label>
                                  <select name="" class="form-control form-control-sm" id="" v-model="model.user_id">
                                    <template v-for="m in users">
                                        <option :value="m.id">{{m.persona.nombre}}</option>
                                    </template>

                                  </select>
                               </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Sucursal</label>
                                  <select name="" class="form-control form-control-sm" id="" v-model="model.sucursal_id">
                                    <template v-for="m in sucursals">
                                        <option :value="m.id">{{m.nombre}}</option>
                                    </template>

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


                         </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-light-dark" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary " data-bs-dismiss="modal" @click="Save">Guardar</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="permisoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Permisos a modulos</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

                        </button>
                    </div>
                    <div class="modal-body">
                         <div class="row">

                            <div class="col-12">
                                <div class="table-responsive" id="tabla_permiso">
                                    <table class="table table-bordered table-striped mb-4">
                                        <tbody>
                                        <!-- Modulo Dashboard -->
                                        <tr class="table-default">

                                            <td class="text-primary" style="font-weight: 800">
                                            <div class="switch form-switch-custom switch-inline form-switch-primary">
                                                        <input class="switch-input" type="checkbox" v-model="model.dashboard" role="switch"   v-model="model.dashboard" :checked="model.dashboard">
                                                        <label class="switch-label">Dashboard</label>
                                                    </div>
                                                 </td>

                                            <td colspan="3"></td>
                                        </tr>
                                        <!-- Modulo POS -->
                                        <tr class="table-default">

                                            <td class="text-primary" style="font-weight: 800">
                                            <div class="switch form-switch-custom switch-inline form-switch-primary">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.pos" :checked="model.pos">
                                                        <label class="switch-label">POS</label>
                                                    </div>
                                                    </td>

                                            <td colspan="3"></td>
                                        </tr>
                                        <!-- Modulo Administracion -->
                                         <tr class="table-default">
                                            <td class="text-primary" style="font-weight: 800">
                                            <div class="switch form-switch-custom switch-inline form-switch-primary">
                                                        <input class="switch-input" type="checkbox" role="switch"   v-model="model.admin" :checked="model.admin">
                                                        <label class="switch-label">Administracion</label>
                                                    </div>
                                                    </td>
                                            <td colspan="3"></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.admin_configuracion" :checked="model.admin_configuracion">
                                                        <label class="switch-label">Configuración</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.admin_sucursal" :checked="model.admin_sucursal">
                                                        <label class="switch-label">Sucursal</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.admin_documento" :checked="model.admin_documento">
                                                        <label class="switch-label">Documento</label>
                                                    </div>
                                            </td>

                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.admin_comprobante" :checked="model.admin_comprobante">
                                                        <label class="switch-label">Comprobantes</label>
                                                    </div>
                                            </td>

                                        </tr>
                                        <tr>
                                          <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.admin_formapago" :checked="model.admin_formapago">
                                                        <label class="switch-label">Formas de Pago</label>
                                                    </div>
                                            </td>
                                            <td>
                                                <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.admin_personal" :checked="model.admin_personal">
                                                        <label class="switch-label">Personal</label>
                                                    </div>
                                            </td>

                                            <td colspan="2"></td>
                                        </tr>
                                        <tr class="table-default">
                                            <td class="text-primary" style="font-weight: 800">
                                            <div class="switch form-switch-custom switch-inline form-switch-primary">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.producto" :checked="model.producto">
                                                        <label class="switch-label">Producto</label>
                                                    </div>
                                                    </td>
                                            <td colspan="3"></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.producto_marca" :checked="model.producto_marca">
                                                        <label class="switch-label">Marcas</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.producto_medida" :checked="model.producto_medida">
                                                        <label class="switch-label">Medidas</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.producto_categoria" :checked="model.producto_categoria">
                                                        <label class="switch-label">Categorias</label>
                                                    </div>
                                            </td>

                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.producto_producto" :checked="model.producto_producto">
                                                        <label class="switch-label">Productos</label>
                                                    </div>
                                            </td>

                                        </tr>
                                        <tr>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.producto_servicio" :checked="model.producto_servicio">
                                                        <label class="switch-label">Servicios</label>
                                                    </div>
                                            </td>
                                            <td>
                                                <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.producto_perecedero" :checked="model.producto_perecedero">
                                                        <label class="switch-label">Perecedero</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.producto_almacen" :checked="model.producto_almacen">
                                                        <label class="switch-label">Almacenes Productos</label>
                                                    </div>
                                            </td>
                                            <td>
                                            <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.producto_combo_almacen" :checked="model.producto_combo_almacen">
                                                        <label class="switch-label">Almacenes Combo</label>
                                                    </div>
                                            </td>

                                        </tr>
                                        <tr>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.producto_combo" :checked="model.producto_combo">
                                                        <label class="switch-label">Combos</label>
                                                    </div>
                                            </td>
                                            <td colspan="3"></td>
                                        </tr>
                                        <tr class="table-default">
                                            <td class="text-primary" style="font-weight: 800">
                                            <div class="switch form-switch-custom switch-inline form-switch-primary">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.compra" :checked="model.compra">
                                                        <label class="switch-label">Compras</label>
                                                    </div>
                                            </td>
                                            <td colspan="3"></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.compra_proveedor" :checked="model.compra_proveedor">
                                                        <label class="switch-label">Proveedor</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.compra_compra" :checked="model.compra_compra">
                                                        <label class="switch-label">Compras</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.compra_consulta_compra" :checked="model.compra_consulta_compra">
                                                        <label class="switch-label">Consulta de compras</label>
                                                    </div>
                                            </td>

                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.compra_historico_precio" :checked="model.compra_historico_precio">
                                                        <label class="switch-label">Historico de precios</label>
                                                    </div>
                                            </td>

                                        </tr>
                                        <tr>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.compra_cuentas_pagar" :checked="model.compra_cuentas_pagar">
                                                        <label class="switch-label">Cuentas por pagar</label>
                                                    </div>
                                            </td>
                                            <td>
                                                <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.compra_reporte" :checked="model.compra_reporte">
                                                        <label class="switch-label">Reporte de compras</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.compra_credito" :checked="model.compra_credito">
                                                        <label class="switch-label">Credito</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.compra_pagar_credito" :checked="model.compra_pagar_credito">
                                                        <label class="switch-label">Pagar Creditos</label>
                                                    </div>
                                            </td>

                                            </tr>
                                            <tr>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.compra_consulta_pago" :checked="model.compra_consulta_pago">
                                                        <label class="switch-label">Consulta de pagos</label>
                                                    </div>
                                            </td>

                                        </tr>
                                        <tr class="table-default">
                                            <td class="text-primary" style="font-weight: 800">
                                            <div class="switch form-switch-custom switch-inline form-switch-primary">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.caja" :checked="model.caja">
                                                        <label class="switch-label">Caja</label>
                                                    </div>
                                                    </td>
                                            <td colspan="3"></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.caja_asignacion" :checked="model.caja_asignacion">
                                                        <label class="switch-label">Asignacion de cajas</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.caja_arqueo" :checked="model.caja_arqueo">
                                                        <label class="switch-label">Arqueos de cajas</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.caja_movimiento" :checked="model.caja_movimiento">
                                                        <label class="switch-label">Movimientos de cajas</label>
                                                    </div>
                                            </td>

                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.caja_reporte" :checked="model.caja_reporte">
                                                        <label class="switch-label">Reportes</label>
                                                    </div>
                                            </td>


                                        </tr>

                                        <tr class="table-default">
                                            <td class="text-primary" style="font-weight: 800">
                                                <div class="switch form-switch-custom switch-inline form-switch-primary">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.cotizacion" :checked="model.cotizacion">
                                                        <label class="switch-label">Cotizacion</label>
                                                    </div>
                                            </td>
                                            <td colspan="3"></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.cotizacion_nueva" :checked="model.cotizacion_nueva">
                                                        <label class="switch-label">Nueva Cotizacion</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.cotizacion_consulta" :checked="model.cotizacion_consulta">
                                                        <label class="switch-label">Consulta Cotizacion</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.cotizacion_reporte" :checked="model.cotizacion_reporte">
                                                        <label class="switch-label">Reportes</label>
                                                    </div>
                                            </td>


                                        </tr>

                                        <tr class="table-default">
                                            <td class="text-primary" style="font-weight: 800">
                                                <div class="switch form-switch-custom switch-inline form-switch-primary">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.preventa" :checked="model.preventa">
                                                        <label class="switch-label">Preventa</label>
                                                    </div>
                                            </td>
                                            <td colspan="3"></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.preventa_nueva" :checked="model.preventa_nueva">
                                                        <label class="switch-label">Nueva Preventa</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.preventa_consulta" :checked="model.preventa_consulta">
                                                        <label class="switch-label">Consulta de Preventas</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.preventa_reporte" :checked="model.preventa_reporte">
                                                        <label class="switch-label">Reportes</label>
                                                    </div>
                                            </td>

                                        </tr>

                                        <tr class="table-default">
                                            <td class="text-primary" style="font-weight: 800">
                                            <div class="switch form-switch-custom switch-inline form-switch-primary">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.venta" :checked="model.venta">
                                                        <label class="switch-label">Venta</label>
                                                    </div>
                                            </td>
                                            <td colspan="3"></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.venta_cliente" :checked="model.venta_cliente">
                                                        <label class="switch-label">Clientes</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.venta_venta" :checked="model.venta_venta">
                                                        <label class="switch-label">Nueva Venta</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.venta_venta_vendedor" :checked="model.venta_venta_vendedor">
                                                        <label class="switch-label">Nueva Venta x vendedor</label>
                                                    </div>
                                            </td>

                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.venta_consulta_venta" :checked="model.venta_consulta_venta">
                                                        <label class="switch-label">Consulta de Ventas</label>
                                                    </div>
                                            </td>

                                        </tr>
                                        <tr>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.venta_cuenta_cobrar" :checked="model.venta_cuenta_cobrar">
                                                        <label class="switch-label">Cuentas Cobrar</label>
                                                    </div>
                                            </td>
                                            <td>
                                                <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.venta_credito" :checked="model.venta_credito">
                                                        <label class="switch-label">Creditos</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.venta_reporte" :checked="model.venta_reporte">
                                                        <label class="switch-label">Reportes</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.venta_abono" :checked="model.venta_abono">
                                                        <label class="switch-label">Abonos Creditos</label>
                                                    </div>
                                            </td>
                                        </tr>
                                        <tr>

                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.venta_consulta_abono" :checked="model.venta_consulta_abono">
                                                        <label class="switch-label">Consulta Abonos</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.venta_fac_elec" :checked="model.venta_fac_elec">
                                                        <label class="switch-label">Fac. Elec.</label>
                                                    </div>
                                            </td>

                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.fac_manual" :checked="model.fac_manual">
                                                        <label class="switch-label">Fac. Elec. Manual</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.fac_manual_consulta" :checked="model.fac_manual_consulta">
                                                        <label class="switch-label">Fac. Manuales</label>
                                                    </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.venta_fac_elec_anulada" :checked="model.venta_fac_elec_anulada">
                                                        <label class="switch-label">Fac. Elec. Anuladas</label>
                                                    </div>
                                            </td>
                                            <td colspan="3"></td>
                                        </tr>
                                        <tr class="table-default">
                                            <td class="text-primary" style="font-weight: 800">
                                            <div class="switch form-switch-custom switch-inline form-switch-primary">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.inventario" :checked="model.inventario">
                                                        <label class="switch-label">Inventario</label>
                                                    </div>
                                            </td>
                                            <td colspan="3"></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.inventario_general" :checked="model.inventario_general">
                                                        <label class="switch-label">Inventario General</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.inventario_consulta_producto" :checked="model.inventario_consulta_producto">
                                                        <label class="switch-label">Consulta de Productos</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.inventario_traspaso" :checked="model.inventario_traspaso">
                                                        <label class="switch-label">Nuevo Traspaso</label>
                                                    </div>
                                            </td>

                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.inventario_ajuste" :checked="model.inventario_ajuste">
                                                        <label class="switch-label">Ajuste de Inventario</label>
                                                    </div>
                                            </td>

                                        </tr>
                                        <tr>
                                         <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.inventario_consulta_traspaso" :checked="model.inventario_consulta_traspaso">
                                                        <label class="switch-label">Consulta Traspaso</label>
                                                    </div>
                                            </td>
                                            <td>
                                                <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.inventario_consulta_ajuste" :checked="model.inventario_consulta_ajuste">
                                                        <label class="switch-label">Consulta Ajuste</label>
                                                    </div>
                                            </td>

                                        </tr>
                                        <tr class="table-default">
                                            <td class="text-primary" style="font-weight: 800">
                                                <div class="switch form-switch-custom switch-inline form-switch-primary">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.kardex" :checked="model.kardex">
                                                        <label class="switch-label">Kardex</label>
                                                    </div>
                                            </td>
                                            <td colspan="3"></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.kardex_producto" :checked="model.kardex_producto">
                                                        <label class="switch-label">Kardex de Productos</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.kardex_valorizado" :checked="model.kardex_valorizado">
                                                        <label class="switch-label">Kardex Valorizado</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.kardex_valorizado_fecha" :checked="model.kardex_valorizado_fecha">
                                                        <label class="switch-label">Kardex Valorizado fecha</label>
                                                    </div>
                                            </td>
                                            <td>
                                             <div class="switch form-switch-custom switch-inline form-switch-info">
                                                        <input class="switch-input" type="checkbox" role="switch"  v-model="model.kardex_combo" :checked="model.kardex_combo">
                                                        <label class="switch-label">Kardex Combos</label>
                                                    </div>
                                            </td>

                                        </tr>


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

                            </div>


                         </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-light-dark" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary " data-bs-dismiss="modal" @click="SaveRoles">Guardar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endverbatim
@endslot
@slot('script')
    <script type="module">
    import Table from "{{asset('config/dt.js')}}"
      const {
            createApp
        } = Vue
 let dt = new Table()
        createApp({

            data(){
                return{
                    add: true,
                    model:{
                        name:'',
                        direccion:'',
                        sucursal_id:1,
                        user_id:1,
                        activo:1
                    },
                    data:[],
                    users:[],
                    sucursals:[],
                }
            },
            methods:{
                async getData(){
                    try{
                        let res = await axios.get("{{url('')}}/api/v1/sucursalUsers")
                        return res.data
                    }catch(e){

                    }finally{

                    }
                },
                async Save(){
                    let self = this
                    try{
                        if (this.add == false) {

                           let res = await axios.put("{{url('')}}/api/v1/sucursalUsers/"+this.model.id,this.model)
                            Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Actualizado!',

                        })
                            dt.destroy()
                            await Promise.all([self.getData()]).then((v) => {
                                this.data = v[0]
                            })

                        }else{
                            let res = await axios.post("{{url('')}}/api/v1/sucursalUsers",this.model)
                             Swal.fire({
                                position: 'center',
                                icon: 'success',
                                title: 'Guardado!',

                            })
                            dt.destroy()
                            await Promise.all([self.getData()]).then((v) => {
                                this.data = v[0]
                            })

                        }
                    }catch(e){

                    }finally{

                        dt.create()
                    }
                },
                async SaveRoles(){
                    let self = this
                    try{

                           let res = await axios.put("{{url('')}}/api/v1/sucursalUsers/"+this.model.id,this.model)
                            Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Actualizado!',

                        })
                            dt.destroy()
                            await Promise.all([self.getData()]).then((v) => {
                                this.data = v[0]
                            })

                    }catch(e){

                    }finally{

                        dt.create()
                    }
                },
                deleteItem(id) {
                    let self = this

                    Swal.fire({
                        title: 'Estas seguro?',
                        text: "Este cambio es irreversible.",
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Eliminar!',
                        cancelButtonText: 'No!',
                        reverseButtons: true,
                        padding: '2em'
                    }).then(async (result) => {
                        if (result.value) {
                            try {


                                let url = "{{url('api/v1/sucursalUsers')}}/"+id

                                await axios.delete(url)
                                dt.destroy()
                                    await Promise.all([self.getData()]).then((v) => {
                                        self.data = v[0]
                                    })
                                dt.create()
                            } catch (e) {

                            }
                        }
                    })
                },
                async getUrl(path) {
                    try {
                        let res = await axios.get("{{url('')}}/api/v1/"+path)
                        return res.data
                    } catch (e) {

                    } finally {

                    }
                },
            },
            mounted(){
                this.$nextTick(async () => {
$("#module_admin").addClass("module_active")
                    let self = this

                    try {
                        await Promise.all([self.getData(),
                    self.getUrl('users'),
                    self.getUrl('sucursals'),
                    ]).then((v) => {
                            this.data = v[0]
                            this.users= v[1]
                            this.sucursals= v[2]
                        })
                        dt.create()

                    } catch (e) {

                    } finally {


                    }




                })

            }
        }).mount('#app')
    </script>
@endslot
@slot('style')
    <style>
        body{

        }
    </style>
@endslot
@endcomponent