@extends('Frontend.layouts.app')
<style>

    .dropdown-container {
        background: rgb(244, 108, 108);
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    label {
        font-weight: bold;
        display: block;
        margin-bottom: 8px;
        margin-left: 26%
    }
    select {
        width: 250px;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 16px;
        margin-left: 26%
    }
    select:focus {
        outline: none;
        border-color: #007bff;
    }
    .slider-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

.slider-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures the whole image is visible */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.slider-content {
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 10;
}

  </style>
<style>
    .product-box {
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 15px;
        text-align: center;
        height: 100%;
        width: 100%; /* Ensures consistent height */
    }

    .product-box img {
        width: 200%; /* Make image responsive */
        height: 200px; /* Set a fixed height */
        object-fit: cover; /* Ensure image fits well */
        border-radius: 10px;
    }

    .price h4 {
        margin: 5px 0;
    }

    .quantity-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }

    .quantity-controls input {
        width: 50px;
        text-align: center;
    }
</style>
@section('content')

<div class="ecom-main ">
  <!-- home slider start -->
  <section class="pt-0 home-section ratio_55">
    <form action="{{ route("getProductsByContainer") }}" method="get">
        @csrf

        <div class="dropdown-container">
            <label for="financialYearDropdown">SELECT FINANCIAL YEAR:</label>
            <select class="form-select" id="financialYearDropdown" name="financial_year">
                <option value="">-- Select Financial Year --</option>
                @php
                    $currentYear = date('Y');
                    for ($i = 5; $i >= 1; $i--) {
                        $startYear = $currentYear - $i;
                        $endYear = $startYear + 1;
                        echo "<option value='$startYear-$endYear'>$startYear-$endYear</option>";
                    }
                    for ($i = 0; $i < 5; $i++) {
                        $startYear = $currentYear + $i;
                        $endYear = $startYear + 1;
                        echo "<option value='$startYear-$endYear'>$startYear-$endYear</option>";
                    }
                @endphp
            </select>
        </div>

        <!-- Container Dropdown -->
        <div class="dropdown-container">
            <label for="containerDropdown">SELECT COINTAINER:</label>
            <select class="form-select containerDropdown" id="containerDropdown" name="container_id">
                <option value="" disabled selected>-- Choose a Container --</option>
            </select>
            <div class="text-center">
                <button type="submit" class="btn btn-primary mt-2">Load Products</button>
            </div>

        </div>
    </form>
  </section>


  


<section class="pt-0 tab-section">
    <div id="productSection">
       @if (isset($products) && $products->isNotEmpty())
            <center>
                <style>
                    label {
                        font-weight: bold;
                        margin-bottom: 8px;
                        margin-left: 1%;
                        font-size: 18px;
                    }
                </style>
                <div style="text-align: center; margin: 20px 0;">
                    <input type="checkbox" id="selectall" style="transform: scale(1.5);">
                    <label for="selectall" style="font-size:20px; vertical-align: middle;">Select All Items</label>
                </div>
            </center>

            <div class="row gy-3 gx-3 " id="container1">
                                @foreach ($products as $product)
                    @if (!empty($product->items) && is_array($product->items))
                        @foreach ($product->items as $item)
                            <div class="col-md-6 col-6 position-relative number<br />
<b>Warning</b>:  Undefined variable $item in <b>/home/firstmat/public_html/export-ecomm.firstmatrix.in/resources/views/Frontend/home.blade.php</b> on line <b>156</b><br />
<br />
<b>Warning</b>:  Attempt to read property "bale_no" on null in <b>/home/firstmat/public_html/export-ecomm.firstmatrix.in/resources/views/Frontend/home.blade.php</b> on line <b>156</b><br />
">
                                <span class="checkmark" id="checkmark-{{ $item->id }}"
                                    style="position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 28px; color: green; display: none;">
                                    ✔
                                </span>

                                <div class="product-box p-3 border rounded shadow">
                                    <div class="text-center mb-2">
                                        <input type="checkbox" class="product-checkbox"
                                            id="checkbox-{{ $item->id }}"
                                            data-item-id="{{ $item->id }}"
                                            data-product-id="{{ $product->id }}"
                                            data-container-id="{{ is_array($containerIds) ? implode(',', $containerIds) : $containerIds }}"
                                            data-bale-no="{{ $item->bale_no }}">
                                        <label for="checkbox-{{ $item->id }}" style="font-size:20px;">Select</label>
                                    </div>

                                    <img src="{{ isset($item->image) ? asset($item->image) : asset('assets/images/home.jpg') }}"
                                         class="img-fluid product-image"
                                         alt="{{ $product->product_name ?? 'Product Image' }}"
                                         data-product="{{ $product->product_name ?? 'No Name' }}"
                                         data-bale="{{ $item->bale_no ?? 'N/A' }}"
                                         data-image="{{ isset($item->image) ? asset($item->image) : asset('assets/images/home.jpg') }}"
                                         data-bs-toggle="modal"
                                         data-bs-target="#priceModal">

                                    <h4 class="text-center mt-2">{{ $product->product_name ?? 'No Name' }}</h4>
                                    <div class="price text-center">
                                        <h4>Bale No: {{ $item->bale_no ?? 'N/A' }}</h4>
                                    </div>
                                </div>
                            </div>
                                                    @endforeach
                    @endif
                    
                @endforeach
            </div>

            <div class="text-center mt-4">
                <button id="request-items" class="btn btn-primary">Request Selected Items</button>
            </div>
        @else
            <p class="text-center text-danger">No products found.</p>
        @endif
    </div>
</section>



<!-- Bootstrap Modal -->
<div class="modal fade" id="priceModal" tabindex="-1" aria-labelledby="priceModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="priceModalLabel">Item Details</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body text-center">
              <img id="modalImage" src="" class="img-fluid mb-3" style="max-height: 200px;">
              <h4 id="modalProductName"></h4>
              <h5>Bale No: <span id="modalBaleNo"></span></h5>
          </div>
      </div>
  </div>
</div>

        <div class="tab-pane fade" id="ship">
        <div class="row gy-3 gx-3">

        <div class="col-md-6 col-6">
            <div class="product-box ratio_square">
                <div class="img-part splide image-carousel">
                    <div class="splide__track">
                        <ul class="splide__list">
                        <li class="splide__slide">
                        <img src="assets/images/products/4.jpg" alt="" class="img-fluid bg-img">
                        </li>
                        <li class="splide__slide">
                        <img src="assets/images/products/4.jpg" alt="" class="img-fluid bg-img">
                        </li>
                        <li class="splide__slide">
                        <img src="assets/images/products/4.jpg" alt="" class="img-fluid bg-img">
                        </li>
                        </ul>
                    </div>
                </div>
                <div class="text-center">
                    <div class="btn btn-danger">Add to Cart</div>
                </div>
            </div>
        </div>





  </div>
          </div>

</section>

</div>
<!-- Splide.js CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/css/splide.min.css">

<!-- Splide.js JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/js/splide.min.js"></script>


<script>
document.addEventListener('DOMContentLoaded', function () {
    // Initialize all image carousels
    const carousels = document.querySelectorAll('.image-carousel');
    carousels.forEach(carousel => {
        new Splide(carousel, {
            type: 'loop',
            perPage: 1,
            autoplay: true,
            interval: 3000,
            arrows: false,
            pagination: true
        }).mount();
    });
});

</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        let dropdown = document.getElementById("containerDropdown");
        let isLoggedIn = @json(auth()->check()); // Convert Blade variable to JS boolean

        if (dropdown) {
            dropdown.addEventListener("change", function() {
                if (!isLoggedIn) {
                    alert("Kindly Login First.");
                    dropdown.value = ""; // Reset selection
                }
            });
        }
    });

    $(document).ready(function () {
        $('#financialYearDropdown').on('change', function () {
            let financialYear = $(this).val();
            let containerDropdown = $('#containerDropdown');

            if (financialYear) {
                containerDropdown.html('<option value="" disabled>Loading...</option>'); // Show loading state

                $.ajax({
                    url: '{{ route("getCompaniesByYear") }}',
                    type: 'GET',
                    data: { f_year: financialYear },
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }, // CSRF token for security
                    success: function (data) {
                        containerDropdown.html('<option value="" disabled selected>-- Choose a Container --</option>');
                        if (data.length > 0) {
                            $.each(data, function (key, value) {
                                containerDropdown.append('<option value="' + value.id + '">' + value.prefix + '</option>');
                            });
                        } else {
                            containerDropdown.html('<option value="" disabled selected>No containers found</option>');
                        }
                    },
                    error: function () {
                        alert("Error fetching data. Please try again.");
                        containerDropdown.html('<option value="" disabled selected>-- Choose a Container --</option>');
                    }
                });
            } else {
                containerDropdown.html('<option value="" disabled selected>-- Choose a Container --</option>');
            }
        });
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".qty-plus").forEach(button => {
            button.addEventListener("click", function () {
                let itemId = this.getAttribute("data-item-id");
                let qtyInput = document.getElementById("input-qty-" + itemId);
                // let qtyDisplay = document.getElementById("qty-" + itemId);
                let qty = parseInt(qtyInput.value) || 1; // Ensure qty is at least 1
                let maxQty = 10; // Set max quantity limit

                if (qty >= maxQty) {
                    alert("Maximum Quantity Reached!");
                } else {
                    qty += 1;
                    qtyInput.value = qty;
                    qtyDisplay.innerText = qty;
                }
            });
        });

        document.querySelectorAll(".qty-minus").forEach(button => {
            button.addEventListener("click", function () {
                let itemId = this.getAttribute("data-item-id");
                let qtyInput = document.getElementById("input-qty-" + itemId);
                // let qtyDisplay = document.getElementById("qty-" + itemId);
                let qty = parseInt(qtyInput.value) || 1; // Ensure qty is at least 1

                if (qty > 1) {
                    qty -= 1;
                    qtyInput.value = qty;
                    qtyDisplay.innerText = qty;
                } else {
                    alert("Minimum quantity is 1!");
                }
            });
        });
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".product-image").forEach(image => {
            image.addEventListener("click", function () {
                document.getElementById("modalImage").src = this.dataset.image;
                document.getElementById("modalProductName").innerText = this.dataset.product;
                document.getElementById("modalBaleNo").innerText = this.dataset.bale;
                document.getElementById("modalQty").innerText = this.dataset.qty;
            });
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        document.getElementById("request-items").addEventListener("click", function () {
            let selectedItems = [];
            let requestButton = this;

            document.querySelectorAll(".product-checkbox:checked").forEach(checkbox => {
                selectedItems.push({
                    product_id: checkbox.getAttribute("data-product-id"),
                    item_id : checkbox.getAttribute("data-item-id"),
                    container_id: checkbox.getAttribute("data-container-id"),
                    bale_no: checkbox.getAttribute("data-bale-no")
                });
            });

            if (selectedItems.length === 0) {
                alert("Please select at least one item.");
                return;
            }

            requestButton.disabled = true;
            requestButton.textContent = "Processing...";

            fetch("{{ route('customer_request.store') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({ items: selectedItems })
            })
            .then(response => response.json())
            .then(data => {
                requestButton.disabled = false;
                requestButton.textContent = "Request Selected Items";

                if (data.success) {
                    alert("Successfully requested the selected items!");
                    document.querySelectorAll(".product-checkbox:checked").forEach(checkbox => {
                        checkbox.checked = false; // Clear selection
                    });
                    location.reload();
                } else {
                    alert("Failed to request the items.");
                }
            })
            .catch(error => {
                console.error("Error:", error);
                requestButton.disabled = false;
                requestButton.textContent = "Request Selected Items";
                alert("An error occurred. Please try again.");
            });
        });
    });
</script>
<script>
    $(document).ready(function () {
        $(".add-to-cart").on("click", function () {
            let itemId = $(this).data("item-id");

            // Show checkmark
            $("#checkmark-" + itemId).fadeIn();
        });
    });
    
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const selectAllCheckbox = document.getElementById("selectall");

    if (selectAllCheckbox) { // Check if the "Select All" checkbox exists
        selectAllCheckbox.addEventListener("click", function () {
            console.log('clicked');

            const checkboxes = document.querySelectorAll(".product-checkbox");
            checkboxes.forEach((checkbox) => {
                checkbox.checked = selectAllCheckbox.checked;
            });
        });
    }
});
</script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const container = document.getElementById('container1');
    const divs = Array.from(container.querySelectorAll('[class*="number"]'));

    divs.sort((a, b) => {
      const numA = parseInt(a.className.match(/number(\d+)/)[1]);
      const numB = parseInt(b.className.match(/number(\d+)/)[1]);
      return numA - numB;
    });

    divs.forEach(div => container.appendChild(div));
  });
</script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const container = document.getElementById('container1');
    const divs = Array.from(container.querySelectorAll('[class*="number"]'));
    
    const seen = new Set();

    divs.forEach(div => {
      const match = div.className.match(/number(\d+)/);
      if (match) {
        const classNum = match[0]; // like "number2"
        if (seen.has(classNum)) {
          div.style.display = "none"; // Hide duplicates
        } else {
          seen.add(classNum); // Keep first occurrence
        }
      }
    });
  });
</script>



@endsection