@extends('layouts.store')
@section('body')
    <div class="container">
        
        <!-- =============== SECTION 1 =============== -->
        <section class="padding-bottom">
            <header class="section-heading mb-4">
                <h3 class="title-section">All Product</h3>
            </header>

            <div class="row">
                @foreach ($homeproducts as $product)
                    <div class="col-xl-3 col-lg-3 col-md-4 col-6">
                        <div class="card card-product-grid">

                            @if ($product->featured_image)
                                <a href="{{ $product->featured_image->getUrl() }}" target="_blank"
                                    style="display: inline-block">
                                    <img width="100%" src="{{ $product->featured_image->getUrl() }}">
                                </a>
                            @else
                                <a href="#" class="img-wrap"> <img
                                        src="{{ $product->category->image->getURL('preview') }}">
                                </a>
                            @endif
                            <figcaption class="info-wrap">
                                <div>
                                    <a href="#" class="text-muted">{{ $product->category->name }}</a>
                                    <a href="/store/products/{{ $product->slug }}"
                                        class="title">{{ $product->name }}</a>
                                </div>
                                @if ($product->price_range)
                                    <div class="price h5 mt-2">Rp {{ number_format($product->price_range) }}</div>
                                @else
                                    <div class="price h5 mt-2">Ask For Price</div>
                                @endif
                                <!-- price.// -->
                            </figcaption>
                            <div class="col-12-md text-center mb-3">
                                <a href="/store/products/{{ $product->slug }}"><button class="btn btn-primary">Detail
                                        Product</button></a>
                            </div>
                        </div>
                    </div> <!-- col.// -->
                @endforeach
            </div> <!-- row.// -->
            <div class="d-flex justify-content-center">
                {{ $homeproducts->links('vendor.pagination.bootstrap-4') }}
            </div>
        </section>
        <!-- =============== SECTION 1 END =============== -->
        <section class="padding-bottom">

            <header class="section-heading heading-line">
                <h4 class="title-section text-uppercase">Request for Quotation</h4>
            </header>

            <div class="row">
                <div class="col-md-8">
                    <div class="card-banner banner-quote overlay-gradient"
                        style="background-image: url('/images/banners/banner9.jpg');">
                        <div class="card-img-overlay white">
                            <h3 class="card-title">An easy way to send request and ask for price</h3>
                            <p class="card-text" style="max-width: 400px">Browse our product collection and buy directly from Fusi online store, or you can always request for a product or solution and ask the price.</p>
                            <a href="" class="btn btn-primary rounded-pill">Learn more</a>
                        </div>
                    </div>
                </div> <!-- col // -->
                <div class="col-md-4">

                    <div class="card card-body">
                        <h4 class="title py-3">One Request, Multiple Quotes</h4>
                        <form>
                            <div class="form-group">
                                <input class="form-control" id="message" name="message" placeholder="What are you looking for?" type="text">
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <input class="form-control" placeholder="Quantity" id="qty" name="qty" type="text">

                                    <select class="custom-select form-control">
                                        <option>Pieces</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group text-muted">
                                <p>Select template type:</p>
                                <label class="form-check form-check-inline">
                                    <input id="price" class="form-check-input"  type="checkbox" value="price">
                                    <span class="form-check-label">Request price</span>
                                </label>
                                <label class="form-check form-check-inline">
                                    <input id="sample" class="form-check-input" type="checkbox" value="sample">
                                    <span class="form-check-label">Request a sample</span>
                                </label>
                            </div>
                            <div class="form-group">
                                <button type="button" id="quote" class="btn btn-warning">Request for quote</button>
                            </div>
                        </form>
                    </div>

                </div> <!-- col // -->
            </div> <!-- row // -->
        </section>
    </div>
    <!-- container end.// -->
@endsection
@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
            $("#quote").click(function(){
                validation();
                var msg = "Looking for " + $("#message").val() + ", "+$("#qty").val() + " Pcs";
                if($('#price').is(":checked")){
                    msg = (msg+", Request price");
                    console.log(msg+", Request price");
                }
                if($('#sample').is(":checked")){
                    msg = (msg+", Request sample");
                    console.log(msg+", Request sample");
                }
                $.ajax({
                headers: {
                    'x-csrf-token': "{!! csrf_token() !!}"
                },
                method: 'POST',
                url: "/contact-us",
                data: {
                    "user_id":'{!! Auth::user()->sub ?? "0" !!}',
                    "message":msg
                },success:function(e){
                    console.log(e);
                    window.location = "/store";
                },error:function(e){
                    if(e.responseJSON.message == "Unauthenticated."){
                        alert("Please Login...");
                    }else{
                        alert(e.responseJSON.message);
                    }
                }
            });
            }); 
        });
        function validation(isLogin){
            if ($("#message").val() == "") {
                $("#message").focus();
            } else if ($("#qty").val() == "") {
                $("#qty").focus();
            }else{
                return true;
            }
        }
 
    </script>
@endsection