@extends('partial.layout')
@section('content')
    <x-toast/>
    <div class="compare__section sp_bottom_80">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2 class="mb-4">مقایسه محصولات</h2>
                    @if($compareProducts->count() > 0)
                        <div class="compare-actions mb-4">
                            <button type="button" class="btn btn-primary me-2" data-bs-toggle="modal"
                                    data-bs-target="#addProductModal">
                                افزودن محصول
                            </button>
                            <button type="button" class="ms-2 btn btn-danger" id="clearCompare">
                                پاک کردن لیست مقایسه
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table compare-table">
                                <thead>
                                <tr>
                                    <th>تصویر</th>
                                    @foreach($compareProducts as $product)
                                        <th>
                                            <div class="product-image">
                                                @if($product->attachments->count() > 0)
                                                    <img
                                                        src="{{ asset('storage/attachments/' . $product->attachments->first()->path) }}"
                                                        alt="{{ $product->title }}">
                                                @endif
                                            </div>
                                            <div class="product-title"><p>{{ $product->title }}</p></div>
                                            <button type="button" class="btn btn-sm btn-danger remove-compare"
                                                    data-product-id="{{ $product->id }}">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </th>
                                    @endforeach
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>وزن</td>
                                    @foreach($compareProducts as $product)
                                        <td>{{ $product->default_weight }} گرم</td>
                                    @endforeach
                                </tr>

                                <tr>
                                    <td>قیمت</td>
                                    @foreach($compareProducts as $product)
                                        <td>
                                            @if($product->has_discount)
                                                <span class="text-danger">{{ number_format($product->final_price) }} ریال</span>
                                                <del class="text-muted">{{ number_format($product->product_price) }}
                                                    ریال
                                                </del>
                                            @else
                                                <span>{{ number_format($product->product_price) }} ریال</span>
                                            @endif
                                        </td>
                                    @endforeach
                                </tr>
                                <tr>
                                    <td>دسته‌بندی</td>
                                    @foreach($compareProducts as $product)
                                        <td><a href="{{route('category.show',$product->category->slug)}}">
                                                {{ $product->category->title }}
                                            </a></td>
                                    @endforeach
                                </tr>
                                <tr>
                                    <td>برند</td>
                                    @foreach($compareProducts as $product)
                                        <td>{{ $product->brand->title }}</td>
                                    @endforeach
                                </tr>
                                <tr>
                                    <td>وضعیت</td>
                                    @foreach($compareProducts as $product)
                                        <td>
                                            @if($product->status == 1)
                                                <span class="text-success">موجود</span>
                                            @else
                                                <span class="text-danger">ناموجود</span>
                                            @endif
                                        </td>
                                    @endforeach
                                </tr>
                                <tr>
                                    <td>رنگ آبکاری</td>
                                    @foreach($compareProducts as $product)
                                        <td>
                                            <span>{{$product->color->title}}</span>
                                        </td>
                                    @endforeach
                                </tr>
                                <tr>
                                    <td>جواهر</td>
                                    @foreach($compareProducts as $product)
                                        <td>
                                            <span>{{$product->is_jewelry ? 'بله' : 'خیر'}}</span>
                                        </td>
                                    @endforeach
                                </tr>
                                <tr>
                                    <td>جنس</td>
                                    @foreach($compareProducts as $product)
                                        <td>
                                            <span>{{$product->productType->title}}</span>
                                        </td>
                                    @endforeach
                                </tr>
                                <tr>
                                    <td>عیار</td>
                                    @foreach($compareProducts as $product)
                                        <td>
                                            <span>{{$product->karat->title}}</span>
                                        </td>
                                    @endforeach
                                </tr>
                                <tr>
                                    <td>مناسب</td>
                                    @foreach($compareProducts as $product)
                                        <td>
                                            @foreach($product->productUsage as $usage) @endforeach
                                            <span>{{$usage->title}}</span>
                                        </td>
                                    @endforeach
                                </tr>
                                <tr>
                                    <td>عملیات</td>
                                    @foreach($compareProducts as $product)
                                        <td>
                                            <a href="{{ route('front.product.show', $product->slug) }}"
                                               class="btn btn-primary">
                                                مشاهده محصول
                                            </a>
                                        </td>
                                    @endforeach
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="alert alert-info">
                            هیچ محصولی برای مقایسه انتخاب نشده است.
                            <button type="button" class="btn btn-primary ms-3" data-bs-toggle="modal"
                                    data-bs-target="#addProductModal">
                                <i class="fas fa-plus"></i> افزودن محصول
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Add Product Modal -->
    <div class="modal fade" id="addProductModal" tabindex="-1" aria-labelledby="addProductModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title w-100" id="addProductModalLabel">افزودن محصول به لیست مقایسه</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <input type="text" class="form-control" id="productSearch"
                               placeholder="نام محصول را وارد کنید...">
                    </div>
                    <div id="searchResults" class="search-results">
                        <!-- Search results will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .compare__section {
            background-color: #f8f9fa;
            padding: 40px 0;
        }

        .compare__section h2 {
            color: #2c3e50;
            font-weight: 600;
            margin-bottom: 30px;
            position: relative;
            padding-bottom: 15px;
        }

        .compare__section h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: #3498db;
        }

        .compare-actions {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
        }

        .compare-actions .btn {
            padding: 10px 20px;
            font-weight: 500;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .compare-actions .btn-primary {
            background: #3498db;
            border-color: #3498db;
        }

        .compare-actions .btn-primary:hover {
            background: #2980b9;
            border-color: #2980b9;
            transform: translateY(-2px);
        }

        .compare-actions .btn-danger {
            background: #e74c3c;
            border-color: #e74c3c;
        }

        .compare-actions .btn-danger:hover {
            background: #c0392b;
            border-color: #c0392b;
            transform: translateY(-2px);
        }

        .compare-table {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
        }

        .compare-table th,
        .compare-table td {
            padding: 20px;
            border: 1px solid #edf2f7;
            text-align: center;
            vertical-align: middle;
        }

        .compare-table th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: #2c3e50;
        }

        .product-image {
            width: 180px;
            height: 220px;
            margin: 0 auto 20px;
            padding: 10px;
            border-radius: 10px;
            background: #f8f9fa;
            transition: all 0.3s ease;
        }

        .product-image:hover {
            transform: scale(1.05);
        }

        .product-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .product-title {
            margin-bottom: 15px;
            font-weight: 500;
            color: #2c3e50;
            font-size: 1.1rem;
        }

        .remove-compare {
            background: #e74c3c;
            border: none;
            padding: 8px 15px;
            border-radius: 6px;
            color: white;
            transition: all 0.3s ease;
        }

        .remove-compare:hover {
            background: #c0392b;
            transform: translateY(-2px);
        }

        .search-results {
            max-height: 400px;
            overflow-y: auto;
            padding: 10px;
        }

        .search-result-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 10px;
            background: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .search-result-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .search-result-item img {
            width: 60px;
            height: 60px;
            object-fit: contain;
            margin-left: 15px;
            border-radius: 6px;
            background: #f8f9fa;
            padding: 5px;
        }

        .search-result-item .product-info {
            flex-grow: 1;
        }

        .search-result-item .product-title {
            margin: 0 0 5px 0;
            font-size: 1rem;
            color: #2c3e50;
        }

        .search-result-item .product-price {
            color: #e74c3c;
            font-weight: 500;
            font-size: 0.9rem;
        }

        .alert-info {
            background: #e3f2fd;
            border-color: #bbdefb;
            color: #1976d2;
            border-radius: 8px;
            padding: 20px;
        }

        .alert-danger {
            background: #ffebee;
            border-color: #ffcdd2;
            color: #c62828;
            border-radius: 8px;
            padding: 20px;
        }

        /* Modal Styles */
        .modal-content {
            border-radius: 15px;
            border: none;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
        }

        .modal-header {
            border-bottom: 1px solid #edf2f7;
            padding: 20px;
        }

        .modal-title {
            color: #2c3e50;
            font-weight: 600;
        }

        .modal-body {
            padding: 20px;
        }

        #productSearch {
            border-radius: 8px;
            padding: 12px;
            border: 1px solid #edf2f7;
            transition: all 0.3s ease;
        }

        #productSearch:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        }

        /* Status Badges */
        .text-success {
            color: #27ae60 !important;
            font-weight: 500;
        }

        .text-danger {
            color: #e74c3c !important;
            font-weight: 500;
        }

        /* Price Styles */
        .text-danger {
            color: #e74c3c !important;
        }

        .text-muted {
            color: #95a5a6 !important;
        }

        /* View Product Button */
        .btn-primary {
            background: #3498db;
            border-color: #3498db;
            padding: 8px 20px;
            border-radius: 6px;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: #2980b9;
            border-color: #2980b9;
            transform: translateY(-2px);
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let searchTimeout;
            const searchInput = document.getElementById('productSearch');
            const searchResults = document.getElementById('searchResults');
            const compareProducts = @json($compareProducts->pluck('id'));

            // Handle remove product from compare
            document.querySelectorAll('.remove-compare').forEach(button => {
                button.addEventListener('click', function () {
                    const productId = this.dataset.productId;
                    removeFromCompare(productId);
                });
            });

            // Handle clear compare list
            document.getElementById('clearCompare')?.addEventListener('click', function () {
                clearCompare();
            });

            // Handle product search
            searchInput?.addEventListener('input', function () {
                clearTimeout(searchTimeout);
                const query = this.value.trim();

                if (query.length < 2) {
                    searchResults.innerHTML = '';
                    return;
                }

                searchTimeout = setTimeout(() => {
                    fetch(`/api/products/search?q=${encodeURIComponent(query)}`)
                        .then(response => response.json())
                        .then(data => {
                            searchResults.innerHTML = '';
                            if (data.length === 0) {
                                searchResults.innerHTML = `
                                    <div class="alert alert-danger text-center">
                                        <p class="mb-0">محصولی با این مشخصات یافت نشد!</p>
                                    </div>
                                `;
                                return;
                            }
                            data.forEach(product => {
                                // Check if product is already in compare list
                                const existingProduct = document.querySelector(`.remove-compare[data-product-id="${product.id}"]`);
                                if (!existingProduct) {
                                    const productElement = createProductElement(product);
                                    searchResults.appendChild(productElement);
                                }
                            });
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            searchResults.innerHTML = '<div class="alert alert-danger">خطا در جستجوی محصولات</div>';
                        });
                }, 300);
            });

            function createProductElement(product) {
                const div = document.createElement('div');
                div.className = 'search-result-item';
                div.innerHTML = `
                    <img src="${product.image || '/theme/img/placeholder.png'}" alt="${product.title}">
                    <div class="product-info">
                        <div class="product-title">${product.title}</div>
                        <div class="product-price">${product.price} ریال</div>
                    </div>
                `;
                div.addEventListener('click', () => {
                    // Check if product is already in compare list
                    const existingProduct = document.querySelector(`.remove-compare[data-product-id="${product.id}"]`);
                    if (existingProduct) {
                        showAlert({type: 'warning', message: 'این محصول قبلاً به لیست مقایسه اضافه شده است'});
                        return;
                    }
                    addToCompare(product.id);
                });
                return div;
            }

            function addToCompare(productId) {
                fetch('/compare/add', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({product_id: productId})
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            showAlert({type: 'success', message: data.message});
                            const modal = bootstrap.Modal.getInstance(document.getElementById('addProductModal'));
                            modal.hide();

                            // Clear search input and results
                            const searchInput = document.getElementById('productSearch');
                            if (searchInput) {
                                searchInput.value = '';
                            }
                            const searchResults = document.getElementById('searchResults');
                            if (searchResults) {
                                searchResults.innerHTML = '';
                            }

                            // Fetch the added product details
                            fetch(`/api/products/${productId}`)
                                .then(response => response.json())
                                .then(product => {
                                    let table = document.querySelector('.compare-table');
                                    const container = document.querySelector('.compare__section .container .row .col-12');

                                    // If table doesn't exist (first product), create it
                                    if (!table) {
                                        // Remove the empty state message
                                        const emptyState = document.querySelector('.alert-info');
                                        if (emptyState) {
                                            emptyState.remove();
                                        }

                                        // Create compare actions
                                        const actionsDiv = document.createElement('div');
                                        actionsDiv.className = 'compare-actions mb-4';
                                        actionsDiv.innerHTML = `
                                        <button type="button" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#addProductModal">
                                            افزودن محصول
                                        </button>
                                        <button type="button" class="me-2 btn btn-danger" id="clearCompare">
                                            پاک کردن لیست مقایسه
                                        </button>
                                    `;
                                        container.insertBefore(actionsDiv, container.firstChild);

                                        // Create table structure
                                        const tableContainer = document.createElement('div');
                                        tableContainer.className = 'table-responsive';
                                        tableContainer.innerHTML = `
                                        <table class="table compare-table">
                                            <thead>
                                                <tr>
                                                    <th>تصویر</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr><td>قیمت</td></tr>
                                                <tr><td>دسته‌بندی</td></tr>
                                                <tr><td>برند</td></tr>
                                                <tr><td>وضعیت</td></tr>
                                                <tr><td>عملیات</td></tr>
                                            </tbody>
                                        </table>
                                    `;
                                        container.appendChild(tableContainer);
                                        table = document.querySelector('.compare-table');

                                        // Add event listener to clear button
                                        document.getElementById('clearCompare').addEventListener('click', function () {
                                            clearCompare();
                                        });
                                    }

                                    // Add new column to header row
                                    const headerRow = table.querySelector('thead tr');
                                    const newHeaderCell = document.createElement('th');
                                    newHeaderCell.innerHTML = `
                                    <div class="product-image">
                                        <img src="${product.image || '/theme/img/placeholder.png'}" alt="${product.title}">
                                    </div>
                                    <div class="product-title"><p>${product.title}</p></div>
                                    <button type="button" class="btn btn-sm btn-danger remove-compare"
                                            data-product-id="${product.id}">
                                        <i class="fas fa-times"></i>
                                    </button>
                                `;
                                    headerRow.appendChild(newHeaderCell);

                                    // Add new cells to each data row
                                    const rows = table.querySelectorAll('tbody tr');
                                    window.location.reload();

                                    // Add event listener to the new remove button
                                    const newRemoveBtn = newHeaderCell.querySelector('.remove-compare');
                                    newRemoveBtn.addEventListener('click', function () {
                                        removeFromCompare(product.id);
                                    });

                                    // Update compare count if exists
                                    const compareCount = document.querySelector('.compare-count');
                                    if (compareCount) {
                                        compareCount.textContent = data.count;
                                    }
                                })
                                .catch(error => {
                                    console.error('Error fetching product details:', error);
                                    window.location.reload(); // Fallback to page refresh if there's an error
                                });
                        } else {
                            showAlert({type: 'danger', message: data.message});
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showAlert({type: 'danger', message: 'خطا در افزودن به لیست مقایسه'});
                    });
            }

            function removeFromCompare(productId) {
                fetch('/compare/remove', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({product_id: productId})
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            showAlert({type: 'success', message: data.message});

                            // Remove the product column from the table
                            const table = document.querySelector('.compare-table');
                            if (table) {
                                const headerRow = table.querySelector('thead tr');
                                const rows = table.querySelectorAll('tbody tr');
                                const productIndex = Array.from(headerRow.children).findIndex(
                                    th => th.querySelector(`[data-product-id="${productId}"]`)
                                );

                                if (productIndex !== -1) {
                                    // Remove the column from header
                                    headerRow.children[productIndex].remove();

                                    // Remove the column from each data row
                                    rows.forEach(row => {
                                        row.children[productIndex].remove();
                                    });

                                    // Update compare count if exists
                                    const compareCount = document.querySelector('.compare-count');
                                    if (compareCount) {
                                        compareCount.textContent = data.count;
                                    }

                                    // If no products left, show empty state
                                    if (headerRow.children.length === 1) {
                                        const tableContainer = table.closest('.table-responsive');
                                        tableContainer.innerHTML = `
                                        <div class="alert alert-info">
                                            هیچ محصولی برای مقایسه انتخاب نشده است.
                                            <button type="button" class="btn btn-primary ms-3" data-bs-toggle="modal" data-bs-target="#addProductModal">
                                                <i class="fas fa-plus"></i> افزودن محصول
                                            </button>
                                        </div>
                                    `;
                                    }
                                }
                            }
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showAlert({type: 'danger', message: 'خطا در حذف محصول'});
                    });
            }

            function clearCompare() {
                fetch('/compare/clear', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            showAlert({type: 'success', message: data.message});
                            setTimeout(() => window.location.reload(), 1000);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showAlert({type: 'danger', message: 'خطا در پاک کردن لیست مقایسه'});
                    });
            }
        });
    </script>
@endpush