<?php echo $header; ?>

<section class="container-fluid">
	<?php echo $breadcrumbs; ?>

	<div class="row">
		<div class="col-xs-12">
      <div class="content-box bottom-margin-medium">
        <h2 class="heading-1"><?php echo $heading_title; ?></h2>
      </div>
    </div>
	</div>

	<div class="row small-space-xs">
		<div class="field-group col-xs-12 col-sm-6 col-md-4">
			<label for="search-gift-list" class="field-label"><?php echo $text_critea; ?></label>
			<div class="row x-small-space-xs">
				<div class="col-xs">
					<input type="text" name="search-lista" id="search-gift-list" value="<?php echo (isset($search)) ? $search : ''; ?>" class="field-entry field-entry-medium" placeholder="<?php echo $entry_search; ?>"/>
				</div>
				<div class="col-xs-4">
					<button type="button" id="btn-search-gift-list" class="btn-default btn-full btn-medium btn-search-gift-list">
						<span><?php echo $button_search; ?></span>
					</button>
				</div>
			</div>
		</div>


		<?php if ($listas) { ?>
			<div class="field-group col-xs-6 col-sm-3 col-md-2 col-md-offset-4">
				<label for="" class="field-label"><?php echo $text_sort; ?></label>
				<select onchange="location = this.value;" class="field-entry field-entry-medium" id="gisort">
					<?php foreach ($sorts as $sorts) { ?>
						<?php if ($sorts['value'] == $sort . '-' . $order) { ?>
							<option value="<?php echo $sorts['href']; ?>" selected="selected"><?php echo $sorts['text']; ?></option>
						<?php } else { ?>
							<option value="<?php echo $sorts['href']; ?>"><?php echo $sorts['text']; ?></option>
						<?php } ?>
					<?php } ?>
				</select>
			</div>
			<div class="field-group col-xs-6 col-sm-3 col-md-2">
				<label for="" class="field-label"><?php echo $text_limit; ?></label>
				<select onchange="location = this.value;" class="field-entry field-entry-medium">
					<?php foreach ($limits as $limits) { ?>
						<?php if ($limits['value'] == $limit) { ?>
							<option value="<?php echo $limits['href']; ?>" selected="selected"><?php echo $limits['text']; ?></option>
						<?php } else { ?>
							<option value="<?php echo $limits['href']; ?>"><?php echo $limits['text']; ?></option>
						<?php } ?>
					<?php } ?>
				</select>
			</div>
		<?php } ?>
	</div>

	<?php if ($search) { ?>
		<?php if ($listas) { ?>
			<div class="row small-space-xs">
				<div class="col-xs-12 top-margin-large">
					<span class="text-large"><?php echo $text_search; ?></span>
				</div>
				<?php foreach ($listas as $lista) { ?>
					<div class="col-xs-12 col-sm-6 col-md-4">
						<a href="<?php echo $lista['href']?>" class="text-decoration-none gift-list">
							<div class="padding-large border-gray rounded-small">
								<span class="visible-block text-x-large gift-list-name"><?php echo $lista['nome']; ?></span>
								<span class="visible-block text-medium"><?php echo $lista['cliente']; ?></span>
								<div class="row no-space-xs top-margin-small bottom-margin-medium">
									<div class="col-xs-6">
										<span class="visible-block text-small"><b>Validade</b></span>
										<span class="visible-block text-medium"><?php echo $lista['validade']; ?></span>
									</div>
									<div class="col-xs-6">
										<span class="visible-block text-small"><b>Dia do Evento</b></span>
										<span class="visible-block text-medium"><?php echo $lista['data']; ?></span>
									</div>
								</div>
								<span class="text-small text-uppercase right-margin-small"><?php echo $button_cart; ?></span>
								<i class="fas fa-angle-right text-small" aria-hidden="true"></i>
							</div>
						</a>
					</div>
				<?php } ?>
				<div class="col-xs-12 top-margin-large">
					<div class="pagination"><?php echo $pagination; ?></div>
					<?php echo $content_bottom; ?>
				</div>
			</div>

		<?php } else { ?>
			<div class="row large-space-xs">
				<div class="col-xs-12 vertical-margin-large">
					<i class="fas fa-meh-o text-x-large" aria-hidden="true"></i>
					<span class="text-large left-margin-small"><?php echo $text_empty; ?></span>
				</div>
			</div>
		<?php } ?>
	<?php } ?>
</section>


<script type="text/javascript">

window.waitEvent('scripts_document', function(){

/*Notificações vinda do common.js*/
<?php if ($success) { ?>notificationMsg('<?php echo $success; ?>','success');<?php } ?>
<?php if ($error_warning) { ?> notificationMsg('<?php echo $error_warning; ?>','warning'); <?php } ?>

$('#btn-search-gift-list').bind('click', function() {
	$('.error-lista').remove();
	url = 'index.php?route=listapresente/listapresente/buscalista';
	var search = $('#search-gift-list').attr('value');

	if (search) {
		url += '&search_lista=' + encodeURIComponent(search);
	} else {
    $('#search-gift-list').addClass('field-entry-error');
		$('#search-gift-list').after('<span class="error-lista text-error text-small top-margin-small">Por favor digite o nome da lista</span>');

  	return false;
  }

	location = url;
});

$.widget('custom.catcomplete', $.ui.autocomplete, {
	_renderMenu: function(ul, items) {
		var self = this, currentCategory = '';

		$.each(items, function(index, item) {
			self._renderItem(ul, item);
		});
	}
});

$('#search-gift-list').keydown(function(e) {
  if (e.keyCode == 13) {
	  if( $(this).val() == '' ){
			$(this).addClass('field-entry-error');
	  } else {
			$('#btn-search-gift-list').trigger('click');
		}
	}
});

$('#search-gift-list').catcomplete({
	delay: 500,
	source: function(request, response) {
		$.ajax({
			url: 'index.php?route=listapresente/listapresente/autocomplete&filter=' +  encodeURIComponent(request.term),
			dataType: 'json',
            error: function(json){
              console.log(JSON.stringify(json));
            },
			success: function(json) {
				response($.map(json, function(item) {
					return {
						category: item.cliente,
						label: item.name,
						value: item.lista_id
					}
				}));
			}
		});
	},
	select: function(event, ui) {
		$('#search-gift-list').val(ui.item.label);

		return false;
	},
	focus: function(event, ui) {
      	return false;
   	}
});

});

</script>
<?php echo $footer; ?>
