@extends('layouts.customer')

@section('title')
    Click & Get - Online Shop
@endsection


<link rel="shortcut icon" type="x-icon" href="Click and Get.png">


@if (!auth()->check())
    @include('layouts.inc.IntroVideo')



@endif
@section('content')

<div class="py-4 my-4">
    <div class="container">
        <div class="row">
            <div class="col-md-12">





    <div class="landing-header">
        <h1>Welcome to Click & Get</h1>
        <p>Your One-Stop Online Shop for Quality Products</p>
        <a class="explore-button" href="#new-arrivals">Explore New Arrivals</a>
    </div>
    @if(session('status'))
    <div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="statusModalLabel">Success!</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-success" role="alert">
                        {{ session('status') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add script to trigger the modal and set timer to close -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var myModal = new bootstrap.Modal(document.getElementById('statusModal'));
            myModal.show();

            // Set timer to close the modal after 5 seconds
            setTimeout(function() {
                myModal.hide();
            }, 3000); // 5000 milliseconds = 5 seconds
        });
    </script>
@endif


    <div class="new-arrivals" id="new-arrivals">
    <h2>Delicacies</h2>
        <div class="row">
    @foreach ($product as $item)
    <div class="col-lg-2 col-md-2 mb-2"> <!-- Adjust the column size for medium and large screens -->
            <div class="product-card">
                <a class="product-link" href="{{ url(asset('view-product/'.$item->id)) }}">
                <img src="{{ optional($item->images->first())->image ? asset('upload/product/'. $item->images->first()->image) : '' }}" class="product-image" alt="Product Image">
                   
                </a>
          


                            <div class="product-details">
                               <h6 class="product-title">{{ Str::limit($item->name, 15) }}</h6>
                                <a href="{{ route('user.items', $item->user->id) }}">{{ $item->user->shop_name }}</a>
                                <p class="product-description">{{ Str::limit($item->description, 20) }}</p>

                                <div class="price-section">
                                    <!-- @if ($item->price)
                                        <span class="original-price">₱ <s>{{ number_format($item->price,  2, '.', ',') }}</s></span>
                                    @endif -->

                                    <p style="font-size: 12px;">
        <a href="{{ route('user.items', $item->user->id) }}" class="fs-8">{{ $item->user->shop_name }}</a>
        @if ($item->qty <= 10)
            <span class="text-warning fs-7">{{ $item->qty }} left in stock!</span>
        @elseif ($item->qty > 10)
            &nbsp;
        @endif
    </p>

    <p style="font-size: 12px;">
                                 @if($item->productPrices->isNotEmpty())
    @php
        // Fetch the latest active price
        $latestActivePrice = $item->productPrices()
            ->where('is_active', 1)
            ->latest('created_at')
            ->first();

        // Fetch the previous active price
        $previousActivePrice = null;
        if ($latestActivePrice) {
            $previousActivePrice = $item->productPrices()
                ->where('is_active', 1)
                ->where('created_at', '<', $latestActivePrice->created_at)
                ->latest('created_at')
                ->first();
        }

        // Calculate the discount
        $discountedPrice = $latestActivePrice ? $latestActivePrice->price : null;
        $originalPrice = $previousActivePrice ? $previousActivePrice->price : null;
        $discountPercent = $originalPrice && $discountedPrice ? (($originalPrice - $discountedPrice) / $originalPrice) * 100 : null;
    @endphp
    @if($discountedPrice && $discountPercent > 0) <!-- Ensure the discount percentage is positive -->
        <b><span class="selling-price">₱ {{ number_format($discountedPrice, 2, '.', ',') }}</span></b>
        @if($originalPrice)
            <span class="original-price"><s>₱ {{ number_format($originalPrice, 2, '.', ',') }}</s></span>
        @endif
        <span class="discount-percent">({{ number_format($discountPercent, 2) }}% off)</span>
    @else
        <!-- If there's no discount or if the discounted price is higher than the original price, display the original price -->
        <b><span class="selling-price">₱ {{ number_format($discountedPrice, 2, '.', ',') }}</span></b>
    @endif
@endif

    </p>
    </div>
                                <form class="product_data">
                                    @csrf
    <input type="hidden" value="{{ $item->id }}" class="prod_id">
    <label for="quantity">Quantity</label>
    <div class="input-group text-center mb-3">
        <div class="input-group-prepend">
            <button class="input-group-text decrement-btn">-</button>
        </div>
        <input type="text" readonly name="quantity" value="1" class="form-control quantity-input bg-light text-center fs-6" max="{{ $item->qty }}">
        <div class="input-group-append">
            <button class="input-group-text increment-btn">+</button>

                                        </div>
                                        </div>
                                            @if($item->qty > 0)

                                            <div class="d-flex justify-content-center">
                                                <button type="button" class="btn btn-primary btn-sm addToCartButton fs-8">Add to Cart <i class="fa-solid fa-cart-plus"></i></button>
                                            </div>
                                            @endif
                                </form>
                           
                                
         
                            </div>
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    </div>
    </div>
    </div>

    
    
@endsection
    @section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.addToCartButton').click(function (e) {
                e.preventDefault();
                var product_id = $(this).closest('.product-card').find('.prod_id').val();
                var product_qty = $(this).closest('.product-card').find('.quantity-input').val();

                if (!{{ auth()->check() ? 'true' : 'false' }}) {
                    window.location.href = "{{ route('login') }}";
                    return;
                }

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    method: "POST",
                    url: "/add-to-cart",
                    data: {
                        'product_id': product_id,
                        'product_qty': product_qty
                    },
                    success: function (response) {
                        if (response.status === "") {
                            swal("Oops...", `${response.status}`, "error");
                        } else if (response.status === "Please Verify you Email") {
                            swal("Oops...", `${response.status}`, "error");
                        } else {
                            swal("Done!", `${response.status}`, "success");
                        }
                    },
                    error: function (error) {
                        console.error('Error adding product to the cart:', error);
                    }
                });
            });

            $('.increment-btn').click(function (e) {
                e.preventDefault();
                var inc_value = $(this).closest('.product-card').find('.quantity-input').val();
                var value = parseInt(inc_value, 10);
                value = isNaN(value) ? 0 : value;
                var maxQty = parseInt($(this).closest('.product-card').find('.quantity-input').attr('max'), 10);

                if (value < maxQty) {
                    value++;
                    $(this).closest('.product-card').find('.quantity-input').val(value);
                }

                // Disable the increment button if the value reaches the maximum quantity
                if (value >= maxQty) {
                    $(this).prop('disabled', true);
                }
            });


            $('.decrement-btn').click(function (e) {
                e.preventDefault();
                var inc_value = $(this).closest('.product-card').find('.quantity-input').val();
                var value = parseInt(inc_value, 10);
                value = isNaN(value) ? 0 : value;
                if (value > 1) {
                    value--;
                    $(this).closest('.product-card').find('.quantity-input').val(value);
                }
            });

            // Show the toast when the page loads
            $('.toast').addClass('show');

            // You can add a timeout to hide the toast after a few seconds
            setTimeout(function () {
                $('.toast').removeClass('show');
            }, 5000); // Adjust the time (in milliseconds) as needed
        });
    </script>

    <script>
        $(document).ready(function () {
            // Show the toast when the page loads
            $('.toast').addClass('show');

            // You can add a timeout to hide the toast after a few seconds
            setTimeout(function () {
                $('.toast').removeClass('show');
            }, 5000); // Adjust the time (in milliseconds) as needed
        });
    </script>


@section('css')

<style>

.increment-btn,
.decrement-btn {
    flex: 15 15 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-group-text {
    width: 25px; 
}





    .landing-header {
        background-image: url('your-background-image.jpg');
        background-size: cover;
        background-position: center;
        text-align: center;
        padding: 100px 0; 
        color: #000;
        font-family: 'Arial', sans-serif;
    }

    .landing-header h1 {
        font-size: 48px;
        margin-bottom: 20px;
    }

    .landing-header p {
        font-size: 18px;
        color: #000;
    }

    .explore-button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #77263d;
        color: #fff;
        font-weight: bold;
        text-decoration: none;
        margin-top: 20px;
        border-radius: 5px;
    }

    .selling-price {
    color: #e74c3c;
    font-size: 14px;
    font-weight: bold;
}

.original-price {
    color: black;
    font-size: 8px;
}

.discount-percent {
    color: green;
    font-size: 8px;
}

    .new-arrivals {
    padding: 15px 20px; /* Add padding to the sides */
    background-color: #f9f9f9;
    overflow: hidden; 
}

.new-arrivals h2 {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 20px; /* Reduce the margin-bottom */
}

.row {
    margin-left: -10px; /* Compensate for the default padding of the column */
    margin-right: -10px; /* Compensate for the default padding of the column */
}

.product-card {
    border: 1px solid #e1e1e1;
    background-color: #fff;
    padding: 10px; /* Add padding to the card */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    margin-bottom: 20px; /* Add margin to separate cards */
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack children vertically */
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-image {
    width: 100%;
    height: 200px; /* Set a fixed height for the image */
    object-fit: cover; /* Cover the entire space, maintaining aspect ratio */
}


.product-details {
    flex: 1; /* Let the details section grow to fill the available space */
}


.product-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

.shop-name {
    font-size: 14px;
    color: #888;
    margin-bottom: 5px;
}

.product-description {
    font-size: 12px;
    color: #555;
    margin-bottom: 10px;
}

.price-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.original-price {
    color: #999;
    font-size: 10px;
    text-decoration: line-through;
}

.selling-price {
    color: #e74c3c;
    font-size: 16px;
    font-weight: bold;
}


    .product-link {
        text-decoration: none;
        color: #333;
    }

    .product-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px; 
    }

    @media (max-width: 768px) {
        .product-grid {
            grid-template-columns: repeat(2, 1fr); 
        }
    }

</style>