@extends('layouts.category_app')
@section('contents')
        
    <!-- ........main banner......... -->
    <section>
        <div class="container">
            <div class="category_banner">
                <div class="row" style="height: 100%">
                    <div class="col-lg-6 col-md-8 col-sm-12">
                        <div class="cate_heading">
                            <span style="color: #000">
                                @if(!empty($category->note))
                                    {!! $category->note !!}
                                @else
                                    <span>Custom <br> Packaging your</span>
                                    <p>customers will love</p>
                                @endif
                            </span>
{{--                            <p style="color: #000">Every Mylar Pouch</p>--}}
                            <div class="text-center">
                                <button type="submit" class="slide11 ">
                                    Get Quote
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ........FEATURE PRODUCTS......... -->
    <section>
        <div class="container py-5">
            <div class="title_box">
                <h1>{{$category->name}}</h1>
            </div>
            <div class="row">
                @foreach($products as $fp)
                <div class="col-lg-3 col-md-4 col-6 my-3">
                    <div class="ec-product-inner">
                        <div class="ec-pro-image-outer">
                            <a href="{{ url($fp->product_slug)}}" class="image">
                                <div class="ec-pro-image">
                                    <img
                                        class="main-image"
                                        src="{{ asset('assets/products/'.$fp->product_image) }}" alt="{{$fp->product_alt}}"
                                        width="318"
                                        height="318"

                                        loading="lazy"
                                    />

                                    <div class="ec-pro-loader"></div>
                                </div>
                            </a>
                        </div>
                        <div class="ec-pro-content">
                            <a href="{{ url($fp->product_slug)}}"
                            ><span class="ec-pro-stitle">{{$fp->product_title}}</span></a
                            >


                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- .........TESTIMONIAL ........... -->
    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-12 mt-3">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="title_boxes">
                                <span>GET QUOTE</span>
                            </div>
                            <div class="card cate_card">
                                @if(!empty(session('error')))
                                    <div class="alert alert-danger">
                                        {{ session('error') }}
                                    </div>
                                @endif
                                <form
                                    id="get_quote"
                                    action="{{ route('category_get_quote') }}" method="post">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-3 col-6">
                                            <div class="form-group">
                                                <label class="label1" for="product_length"
                                                >Length</label
                                                >
                                                <input
                                                    name="product_length"
                                                    id="product_length"
                                                    class="form-control form-control-sm"
                                                    placeholder="L"
                                                />

                                                <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-3 col-6">
                                            <div class="form-group">
                                                <label class="label1" for="product_width"
                                                >Width</label
                                                >
                                                <input
                                                    name="product_width"
                                                    id="product_width"
                                                    class="form-control form-control-sm"
                                                    placeholder="W"
                                                />
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-6">
                                            <div class="form-group">
                                                <label class="label1" for="product_depth"
                                                >Height</label
                                                >
                                                <input
                                                    name="product_depth"
                                                    id="product_depth"
                                                    class="form-control form-control-sm"
                                                    placeholder="Height"
                                                />
                                            </div>
                                        </div>

                                        <div class="col-md-3 col-6">
                                            <div class="form-group">
                                                <label class="label1" for="units">Unit</label>
                                                <select
                                                    class="form-control form-select form-select-sm required"
                                                    name="measurement_units"
                                                    id="units"
                                                >
                                                    <option value="cm">cm</option>
                                                    <option value="mm">mm</option>
                                                    <option class="label1" selected="" value="inches">
                                                        inch
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row py-2">
                                        <div class="col-md-4 col-6">
                                            <div class="form-group">
                                                <label class="label1" for="quantity">Quantity</label>
                                                <input
                                                    type="text"
                                                    name="quantity"
                                                    id="quantity"
                                                    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-4 col-6">
                                            <div class="form-group">
                                                <label class="label1" for="color">Select Color</label>

                                                <select
                                                    name="color"
                                                    id="color"
                                                    class="form-control form-select form-select-sm"
                                                >
                                                    <option class="label1" value="">
                                                        Select Color
                                                    </option>
                                                    <option value="1 Color">1 Color</option>
                                                    <option value="2 Color">2 Color</option>
                                                    <option value="3 Color">3 Color</option>
                                                    <option value="4 Color">4 Color</option>
                                                    <option value="4/1 Color">4/1 Color</option>
                                                    <option value="4/2 Color">4/2 Color</option>
                                                    <option value="4/3 Color">4/3 Color</option>
                                                    <option value="4/4 Color">4/4 Color</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-6">
                                            <div class="form-group">
                                                <label class="label1" for="product_name"
                                                >Product Name</label
                                                >
                                                <input
                                                    class="form-control form-control-sm required"
                                                    required=""
                                                    name="product_name"
                                                    id="product_name"
                                                />
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-6">
                                            <div class="form-group">
                                                <label class="label1" for="name">Name</label>
                                                <input
                                                    class="form-control form-control-sm required"
                                                    required=""
                                                    name="contact_name"
                                                    id="name"
                                                />
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-6">
                                            <div class="form-group">
                                                <label class="label1" for="phone">Phone</label>
                                                <input
                                                    class="form-control form-control-sm required"
                                                    required=""
                                                    name="contact_phone"
                                                    id="phone"
                                                    type="text"
                                                />
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-6">
                                            <div class="form-group">
                                                <label class="label1" for="email">
                                                    Email Address</label
                                                >
                                                <input
                                                    class="form-control form-control-sm required"
                                                    required=""
                                                    name="contact_email"
                                                    id="email"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row py-2">
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label class="label1" for="message"
                                                >Description</label
                                                >
                                                <textarea
                                                    class="form-control textareas form-control-sm"
                                                    name="message"
                                                    rows="2"
                                                    id="message"
                                                    placeholder="write short message"
                                                    spellcheck="false"
                                                ></textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-2 col-3">
                                            <input
                                                id="num1"
                                                placeholder="num1"
                                                class="sum form-control form-control-sm"
                                                type="text"
                                                name="num1"
                                                value="1"
                                                readonly="readonly"
                                            />
                                        </div>
                                        <div class="col-md-1 col-1 py-2">
                                            <span>+</span>
                                        </div>
                                        <div class="col-md-2 col-3">
                                            <input
                                                id="num2"
                                                placeholder="num2"
                                                class="sum form-control form-control-sm"
                                                type="text"
                                                name="num2"
                                                value="9"
                                                readonly="readonly"
                                            />
                                        </div>
                                        <div class="col-md-1 col-1 py-2">
                                            <span>=</span>
                                        </div>
                                        <div class="col-md-2 col-3">
                                            <div class="form-group input-placeholder">
                                                <input
                                                    id="captcha"
                                                    class="captcha form-control form-control-sm"
                                                    placeholder="Ans"
                                                    required=""
                                                    type="text"
                                                    name="captcha"
                                                    maxlength="2"
                                                /><br />
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                        <span id="spambot1" style="font-size: 10px"
                        >(Are you human, or spambot?)</span
                        >
                                        </div>
                                    </div>

                                    <div class="col-lg-11 col-lg-11s">
                                        <button type="submit" class="slide11">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mt-3">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="title_boxes">
                                <p style="font-size: 22px;
    font-weight: 700;
    margin-bottom: 0;
    color: #000;
    letter-spacing: .4px;
    position: relative;
    display: inline;
    padding: 0;
    text-transform: uppercase;
    line-height: 1;">OUR SERVICES</p>
                            </div>
                            <div class="ec_ser_block">
                                <div class="ec_ser_content ec_ser_content_1 col-sm-12">
                                    <div class="ec_ser_inner">
                                        <div class="ec-service-image">
                                            <i class="fas fa-truck"></i>
                                        </div>
                                        <div class="ec-service-desc">
                        <span
                            style="
                            font-size: 16px;
                            color: #777;
                            letter-spacing: 0;
                            margin-bottom: 9px;
                            text-transform: capitalize;
                            font-weight: 600;
                          "
                        >Free Shipping</span
                        >
                                            <p>Around the U.S</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="ec_ser_content ec_ser_content_2 col-sm-12">
                                    <div class="ec_ser_inner">
                                        <div class="ec-service-image">
                                            <i class="fas fa-tachometer-alt"></i>
                                        </div>
                                        <div class="ec-service-desc">
                        <span
                            style="
                            font-size: 16px;
                            color: #777;
                            letter-spacing: 0;
                            margin-bottom: 9px;
                            text-transform: capitalize;
                            font-weight: 600;
                          "
                        >Free Graphic Design
                        </span>
                                            <p>For all the custom packaging</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="ec_ser_content ec_ser_content_3 col-sm-12">
                                    <div class="ec_ser_inner">
                                        <div class="ec-service-image">
                                            <i class="fas fa-phone-alt"></i>
                                        </div>
                                        <div class="ec-service-desc">
                        <span
                            style="
                            font-size: 16px;
                            color: #777;
                            letter-spacing: 0;
                            margin-bottom: 9px;
                            text-transform: capitalize;
                            font-weight: 600;
                          "
                        >24/7 Customer Support</span
                        >
                                            <p>Call us today!</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="ec_ser_content ec_ser_content_4 col-sm-12">
                                    <div class="ec_ser_inner">
                                        <div class="ec-service-image">
                                            <i class="fas fa-percentage"></i>
                                        </div>
                                        <div class="ec-service-desc">
                        <span
                            style="
                            font-size: 16px;
                            color: #777;
                            letter-spacing: 0;
                            margin-bottom: 9px;
                            text-transform: capitalize;
                            font-weight: 600;
                          "
                        >High Printing Quality</span
                        >
                                            <p>For every packaging</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="ec_ser_content ec_ser_content_5 col-sm-12">
                                    <div class="ec_ser_inner border-0">
                                        <div class="ec-service-image">
                                            <i class="fas fa-donate"></i>
                                        </div>
                                        <div class="ec-service-desc">
                        <span
                            style="
                            font-size: 16px;
                            color: #777;
                            letter-spacing: 0;
                            margin-bottom: 9px;
                            text-transform: capitalize;
                            font-weight: 600;
                          "
                        >Custom Design</span
                        >
                                            <p>According to user requirements</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mt-3 hide_box">
                    <div class="green_box">
                        <span>Shop with Confidence</span>
                        <p>
                            Money<br />
                            Back Guarantee
                        </p>
                        <img
                            class=""
                            src="{{asset('assets/frount/assets/images/guarantee_image.webp')}}"
                            alt="guarantee_image" width="110" height="85"       loading="lazy"
                        />
                        <img src="{{asset('assets/frount/assets//images/payment-img.webp')}}"    width="205" height="73"   loading="lazy" alt="Payment" />
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-----------Content------------------->
    <section>
        <div class="container">
            <div class="row cards">
                <div class="content scrollbar" id="style-2">
                    <div class="force-overflow">
                        {!! $category->detail !!}
                 </div>
                </div>
            </div>

            </div>

    </section>
    <!----------FAQS------------------------>
    @if(count($faqs)>0)
        <section>
            <div class="container">

                <span style="font-size: 22px;
    font-weight: 700;
    margin-bottom: 0;
    color: #000;
    letter-spacing: .4px;
    position: relative;
    display: inline;
    padding: 0;
    text-transform: uppercase;
    line-height: 1;">FREQUENTLY ASKED QUESTIONS
                </span>


                <div class="row">
                    <div class="accordion" id="accordionExample">

                        @foreach($faqs as $x => $s)
                            <div class="accordion-item">
              <span class="accordion-header" id="heading">
                <button
                    class="accordion-button"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapse"
                    aria-expanded="true"
                    aria-controls="collapse"
                >
                 {{$s->question}}
                </button>
              </span>
                                <div
                                    id="collapse"
                                    class="accordion-collapse collapse"
                                    aria-labelledby="heading"
                                    data-bs-parent="#accordionExample"
                                >
                                    <div class="accordion-body">