@extends('master')

@section('additionals_js_files')
<script type="text/javascript" src="{{ url('/static/js/clients.js?v='.time()) }}"></script>
@endsection

@section('navbar-tabs')
<div class="nav-content">
	<ul class="tabs">
		<li class="tab"><a href="#list"><i class="bi bi-people"></i> Lista de clientes</a></li>
		<li class="tab"><a href="#add"><i class="bi bi-person-plus"></i> Nuevo cliente</a></li>	
	</ul>
</div>
@endsection

@section('content')
<div id="list">
	<div class="panel mtop24">
		<ul class="collection">
			<li class="collection-item" style="overflow: hidden; padding: 10px;">
				{!! Form::open(['url' => '/clients', 'autocomplete' => 'off', 'id' => 'form_client_search']) !!}
					{!! Form::hidden('autocomplete', null, ['class' => 'ac']) !!}
					<div class="form-search">
						<div class="col">
							{!! Form::text('query', null, ['placeholder' => 'Nombre, teléfono o correo electrónico...', 'class' => 'disableac', 'required']) !!}
						</div>
						<div class="col">
							<button type="submit"><i class="bi bi-search"></i></button>
						</div>
					</div>
				{!! Form::close() !!}
			</li>
			@foreach($clients as $client)
			 <li class="collection-item avatar" style="border-bottom: 0px;">
			 	@if(!is_null($client->avatar))
			 		<img src="{{ getFileUrl($client->avatar, '512') }}" class="circle">
			 	@else
			 		<img src="{{ url('/static/images/default_avatar.png') }}" class="circle">
			 	@endif
			 	<span class="title">{{ $client->name }}</span>
			 	<p><small><i class="bi bi-envelope-open"></i> {{ $client->email }} @if($client->phone)<i class="bi bi-telephone"></i> {{ $client->phone }}@endif</small></p>
			 </li>
			 <li class="collection-item" style="padding-top: 0px;">
			 	<div class="row">
			 		<div class="col s6" style="padding-left: 0px;">
			 			<a href="{{ url('/reserve/add/'.$client->id) }}" class="btn btn-primary w-100 sl">Reservar</a>
			 		</div>
			 		<div class="col s6" style="padding-right: 0px;">
			 			<a href="{{ url('/client/'.$client->id.'/profile') }}" class="btn btn-flat w-100 sl">Perfil</a>
			 		</div>
			 	</div>
			 </li>

			@endforeach
			<li class="collection-item">{!! $clients->links() !!}</li>
		</ul>
	</div>
</div>

<div id="add">
	<div class="panel mtop16">
		<div class="inside">
			{!! Form::open(['url' => '/client/add', 'id' => 'form_client_add']) !!}
			{!! Form::hidden('autocomplete', null, ['class' => 'ac']) !!}
			<label for="name">Nombre completo:</label>
			<div class="group">
				<i class="bi bi-person-badge"></i>
				{!! Form::text('name', null, ['class' => 'disableac']) !!}
			</div>

			<label for="email" class="mtop16">Correo electrónico:</label>
			<div class="group">
				<i class="bi bi-envelope-open"></i>
				{!! Form::email('email', null, ['class' => 'disableac']) !!}
			</div>

			<label for="phone" class="mtop16">Numero de celular:</label>
			<div class="group">
				<i class="bi bi-telephone"></i>
				{!! Form::number('phone', null, ['class' => 'disableac']) !!}
			</div>
			{!! Form::submit('Registrar Cliente', ['class' => 'btn btn-big btn-success mtop16']) !!}
			{!! Form::close() !!}
			<p class="mtop32"><small><strong>Nota:</strong> idealmente es necesario el correo electrónico del cliente, sin embargo si el cliente no tiene un correo electrónico deje el campo en blanco, el sistema generara un correo electrónico con el que el usuario podrá ingresar al sistema.</small></p>
		</div>
	</div>
</div>
@endsection