@extends('layout.app')

@section('page-title', 'Sunbrella Fabric Colors')

@section('breadcrumb')
    <div class="tf-breadcrumb">
        <div class="container">
            <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
                <div class="tf-breadcrumb-list">
                    <a href="{{ url('/new-design/home.php') }}" class="text">Home</a>
                    <i class="icon icon-arrow-right"></i>
                    <a href="{{ url('/new-design/home.php') }}" class="text">About</a>
                    <i class="icon icon-arrow-right"></i>
                    <span class="text">{{ $colorTitle }} Fabric Colors</span>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div id="fabric-colors" class="wt-pages">
        
        <!-- Fabric Colors -->
        <section class="flat-spacing-wt">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                        <p class="note">
                            {{ $colorTitle }}@if($isSunbrella)&reg;@endif<br>
                            Fabric Colors
                        </p>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="tf-grid-layout md-col-indented">
                    <div class="vertical-line" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                    </div>
                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                        <div class="description">
                            @if($isSunbrella)
                                Soften your outdoor seating with plush pillows and cushions and give your space a pop of color. With a breadth of colors, patterns, and textures, Sunbrella fabrics infuse outdoor spaces with lasting style and strength. Not all available colors are listed.
                            @endif
                            If you do not see the color you want, please <a href="{{ url('new-design/contact_us.php') }}">Contact Us</a> for availability.
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="tf-grid-layout md-col-indented">
                    <div class="vertical-line" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                    </div>
                    <div class="tf-grid-layout md-col-6">
                        @foreach($fabricColors as $fabricColor)
                            <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                                <img class="lazyload img-fabric-color"
                                    src="{{ $fabricColor['img_src'] }}"
                                    alt="Color {{ $fabricColor['color_no_code'] }}"
                                >
                                <div class="cushion-color-name text-center">
                                    {{ $fabricColor['color_no_code'] }}
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
        <!-- /Fabric Colors -->

        <!-- What's inside -->
        <section class="flat-spacing-wt">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                        <p class="note">
                            What's inside the <br>
                            Westminster Teak Cushion&reg;
                        </p>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="tf-grid-layout md-col-indented">
                    <div class="vertical-line" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                    </div>
                    <div class="tf-grid-layout md-col-1-2">
                        <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                            <p class="cushion-title">1 Cushion Cover (Sunbrella&reg;)</p>
                            <p class="cushion-description">100% Solution-Dyed Acrylic fabric, UV, mildew and fade resistant.</p>

                            <p class="cushion-title">2 Mesh Fabric Lining</p>
                            <p class="cushion-description">Keeps cushion shape intact and help ease in replacing covers.</p>

                            <p class="cushion-title">3 Polyester Non-Woven Wrap</p>
                            <p class="cushion-description">Additional comfort and support.</p>

                            <p class="cushion-title">4 Quick Dry Foam&reg;</p>
                            <p class="cushion-description">High-performance foam core for quick drying and better airflow.</p>

                            <p class="cushion-title">5 Open Weave Mesh Fabric</p>
                            <p class="cushion-description">Allows water to quickly drain out of the cushion.</p>
                        </div>
                        <div class="tf-content-wrap wow fadeInUp text-center" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                            <img class="lazyload img-inside-cushion"
                                src="{{ url('/new-design/images/pages/fabric-colors/what-is-inside-cushion.png') }}"
                                alt="what-is-inside-cushion"
                            >
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /What's inside -->

        <!-- Trustpilot -->
        <section class="flat-spacing-wt">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp text-center" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                        <!-- TrustBox script -->
                        <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
                        <!-- End TrustBox script -->
                        <!-- TrustBox widget - Grid -->
                        <div class="trustpilot-widget" data-locale="en-US" data-template-id="539adbd6dec7e10e686debee" data-businessunit-id="47783f620000640005020fa2" data-style-height="700px" data-style-width="100%" data-review-languages="en">
                            <a href="https://www.trustpilot.com/review/www.westminsterteak.com" target="_blank" rel="noopener">Trustpilot</a>
                        </div>
                        <!-- End TrustBox widget -->
                    </div>
                </div>
            </div>
        </section>
        <!-- /Trustpilot -->

    </div>
@endsection