@extends('master.front')
@section('meta')
<meta name="keywords" content="{{$setting->meta_keywords}}">
<meta name="description" content="{{$setting->meta_description}}">
@endsection
@section('title')
    {{__('Brand')}}
@endsection

@section('content')
    <!-- Page Title-->
 
  <!-- Page Content-->
  <div class="container-fluid container60">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb py-3">
            <li class="breadcrumb-item"><a href="{{ route('front.index') }}">{{ __('Home') }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{__('Brand')}}</li>
        </ol>
    </nav>
 
 
    <div class="row g-3">

        <div class="bd-example">

      
 
<!-- ปุ่ม A-Z สำหรับเรียงลำดับ -->
<!-- A-Z Buttons -->
<div class="col-md-12">
    <div class="shop-top-filter-wrapper" id="alphabetButtons">
        <button class="btn btn-outline-primary m-1" onclick="filterByLetter('')">All</button>
        @foreach (range('A', 'Z') as $letter)
            <button class="btn btn-outline-primary m-1" onclick="filterByLetter('{{ $letter }}')">{{ $letter }}</button>
        @endforeach
        <div class="col-md-6">
            <input type="text" id="searchInput" class="form-control mt-2 mb-3" placeholder="Search by letter or text..." onkeyup="filterBySearch()">
        </div>
    </div>
</div>

<div id="brands-list" class="mb-2">
    @foreach ($brands as $brand)
        <a class="btn btn-outline-dark m-1 brand-item" href="{{ route('front.catalog') . '?brand=' . $brand->slug }}">
            {{ $brand->name }}
        </a>
    @endforeach
</div>
<script>
    function filterByLetter(letter) {
        const buttons = document.querySelectorAll('#alphabetButtons button');
        const brands = document.querySelectorAll('.brand-item'); // class สำหรับแต่ละแบรนด์

        // แสดงแบรนด์ที่ตรงกับตัวอักษรที่เลือก
        brands.forEach(brand => {
            const brandName = brand.textContent.trim().toLowerCase();
            if (letter === '' || brandName.startsWith(letter.toLowerCase())) {
                brand.style.display = 'inline-block';  // แสดงแบรนด์
            } else {
                brand.style.display = 'none';  // ซ่อนแบรนด์
            }
        });

        // เปลี่ยนสไตล์ของปุ่มที่เลือก
        buttons.forEach(button => {
            if (button.textContent.toLowerCase() === letter.toLowerCase() || (letter === '' && button.textContent === 'All')) {
                button.classList.add('btn-primary');
                button.classList.remove('btn-outline-primary');
            } else {
                button.classList.remove('btn-primary');
                button.classList.add('btn-outline-primary');
            }
        });
    }

    function filterBySearch() {
        const searchQuery = document.getElementById('searchInput').value.toLowerCase();
        const brands = document.querySelectorAll('.brand-item'); // class สำหรับแต่ละแบรนด์

        brands.forEach(brand => {
            const brandName = brand.textContent.trim().toLowerCase();
            if (brandName.includes(searchQuery)) {
                brand.style.display = 'inline-block';  // แสดงแบรนด์
            } else {
                brand.style.display = 'none';  // ซ่อนแบรนด์
            }
        });
    }
</script>





          </div>


    </div>
  </div>
@endsection