@extends('layouts.master_app')
@section('title') Empleado @endsection
@section('menu_tickets', 'here show')
@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">Empleado
						<!--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"> Listar todos</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>x
				<!--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">
								<!--begin::Search-->
								<div class="d-flex align-items-center position-relative my-1">
									<!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
									<span class="svg-icon svg-icon-1 position-absolute ms-6">
										<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
											<path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor" />
										</svg>
									</span>
									<!--end::Svg Icon-->
									<input type="text" data-kt-user-table-filter="search" class="form-control form-control-solid w-250px ps-14" placeholder="Buscar empleado" />
								</div>
								<!--end::Search-->
							</div>
							<!--begin::Card title-->
							<!--begin::Card toolbar-->
							<div class="card-toolbar">
								<!--begin::Toolbar-->
								<div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
									<!--begin::Add user-->
									<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_new_ticket">
										<!--begin::Svg Icon | path: icons/duotune/arrows/arr075.svg-->
										<span class="svg-icon svg-icon-2">
											<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
												<rect opacity="0.5" x="11.364" y="20.364" width="16" height="2" rx="1" transform="rotate(-90 11.364 20.364)" fill="currentColor" />
												<rect x="4.36396" y="11.364" width="16" height="2" rx="1" fill="currentColor" />
											</svg>
										</span>
									<!--end::Svg Icon-->Agregar
									</button>
									<!--end::Add user-->
								</div>
								<!--end::Toolbar-->
								
							</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">Nombre</th>
										<th class="min-w-125px">Apellido paterno</th>
										<th class="min-w-125px">Apellido materno</th>
										<th class="min-w-125px">Foto</th>
										<th class="min-w-125px">Genero</th>
									</tr>
									<!--end::Table row-->
								</thead>
								<!--end::Table head-->
								<!--begin::Table body-->
								<tbody class="text-gray-600 fw-semibold">
									@foreach( $persons as $person )
									<!--begin::Table row-->
									<tr>
										<!--begin::Advisor=-->
										<td>{{ $person->name }}</td>
										<!--end::Advisor=-->
										<!--begin::Phone=-->
										<td> {{ $person->last_name }}</td>
										<!--end::Phone=-->
										<!--begin::Joined-->
										<td>{{ $person->mothers_last_name }}</td>
										<!--begin::Joined-->
										<!--begin::Joined-->
										<td>{{ $person->photo }}</td>
										<!--begin::Joined-->	
										<!--begin::Joined-->
										<td>{{ $person->gender }}</td>
										<!--begin::Joined-->																				
										<td>
											<a href="/employees/edit/{{$person->id}}">
												<i class="fas fa-edit"></i>
											</a> &nbsp; &nbsp;
											<a  onclick="delete_item(this);" data="{{ route('employees.destroy', [$person->id] ) }}" >
												<!--begin::Svg Icon | path: icons/duotune/general/gen027.svg-->
												<span class="svg-icon svg-icon-3">
													<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
														<path d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z" fill="currentColor"></path>
														<path opacity="0.5" d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z" fill="currentColor"></path>
														<path opacity="0.5" d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z" fill="currentColor"></path>
													</svg>
												</span>
												<!--end::Svg Icon-->
											</a>											
										</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>

	<!--begin::Modal - New Address-->
	<div class="modal fade" id="kt_modal_new_ticket" tabindex="-1" aria-hidden="true">
		<!--begin::Modal dialog-->
		<div class="modal-dialog modal-dialog-centered mw-650px">
			<!--begin::Modal content-->
			<div class="modal-content">
				<!--begin::Form-->
				<form class="form" action="/employees" method="POST" id="kt_modal_new_address_form">
					@csrf
					<!--begin::Modal header-->
					<div class="modal-header" id="kt_modal_new_address_header">
						<!--begin::Modal title-->
						<h2>Servicio</h2>
						<!--end::Modal title-->
						<!--begin::Close-->
						<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
							<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
							<span class="svg-icon svg-icon-1">
								<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
									<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
									<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
								</svg>
							</span>
							<!--end::Svg Icon-->
						</div>
						<!--end::Close-->
					</div>
					<!--end::Modal header-->
					<!--begin::Modal body-->
					<div class="modal-body py-10 px-lg-17">
						<!--begin::Scroll-->
						<div class="scroll-y me-n7 pe-7" id="kt_modal_new_address_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_new_address_header" data-kt-scroll-wrappers="#kt_modal_new_address_scroll" data-kt-scroll-offset="300px">
							<!--begin::Notice-->
							<!--begin::Input group-->
							<div class="row g-9 mb-8">

								<!--begin::Input group-->
								<div class="fv-row mb-7">
									<!--begin::Label-->
									<label class="required fw-semibold fs-6 mb-2">Nombre:</label>
									<!--end::Label-->
									<!--begin::Input-->
									<input type="text" name="name" id ="name" class="form-control form-control-solid mb-3 mb-lg-0"  />
									<!--end::Input-->
								</div>
								<!--end::Input group-->
								<!--begin::Input group-->
								<div class="fv-row mb-7">
									<!--begin::Label-->
									<label class="required fw-semibold fs-6 mb-2">Apellido paterno:</label>
									<!--end::Label-->
									<!--begin::Input-->
									<input type="text" name="last_name" id ="last_name" class="form-control form-control-solid mb-3 mb-lg-0"  />
									<!--end::Input-->
								</div>
								<!--end::Input group-->	
								<!--begin::Input group-->
								<div class="fv-row mb-7">
									<!--begin::Label-->
									<label class="required fw-semibold fs-6 mb-2">Apellido materno:</label>
									<!--end::Label-->
									<!--begin::Input-->
									<input type="text" name="mothers_last_name" id ="mothers_last_name" class="form-control form-control-solid mb-3 mb-lg-0"  />
									<!--end::Input-->
								</div>
								<!--end::Input group-->	
								<!--begin::Input group-->
								<div class="fv-row mb-7">
									<!--begin::Label-->
									<label class="required fw-semibold fs-6 mb-2">Genero:</label>
									<!--end::Label-->
									<!--begin::Input-->
									<select class="form-select form-select-solid fw-bold" data-kt-select2="true" data-placeholder="Selecciona" data-allow-clear="true" data-kt-user-table-filter="role" data-hide-search="true" name="gender" id="gender">
										<option></option>
										<option value="M">Masculino</option>
										<option value="F">Femenino</option>
									</select>
									<!--end::Input-->
								</div>
								<!--end::Input group-->								
								<!--
								<div class="fv-row mb-7">
									<label class="required fw-semibold fs-6 mb-2">Foto:</label>
									<input type="file" name="currency" id="currency" class="form-control form-control-solid mb-3 mb-lg-0"  />
								</div>								
								-->
							</div>
							<!--end::Input group-->
						</div>
						<!--end::Scroll-->
					</div>
					<!--end::Modal body-->
					<!--begin::Modal footer-->
					<div class="modal-footer flex-center">
						<!--begin::Button-->
						<button type="reset" data-bs-dismiss="modal" class="btn btn-light me-3">Cancelar</button>
						<!--end::Button-->
						<!--begin::Button-->
						<button type="submit" id="kt_modal_new_address_submit" class="btn btn-primary">
							<span class="indicator-label">Guardar empleado</span>
							<span class="indicator-progress">Please wait...
							<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
						</button>
						<!--end::Button-->
					</div>
					<!--end::Modal footer-->
				</form>
				<!--end::Form-->
			</div>
		</div>
	</div>
	<!--end::Modal - New Address-->

@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