@extends('layouts.app')

@section('content')

    <div class="page-wrapper">
        <div class="page-content">
        	<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
				<div class="breadcrumb-title pe-3">Usuarios</div>
				<div class="ps-3">
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb mb-0 p-0">
							<li class="breadcrumb-item">
								<a href="{{route('home')}}"><i class="bx bx-home"></i></a>
							</li>
							<li class="breadcrumb-item">
								<a href="{{route('users')}}"><i class="bx bx-user"></i></a>
							</li>
							<li class="breadcrumb-item active" aria-current="page">Crear usuario</li>
						</ol>
					</nav>
				</div>
				<div class="ms-auto">
                    <a class="btn btn-dark" id="btn-categoria" href="{{URL::previous()}}"><i class="bx bx-arrow-to-left"></i>Volver</a>
                </div>
			</div>
			@if(session('status'))
                <div class="alert alert-success border-0 bg-success alert-dismissible fade show py-2">
                    <div class="d-flex align-items-center">
                        <div class="font-35 text-white"><i class="bx bxs-message-square-x"></i>
                        </div>
                        <div class="ms-3">
                            <div class="text-white">{{session('status')}}</div>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <div class="card">
				<form 
					class="card-body" 
					accept-charset="utf-8" 
					enctype="multipart/form-data" 
					method="post" 
					action="{{route('users.store')}}"
				>
					@csrf
					<div>
						<h5 class="card-title">Datos basicos</h5>
					</div>
					<hr>
					<div class="row">
						<div class="col-md-6">
							<center>
								<img src="{{asset('img/defecto.png')}}" height="120" lass="img-fluid rounded">
							</center>

							<div class="mb-3">
								<label for="formFile" class="form-label"></label>
								<input class="form-control" name="avatar" accept="image/*" type="file" id="formFile">
							</div>
							<div class="mb-3">
								<label>Nombre del usuario</label>
								<input 
									class="form-control mb-3" 
									type="text"
									name="name" 
									value="{{old('name')}}" 
									placeholder="Ingresa el nombre del usuario" 
								>
								@error('name')
                                    <span class="invalid-feedback" role="alert" style="display: block;">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
							</div>
						</div>
						<div class="col-md-6">
							<div class="mb-3">
								<label>Usuario</label>
								<input 
									class="form-control mb-3" 
									type="text"
									name="email" 
									value="{{old('email')}}"
									placeholder="..." 
								>
								@error('email')
                                    <span class="invalid-feedback" role="alert" style="display: block;">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
							</div>
							<div class="mb-3">
								<label>Contraseña</label>
								<input 
									class="form-control mb-3" 
									type="password"
									name="password" 
									placeholder="..." 
								>
								@error('password')
                                    <sp style="display: block;"an class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
							</div>
							<div class="mb-3">
								<label>Repite la contraseña</label>
								<input 
									class="form-control mb-3" 
									type="password"
									name="password_confirmation" 
									placeholder="..." 
								>
							</div>
						</div>
					</div>
					<br>



					@if (json_decode(Auth::user()->permisos)->puede_cambiar_permisos == 'on')

						<div>
							<h5 class="card-title">Permisos del usuario</h5>
						</div>
						
						<hr>
						<div class="row">
							<h5 class="card-title">Eventos</h5>
							<br>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_visualizar_evento" 
										type="checkbox" 
										id="puede_visualizar_evento" 
										
											
									>
									<label class="form-check-label" for="puede_visualizar_evento">Visualizar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_eliminar_eventos" 
										type="checkbox" 
										id="puede_eliminar_eventos" 
										
											
									>
									<label class="form-check-label" for="puede_eliminar_eventos">Eliminar</label>
								</div>
							</div>
						</div>
						<hr>
						<div class="row">
							<h5 class="card-title">Mesas</h5>
							<br>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_visualizar_mesas" 
										type="checkbox" 
										id="puede_visualizar_mesas" 
										
											
									>
									<label class="form-check-label" for="puede_visualizar_mesas">Visualizar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_crear_mesas" 
										type="checkbox" 
										id="puede_crear_mesas" 
										
											
									>
									<label class="form-check-label" for="puede_crear_mesas">Crear / editar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_eliminar_mesas" 
										type="checkbox" 
										id="puede_eliminar_mesas" 
										
											
									>
									<label class="form-check-label" for="puede_eliminar_mesas">Eliminar</label>
								</div>
							</div>
						</div>
						<hr>
						<div class="row">
							<h5 class="card-title">Clientes</h5>
							<br>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_visualizar_clientes" 
										type="checkbox" 
										id="puede_visualizar_clientes" 
										
											
									>
									<label class="form-check-label" for="puede_visualizar_clientes">Visualizar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_crear_clientes" 
										type="checkbox" 
										id="puede_crear_clientes" 
										
											
									>
									<label class="form-check-label" for="puede_crear_clientes">Crear / editar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_eliminar_clientes" 
										type="checkbox" 
										id="puede_eliminar_clientes" 
										
											
									>
									<label class="form-check-label" for="puede_eliminar_clientes">Eliminar</label>
								</div>
							</div>
						</div>
						<hr>
						<div class="row">
							<h5 class="card-title">Cupones</h5>
							<br>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_visualizar_cupones" 
										type="checkbox" 
										id="puede_visualizar_cupones" 
										
											
									>
									<label class="form-check-label" for="puede_visualizar_cupones">Visualizar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_crear_cupones" 
										type="checkbox" 
										id="puede_crear_cupones" 
										
											
									>
									<label class="form-check-label" for="puede_crear_cupones">Crear / editar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_eliminar_cupones" 
										type="checkbox" 
										id="puede_eliminar_cupones" 
										
											
									>
									<label class="form-check-label" for="puede_eliminar_cupones">Eliminar</label>
								</div>
							</div>
						</div>
						<hr>
						<div class="row">
							<h5 class="card-title">Usuarios</h5>
							<br>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_visualizar_usuarios" 
										type="checkbox" 
										id="puede_visualizar_usuarios" 
										
											
									>
									<label class="form-check-label" for="puede_visualizar_usuarios">Visualizar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_crear_usuarios" 
										type="checkbox" 
										id="puede_crear_usuarios" 
										
											
									>
									<label class="form-check-label" for="puede_crear_usuarios">Crear / editar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_eliminar_usuarios" 
										type="checkbox" 
										id="puede_eliminar_usuarios" 
										
											
									>
									<label class="form-check-label" for="puede_eliminar_usuarios">Eliminar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_cambiar_permisos" 
										type="checkbox" 
										id="puede_cambiar_permisos" 
										
											
									>
									<label class="form-check-label" for="puede_cambiar_permisos">Cambiar permisos</label>
								</div>
							</div>
						</div>
						<hr>
						<div class="row">
							<h5 class="card-title">Proveedores</h5>
							<br>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_visualizar_proveedores" 
										type="checkbox" 
										id="puede_visualizar_proveedores" 
										
											
									>
									<label class="form-check-label" for="puede_visualizar_proveedores">Visualizar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_crear_proveedores" 
										type="checkbox" 
										id="puede_crear_proveedores" 
										
											
									>
									<label class="form-check-label" for="puede_crear_proveedores">Crear / editar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_eliminar_proveedores" 
										type="checkbox" 
										id="puede_eliminar_proveedores" 
										
											
									>
									<label class="form-check-label" for="puede_eliminar_proveedores">Eliminar</label>
								</div>
							</div>
						</div>
						<hr>	
						<div class="row">
							<h5 class="card-title">Productos</h5>
							<br>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_visualizar_productos" 
										type="checkbox" 
										id="puede_visualizar_productos" 
										
											
									>
									<label class="form-check-label" for="puede_visualizar_productos">Visualizar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_crear_productos" 
										type="checkbox" 
										id="puede_crear_productos" 
										
											
									>
									<label class="form-check-label" for="puede_crear_productos">Crear / editar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_eliminar_productos" 
										type="checkbox" 
										id="puede_eliminar_productos" 
										
											
									>
									<label class="form-check-label" for="puede_eliminar_productos">Eliminar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_crear_categorias" 
										type="checkbox" 
										id="puede_crear_categorias" 
										
											
									>
									<label class="form-check-label" for="puede_crear_categorias">Crear categorías</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_ver_ajustes_inventario" 
										type="checkbox" 
										id="puede_ver_ajustes_inventario" 
										
											
									>
									<label class="form-check-label" for="puede_ver_ajustes_inventario">Ver ajustes de inventario</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_crar_ajustes_inventario" 
										type="checkbox" 
										id="puede_crar_ajustes_inventario" 
										
											
									>
									<label class="form-check-label" for="puede_crar_ajustes_inventario">Crear ajustes de inventario</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_ver_estado_inventario" 
										type="checkbox" 
										id="puede_ver_estado_inventario" 
										
											
									>
									<label class="form-check-label" for="puede_ver_estado_inventario">Ver estado de inventario</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_administrar_unidades_medida" 
										type="checkbox" 
										id="puede_administrar_unidades_medida" 
										
											
									>
									<label class="form-check-label" for="puede_administrar_unidades_medida">Administrar unidades de medida</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_ver_historico_precios" 
										type="checkbox" 
										id="puede_ver_historico_precios" 
										
											
									>
									<label class="form-check-label" for="puede_ver_historico_precios">Ver histórico de precios</label>
								</div>
							</div>
						</div>
						<hr>	
						<div class="row">
							<h5 class="card-title">Caja general</h5>
							<br>
							
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_visualizar_caja_general" 
										type="checkbox" 
										id="puede_visualizar_caja_general" 
										
											
									>
									<label class="form-check-label" for="puede_visualizar_caja_general">Visualizar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_visualizar_total_caja_general" 
										type="checkbox" 
										id="puede_visualizar_total_caja_general" 
										
											
									>
									<label class="form-check-label" for="puede_visualizar_total_caja_general">Visualizar total</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_crear_movimiento_caja_general" 
										type="checkbox" 
										id="puede_crear_movimiento_caja_general" 
										
											
									>
									<label class="form-check-label" for="puede_crear_movimiento_caja_general">Crear / editar movimientos</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_eliminar_movimiento_caja_general" 
										type="checkbox" 
										id="puede_eliminar_movimiento_caja_general" 
										
											
									>
									<label class="form-check-label" for="puede_eliminar_movimiento_caja_general">Eliminar movimientos</label>
								</div>
							</div>
							<br>
						</div>
						<hr>
						<div class="row">
							<h5 class="card-title">Caja menor</h5>
							<br>
							
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_visualizar_caja_menor" 
										type="checkbox" 
										id="puede_visualizar_caja_menor" 
										
											
									>
									<label class="form-check-label" for="puede_visualizar_caja_menor">Visualizar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_visualizar_total_caja_menor" 
										type="checkbox" 
										id="puede_visualizar_total_caja_menor" 
										
											
									>
									<label class="form-check-label" for="puede_visualizar_total_caja_menor">Visualizar total</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_crear_movimientos_caja_menor" 
										type="checkbox" 
										id="puede_crear_movimientos_caja_menor" 
										
											
									>
									<label class="form-check-label" for="puede_crear_movimientos_caja_menor">Crear / editar movimientos</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_eliminar_movimientos_caja_menor" 
										type="checkbox" 
										id="puede_eliminar_movimientos_caja_menor" 
										
											
									>
									<label class="form-check-label" for="puede_eliminar_movimientos_caja_menor">Eliminar movimientos</label>
								</div>
							</div>
							<br>
						</div>
						<hr>
						<div class="row">
							<h5 class="card-title">Informes</h5>
							<br>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_visualizar_informes" 
										type="checkbox" 
										id="puede_visualizar_informes" 
										
											
									>
									<label class="form-check-label" for="puede_visualizar_informes">Visualizar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_imprimir_informe" 
										type="checkbox" 
										id="puede_imprimir_informe" 
										
											
									>
									<label class="form-check-label" for="puede_imprimir_informe">Imprimir</label>
								</div>
							</div>
							
						</div>
						<hr>		
						<div class="row">
							<h5 class="card-title">Gastos</h5>
							<br>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_visualizar_gastos" 
										type="checkbox" 
										id="puede_visualizar_gastos" 
										
											
									>
									<label class="form-check-label" for="puede_visualizar_gastos">Visualizar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_crear_gastos" 
										type="checkbox" 
										id="puede_crear_gastos" 
										
											
									>
									<label class="form-check-label" for="puede_crear_gastos">Crear / editar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_eliminar_gastos" 
										type="checkbox" 
										id="puede_eliminar_gastos" 
										
											
									>
									<label class="form-check-label" for="puede_eliminar_gastos">Eliminar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_administrar_tipo_gastos" 
										type="checkbox" 
										id="puede_administrar_tipo_gastos" 
										
											
									>
									<label class="form-check-label" for="puede_administrar_tipo_gastos">Administrar tipos de gastos</label>
								</div>
							</div>
							
						</div>
						<hr>		
						<div class="row">
							<h5 class="card-title">Ventas</h5>
							<br>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_visualizar_ventas" 
										type="checkbox" 
										id="puede_visualizar_ventas" 
										
											
									>
									<label class="form-check-label" for="puede_visualizar_ventas">Visualizar</label>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_eliminar_ventas" 
										type="checkbox" 
										id="puede_eliminar_ventas" 
										
											
									>
									<label class="form-check-label" for="puede_eliminar_ventas">Eliminar</label>
								</div>
							</div>
						</div>
						<hr>		
						<div class="row">
							<h5 class="card-title">Panel</h5>
							<br>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_ver_info_operacion" 
										type="checkbox" 
										id="puede_ver_info_operacion" 
										
											
									>
									<label class="form-check-label" for="puede_ver_info_operacion">Información de operación</label>
								</div>
							</div>						
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_modulo_ventas" 
										type="checkbox" 
										id="puede_modulo_ventas" 
										
											
									>
									<label class="form-check-label" for="puede_modulo_ventas">Módulo de ventas</label>
								</div>
							</div>						
						</div>
						<hr>		
						<div class="row">
							<h5 class="card-title">Configuración del sistema</h5>
							<br>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_configurar" 
										type="checkbox" 
										id="puede_configurar" 
										
											
									>
									<label class="form-check-label" for="puede_configurar">Configurar el sistema</label>
								</div>
							</div>						
											
						</div>
						<hr>		
						<div class="row">
							<h5 class="card-title">Cierres</h5>
							<br>
							<div class="col-md-3">
								<div class="form-check form-switch">
									<input 
										class="form-check-input" 
										name="puede_generar_cierres" 
										type="checkbox" 
										id="puede_generar_cierres" 
										
											
									>
									<label class="form-check-label" for="puede_generar_cierres">Generar</label>
								</div>
							</div>										
						</div>
						<hr>
					@endif		
					<div style="display: flex; justify-content: space-between; align-items: center;">
						<a href="{{route('users')}}" class="btn btn-dark px-5">Cancelar</a>
						<button type="submit" class="btn btn-primary px-5">Crear usuario</button>
					</div>
				</form>
			</div>
        </div>
    </div>
@endsection