@extends('frontend.master')

@section('title')
    Whole Sale Products
@endsection

@section('content')
    <main class="main">
        <!-- Start of Breadcrumb -->
        <nav class="breadcrumb-nav">
            <div class="container">
                <ul class="breadcrumb bb-no">
                    <li><a href="{{ route('home') }}">Home</a></li>
                    <li><a href="">Whole Sale Products</a></li>
                </ul>
            </div>
        </nav>
        <!-- End of Breadcrumb -->

        <!-- Start of Page Content -->
        <div class="page-content mb-10">
            <div class="shop-default-banner banner d-flex align-items-center mb-5 br-xs"
                style="background-image: url('{{ asset('/uploads/banner/' . @$banner['whole_sale_product_banner']) }}'); height: 310px;">
            </div>
            <!-- End of Shop Banner -->
            <div class="container-fluid">
                <!-- Start of Shop Content -->
                <div class="shop-content">
                    <!-- Start of Shop Main Content -->
                    <div class="main-content">
                        <div class="product-wrapper row cols-xl-6 cols-lg-5 cols-md-4 cols-sm-3 cols-2">
                            @foreach ($wholeSaleProducts as $wholeSaleProduct)
                                <div class="product-wrap" style="margin-top: 20px;">
                                    <div class="product text-center">
                                        <figure class="product-media">
                                            <a href="">
                                                <img src="{{ asset('/uploads/whole_sale/' . $wholeSaleProduct->image) }}"
                                                    alt="Product" width="300" height="338" />
                                            </a>
                                        </figure>
                                        <div class="product-details">
                                            <div class="product-cat">
                                                <a href="">{{ $wholeSaleProduct->name }}</a>
                                            </div>
                                            <h3 class="product-name">
                                                <button class="btn btn-primary btn-sm get-quote-btn"
                                                    style="margin-top: 10px;" data-bs-toggle="modal"
                                                    data-bs-target="#quoteModal"
                                                    data-product-id="{{ $wholeSaleProduct->id }}">
                                                    Get a Quote
                                                </button>


                                            </h3>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="toolbox toolbox-pagination justify-content-between">
                            <p class="showing-info mb-2 mb-sm-0">
                                Showing
                                <span>{{ $wholeSaleProducts->firstItem() }} - {{ $wholeSaleProducts->lastItem() }}</span>
                                of
                                <span>{{ $wholeSaleProducts->total() }}</span>
                                results
                            </p>

                            <ul class="pagination">
                                {{ $wholeSaleProducts->links() }}
                            </ul>
                        </div>

                        {{-- modal --}}
                        <div class="custom-modal" id="customModal">
                            <div class="modal-content">
                                <h2>Quotation For Whole Sale</h2>
                                <hr>

                                <form id="quoteForm" action="{{ route('quotation.store') }}" method="POST">
                                    @csrf

                                    <input type="hidden" id="product_id" name="product_id">

                                    <div class="form-group my-1">
                                        <div>
                                            <label for="form-label">Name*</label>
                                            <input type="text" id="name" name="name" class="form-control"
                                                required>
                                        </div>
                                    </div>

                                    <div class="form-group my-1">
                                        <div>
                                            <label for="form-label">Email (Optional)</label>
                                            <input type="email" id="email" name="email" class="form-control">
                                        </div>
                                    </div>

                                    <div class="form-group my-1">
                                        <div>
                                            <label for="form-label">Phone*</label>
                                            <input type="number" id="phone" name="phone" class="form-control"
                                                required>
                                        </div>
                                    </div>

                                    <div class="form-group my-1">
                                        <div>
                                            <label for="form-label">Quantity (Optional)</label>
                                            <input type="number" id="quantity" name="quantity" class="form-control">
                                        </div>
                                    </div>

                                    <div class="form-group my-1">
                                        <div>
                                            <label for="form-label">Customer Offer Price (Optional)</label>
                                            <input type="number" id="customer_offer_price" name="customer_offer_price"
                                                class="form-control">
                                        </div>
                                    </div>

                                    <div class="form-group mb-3 mt-1">
                                        <div>
                                            <label for="form-label">Notes (Optional)</label>
                                            <textarea name="notes" id="notes" class="form-control"></textarea>
                                        </div>
                                    </div>

                                    <div class="my-3 form-group">
                                        <div>
                                            <button type="button" onclick="closeModal()"
                                                class="btn btn-error btn-sm">Close</button>
                                            <button type="submit" class="btn btn-primary btn-sm">Submit</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </main>
    <!-- End of Shop Main Content -->
@endsection


@push('scripts')
    <script>
        function openModal(productId) {
            document.getElementById('customModal').style.display = 'block';
            document.getElementById('product_id').value = productId;
        }

        function closeModal() {
            document.getElementById('customModal').style.display = 'none';
        }

        // Add event listeners to quote buttons
        document.querySelectorAll('.get-quote-btn').forEach(button => {
            button.addEventListener('click', () => {
                const productId = button.getAttribute('data-product-id');
                openModal(productId);
            });
        });
    </script>
@endpush