@extends('layouts.admin.index')

@section('content')
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="row">
    <div class="col-sm-12">
        <div class="home-tab">
            <div class="tab-content tab-content-basic">
                <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview">
                    <div class="container-fluid">

                        <div class="image-box mb-4 rounded border border-secondary">
                        <img src="{{ asset('img/sliderdrinksadmin.png') }}" alt="Admin Homepage" class="img-fluid w-100 rounded">

                        </div>
                        <div class="alert alert-info mt-4">
                            <strong>Info:</strong>
                            <ul style="font-size: 15px;">
                                <li><strong>Select Products for Slider</strong>: Choose the products you want to display in the slider. You can select up to <strong>6 products.</strong></li>
                                If images have already been selected in current slider images, please <strong>remove </strong>the existing images first.</li>
                                <li><strong>Multiple Selection</strong>: Click on the product cards to select or deselect them.</li>
                                <li><strong>Product Details</strong>: Each product displays its image and name.</li>
                            </ul>
                        </div>

                        <br><br>
                        <div class="mb-4">
                            <input type="text" id="searchInput" class="form-control" placeholder="Search product by name...">
                        </div>


                        <!-- Content Section -->
                        <div class="card shadow mb-4">
                            <div class="card-header py-3">
                                <h6 class="m-0 font-weight-bold text-primary">Select Slider Products</h6>
                            </div>
                            <div class="card-body">
                                <form action="{{ route('slider.index') }}" method="POST">
                                    @csrf
                                    <div class="row" id="product-container">
                                        @foreach($products as $product)
                                        <div class="col-md-3 col-sm-6 mb-4 product-card" data-name="{{ strtolower($product->name) }}">
                                            <div class="card border-primary text-center">
                                                <img src="{{ asset($product->image) }}" class="card-img-top" alt="{{ $product->name }}" style="width: 100%; height: 250px; object-fit: contain; padding: 10px;">
                                                <div class="card-body">
                                                    <h5 class="card-title">{{ $product->name }}</h5>
                                                    <input type="checkbox" name="productIds[]" value="{{ $product->id }}" id="product-{{ $product->id }}" class="form-check-input" style="display: none;">
                                                    <button type="button" class="btn btn-outline-primary btn-sm select-card" data-target="#product-{{ $product->id }}">
                                                        Select
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                    <!-- Pagination Buttons -->
                                    <div class="d-flex justify-content-center mt-3">
                                        <nav>
                                            <ul class="pagination" id="pagination"></ul>
                                        </nav>
                                    </div>
                                    <button type="submit" class="btn btn-success mt-3">Add Selected Products to Slider</button>
                                </form>
                            </div>
                        </div>

                        <hr>

                        <!-- Display Current Slider Images -->
                        <h2>Current Slider Images</h2>
                        <div class="row">
                            @foreach($sliderImages as $sliderImage)
                                <div class="col-md-3 col-sm-6 mb-4 d-flex">
                                    <div class="card text-center w-100 d-flex flex-column">
                                        <img src="{{ asset($sliderImage->product->image) }}"
                                            class="card-img-top"
                                            alt="{{ $sliderImage->product->name }}"
                                            style="width: 100%; height: 250px; object-fit: contain; padding: 10px;">

                                        <div class="card-body d-flex flex-column justify-content-between">
                                            <div>
                                                <h5 class="card-title">{{ $sliderImage->product->name }}</h5>
                                                <p class="card-text">{{ $sliderImage->product->description }}</p>
                                            </div>
                                            <form action="{{ route('slider.index') }}" method="POST" class="mt-auto">
                                                @csrf
                                                <input type="hidden" name="unselectIds[]" value="{{ $sliderImage->productId }}">
                                                <button type="submit" class="btn btn-danger btn-sm">Remove</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const itemsPerPage = 16;
    const allCards = document.querySelectorAll('.product-card');
    const pagination = document.getElementById('pagination');
    const searchInput = document.getElementById('searchInput');

    let filteredCards = Array.from(allCards);

    function showPage(page, items) {
        const start = (page - 1) * itemsPerPage;
        const end = start + itemsPerPage;

        allCards.forEach(card => card.style.display = 'none');
        items.slice(start, end).forEach(card => card.style.display = 'block');
    }

    function setupPagination(items) {
        const totalPages = Math.ceil(items.length / itemsPerPage);
        pagination.innerHTML = '';

        for (let i = 1; i <= totalPages; i++) {
            const li = document.createElement('li');
            li.classList.add('page-item');
            li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
            li.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelectorAll('#pagination li').forEach(el => el.classList.remove('active'));
                li.classList.add('active');
                showPage(i, items);
            });
            pagination.appendChild(li);
        }

        if (pagination.firstChild) {
            pagination.firstChild.classList.add('active');
        }

        showPage(1, items);
    }

   function filterProducts() {
    const keyword = searchInput.value.toLowerCase().trim();
    filteredCards = Array.from(allCards).filter(card => card.getAttribute('data-name').includes(keyword));
    setupPagination(filteredCards);
    // // Force scroll up to top of product container (optional UX)
    // document.getElementById('product-container').scrollIntoView({ behavior: 'smooth' });
}


    // Initialize
    filterProducts(); // Show all on first load

    // Real-time search
    searchInput.addEventListener('input', filterProducts);
</script>

<script>
    // Add click event to toggle checkbox selection
    document.querySelectorAll('.select-card').forEach(button => {
        button.addEventListener('click', function () {
            const target = document.querySelector(this.getAttribute('data-target'));
            target.checked = !target.checked; // Toggle checkbox
            this.classList.toggle('btn-primary');
            this.classList.toggle('btn-outline-primary');
            this.innerText = target.checked ? 'Selected' : 'Select';
        });
    });
</script>
@endsection