@extends('frontend.layouts.main')
@section('title', $seo['title'] ?? '')
@section('keywords', $seo['keywords'] ?? '')
@section('description', $seo['description'] ?? '')
@section('abstract', $seo['abstract'] ?? '')
@section('image', asset($header['seo_home']->image_path))
@section('idMain', 'page-product')
@section('css')
<link rel="stylesheet" href="{{ asset('frontend/css/style.css') }}?v={{ time() }}" type="text/css" />
<link rel="stylesheet" href="{{ asset('frontend/css/product-list.css') }}?v={{ time() }}">
@endsection

@section('content')

@include('frontend.components.breadcrumbs', ['caetgory' => $category, 'parents' => $category->parentsRecursiveLimit(3)])

@if ($category->children->isNotEmpty())
<section class="product-category-child">
	<div class="ctnr">
		<div class="category-child-inner">
			<div class="category-child-slider">
					@foreach($category->children as $child)
					<a href="{{$child->slug_full}}" title="{{ $child->name }}" class="item">
						<div class="img-wrap">
							<img src="{{ asset($child->icon_path ?? $child->parent->icon_path) }}" alt="{{ $child->name }}">
						</div>
						<div class="name">{{ $child->name }}</div>
					</a>
					@endforeach
				</div>
			</div>


	</div>
</section>
@endif

@if (!empty($bannerCategory))
{{-- Banner danh mục, nếu có thì hiện ra --}}
<section class="banner-category">
	<div class="ctnr">
		<img src="{{ asset($bannerCategory) }}" alt="{{ $category->name }}">
	</div>
</section>
@endif

@if ($attributeTree->count() > 0)
<section class="filter-wrap">
	<div class="ctnr">
		<div class="filter-section">
			@foreach ($attributeTree as $attribute)
			@if ($attribute['total_count'] > 0)
		
			<div class="filter-dropdown">
				<button class="filter-button" onclick="toggleDropdown('attr-{{ $attribute['id'] }}')">
					<span>{{ $attribute['name'] }}</span>
					<span class="dropdown-arrow">▼</span>
				</button>
				<div class="dropdown-menu" id="attr-{{ $attribute['id'] }}">
					<div class="dropdown-section">
						<div class="filter-options">
							@foreach ($attribute['children'] as $child)
							{{-- Bạn có thể kiểm tra $child['total_count'] để ẩn các con hoàn toàn trống --}}
							{{-- Nhưng yêu cầu của bạn là chỉ cần ẩn thuộc tính gốc, nên giữ nguyên --}}
							<div class="filter-tag tooggle-active {{ $child['count'] == 0 ? 'disabled' : '' }}" data-id="{{ $child['id'] }}" data-category-id="{{ $category->id }}">
								@if (!empty($child['avatar']))
								<img src="{{ asset($child['avatar']) }}" alt="{{ $child['name'] }}" style="max-width: 50px; max-height: 50px;">
								@else
								{{ $child['name'] }}
								@endif
							</div>
							@endforeach
						</div>
					</div>
					<div class="dropdown-footer" style="{{ $totalProducts > 0 && $hasFilter ? 'display: block' : '' }}">
						 <button class="close">Bỏ chọn</button>
						<button class="result" disabled>
							Xem <strong class="show-total-result">{{ $totalProducts }}</strong> kết quả
						</button>

					</div>
				</div>
			</div>
			@endif
			@endforeach
		</div>
	</div>
</section>
@endif

<section class="product-list">
	<div class="ctnr">
		<div class="header-category">
			<h1>{{ $category->name }} <span id="total-data">({{ $products->total() }} sản phẩm)</span></h1>
			<div class="sort">
				<button data-price="desc" data-category="{{ $category->id }}" class="sort-button">
					<svg height="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
						<path
							d="M416 288h-95.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H416c17.67 0 32-14.33 32-32S433.7 288 416 288zM544 32h-223.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H544c17.67 0 32-14.33 32-32S561.7 32 544 32zM352 416h-32c-17.67 0-32 14.33-32 32s14.33 32 32 32h32c17.67 0 31.1-14.33 31.1-32S369.7 416 352 416zM480 160h-159.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H480c17.67 0 32-14.33 32-32S497.7 160 480 160zM192.4 330.7L160 366.1V64.03C160 46.33 145.7 32 128 32S96 46.33 96 64.03v302L63.6 330.7c-6.312-6.883-14.94-10.38-23.61-10.38c-7.719 0-15.47 2.781-21.61 8.414c-13.03 11.95-13.9 32.22-1.969 45.27l87.1 96.09c12.12 13.26 35.06 13.26 47.19 0l87.1-96.09c11.94-13.05 11.06-33.31-1.969-45.27C224.6 316.8 204.4 317.7 192.4 330.7z" fill="currentColor">
						</path>
					</svg>
					Giá Cao - Thấp
				</button>
				<button data-price="asc" data-category="{{ $category->id }}" class="sort-button">
					<svg height="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
						<path
							d="M320 224H416c17.67 0 32-14.33 32-32s-14.33-32-32-32h-95.1c-17.67 0-32 14.33-32 32S302.3 224 320 224zM320 352H480c17.67 0 32-14.33 32-32s-14.33-32-32-32h-159.1c-17.67 0-32 14.33-32 32S302.3 352 320 352zM320 96h32c17.67 0 31.1-14.33 31.1-32s-14.33-32-31.1-32h-32c-17.67 0-32 14.33-32 32S302.3 96 320 96zM544 416h-223.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H544c17.67 0 32-14.33 32-32S561.7 416 544 416zM192.4 330.7L160 366.1V64.03C160 46.33 145.7 32 128 32S96 46.33 96 64.03v302L63.6 330.7c-6.312-6.883-14.94-10.38-23.61-10.38c-7.719 0-15.47 2.781-21.61 8.414c-13.03 11.95-13.9 32.22-1.969 45.27l87.1 96.09c12.12 13.26 35.06 13.26 47.19 0l87.1-96.09c11.94-13.05 11.06-33.31-1.969-45.27C224.6 316.8 204.4 317.7 192.4 330.7z" fill="currentColor">
						</path>
					</svg>
					Giá Thấp - Cao
				</button>
			</div>
		</div>

		<div class="filter-mobile @if (collect($attributeTree)->contains(fn ($item) => ($item['total_count'] ?? 0) > 0)) btn-tuan @endif">
			<div class="sapxep btn-filter-m btn-open-modal " data-target="#modal-sapxep">
				<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
					<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
					<g id="SVGRepo_iconCarrier">
						<path d="M16 18L16 6M16 6L20 10.125M16 6L12 10.125" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
						<path d="M8 6L8 18M8 18L12 13.875M8 18L4 13.875" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
					</g>
				</svg>
				Sắp xếp
			</div>
			
			
			@if (collect($attributeTree)->contains(fn ($item) => ($item['total_count'] ?? 0) > 0))
			<div class="boloc btn-filter-m">
				<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
					<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
					<g id="SVGRepo_iconCarrier">
						<path d="M3 4.6C3 4.03995 3 3.75992 3.10899 3.54601C3.20487 3.35785 3.35785 3.20487 3.54601 3.10899C3.75992 3 4.03995 3 4.6 3H19.4C19.9601 3 20.2401 3 20.454 3.10899C20.6422 3.20487 20.7951 3.35785 20.891 3.54601C21 3.75992 21 4.03995 21 4.6V6.33726C21 6.58185 21 6.70414 20.9724 6.81923C20.9479 6.92127 20.9075 7.01881 20.8526 7.10828C20.7908 7.2092 20.7043 7.29568 20.5314 7.46863L14.4686 13.5314C14.2957 13.7043 14.2092 13.7908 14.1474 13.8917C14.0925 13.9812 14.0521 14.0787 14.0276 14.1808C14 14.2959 14 14.4182 14 14.6627V17L10 21V14.6627C10 14.4182 10 14.2959 9.97237 14.1808C9.94787 14.0787 9.90747 13.9812 9.85264 13.8917C9.7908 13.7908 9.70432 13.7043 9.53137 13.5314L3.46863 7.46863C3.29568 7.29568 3.2092 7.2092 3.14736 7.10828C3.09253 7.01881 3.05213 6.92127 3.02763 6.81923C3 6.70414 3 6.58185 3 6.33726V4.6Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
					</g>
				</svg>
				Bộ lọc
			</div>
			@endif
		</div>

		@if(isset($products) && $products->isNotEmpty())
		<div id="result-filter-product" class="product-block">
			<div class="row">
				@include('frontend.components.products.result-filter-product', ['products' => $products])
			</div>

			{{ $products->appends(request()->all())->links() }}
			@if ($products->hasMorePages())
			<!-- <div class="load-more">
				<button id="loadMoreBtn"
					data-next-page="{{ $products->currentPage() + 1 }}"
					data-last-page="{{ $products->lastPage() }}"
					data-category-id="{{ $category->id }}"
					data-per-page="{{ $products->perPage() }}"
					data-total="{{ $products->total() }}">
					Xem thêm {{ $products->total() - $products->perPage() * $products->currentPage() }} sản phẩm
				</button>
			</div> -->
			@endif
		</div>

		@if (!empty($category->content))
		{{-- Nội dung danh mục --}}
		<div class="product-content-detail">
			<div class="noi-dung">
				<h2>Bài viết đánh giá {{ $category->name }}</h2>
				{!! $category->content !!}
			</div>
			<button class="btn-xem-them" style="display:none;">Xem thêm</button>
		</div>
		@endif

		@else
		<div class="no-data">Đang cập nhật dữ liệu!!</div>
		@endif
	</div>
</section>

<div class="modal-overlayyy" id="modal-sapxep">
	<div class="modal-content">
		<div class="close-btn-modal"></div>
		<div class="filter-sapxep">
			<div class="title">Sắp xếp theo</div>
			<div class="item">
				<input type="radio" id="cao-thap" data-price="desc" data-category="{{ $category->id }}" name="sort-price">
				<label for="cao-thap">Giá từ cao tới thấp</label>
			</div>
			<div class="item">
				<input type="radio" id="thap-cao" data-price="asc" data-category="{{ $category->id }}" name="sort-price">
				<label for="thap-cao">Giá từ thấp tới cao</label>
			</div>
		</div>
	</div>
</div>

<div class="filter-option-mobile">
	<div class="filter-content">
		@foreach ($attributeTree as $attribute)
		@if ($attribute['total_count'] > 0)
		<div class="filter-parent">
			<div class="title">{{ $attribute['name'] }}</div>
			<div class="icon-arrow">
				<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M9 6L15 12L9 18" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
				</svg>
			</div>
			<div class="filter-child">
				<div class="inner">
					@foreach ($attribute['children'] as $child)
					<button class="fil {{ $child['count'] == 0 ? 'disabled' : '' }}"
						data-id="{{ $child['id'] }}">
						@if (!empty($child['avatar']))
						<img src="{{ asset($child['avatar']) }}" alt="{{ $child['name'] }}" style="max-width:50px;max-height:50px;">
						@else
						{{ $child['name'] }}
						@endif
					</button>
					@endforeach
				</div>
			</div>
		</div>
		@endif
		@endforeach
	</div>

	<div class="filter-footer">
		<button class="close">
			Đóng
		</button>
		<button class="delete-all">
			Xóa toàn bộ
		</button>
		<button class="apply" data-category="{{ $category->id }}">
			Áp dụng
		</button>
	</div>
</div>

@endsection
@section('js')
<script src="{{ asset('frontend/js/product-list.js') }}?v={{ time() }}"></script>
@endsection