@extends('layouts.master_app')
@section('title') Usuarios @endsection
@section('css')
<link href="/assets/app/plugins/custom/prismjs/prismjs.bundle.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')
	<!--begin::Toolbar-->
	<div class="toolbar py-2" id="kt_toolbar">
		<!--begin::Container-->
		<div id="kt_toolbar_container" class="container-fluid d-flex align-items-center">
			<!--begin::Page title-->
			<div class="flex-grow-1 flex-shrink-0 me-5">
				<!--begin::Page title-->
				<div data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}" class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
					<!--begin::Title-->
					<h1 class="d-flex align-items-center text-dark fw-bold my-1 fs-3">{{$user->person->fullname}}
						<!--begin::Separator-->
						<span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
						<!--end::Separator-->
						<!--begin::Description-->
						<small class="text-muted fs-7 fw-semibold my-1 ms-1"> Agregar permisos</small>
					<!--end::Description-->
					</h1>
					<!--end::Title-->
				</div>
				<!--end::Page title-->
			</div>
			<!--end::Page title-->
			<!--begin::Action group-->
			<div class="d-flex align-items-center flex-wrap">
				<!--begin::Wrapper-->
				<div class="flex-shrink-0 me-2">
					
				</div>
				<!--end::Wrapper-->
				<!--begin::Wrapper-->
				<div class="d-flex align-items-center">
				</div>
				<!--end::Wrapper-->
			</div>
			<!--end::Action group-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Toolbar-->
	
	<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
		<!--begin::Container--> 
		<div id="kt_content_container" class="container-xxl">
			<div class="row g-5 g-xl-10 mb-xl-10">

				<div class="col-lg-12 col-xl-12 col-xxl-12 mb-12 mb-xl-0">
					<!--begin::Card-->
					<div class="card">
						<!--begin::Card header-->
						<div class="card-header border-0 pt-6">
							<!--begin::Card title-->
							<div class="card-title">
							</div>
							<!--begin::Card title-->
							<!--begin::Card toolbar-->
							<div class="d-flex flex-column">
								<form action="/user_permissions" method="POST">
								@csrf
								<div class="d-flex flex-wrap my-2">
									<div class="me-4">
										<input type="hidden" name="user_id" value="{{$user->id}}">
										<select name="permission_id" data-placeholder="Selecciona un permiso" class="form-select form-select-solid" required>
											<option value="">Selecciona un permiso</option>
											@foreach($permissions as $item)
											<option value="{{$item->id}}">{{$item->name}}</option>
											@endforeach
										</select>
									</div>
									<button type="submit" class="btn btn-primary btn-sm" >Agregar permiso</a>
								</div>
								<form>
							</div>
							<!--end::Card toolbar-->
						</div>
						<!--end::Card header-->
						<!--begin::Card body-->
						<div class="card-body py-4">
							@include('partials.success')
							<!--begin::Table-->
							<table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users">
								<!--begin::Table head-->
								<thead>
									<!--begin::Table row-->
									<tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
										<th class="min-w-125px">Permiso</th>
										<th class="min-w-125px"></th>
									</tr>
									<!--end::Table row-->
								</thead>
								<!--end::Table head-->
								<!--begin::Table body-->
								<tbody class="text-gray-600 fw-semibold">
									@foreach( $user->permissions as $item )
									<tr>
										<td>{{ $item->name }}</td>
										<td><button onclick="delete_item(this);" data="{{ route('user_permissions.destroy', [$item->pivot->id] ) }}" class="btn btn-danger clsDestroy">Eliminar</button> </td>				
									</tr>
									<!--end::Table row-->
									@endforeach
								</tbody>
								<!--end::Table body-->
							</table>
							<!--end::Table-->
						</div>
						<!--end::Card body-->
					</div>
					<!--end::Card-->
				</div>
			</div>
		</div>
		<!--end::Container-->
	</div>

@endsection

@section('js')
<script src="/assets/app/js/custom/confirm_delete.js"></script>
<script src="/assets/app/plugins/custom/datatables/datatables.bundle.js"></script>

<script src="/assets/app/js/custom/apps/user-management/users/list/table.js"></script>
<script src="/assets/app/js/custom/apps/user-management/users/list/add.js"></script>
<script src="/assets/app/js/custom/utilities/modals/create-campaign.js"></script>

<script src="/assets/app/js/custom/documentation/forms/flatpickr.js"></script>
@endsection