@extends('ecommerce::layout.layout')

@section('title', $merchant->company_name)
@section('content')

<style>
    .merchant-page-header {
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        padding: 30px 0;
        margin-bottom: 40px;
    }

    .merchant-basic-info {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .merchant-logo {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        object-fit: cover;
        border: 2px solid #007bff;
    }

    .merchant-main-info h1 {
        font-size: 1.8rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 5px;
    }

    .merchant-meta {
        display: flex;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;
    }

    .merchant-verified {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: #e8f5e8;
        color: #2e7d32;
        padding: 4px 12px;
        border-radius: 15px;
        font-size: 0.85rem;
    }

    .merchant-rating {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .merchant-rating .rating .fa-star {
        font-size: 0.9rem;
    }

    .merchant-stats {
        display: flex;
        gap: 25px;
        margin-top: 15px;
    }

    .stat-item {
        text-align: center;
    }

    .stat-number {
        font-size: 1.2rem;
        font-weight: 700;
        color: #306FAA;
        display: block;
    }

    .stat-label {
        font-size: 0.8rem;
        color: #6c757d;
    }

    .products-filter-bar {
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 15px 20px;
        margin-bottom: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .filter-options {
        display: flex;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;
    }

    .filter-label {
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 0;
    }

    .product-count {
        color: #6c757d;
        font-size: 0.9rem;
    }

    .category-list a.active {
        color: #007bff;
        font-weight: 600;
        background: #f8f9fa;
        border-radius: 5px;
    }

    .category-list a {
        display: block;
        padding: 8px 12px;
        color: #495057;
        text-decoration: none;
        transition: all 0.3s ease;
        border-radius: 5px;
    }

    .category-list a:hover {
        background: #f8f9fa;
        color: #007bff;
    }

    .loading-indicator {
        display: none;
        text-align: center;
        padding: 20px;
        color: #6c757d;
    }

    .loading-indicator.active {
        display: block;
    }

    .hidden-radio {
        display: none;
    }

    .loading {
        opacity: 0.6;
        pointer-events: none;
    }

    .merchant-product-card {
        height: 380px;
        display: flex;
        flex-direction: column;
        margin-bottom: 25px;
    }

    .merchant-product-image {
        width: 100%;
        height: 200px;
        object-fit: contain;
        background: #f8f9fa;
        padding: 10px;
    }

    .merchant-product-detail {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 15px 10px;
    }

    .merchant-product-title {
        height: 40px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 600;
    }

    .merchant-product-description {
        height: 36px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 12px;
        color: #666;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .merchant-product-price {
        margin-top: auto;
        font-size: 16px;
        font-weight: bold;
        color: #59c948;
    }

    .merchant-product-actions {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .product-box:hover .merchant-product-actions {
        opacity: 1;
    }

    [dir="rtl"] .merchant-product-actions {
        right: auto;
        left: 10px;
    }

    @media (max-width: 768px) {
        .merchant-page-header {
            padding: 20px 0;
        }

        .merchant-basic-info {
            flex-direction: column;
            text-align: center;
            gap: 15px;
        }

        .merchant-logo {
            width: 70px;
            height: 70px;
        }

        .merchant-main-info h1 {
            font-size: 1.5rem;
        }

        .merchant-meta {
            justify-content: center;
        }

        .merchant-stats {
            justify-content: center;
            gap: 20px;
        }

        .products-filter-bar {
            flex-direction: column;
            align-items: flex-start;
        }

        .filter-options {
            width: 100%;
            justify-content: space-between;
        }

        .merchant-product-card {
            height: 360px;
        }

        .merchant-product-image {
            height: 180px;
        }
    }

    @media (max-width: 480px) {
        .merchant-stats {
            flex-wrap: wrap;
            gap: 15px;
        }

        .stat-item {
            flex: 1;
            min-width: 80px;
        }

        .filter-options {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .merchant-product-card {
            height: 340px;
        }

        .merchant-product-image {
            height: 160px;
        }
    }
</style>

<div class="merchant-page-header">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="merchant-basic-info">
                    @if($merchant->logo)
                    <img src="{{ $merchant->logo }}"
                        alt="{{ $merchant->company_name }}"
                        class="merchant-logo">
                    @endif
                    <div class="merchant-main-info">
                        <h1>{{ $merchant->company_name }}</h1>
                        <div class="merchant-meta">
                            @if($merchant->is_verified)
                            <span class="merchant-verified">
                                <i class="fa fa-check-circle"></i>
                                تاجر موثوق
                            </span>
                            @endif
                            <span class="merchant-rating">
                                <div class="rating">
                                    @php $rating = $merchant->rating ?? 4.5; @endphp
                                    @for($i = 1; $i <= 5; $i++)
                                        <i class="fa fa-star{{ $i <= floor($rating) ? ' active' : ($i == ceil($rating) && !is_int($rating) ? '-half active' : '') }}"></i>
                                        @endfor
                                </div>
                                <span>{{ number_format($rating, 1) }} ({{ $merchant->reviews_count ?? 0 }} تقييم)</span>
                            </span>
                        </div>
                        <div class="merchant-stats">
                            <div class="stat-item">
                                <span class="stat-number">{{ $categoryCounts['all'] ?? 0 }}</span>
                                <span class="stat-label">منتج</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number">{{ $merchant->satisfaction_rate ?? 98 }}%</span>
                                <span class="stat-label">رضا العملاء</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number">{{ $merchant->experience_years ?? 5 }}+</span>
                                <span class="stat-label">سنوات خبرة</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number">{{ $merchant->branches_count ?? 1 }}</span>
                                <span class="stat-label">فروع</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-sm-12">
            <div class="collection-filter-block">
                <div class="collection-mobile-back">
                    <span class="filter-back">
                        <i class="fa fa-angle-left" aria-hidden="true"></i>
                        @lang('ecommerce::ecommerce.back')
                    </span>
                </div>
                <div class="collection-collapse-block border-0 open mb-4">
                    <h3 class="collapse-block-title">@lang('ecommerce::ecommerce.store_categories')</h3>
                    <div class="collection-collapse-block-content">
                        <div class="collection-brand-filter">
                            <form method="GET" action="{{ route('merchant.filter', $merchant) }}" id="merchant-filter-form">
                                @csrf
                                <ul class="category-list list-unstyled">
                                    <li>
                                        <a href="javascript:void(0)" data-target-radio="category_all" class="{{ request('category', 'all') == 'all' ? 'active' : '' }}">
                                            @lang('admin::lang.all') ({{ $categoryCounts['all'] ?? 0 }})
                                        </a>
                                    </li>
                                    @foreach ($categories as $category)
                                    <li>
                                        <a href="javascript:void(0)" data-target-radio="category_{{ $category->id }}" class="{{ request('category') == $category->id ? 'active' : '' }}">
                                            {{ $category->title }} ({{ $categoryCounts[$category->id] ?? 0 }})
                                        </a>
                                    </li>
                                    @endforeach
                                </ul>
                                <div class="hidden-radio">
                                    <input type="radio" id="category_all" name="category" value="all" {{ request('category', 'all') == 'all' ? 'checked' : '' }}>
                                    @foreach ($categories as $category)
                                    <input type="radio" id="category_{{ $category->id }}" name="category" value="{{ $category->id }}" {{ request('category') == $category->id ? 'checked' : '' }}>
                                    @endforeach
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="collection-filter-block">
                <h3 class="collapse-block-title">@lang('ecommerce::ecommerce.our_commitment')</h3>
                <div class="product-service mb-0">
                    <div class="media d-flex">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
                            <line x1="3" y1="6" x2="21" y2="6"></line>
                            <path d="M16 10a4 4 0 0 1-8 0"></path>
                        </svg>
                        <div class="media-body">
                            <h4>@lang('ecommerce::ecommerce.fast_shipping')</h4>
                            <p>@lang('ecommerce::ecommerce.fast_shipping_desc')</p>
                        </div>
                    </div>
                    <div class="media d-flex">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                        </svg>
                        <div class="media-body">
                            <h4>@lang('ecommerce::ecommerce.quality_products')</h4>
                            <p>@lang('ecommerce::ecommerce.quality_products_desc')</p>
                        </div>
                    </div>
                    <div class="media d-flex border-0 m-0 pb-0">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"></circle>
                            <polyline points="12 6 12 12 16 14"></polyline>
                        </svg>
                        <div class="media-body">
                            <h4>@lang('ecommerce::ecommerce.expert_support')</h4>
                            <p>@lang('ecommerce::ecommerce.expert_support_desc')</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-9 col-sm-12 products-main">

            <div class="products-filter-bar">
                <div class="filter-options">
                    <span class="filter-label">ترتيب حسب:</span>
                    <select class="form-select form-select-sm sort-select" name="sort_by" form="merchant-filter-form">
                        <option value="latest" {{ request('sort_by', 'latest') == 'latest' ? 'selected' : '' }}>الأحدث</option>
                        <option value="best_selling" {{ request('sort_by') == 'best_selling' ? 'selected' : '' }}>الأكثر مبيعاً</option>
                        <option value="top_rated" {{ request('sort_by') == 'top_rated' ? 'selected' : '' }}>الأعلى تقييماً</option>
                        <option value="price_low" {{ request('sort_by') == 'price_low' ? 'selected' : '' }}>السعر: من الأقل للأعلى</option>
                        <option value="price_high" {{ request('sort_by') == 'price_high' ? 'selected' : '' }}>السعر: من الأعلى للأقل</option>
                    </select>
                </div>
                <div class="product-count">
                    @php
                    $totalProducts = $products instanceof Illuminate\Pagination\LengthAwarePaginator ? $products->total() : $products->count();
                    $currentCount = $products->count();
                    @endphp
                    عرض {{ $currentCount }} منتج @if($totalProducts > $currentCount) من {{ $totalProducts }} @endif
                </div>
            </div>

            <div class="collection-product-wrapper">
                <div class="product-wrapper-grid pt-3">
                    @include('ecommerce::pages.partials.product-grid', compact('products'))
                    <br>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        initializeMerchantFilters();
    });

    function initializeMerchantFilters() {
        setupCategoryLinks();
        setupSortHandler();
        setupPerPageHandler();
    }

    function setupCategoryLinks() {
        document.querySelectorAll('.category-list a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();

                const targetRadioId = this.getAttribute('data-target-radio');
                const targetRadio = document.getElementById(targetRadioId);

                if (targetRadio && !targetRadio.checked) {
                    targetRadio.checked = true;

                    document.querySelectorAll('.category-list a').forEach(a => a.classList.remove('active'));
                    this.classList.add('active');

                    submitMerchantFilterForm();
                }
            });
        });
    }

    function setupSortHandler() {
        const sortSelect = document.querySelector('.sort-select');
        if (sortSelect) {
            sortSelect.addEventListener('change', function() {
                submitMerchantFilterForm();
            });
        }
    }

    function setupPerPageHandler() {
        const perPageSelect = document.querySelector('select[name="per_page"]');
        if (perPageSelect) {
            perPageSelect.addEventListener('change', function() {
                submitMerchantFilterForm();
            });
        }
    }

    let merchantFilterTimeout;
    let currentMerchantRequestController = null;

    function submitMerchantFilterForm() {
        clearTimeout(merchantFilterTimeout);

        if (currentMerchantRequestController) {
            currentMerchantRequestController.abort();
        }

        showMerchantLoading();

        merchantFilterTimeout = setTimeout(() => {
            const form = document.getElementById('merchant-filter-form');
            if (!form) {
                return;
            }

            const formData = new FormData(form);
            const params = new URLSearchParams(formData);
            const url = new URL(form.action);
            url.search = params.toString();

            currentMerchantRequestController = new AbortController();

            fetch(url.toString(), {
                    method: 'GET',
                    signal: currentMerchantRequestController.signal,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(response => {
                    if (!response.ok) throw new Error('Network error');
                    return response.json();
                })
                .then(data => {
                    processMerchantFilterResponse(data);
                })
                .catch(error => {
                    if (error.name !== 'AbortError') {
                        showMessage('حدث خطأ في تحديث المنتجات', 'error');
                    }
                })
                .finally(() => {
                    hideMerchantLoading();
                    currentMerchantRequestController = null;
                });
        }, 300);
    }

    function processMerchantFilterResponse(data) {
        const productGrid = document.querySelector('.product-wrapper-grid');
        if (productGrid && data.product_grid_html) {
            productGrid.innerHTML = data.product_grid_html;
        }

        if (data.new_url) {
            window.history.pushState({}, '', data.new_url);
        }

        initComponents(document.querySelector('.collection-product-wrapper'));
    }

    function showMerchantLoading() {
        const loadingElement = document.getElementById('productsLoading');
        if (loadingElement) {
            loadingElement.style.display = 'block';
        }

        document.querySelector('.product-wrapper-grid')?.classList.add('loading');
    }

    function hideMerchantLoading() {
        const loadingElement = document.getElementById('productsLoading');
        if (loadingElement) {
            loadingElement.style.display = 'none';
        }

        document.querySelector('.product-wrapper-grid')?.classList.remove('loading');
    }

    function showMessage(message, type) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        document.querySelectorAll('.global-message').forEach(msg => msg.remove());

        const html = `
        <div class="alert ${alertClass} alert-dismissible fade show global-message"
             style="position: fixed; top: 20px; z-index: 9999;">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;

        document.body.insertAdjacentHTML('beforeend', html);

        setTimeout(() => {
            const msg = document.querySelector('.global-message');
            if (msg) msg.remove();
        }, 5000);
    }

    function initComponents(container = document) {
        initCart(container);
        initImages(container);
        initCarousels(container);
    }

    function initCart(container = document) {
        container.querySelectorAll('.add-to-cart-form').forEach(form => {
            form.onsubmit = (e) => {
                e.preventDefault();
                addToCart(form);
            };
        });
    }

    function initImages(container = document) {
        container.querySelectorAll('img:not([data-processed])').forEach(img => {
            img.setAttribute('data-processed', 'true');
            const wrapper = img.closest('.img-wrapper');
            if (wrapper) wrapper.classList.add('loading');

            img.onload = function() {
                this.classList.add('loaded');
                if (wrapper) wrapper.classList.remove('loading');
            };
            img.onerror = function() {
                if (wrapper) {
                    wrapper.classList.remove('loading');
                    wrapper.classList.add('error');
                }
            };
            if (img.complete) {
                img.onload();
            }
        });
    }

    function initCarousels(container = document) {
        if (window.jQuery && jQuery.fn.owlCarousel) {
            jQuery(container).find('.owl-carousel:not(.owl-loaded)').each(function() {
                jQuery(this).owlCarousel({});
            });
        }
    }

    function addToCart(form) {
        const btn = form.querySelector('button[type="submit"]');
        const formData = new FormData(form);

        if (btn) {
            const original = btn.innerHTML;
            btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>...';
            btn.disabled = true;
        }

        fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': getToken(),
                    'Accept': 'application/json'
                },
                body: formData
            })
            .then(response => {
                if (!response.ok) throw new Error('Network error');
                return response.json();
            })
            .then(data => {
                if (btn) {
                    btn.innerHTML = 'تم الإضافة';
                    setTimeout(() => {
                        if (btn) {
                            btn.innerHTML = original;
                            btn.disabled = false;
                        }
                    }, 1000);
                }
                if (data.login_required) {
                    showLoginMessage(data.message);
                    return;
                }
                if (data.success) {
                    if (data.cart_header) {
                        updateHeader(data.cart_header);
                    }
                    showMessage(data.message, 'success');
                } else {
                    showMessage(data.message, 'error');
                }
            })
            .catch(error => {
                if (btn) {
                    btn.innerHTML = original;
                    btn.disabled = false;
                }
                showMessage('خطأ في الإضافة', 'error');
            });
    }

    function updateHeader(html) {
        const header = document.querySelector('.cart-header-container');
        if (header && html) {
            header.innerHTML = html;
            setTimeout(() => initCart(header), 50);
        }
    }

    function getToken() {
        return document.querySelector('meta[name="csrf-token"]')?.content || '';
    }

    function showLoginMessage(message) {
        if (confirm(message + '\n\nالانتقال لتسجيل الدخول؟')) {
            window.location.href = '/login';
        }
    }

    if (window.up) {
        up.compiler('.products-main', function(element) {
            initializeMerchantFilters();
        });

        up.compiler('.merchant-page-header', function(element) {});
    }
</script>

@endsection