@extends('layouts.store')
@section('body')
    <section class="section-intro padding-y">
        <div class="container">
            <!-- ==============  COMPONENT SLIDER  BOOTSTRAP ============  -->
            <div id="carousel1_indicator" class="slider-home-banner carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carousel1_indicator" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel1_indicator" data-slide-to="1"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="images/banners/1.png" alt="First slide">
                    </div>
                    <div class="carousel-item">
                        <img src="images/banners/3.jpg" alt="Second slide">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carousel1_indicator" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carousel1_indicator" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <!-- ============ COMPONENT SLIDER BOOTSTRAP end.// ===========  .// -->

        </div> <!-- container end.// -->
    </section>


    <!-- ========================= SECTION MAIN END// ========================= -->


    <div class="container">
        <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>
        <!-- =============== SECTION 1 =============== -->
        <section class="padding-bottom">
            <header class="section-heading mb-4">
                <h3 class="title-section">Our 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">
                <div class="col-12-md text-center mb-3">
                    <a href="/store/products"><button class="btn btn-primary">Show All</button></a>
                </div>
            </div>
        </section>
        <!-- =============== SECTION 1 END =============== -->


        <!-- =============== SECTION BANNER =============== -->
        <section class="padding-bottom">
            <div class="row">
                <aside class="col-md-6">
                    <div class="card card-banner-lg bg-dark">
                        <img src="images/banners/1.png" class="card-img opacity">
                        <div class="card-img-overlay text-white">
                            <h2 class="card-title">Industrial Material</h2>
                            <p class="card-text" style="max-width: 80%">This is a wider card with text below and Lorem ipsum
                                dolor sit amet, consectetur adipisicing elit. Illo ab quae nihil praesentium impedit libero
                                possimus id vero</p>
                            <a href="#" class="btn btn-light">Discover</a>
                        </div>
                    </div>
                </aside>
                <div class="col-md-6">
                    <div class="card card-banner-lg bg-dark">
                        <img src="images/banners/2.png" class="card-img opacity">
                        <div class="card-img-overlay text-white">
                            <h2 class="card-title">Customize</h2>
                            <p class="card-text" style="max-width: 80%">Card with text below and Lorem ipsum dolor sit amet,
                                consectetur adipisicing elit. Illo ab quae nihil praesentium impedit libero possimus id vero
                            </p>
                            <a href="#" class="btn btn-light">Discover</a>
                        </div>
                    </div>
                </div> <!-- col.// -->
            </div> <!-- row.// -->
        </section>
        <!-- =============== SECTION BANNER .//END =============== -->

        <!-- =============== SECTION BANNER =============== -->
        <section class="padding-bottom">
            <article class="box d-flex flex-wrap align-items-center p-5 bg-primary">
                <div class="text-white mr-auto">
                    <h3>Looking for solution ? </h3>
                    <p> Popular items, discounts and free shipping </p>
                </div>
                <div class="mt-3 mt-md-0"><a href="" class="btn btn-outline-light">Learn more</a></div>
            </article>
        </section>
        <!-- =============== SECTION BANNER .//END =============== -->

    </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