@extends('layouts.app')
@push('styles')
    <style>
        .main_banner {
            background-image: url('{{ 'https://noahpackaging.com/assets/sliders/'.$banners->image }}' ) !important;
        }
    </style>
    <script>
        let width = screen.width;
    </script>
        
@endpush
@section('contents')

    <section>
        <div class="container">
            <div class="main_banner">
                <div class="row" style="height: 100%">
                    <div class="col-lg-6">
                        <div class="main_heading">
                            <h1>
                                Custom <br />
                                Packaging Boxes
                            </h1>
                            <p>for Perfect Branding</p>
                            <button type="button" onclick="$zoho.salesiq.floatwindow.visible(&quot;show&quot;);"  class="btn btn-lg btn-dark">
                                Talk to Our Expert
                            </button>
                        </div>
                    </div>
                    <div class="col-lg-6 py-3">
                        <div class="f_form">
                            <div
                                class="main_card"
                                style="
                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
                      rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
                      rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset !important;
                    width: 85%;
                  "
                            >
                                <div class="text-center gq">Get Free Estimate</div>
                                @if(!empty(session('error')))
                                    <div class="alert alert-danger">
                                        {{ session('error') }}
                                    </div>
                                @endif
                                <form  id="get_quote_header" action="{{ route('home_get_quote') }}" method="post"  class="get_quote_header">
                                    @csrf

                                    <div class="row py-2">
                                        <div class="col-md-6 col-md-6sss">
                                            <div class="form-group">
                                                <label for="product_name_header">Product Name</label>
                                                <input class="form-control form-control-sm required" required name="product_name" id="product_name_header">
                                            </div>
                                        </div>

                                        <div class="col-md-6 col-md-6sss">
                                            <div class="form-group">
                                                <label for="quantity_header">Quantity</label>
                                                <input type="text" name="quantity" id="quantity_header" class="form-control form-control-sm " required value="" min="1" max="100000">
                                                <input type="hidden" name="qtype" value="">
                                                <input type="hidden" required  name="" class="form-control search_input_top" placeholder="Search" value="">

                                            </div>
                                        </div>

                                        <div class="col-md-6 col-md-6sss">
                                            <div class="form-group">
                                                <label for="name_header">Name</label>
                                                <input class="form-control form-control-sm required" required name="contact_name" id="name_header">
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-md-6sss">
                                            <div class="form-group">
                                                <label for="phone_header">Phone</label>
                                                <input class="form-control form-control-sm required" required="" name="contact_phone" id="phone_header" type="text">
                                            </div>
                                        </div>

                                        <div class="col-md-12 ">
                                            <div class="form-group">
                                                <label for="email_header"> Email Address</label>
                                                <input class="form-control form-control-sm required" required="" name="contact_email" id="email_header">
                                            </div>
                                        </div>

                                    </div>
                                    <div class="row py-2">

                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label for="message_header">Description</label>
                                                <textarea class="form-control textareas form-control-sm" name="message" rows="2" id="message_header" placeholder="write short message" spellcheck="false"></textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-2 col-md-2s">
                                            <input id="num1_header" placeholder="num1" class="sum   form-control form-control-sm" type="text" name="num1" value="4" readonly="readonly" />
                                        </div>
                                        <div class="col-md-1 col-md-1s py-2">
                                            <span style="font-size: 16px !important;color: black;">+</span>
                                        </div>
                                        <div class="col-md-2 col-md-2s">
                                            <input id="num2_header" placeholder="num2" class="sum  form-control form-control-sm" type="text" name="num2" value="7" readonly="readonly" />
                                        </div>
                                        <div class="col-md-1 col-md-1s py-2">
                                            <span style="font-size: 16px !important;color: black;">=</span>
                                        </div>
                                        <div class="col-md-2 col-md-2s">
                                            <div class="form-group input-placeholder">

                                                <input id="captcha_header" class="captcha_header  form-control form-control-sm " placeholder="Ans" required type="text" name="captcha" maxlength="2" /><br>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-md-6sss">
                                            <span id="spambot_header" style="font-size: 12px !important;color:black">(Are you human, or spambot?)</span>
                                        </div>
                                    </div>

                                    <div class="col-lg-11 col-lg-11s text-center">
                                        <button type="submit" class="btn btn-roundeds btn-primary">Submit</button>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row py-3 rows">
                @foreach($products as $p)
                <div class="ec_cat_content ec_cat_content_1 col-lg-4 col-md-6 col-6">
                    <div class="ec_cat_inner">
                        <div class="ec-category-image">
                            <a href="{{url('/').'/'.$p->slug}}">
                                <img
                                    src="{{asset('assets/categories/'.$p->category_image)}}" loading="lazy" alt="{{$p->title}}"
                                    height="163"
                                    width="163"
                                /></a>
                        </div>
                        <div class="ec-category-desc">
                            <span>{{$p->title}}</span>
                            <ul>