{% extends 'menu/menu_ion.html' %}
{% load static %}

{% block title %}Comercios Disponibles{% endblock %}

{% block head %}
<style>
	.rating-star {
		font-size: 32px;
		color: lightgray;
		cursor: pointer;
	}

	.rating-star.selected {
		color: gold;
	}
</style>

<style>
	/* :root {
		--ion-color-primary: #3880ff;
		--ion-color-primary-rgb: 56, 128, 255;
		--ion-color-primary-contrast: #ffffff;
		--ion-color-primary-contrast-rgb: 255, 255, 255;
		--ion-color-primary-shade: #3171e0;
		--ion-color-primary-tint: #4c8dff;

		--ion-color-secondary: #3dc2ff;
		--ion-color-secondary-rgb: 61, 194, 255;
		--ion-color-secondary-contrast: #ffffff;
		--ion-color-secondary-contrast-rgb: 255, 255, 255;
		--ion-color-secondary-shade: #36abe0;
		--ion-color-secondary-tint: #50c8ff;

		--ion-color-tertiary: #5260ff;
		--ion-color-tertiary-rgb: 82, 96, 255;
		--ion-color-tertiary-contrast: #ffffff;
		--ion-color-tertiary-contrast-rgb: 255, 255, 255;
		--ion-color-tertiary-shade: #4854e0;
		--ion-color-tertiary-tint: #6370ff;

		--ion-color-success: #2dd36f;
		--ion-color-success-rgb: 45, 211, 111;
		--ion-color-success-contrast: #ffffff;
		--ion-color-success-contrast-rgb: 255, 255, 255;
		--ion-color-success-shade: #28ba62;
		--ion-color-success-tint: #42d77d;

		--ion-color-warning: #ffc409;
		--ion-color-warning-rgb: 255, 196, 9;
		--ion-color-warning-contrast: #000000;
		--ion-color-warning-contrast-rgb: 0, 0, 0;
		--ion-color-warning-shade: #e0ac08;
		--ion-color-warning-tint: #ffca22;

		--ion-color-danger: #eb445a;
		--ion-color-danger-rgb: 235, 68, 90;
		--ion-color-danger-contrast: #ffffff;
		--ion-color-danger-contrast-rgb: 255, 255, 255;
		--ion-color-danger-shade: #cf3c4f;
		--ion-color-danger-tint: #ed576b;

		--ion-color-dark: #222428;
		--ion-color-dark-rgb: 34, 36, 40;
		--ion-color-dark-contrast: #ffffff;
		--ion-color-dark-contrast-rgb: 255, 255, 255;
		--ion-color-dark-shade: #1e2023;
		--ion-color-dark-tint: #383a3e;

		--ion-color-medium: #92949c;
		--ion-color-medium-rgb: 146, 148, 156;
		--ion-color-medium-contrast: #ffffff;
		--ion-color-medium-contrast-rgb: 255, 255, 255;
		--ion-color-medium-shade: #808289;
		--ion-color-medium-tint: #9d9fa6;

		--ion-color-light: #f4f5f8;
		--ion-color-light-rgb: 244, 245, 248;
		--ion-color-light-contrast: #000000;
		--ion-color-light-contrast-rgb: 0, 0, 0;
		--ion-color-light-shade: #d7d8da;
		--ion-color-light-tint: #f5f6f9;
	} */

	/* Estilos personalizados */
	.business-card {
		margin: 12px;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.business-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	}

	.business-avatar {
		width: 60px;
		height: 60px;
		margin-right: 12px;
	}

	.business-name {
		font-weight: 600;
		font-size: 1.1rem;
		color: var(--ion-color-dark);
	}

	.business-info {
		font-size: 0.9rem;
		color: var(--ion-color-medium);
	}

	.rating-badge {
		--padding-start: 6px;
		--padding-end: 6px;
		font-weight: 500;
	}

	.status-badge {
		position: absolute;
		top: 12px;
		right: 12px;
	}

	.follow-btn {
		--border-width: 1px;
		--border-style: solid;
		--border-color: var(--ion-color-primary);
		--color: var(--ion-color-primary);
		--background: transparent;
		--padding-start: 12px;
		--padding-end: 12px;
		font-weight: 500;
	}

	.follow-btn.following {
		--background: var(--ion-color-primary);
		--color: white;
		--border-color: transparent;
	}

	.category-segment {
		--background: white;
		padding: 8px 0;
	}

	.category-segment ion-segment-button {
		--color: var(--ion-color-medium);
		--color-checked: var(--ion-color-primary);
		--indicator-color: var(--ion-color-primary);
		min-width: 80px;
	}

	.category-icon {
		font-size: 24px;
		margin-bottom: 4px;
	}

	.search-bar {
		--background: white;
		--border-radius: 12px;
		--box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		/* margin: 12px; */
	}

	.empty-state {
		text-align: center;
		padding: 40px 20px;
	}

	.empty-icon {
		font-size: 64px;
		color: var(--ion-color-light);
		margin-bottom: 16px;
	}

	.empty-text {
		color: var(--ion-color-medium);
		font-size: 1rem;
	}

	.category-segment::-webkit-scrollbar {
		display: none;
	}

	.category-segment {
		/* IE 10+ */
		-ms-overflow-style: none;
		/* Firefox */
		scrollbar-width: none;
	}
</style>
{% endblock %}

{% block content %}
<!-- SEGMENT -->
<ion-segment scrollable="true" value="0" class="category-segment" slot="fixed">
	{% for categoria in categoriasData %}
	<ion-segment-button value="{{ forloop.counter0 }}" layout="icon-end" data-category="{{ categoria.icono }}" data-target="recommendations-{{ categoria.icono }}">
		<ion-label>{{ categoria.tipo_negocio }}</ion-label>
		<!-- <ion-icon name="{{ categoria.icono }}"></ion-icon> -->
		<ion-text class="material-icons" style="margin-right: 8px;">{{ categoria.icono }}</ion-text>
	</ion-segment-button>

	<!-- <ion-segment-button value="heart" layout="icon-end">
				<ion-label>Heart</ion-label>
				<ion-icon name="heart"></ion-icon>
			</ion-segment-button> -->
	{% endfor %}
</ion-segment>

<!-- SEARCHBAR -->
<ion-searchbar id="searchInput" placeholder="Buscar comercio..." animated="true" slot="fixed" class="search-bar" debounce="300">
</ion-searchbar>



<!-- CONTENT -->
<ion-content>
	{% include 'ionic_refresher.html' %}

	<!-- Lista de resultados -->
	<!-- 64 58 56 -->
	<ion-list id="resultados" lines="none">
		{% if negociosData %}
		{% for categoria in categoriasData %}
		<ion-item-divider id="recommendations-{{ categoria.icono }}">
			<ion-label>{{ categoria.tipo_negocio }}</ion-label>
		</ion-item-divider>

		{% for negocio in negociosData %}
		{% if negocio.id_tipo_negocio == categoria.id_tipo_negocio %}
		<ion-card class="business-card" data-id="{{ negocio.id_usuario }}" data-name="{{ negocio.nombre }}">
			<!-- Badge de estado -->
			{% if negocio.esta_abierto == 2 or negocio.esta_abierto == '2' %}
			<ion-badge class="status-badge">Abierto</ion-badge>
			{% elif negocio.esta_abierto == 1 or negocio.esta_abierto == '1' %}
			<ion-badge class="status-badge">Horario NO Establecido</ion-badge>
			{% else %}
			<ion-badge class="status-badge">Cerrado</ion-badge>
			{% endif %}

			<ion-item lines="none">
				<ion-avatar slot="start" class="business-avatar" onclick="window.location.href='{% url 'perfil_negocio' negocio.id_usuario %}';">
					<img src="{{ negocio.foto_perfil }}" alt="{{ negocio.nombre }}">
				</ion-avatar>
				<ion-label>
					<h2 class="business-name">{{ negocio.nombre }}</h2>
					<p class="business-info">{{ negocio.telefono }}</p>
					<p class="business-info">{{ negocio.dias_atencion }}</p>
				</ion-label>
			</ion-item>

			<ion-card-content>
				<ion-grid>
					<ion-row class="ion-align-items-center">
						<ion-col size="auto">
							<ion-badge class="rating-badge">
								<ion-icon name="star" style="font-size: 14px;"></ion-icon>
								{{ negocio.calificacion }}
							</ion-badge>
						</ion-col>
						<ion-col class="ion-text-end">
							<ion-button class="follow-btn {% if negocio.seguidor_actual %}following{% endif %}" data-id="{{ negocio.id_usuario }}">
								{% if negocio.seguidor_actual %}Seguido{% else %}Seguir{% endif %}
							</ion-button>
						</ion-col>
					</ion-row>
				</ion-grid>
			</ion-card-content>
		</ion-card>
		{% endif %}
		{% endfor %}
		{% endfor %}
		{% else %}
		<!-- Estado vacío -->
		<div class="empty-state">
			<ion-icon name="business-outline" class="empty-icon"></ion-icon>
			<h3>No hay comercios disponibles</h3>
			<p class="empty-text">Parece que no hay comercios registrados en este momento.</p>
		</div>
		{% endif %}
	</ion-list>
</ion-content>


<script>
	document.addEventListener('DOMContentLoaded', function () {
		// Filtro de búsqueda
		const searchInput = document.getElementById('searchInput');
		searchInput.addEventListener('ionInput', (e) => {
			const val = e.target.value.toLowerCase();
			const cards = document.querySelectorAll('.business-card');
			let hasResults = false;

			cards.forEach(card => {
				const name = card.dataset.name.toLowerCase();
				if (name.includes(val)) {
					card.style.display = '';
					hasResults = true;
				} else {
					card.style.display = 'none';
				}
			});

			// Mostrar estado vacío si no hay resultados
			const emptyState = document.querySelector('.empty-state');
			if (emptyState) {
				emptyState.style.display = hasResults ? 'none' : 'block';
			}
		});

		// Scroll a categorías
		document.querySelectorAll('ion-segment-button').forEach(button => {
			button.addEventListener('click', () => {
				const target = button.dataset.target;
				const el = document.getElementById(target);
				if (el) {
					el.scrollIntoView({
						behavior: 'smooth',
						block: 'start'
					});
				}
			});
		});

		// Botones de seguir
		document.querySelectorAll('.follow-btn').forEach(btn => {
			btn.addEventListener('click', function (e) {
				e.stopPropagation();
				const businessId = this.dataset.id;
				const isFollowing = this.classList.contains('following');

				// Simular llamada API
				setTimeout(() => {
					if (isFollowing) {
						this.classList.remove('following');
						this.innerText = 'Seguir';
					} else {
						this.classList.add('following');
						this.innerText = 'Seguido';
					}
				}, 300);
			});
		});

		// Click en tarjeta para ver detalles
		$(document).on('click', '.business-card', function (event) {
			// Si el clic fue en un <a> (ej. foto), dejamos que redireccione a perfil_negocio
			if ($(event.target).closest('a').length > 0) {
				return;
			}

			const csrfToken = "{{ csrf_token }}";
			const negocio_id = $(this).data('id');
			const negocio_name = $(this).data('name');

			$.ajax({
				url: "{% url 'pedidos_validar_existe_pendiente' %}",
				type: "POST",
				data: {
					negocio: negocio_id,
					csrfmiddlewaretoken: csrfToken
				},
				beforeSend: function (xhr, type) {
					// loading bar
					showLoadingBar();
				},
				complete: function (data) {
					// loading bar
					hideLoadingBar();
				},
				success: (data) => {
					if (data.save == 1) {
						// Opción A: Asegurarte de que la URL final tenga '/pedidos/productos'
						const currentPath = window.location.pathname;
						// Si no termina con "/", se la agregamos 
						// (ej: "/admin/panel/negocios/pedidos" => "/admin/panel/negocios/pedidos/")
						const normalizedPath = currentPath.endsWith('/') ? currentPath : currentPath + '/';

						// Construimos la URL final
						const finalURL = window.location.origin
							+ normalizedPath
							+ "productos/"
							+ negocio_id + "/"
							+ negocio_name + "/"
							+ data.pedido;

						window.location.href = finalURL;
					}
				},
				error: () => {
					showAlerta("Error al procesar la solicitud");
				}
			});
		});
	});
</script>
{% endblock %}