@extends('frontend.layouts.main')
@section('title', $seo['title'] ?? '')
@section('keywords', $seo['keywords'] ?? '')
@section('description', $seo['description'] ?? '')
@section('abstract', $seo['keywords'] ?? '')
@section('image', asset($header['seo_home']->image_path))
@section('css')
<link rel="stylesheet" href="{{ asset('frontend/css/common.css') }}">
<link rel="stylesheet" href="{{ asset('frontend/css/blog-details.css') }}">
<style>
    .main {
        background: #fff;
    }

    .alphabet-section {
       margin: 10px 0 20px 0;
    padding: 0px 0;
    clear: both;
    width: 100%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    }

    .section-title {
          font-size: 26px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    padding: 5px 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    display: flex
;
    align-items: center;
    }

    .section-title:before {
        content: '';
        width: 6px;
        height: 40px;
        background: #1aace3;
        margin-right: 15px;
        border-radius: 3px;
    }

    .alphabet-nav {
         margin-bottom: 40px;
    text-align: center;
    padding: 25px 20px;
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border-radius: 15px;
    position: sticky;
    top: 50px;
    z-index: 100;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid #e9ecef;
    gap: 0px 5px;
    }

    .alphabet-nav .nav-item {
        display: inline-block;
            margin: 5px 0px;
        
    padding: 5px 5px;
        background: #fff;
        color: #495057;
        text-decoration: none;
        border-radius: 8px;
        border: 2px solid #dee2e6;
        transition: all 0.3s ease;
        font-weight: 600;
        font-size: 16px;
        min-width: 45px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .alphabet-nav .nav-item:before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
        transition: left 0.5s;
    }

    .alphabet-nav .nav-item:hover:before {
        left: 100%;
    }

    .alphabet-nav .nav-item:hover,
    .alphabet-nav .nav-item.active {
         background: #1aace3;
    color: #fff;
    border-color: #1aace3;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
    }

    .row .dv-01-col-news-item {
        margin-bottom: 25px;
        transition: transform 0.3s ease;
    }

    .row .dv-01-col-news-item:hover {
        transform: translateY(-5px);
    }

    .supplier {
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        border: 1px solid #e9ecef;
    }

    .supplier:hover {
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        border-color: #007bff;
    }

    .supplier .image {
        margin-bottom: 15px;
        border-radius: 8px;
        overflow: hidden;
    }

    .supplier .image img {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease;
    }

    .supplier .image:hover img {
        transform: scale(1.05);
    }

    .supplier h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

    .supplier h3 a {
        color: #2c3e50;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .supplier h3 a:hover {
        color: #007bff;
    }

    /* Separator between sections */
    .section-separator {
        height: 2px;
        background: linear-gradient(90deg, transparent, #007bff, transparent);
        margin: 20px 0;
        border-radius: 1px;
    }

    @media (max-width: 768px) {
        .alphabet-nav {
            padding: 20px 15px;
            position: relative;
            top: 0;
        }
        
        .alphabet-nav .nav-item {
            margin: 3px 4px;
            padding: 8px 10px;
            font-size: 14px;
            min-width: 35px;
        }
        
        .section-title {
            font-size: 24px;
            padding: 5px 20px;
            letter-spacing: 2px;
        }
        
      
        .supplier {
            padding: 15px;
        }
    }

    @media (max-width: 480px) {
        .alphabet-nav .nav-item {
            margin: 2px 3px;
            padding: 6px 8px;
            font-size: 12px;
            min-width: 30px;
        }
        
        .section-title {
            font-size: 20px;
            letter-spacing: 1px;
        }
    }
</style>
@endsection

@section('content')
<div class="brackham-commont">
    <div class="ctnr">
        <ul class="breadcrumb">
            <li><a href="/">Trang chủ</a></li>
            <li><a href="#">Thương hiệu</a></li>
        </ul>
    </div>
</div>

<main class="main">
    <div class="page_news pd-section-top pd-section-bottom">
        <div class="ctnr">
            <div class="alphabet-nav">
                <a href="#section-0-9" class="nav-item">0-9</a>
                <a href="#section-A" class="nav-item">A</a>
                <a href="#section-B" class="nav-item">B</a>
                <a href="#section-C" class="nav-item">C</a>
                <a href="#section-D" class="nav-item">D</a>
                <a href="#section-E" class="nav-item">E</a>
                <a href="#section-F" class="nav-item">F</a>
                <a href="#section-G" class="nav-item">G</a>
                <a href="#section-H" class="nav-item">H</a>
                <a href="#section-I" class="nav-item">I</a>
                <a href="#section-J" class="nav-item">J</a>
                <a href="#section-K" class="nav-item">K</a>
                <a href="#section-L" class="nav-item">L</a>
                <a href="#section-M" class="nav-item">M</a>
                <a href="#section-N" class="nav-item">N</a>
                <a href="#section-O" class="nav-item">O</a>
                <a href="#section-P" class="nav-item">P</a>
                <a href="#section-Q" class="nav-item">Q</a>
                <a href="#section-R" class="nav-item">R</a>
                <a href="#section-S" class="nav-item">S</a>
                <a href="#section-T" class="nav-item">T</a>
                <a href="#section-U" class="nav-item">U</a>
                <a href="#section-V" class="nav-item">V</a>
                <a href="#section-W" class="nav-item">W</a>
                <a href="#section-X" class="nav-item">X</a>
                <a href="#section-Y" class="nav-item">Y</a>
                <a href="#section-Z" class="nav-item">Z</a>
            </div>
            
            @if ($data->count() > 0)
            <div class="list-news">
                <div class="row">
                    @foreach ($data as $i)
                    <div class="clm dv-01-col-news-item" style="--w-lg:2; --w-md:6; --w-xs:6;">
                        <div class="supplier">
                            <div class="image">
                                <a href="{{ route('supplierProduct', ['slug' => $i->slug]) }}">
                                    <img src="{{ asset($i->logo_path ?? 'frontend/images/no_image.jpg') }}" 
                                         alt="{{ $i->name }}" 
                                         class="lazy lazyload">
                                </a>
                            </div>
                            <h3>
                                <a href="{{ route('supplierProduct', ['slug' => $i->slug]) }}">
                                    {{ $i->name }}
                                </a>
                            </h3>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @else
            <div class="no-data" style="text-align: center; padding: 60px 20px;">
                <h3 style="color: #6c757d; font-size: 24px; margin-bottom: 15px;">Không có dữ liệu</h3>
                <p style="color: #adb5bd; font-size: 16px;">Hiện tại chưa có thương hiệu nào được thêm vào.</p>
            </div>
            @endif
        </div>
    </div>
</main>

<script>
$(document).ready(function() {
    // Loading animation
    $('body').append('<div id="loading" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.9);z-index:9999;display:none;"><div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"><div style="border:4px solid #f3f3f3;border-top:4px solid #007bff;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;"></div></div></div>');
    $('head').append('<style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>');
    
    function showLoading() {
        $('#loading').fadeIn(300);
    }
    
    function hideLoading() {
        $('#loading').fadeOut(300);
    }
    
    function sortAndGroupItems() {
        showLoading();
        
        setTimeout(function() {
            var $listNews = $('.list-news .row');
            var $items = $('.dv-01-col-news-item');
            
            var groupedItems = {
                '0-9': [],
                'A': [], 'B': [], 'C': [], 'D': [], 'E': [], 'F': [], 'G': [], 'H': [], 'I': [], 'J': [],
                'K': [], 'L': [], 'M': [], 'N': [], 'O': [], 'P': [], 'Q': [], 'R': [], 'S': [], 'T': [],
                'U': [], 'V': [], 'W': [], 'X': [], 'Y': [], 'Z': []
            };
            
            // Group items by first character
            $items.each(function() {
                var $item = $(this);
                var name = $item.find('h3 a').text().trim().toUpperCase();
                var firstChar = name.charAt(0);
                
                if (/[0-9]/.test(firstChar)) {
                    groupedItems['0-9'].push($item);
                } else if (/[A-Z]/.test(firstChar)) {
                    if (groupedItems[firstChar]) {
                        groupedItems[firstChar].push($item);
                    }
                }
            });
            
            // Remove all current items
            $items.remove();
            
            // Add sorted items back
            Object.keys(groupedItems).forEach(function(letter) {
                if (groupedItems[letter].length > 0) {
                    // Sort items within the same group
                    groupedItems[letter].sort(function(a, b) {
                        var nameA = $(a).find('h3 a').text().trim().toUpperCase();
                        var nameB = $(b).find('h3 a').text().trim().toUpperCase();
                        return nameA.localeCompare(nameB);
                    });
                    
                    // Create section header
                    var sectionId = 'section-' + letter;
                    var $sectionHeader = $('<div class="alphabet-section" id="' + sectionId + '"><h2 class="section-title">' + letter + '</h2></div>');
                    $listNews.append($sectionHeader);
                    
                    // Add items to this section
                    groupedItems[letter].forEach(function($item, index) {
                        // Add animation delay
                        $item.css('animation-delay', (index * 0.1) + 's');
                        $listNews.append($item);
                    });
                    
                    // Add separator after each section (except last)
                    if (letter !== 'Z' && Object.keys(groupedItems).indexOf(letter) < Object.keys(groupedItems).length - 1) {
                        $listNews.append('<div class="section-separator"></div>');
                    }
                }
            });
            
            // Hide navigation items that don't have content
           $('.alphabet-nav .nav-item').each(function() {
    var targetId = $(this).attr('href');
    var letter = targetId.replace('#section-', '');
    
    if (!groupedItems[letter] || groupedItems[letter].length === 0) {
        $(this).remove(); // Xoá hẳn nút không có dữ liệu
    }
});
            
            hideLoading();
        }, 500);
    }
    
    // Smooth scroll navigation
    $('.alphabet-nav .nav-item').on('click', function(e) {
        e.preventDefault();
        
        if ($(this).hasClass('disabled')) return;
        
        var targetId = $(this).attr('href');
        var $target = $(targetId);
        
        if ($target.length) {
            $('.alphabet-nav .nav-item').removeClass('active');
            $(this).addClass('active');
            
            $('html, body').animate({
                scrollTop: $target.offset().top - 120
            }, 800, 'easeInOutQuart');
        }
    });
    
    // Highlight active navigation on scroll
    $(window).on('scroll', function() {
        var scrollTop = $(window).scrollTop();
        var found = false;
        
        $('.alphabet-section').each(function() {
            var $section = $(this);
            var sectionTop = $section.offset().top - 200;
            var sectionBottom = sectionTop + $section.outerHeight() + 100;
            var sectionId = $section.attr('id');
            
            if (scrollTop >= sectionTop && scrollTop < sectionBottom && !found) {
                $('.alphabet-nav .nav-item').removeClass('active');
                $('.alphabet-nav .nav-item[href="#' + sectionId + '"]').addClass('active');
                found = true;
            }
        });
        
        if (!found) {
            $('.alphabet-nav .nav-item').removeClass('active');
        }
    });
    
    // Add easing function
    $.easing.easeInOutQuart = function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
        return -c/2 * ((t-=2)*t*t*t - 2) + b;
    };
    
    // Initialize sorting
    sortAndGroupItems();
    
    // Add entrance animation to items
    $('.dv-01-col-news-item').css({
        'opacity': '0',
        'transform': 'translateY(20px)',
        'animation': 'fadeInUp 0.6s ease forwards'
    });
    
    $('head').append('<style>@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }</style>');
});
</script>
@endsection