@extends('layouts.theme')

@section('title', __('staticwords.Recipes'))

{{-- =================  SUBSCRIPTION FLAG ================= --}}
<script>
    window.IS_SUBSCRIBED = {{ auth()->check() && getSubscription()->getData()->subscribed ? 'true' : 'false' }};
</script>

@section('main-wrapper')
@php
    $recipes = \App\Recipe::orderBy('name')->get();
@endphp

<div class="container-fluid mt-5">
    <div class="row">

        {{-- ================= LEFT FILTER PANEL ================= --}}
        <div class="col-md-3 left-panel">
            <div class="advanced-search-card">

                <div class="filter-hint">
                    <div class="hint-icon"></div>
<p>
    اختر فئة الوصفة وحدد المكونات المتوفرة لديك <br>
    لاكتشاف وصفات مناسبة لك.
</p>
                </div>

                <select id="recipeCategory" class="search-input">
                    <option value="">اختر فئة الوصفة</option>
                    @foreach ($recipes as $index => $category)
                        <option value="{{ $category->id }}">
                            {{ $category->name }}
                        </option>
                    @endforeach
                </select>

                <div id="ingredientsWrapper" style="display:none;">
                    <h6 class="ingredients-title">اختر المكونات المتوفرة لديك في المطبخ 🍽️</h6>
                    
                 
                    <div id="ingredientsTableContainer" class="table-responsive mt-3">
                        <table class="table table-bordered table-hover" id="ingredientsTable">
                            <thead>
                                <tr>
                                    <th width="50">اختر</th>
                                    <th>المكون</th>
                                </tr>
                            </thead>
                            <tbody id="ingredients">
                               
                            </tbody>
                        </table>
                    </div>
                    
                    {{-- See more button --}}
                    <button id="toggleIngredients" class="btn-search w-100 mt-2" style="display:none;">
                       عرض المزيد
                    </button>
                </div>

                <div class="search-actions">
                    <button id="resetFilter" class="btn-reset">إلغاء</button>
                    <button id="applyFilter" class="btn-search" disabled>بحث</button>
                </div>
            </div>
        </div>

        {{-- ================= RIGHT PANEL ================= --}}
        <div class="col-12 col-md-8 col-lg-8">
            <div id="resultsPlaceholder" class="results-placeholder">
                <div class="placeholder-content">
                    <div class="placeholder-icon"></div>
                    <h4>اعثر على وصفات باستخدام المكونات المتوفرة لديك </h4>
                    <p>
                        اختر <strong>فئة الوصفة</strong> وحدد
                        مكونًا واحدًا أو أكثر من <strong>المكونات</strong> لعرض الوصفات المطابقة.
                    </p>
                </div>
            </div>

            <div id="filteredResults" style="display:none;"></div>
        </div>

    </div>
</div>
@endsection

{{-- ================= SCRIPTS ================= --}}
<script>
document.addEventListener('DOMContentLoaded', function () {

    const category = document.getElementById('recipeCategory');
    const ingredientsBody = document.getElementById('ingredients');
    const ingredientsWrapper = document.getElementById('ingredientsWrapper');
    const searchBtn = document.getElementById('applyFilter');
    const resetBtn = document.getElementById('resetFilter');
    const resultsBox = document.getElementById('filteredResults');
    
    // ================= AUTO LOAD DEFAULT CATEGORY =================
    if (category.value) {
        category.dispatchEvent(new Event('change'));
    }

    let allIngredients = [];
    let visibleCount = 6;
    let selectedIngredients = new Set();

    // ================= ENABLE / DISABLE SEARCH =================
    function updateSearchState() {
        searchBtn.disabled = !(category.value && selectedIngredients.size);
    }

    // ================= LOAD INGREDIENTS =================
    category.addEventListener('change', function () {
        const recipeId = this.value;
        ingredientsBody.innerHTML = '';
        ingredientsWrapper.style.display = 'none';
        selectedIngredients.clear();
        updateSearchState();

        if (!recipeId) return;

        ingredientsWrapper.style.display = 'block';
        ingredientsBody.innerHTML = '<tr><td colspan="2">جار التحميل...</td></tr>';

        fetch(`/recipes/${recipeId}/ingredients`)
            .then(res => res.json())
            .then(data => {
                allIngredients = Object.entries(data).map(([id, name]) => ({ id, name }));
                visibleCount = 6;
                renderIngredients();
            });
    });

    // ================= RENDER INGREDIENTS  =================
    function renderIngredients() {
        ingredientsBody.innerHTML = '';

        allIngredients.slice(0, visibleCount).forEach(item => {
            const row = document.createElement('tr');
            row.className = 'ingredient-row';
            row.innerHTML = `
                <td style="text-align: center; vertical-align: middle;">
                    <input type="checkbox" 
                           class="ingredient-checkbox" 
                           value="${item.id}"
                           ${selectedIngredients.has(item.id) ? 'checked' : ''}>
                </td>
                <td style="vertical-align: middle;">
                    <span>${item.name}</span>
                </td>
            `;
            ingredientsBody.appendChild(row);
        });

        //  event listeners to checkboxes
        ingredientsBody.querySelectorAll('.ingredient-checkbox').forEach(cb => {
            cb.addEventListener('change', function () {
                if (this.checked) {
                    selectedIngredients.add(this.value);
                } else {
                    selectedIngredients.delete(this.value);
                }
                updateSearchState();
            });
        });

        renderToggleButton();
    }

    // ================= SEE MORE / LESS  =================
    function renderToggleButton() {
        let btn = document.getElementById('toggleIngredients');
        
        if (allIngredients.length <= 6) {
            if (btn) btn.style.display = 'none';
            return;
        }
        
        if (!btn) {
            btn = document.createElement('button');
            btn.id = 'toggleIngredients';
            btn.className = 'btn-search w-100 mt-2';
            document.getElementById('ingredientsWrapper').appendChild(btn);
        }
        
        btn.style.display = 'block';
        
        if (visibleCount >= allIngredients.length) {
            btn.textContent = 'عرض أقل';
            btn.onclick = () => {
                visibleCount = 6;
                renderIngredients();
                btn.scrollIntoView({ behavior: 'smooth' });
            };
        } else {
            btn.textContent = 'عرض المزيد';
            btn.onclick = () => {
                visibleCount += 6;
                renderIngredients();
                btn.scrollIntoView({ behavior: 'smooth' });
            };
        }
    }

    // ================= RESET =================
    resetBtn.addEventListener('click', () => {
        category.value = '';
        ingredientsWrapper.style.display = 'none';
        ingredientsBody.innerHTML = '';
        selectedIngredients.clear();
        resultsBox.style.display = 'none';

        document.getElementById('resultsPlaceholder').style.display = 'flex';
        updateSearchState();
    });

    // ================= SEARCH =================
    searchBtn.addEventListener('click', () => {
        fetch('/movie/filter', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                recipe_id: category.value,
                ingredients: Array.from(selectedIngredients)
            })
        })
        .then(res => res.json())
        .then(data => {
            document.getElementById('resultsPlaceholder').style.display = 'none';

            resultsBox.innerHTML = '';
            resultsBox.style.display = 'block';

            if (!data.length || !Array.isArray(data)) {
                resultsBox.innerHTML = `
                    <div class="no-results-card">
                        <div class="no-results-icon"></div>
                        <h3>لم يتم العثور على وصفات</h3>
                        <p> 
                            اختَر فئة أخرى أو أضف مكونات أكثر للحصول على نتائج أفضل.
                        </p>
                    </div>
                `;
                return;
            }

            // Check if data is in the expected format
            data.forEach(group => {
                if (!group.movies || !Array.isArray(group.movies) || !group.movies.length) return;

                // Create missing group container
                const missingGroup = document.createElement('div');
                missingGroup.className = 'missing-group';
                
                // Add title
                const title = document.createElement('h3');
                title.className = 'missing-title';
                title.textContent = `نقص ${group.missing} مكون${group.missing > 1 ? 'ات' : ''}`;
                missingGroup.appendChild(title);
                
                // Create row for cards
                const row = document.createElement('div');
                row.className = 'row results-row';
                
                // Add each movie as a card
                group.movies.forEach(movie => {
                    if (!movie || !movie.title) return;
                    
                    const detailUrl = window.IS_SUBSCRIBED
                        ? `/movie/detail/${movie.slug || movie.id}`
                        : `/movie/guest/detail/${movie.slug || movie.id}`;

                    const thumb = movie.thumbnail
                        ? `/images/movies/thumbnails/${movie.thumbnail}`
                        : `/images/default-thumbnail.jpg`;

                    // Create card HTML
                    const cardCol = document.createElement('div');
                    cardCol.className = 'col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mb-4';
                    cardCol.innerHTML = `
                        <div class="movie-card">
                            <a href="${detailUrl}">
                                <img src="${thumb}" alt="${movie.title}" class="recipe-image">
                            </a>
                            <h6 class="recipe-title">${movie.title}</h6>
                            <small class="missing-ingredients">المكونات الناقصة: ${movie.missing_ingredients && movie.missing_ingredients.length ? movie.missing_ingredients.join(', ') : 'لا شيء'}</small>
                        </div>
                    `;
                    
                    row.appendChild(cardCol);
                });
                
                missingGroup.appendChild(row);
                resultsBox.appendChild(missingGroup);
            });
            
            //   results not found message 
            if (!resultsBox.children.length) {
                resultsBox.innerHTML = `
                    <div class="no-results-card">
                        <div class="no-results-icon"></div>
                        <h3>لم يتم العثور على وصفات</h3>
                        <p>
                            اختَر فئة أخرى أو أضف مكونات أكثر للحصول على نتائج أفضل.
                        </p>
                    </div>
                `;
            }
        })
        .catch(error => {
            console.error('Error fetching recipes:', error);
            resultsBox.innerHTML = `
                <div class="no-results-card">
                    <div class="no-results-icon">❌</div>
                    <h3>خطأ في البحث</h3>
                    <p>
                        حدث خطأ أثناء البحث. يرجى المحاولة مرة أخرى.
                    </p>
                </div>
            `;
        });
    });

});
</script>

<style>
/* ================= STYLES ================= */
.left-panel {
    background: #111;
    padding: 20px;
}

@media (min-width: 992px) {
    .left-panel {
        position: sticky;
        top: 20px;
        height: fit-content;
    }
}

.advanced-search-card {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.search-input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 20px;
    border: none;
    background: #f26513;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

.search-input option {
    background: white;
    color: #333;
    padding: 8px;
}

/* ================= INGREDIENTS  STYLE ================= */
#ingredientsTableContainer {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ddd;
}

#ingredientsTable {
    margin-bottom: 0;
    border: none;
    width: 100%;
}

#ingredientsTable thead th {
    background: #f26513;
    color: white;
    border: none;
    padding: 12px 15px;
    font-weight: 700;
    text-align: right;
    font-size: 14px;
}

#ingredientsTable tbody td {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

#ingredientsTable tbody tr:last-child td {
    border-bottom: none;
}

#ingredientsTable tbody tr:hover {
    background-color: #f9f9f9;
}

.ingredient-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #f26513;
}

/*  SEE MORE button */
#toggleIngredients {
    background: #f26513;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 10px;
    width: 100%;
    font-size: 14px;
}

#toggleIngredients:hover {
    background: #d85a11;
    transform: translateY(-2px);
}

.search-actions {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.btn-search {
    background: #f26513;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s;
    flex: 1;
}

.btn-search:hover:not(:disabled) {
    background: #d85a11;
    transform: translateY(-2px);
}

.btn-search:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.btn-reset {
    background: #666;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s;
    flex: 1;
}

.btn-reset:hover {
    background: #555;
    transform: translateY(-2px);
}

.missing-title {
    color: #fff;
    margin: 30px 0 20px;
    font-size: 24px;
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
    border-right: 4px solid #f26513;
}

/* ================= RESULTS Panel ================= */
.results-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
}

.results-row > .col-xl-4,
.results-row > .col-lg-4,
.results-row > .col-md-6,
.results-row > .col-sm-6,
.results-row > .col-12 {
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 20px;
}

/* ================= MOVIE CARD  ================= */
.movie-card {
    background: #1a1a1a;
    border-radius: 14px;
    padding: 15px;
    height: 100%;
    text-align: center;
    color: #fff;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid #333;
}

.movie-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
    border-color: #f26513;
}

.recipe-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
    border: 2px solid #333;
    transition: border-color 0.3s;
}

.movie-card:hover .recipe-image {
    border-color: #f26513;
}

.recipe-title {
    font-size: 18px;
    margin-bottom: 10px;
    color: #fff;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
    font-weight: 600;
    padding: 0 5px;
}

.match-percentage {
    color: #f26513;
    font-weight: bold;
    margin: 10px 0;
    font-size: 16px;
    background: rgba(242, 101, 19, 0.1);
    padding: 5px 10px;
    border-radius: 20px;
    display: inline-block;
    align-self: center;
}

.missing-ingredients {
    font-size: 13px;
    color: #aaa;
    display: block;
    margin-top: 10px;
    line-height: 1.5;
    padding: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    border: 1px solid #333;
}

.filter-hint {
    background: #d84a2680;
    border-left: 4px solid #f26513;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 15px;
    color: #333;
    line-height: 1.6;
}

.filter-hint p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hint-icon {
    font-size: 24px;
    margin-bottom: 6px;
}

.ingredients-title {
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 700;
    color: #f26513;
    text-align: right;
    padding-right: 10px;
}

.results-placeholder {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    text-align: center;
    padding: 20px;
}

.placeholder-content {
    max-width: 500px;
    padding: 30px;
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    border: 2px dashed #444;
}

.placeholder-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.8;
}

.results-placeholder h4 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 24px;
}

.results-placeholder p {
    font-size: 16px;
    line-height: 1.7;
    color: #ccc;
}

/* ================= NO RESULTS  ================= */
.no-results-card {
    background: linear-gradient(145deg, #1a1a1a, #111);
    border: 2px dashed rgba(255,255,255,0.15);
    border-radius: 24px;
    padding: 60px 30px;
    margin: 40px auto;
    max-width: 500px;
    text-align: center;
    color: #eee;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.no-results-icon {
    font-size: 70px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.no-results-card h3 {
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 26px;
}

.no-results-card p {
    color: #aaa;
    font-size: 16px;
    line-height: 1.7;
}

/* ================= RESPONSIVE ADJUSTMENTS ================= */
@media (max-width: 767px) {
    .left-panel {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .advanced-search-card {
        padding: 15px;
    }
    
    .movie-card {
        padding: 12px;
    }
    
    .recipe-image {
        height: 160px;
    }
    
    .recipe-title {
        font-size: 16px;
        min-height: 40px;
    }
    
    .missing-title {
        font-size: 20px;
        margin: 20px 0 15px;
    }
    
    .search-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-search, .btn-reset {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .movie-card {
        padding: 14px;
    }
    
    .recipe-image {
        height: 180px;
    }
    
    .recipe-title {
        font-size: 17px;
    }
}

@media (min-width: 992px) {
    .container-fluid {
        padding-left: 30px;
        padding-right: 30px;
    }
}
</style>