@extends('layouts.front-layout')
@section('title') Our Product @endsection
@section('content')
<style>
.modal-content {
    border-radius: 8px;
    padding: 20px;
    background-color: #fff; /* Ensure modal has a white background */
}
.modal-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}
.modal-body p {
    font-size: 16px;
    margin-bottom: 20px;
}
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}
.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}


</style>
@php
$heading = "";
$heading = request()->query('search') ??   $pageData['Product']['top_banner_title'] ;   
@endphp
    <section class="product-banner">
        <img src="{{ pagesSingleImage('Product', 'top_banner_image') }}" class="w-100" alt="img">
        <div class="overlay">
            <div class="container">
                <h2><a href="{{route('all.category')}}"><i class="fal fa-long-arrow-left"></i></a>
                   
                    {{ $heading }}
                </h2>
                <ul class="beef-list">
                    @forelse($get_categories as $category)
                        <li>
                            <a href="{{ route('category.wise.product', ['slug' => $category->slug ?: '']) }}">
                                <span>{{ $category->category_name ?: '' }}</span>
                                {{ $category->product_count }} Products
                            </a>
                        </li>
                    @empty
                        <h3>Category Data Not Available</h3>
                    @endforelse
                </ul>
            </div>
        </div>
    </section>

    <section class="product-main">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="filter-price">
                        <h2>Stock Status</h2>
                        <div class="sale-select">
                            <input type="checkbox" id="on-sale" class="custom-checkbox">
                            <label for="on-sale" class="checkbox-label">On Sale</label>
                        </div>
                        <form action="{{ route('our.product') }}" method="GET" id="filter-form">
                            <div class="sale-select">
                                <input type="checkbox" id="in-stock" name="in_stock" class="custom-checkbox"
                                    {{ request('in_stock') ? 'checked' : '' }}>
                                <label for="in-stock" class="checkbox-label">
                                    In Stock
                                </label>
                            </div>
                            <button type="submit" style="display: none;">Submit</button>
                        </form>

                    </div>
                    <div class="top-rated">
                        <div class="rated-head">
                            <h5>Top Rated Products</h5>
                        </div>
                        @foreach($topRatedProducts as $product)
                            <div class="product-cntnt">
                                <img src="{{ $product->productImage('product_image') ?: asset('upload/images/default.png') }}" class="img-fluid" alt="{{ $product->product_name }}">
                                <div class="prod-info">
                                    <h6>{{ $product->product_name }}</h6>
                                    <p>${{ number_format($product->product_price, 2) }}</p>
                                    <!-- <p>Rating: {{ number_format($product->avg_rating, 1) }} / 5</p> -->
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="bredcum-flex">
                        <div class="breadcumb">
                            <ul>
                                <li><a href="#">Home</a></li>
                                <li><span class="clr">/</span></li>
                                <li><span>Shop</span></li>
                            </ul>
                        </div>
                        <div class="pagination">
                            <ul>
                                <li>
                                    <form method="GET" action="{{ route('our.product') }}" id="sortForm">
                                        <select name="sort" id="sortDropdown" onchange="document.getElementById('sortForm').submit();">
                                            <option value="">Default Sorting</option>
                                            <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Sort by Latest</option>
                                            <option value="price-asc" {{ request('sort') == 'price-asc' ? 'selected' : '' }}>Sort by Price: Low to High</option>
                                            <option value="price-desc" {{ request('sort') == 'price-desc' ? 'selected' : '' }}>Sort by Price: High to Low</option>
                                        </select>
                                    </form>
                                </li>
                            </ul>
                        </div>
                    </div>


                    <div class="row no-gutters" id="product-list">
                        @forelse($get_products as $product)
                            <div class="col-md-4 product_data">
                                <a href="{{ route('product.detail', ['slug' => $product->slug ?: '']) }}">
                                    <div class="mostCard propgBox">
                                        <div class="proBox">
                                            <figure>
                                                <img src="{{ $product->productImage('product_image') ?: '' }}" class="img-fluid" alt="img">
                                                <ul>
                                                    <li><a href="#"><i class="far fa-random"></i></a></li>
                                                </ul>
                                            </figure>
                                            <div class="proContent">
                                                <h2>{{ $product->product_name ?: '' }}</h2>
                                                <h3>{!! \Illuminate\Support\Str::limit(strip_tags($product->description), 80, '...') !!}</h3>
                                                <span>${{ $product->product_price ?: '' }}</span>
                                                <div class="proHide">
                                                    <input type="hidden" class="product_id" value="{{ $product->id }}">
                                                    <input type="hidden" class="qty_input" value="1">
                                                    <ul>
                                                    @php
                                                        $wishlist = \App\Models\Wishlist::where('product_id', $product->id)
                                                                    ->where('user_id', auth()->id())
                                                                    ->first();
                                                    @endphp
                                                    <!-- @if(auth()->check())
                                                    <li>
                                                        @if(!$wishlist)
                                                        <a href="#" class="wishlist" data-product-id="{{ $product->id }}">
                                                                <i class="far fa-heart"></i>
                                                        </a>
                                                            @else
                                                            <a href="#" class="removewishlist" data-wishlist-id="{{ $wishlist->id }}">
                                                                <i class="fas fa-heart"></i>
                                                            </a>
                                                            @endif

                                                    </li>
                                                    @else
                                                        <a href="#">
                                                            <i class="far fa-heart" style="color: black"></i>
                                                        </a>
                                                    @endif -->
                                                    <li>
                                                        @if(auth()->check())
                                                            @if(!$wishlist)
                                                                <a href="#" class="wishlist" data-product-id="{{ $product->id }}">
                                                                    <i class="far fa-heart"></i>
                                                                </a>
                                                            @else
                                                                <a href="#" class="removewishlist" data-wishlist-id="{{ $wishlist->id }}">
                                                                    <i class="fas fa-heart"></i>
                                                                </a>
                                                            @endif
                                                        @else
                                                            <!-- Trigger Modal -->
                                                            <a href="#" data-bs-toggle="modal" data-bs-target="#loginModal">
                                                                <i class="far fa-heart" style="color: black"></i>
                                                            </a>
                                                        @endif
                                                    </li>
                                                        @if (Auth::check())
                                                            @if (Auth::user()->hasRole('admin'))
                                                            @else
                                                                @if ($product->stock > 0)
                                                                    <li><a href="" class="themeBtn add_to_cart_btn">Add to Cart</a></li>
                                                                @else
                                                                    <span>Status:</span>{{ $product->stock === 0 ? 'Out Of Stock' : '' }}
                                                                @endif
                                                            @endif
                                                        @else
                                                            @if ($product->stock > 0)
                                                                <li><a href="" class="themeBtn add_to_cart_btn">Add to Cart</a></li>
                                                            @else
                                                                <span>Status:</span>{{ $product->stock === 0 ? 'Out Of Stock' : '' }}
                                                            @endif
                                                        @endif
                                                        <li><a href="#search" id="searchIcon"><i class="far fa-search"></i></a></li>
                                                        <!-- <li><a href="#"><i class="far fa-search"></i></a></li> -->
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @empty
                            <h3>No Product Available</h3>
                        @endforelse
                    </div>
                    <div class="pagination">
                        @php
                            $sort = request('sort', '');
                            $inStock = request('in_stock') ? 'on' : '';
                            $totalPages = $get_products->lastPage();
                            $currentPage = $get_products->currentPage();
                            $maxPagesToShow = 10;
                            $additionalPagesToShow = 10;

                            $startPage = max(1, $currentPage - 2);
                            $endPage = min($totalPages, $currentPage + $additionalPagesToShow);
                        @endphp

                        <ul>
                            <!-- Previous Button -->
                            <li class="page-item">
                                @if ($get_products->onFirstPage())
                                    <span class="page-link">Previous</span>
                                @else
                                    <a class="page-link" href="{{ $get_products->previousPageUrl() }}&sort={{ $sort }}&in_stock={{ $inStock }}">Previous</a>
                                @endif
                            </li>

                            <!-- Page Numbers -->
                            <li>
                                @if($get_products->count() > 0)
                                    <label>Show Pages:</label>

                                    @if($startPage > 1)
                                        <a href="{{ $get_products->url(1) . '&sort=' . $sort . '&in_stock=' . $inStock }}">1</a>
                                        @if($startPage > 2)
                                            <span>...</span>
                                        @endif
                                    @endif

                                    @for($page = $startPage; $page <= $endPage; $page++)
                                        <a href="{{ $get_products->url($page) . '&sort=' . $sort . '&in_stock=' . $inStock }}"
                                           class="{{ $currentPage == $page ? 'active' : '' }}">
                                            {{ $page }}
                                        </a>
                                    @endfor

                                    @if($endPage < $totalPages)
                                        @if($endPage < $totalPages - 1)
                                            <span>...</span>
                                        @endif
                                        <a href="{{ $get_products->url($totalPages) . '&sort=' . $sort . '&in_stock=' . $inStock }}">{{ $totalPages }}</a>
                                    @endif
                                @endif
                            </li>

                            <!-- Next Button -->
                            <li class="page-item">
                                @if ($get_products->hasMorePages())
                                    <a class="page-link" href="{{ $get_products->nextPageUrl() }}&sort={{ $sort }}&in_stock={{ $inStock }}">Next</a>
                                @else
                                    <span class="page-link">Next</span>
                                @endif
                            </li>
                        </ul>
                    </div>

                </div>

                <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h2 class="modal-title" id="loginModalLabel">Please Login</h2>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body text-center">
                                <p>You need to log in to add items to your wishlist.</p>
                                <a href="{{ route('user.login-view') }}" class="btn btn-primary">Login Now</a>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </section>
@endsection
@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>


$(document).ready(function() {
    $('#searchIcon').click(function(e) {
        e.preventDefault();
        $('#search').fadeIn();
    });

    $('#closeSearch').click(function() {
        $('#search').fadeOut();
    });
});



document.addEventListener('DOMContentLoaded', function () {
    const inStockCheckbox = document.getElementById('in-stock');
    const filterForm = document.getElementById('filter-form');

    inStockCheckbox.addEventListener('change', function () {
        filterForm.submit();
    });
});

</script>
<script>

    document.addEventListener('DOMContentLoaded', function () {
        // Add to Wishlist (Logged-in Users)
        var wishlistButtons = document.getElementsByClassName('wishlist');
        Array.from(wishlistButtons).forEach(function (button) {
            button.addEventListener('click', function (event) {
                event.preventDefault();

                var productId = this.getAttribute('data-product-id');

                $.ajax({
                    url: '{{ route("wishlist.add") }}',
                    method: 'POST',
                    data: {
                        product_id: productId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        toastr.success('Product added to Wishlist');
                        setTimeout(function() {
                            window.location.reload();
                        }, 500);                },
                    error: function (error) {
                        console.log(error);
                        toastr.error('Something went wrong!');
                    }
                });
            });
        });

        // Open Modal for Non-Logged-in Users
        var modalTriggerButtons = document.querySelectorAll('[data-bs-toggle="modal"]');
        Array.from(modalTriggerButtons).forEach(function (button) {
            button.addEventListener('click', function (event) {
                event.preventDefault();
                var modalId = this.getAttribute('data-bs-target');
                var modal = new bootstrap.Modal(document.querySelector(modalId));
                modal.show();
            });
        });

        // Close the modal programmatically
        var modalCloseButtons = document.querySelectorAll('[data-dismiss="modal"]');
        Array.from(modalCloseButtons).forEach(function (button) {
            button.addEventListener('click', function (event) {
                var modal = bootstrap.Modal.getInstance(document.getElementById('loginModal'));
                modal.hide();
            });
        });
    });



        document.querySelectorAll('.removewishlist').forEach(function(item) {
            item.addEventListener('click', function(event) {
                event.preventDefault();

                var wishlist_id = this.getAttribute('data-wishlist-id');

                $.ajax({
                    url: '{{ route('wishlist.remove') }}',
                    method: 'POST',
                    data: {
                        id: wishlist_id,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        toastr.success('Product removed successfully');

                        setTimeout(function() {
                        window.location.reload();
                    }, 500);
                    },
                    error: function(error) {
                        console.log(error);
                        toastr.error('Something went wrong!');
                    }
                });
            });
        });

    </script>
@endsection