@extends('template.main-template')

@section('content')
    <section class="custom-hero"></section>
    <div id="content">

        <!--======= CONATACT  =========-->
        <section class="padding-top-100 padding-bottom-50">
            <div class="container">
                <div class="contact-form">
                    <h5 class="text-center" style="font-size: 2.3em;">Installation & Maintenance</h5>
                    <div class="row">
                        <div class="col-md-12">

                            <!--======= Success Msg =========-->
                            @if (session('success'))
                                <div id="" class="success-msg">
                                    <i class="fa fa-paper-plane-o"></i>
                                    {{ session()->get('success') }}
                                </div>
                            @endif

                            @if ($errors->any())
                                <div id="" class="error-msg">
                                    <i class="fa-solid fa-circle-exclamation"></i>
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="our-team our-team-small  light-gray-bg padding-top-150 padding-bottom-80">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">

                        <!-- HEADING -->
                        <div class=" style-left">
                            <h4>Installing Your Permshield Floors</h4>
                        </div>
                    </div>

                    <!-- TEAM -->
                    <div class="col-lg-8">

                        <div class="row">
                            <p>Permshield floors are designed to keep things simple and save you time and money. Whether
                                you’re hiring a professional or planning to DIY, we have all the info you need to ensure
                                proper installation guidelines are followed.</p>
                        </div>

                        <div class="row">
                            <a target="_blank" href="{{ asset('resources/comum/Installation-Manual.pdf') }}"
                                class="btn margin-top-20">Download Installation Manual</a>
                        </div>

                    </div>
                </div>
            </div>
        </section>

        <section class="our-team our-team-small  padding-top-150 padding-bottom-80">
            <div class="container">
                <div class="row">

                    <div class="col-lg-4">

                        <!-- HEADING -->
                        <div class=" style-right">
                            <h4>Prepare Your Space and Subfloor</h4>
                        </div>
                    </div>

                    <!-- TEAM -->
                    <div class="col-lg-8">

                        <div class="row">
                            <p>To prepare your space for installing your new floors, all subfloors must be clean, flat, dry
                                and structurally sound. Ensure subfloor moisture levels have been tested and any issues have
                                been properly treated. Your floors should be installed in a climate-controlled environment.
                                See installation guidelines above for more detailed information.</p>
                        </div>

                    </div>

                </div>
            </div>
        </section>

        <section class="our-team our-team-small  light-gray-bg padding-top-150 padding-bottom-80">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">

                        <!-- HEADING -->
                        <div class=" style-left">
                            <h4>Cleaning & Maintenance </h4>
                        </div>
                    </div>

                    <!-- TEAM -->
                    <div class="col-lg-8">

                        <div class="row">
                            <p>Cleaning your Permshield floors is easy. Maintain the beauty of your floors through easy,
                                routine care. Follow the simple steps below and refer to the proper guidelines below for
                                more detailed instructions.</p>
                        </div>

                        <div class="row">
                            <a target="_blank" href="{{ asset('resources/comum/Care-and-Maintenance.pdf') }}"
                                class="btn margin-top-20">Download Care and Maintenance</a>
                        </div>

                    </div>
                </div>
            </div>
        </section>

        <section class="our-team our-team-small  padding-top-150 padding-bottom-80">
            <div class="container">
                <div class="row">

                    <div class="col-lg-4">

                        <!-- HEADING -->
                        <div class=" style-right">
                            <h4>Do's</h4>
                        </div>
                    </div>

                    <!-- TEAM -->
                    <div class="col-lg-8">

                        <div class="row">
                            <p>Choose a pH-neutral floor cleaner – nothing with a polish, detergent or other harmful
                                chemicals that could void your warranty and damage your floor. </p>
                            <p>We recommend Permshield cleaner.</p>
                        </div>

                    </div>

                </div>

                <div class="row margin-top-100">

                    <div class="col-lg-4">

                        <!-- HEADING -->
                        <div class=" style-right">
                            <h4>Don’ts</h4>
                        </div>
                    </div>

                    <!-- TEAM -->
                    <div class="col-lg-8">

                        <div class="row">
                            <p>It’s important to use the right cleaning products and tools. Avoid using products that
                                contain the words wax, polish, shine or citrus and don’t use vacuums with rotating beater
                                bars on any hard surface floors. Do not use steam mops on your flooring.</p>
                        </div>

                    </div>

                </div>
            </div>
        </section>

        <section class="our-team our-team-small  light-gray-bg padding-top-150 padding-bottom-80">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">

                        <!-- HEADING -->
                        <div class=" style-left">
                            <h4>First Use </h4>
                        </div>
                    </div>

                    <!-- TEAM -->
                    <div class="col-lg-8">

                        <div class="row">
                            <p>Before moving your furniture back into your space, you must remove installation dust.
                                First, sweep and dry mop your floor.</p>
                            <p>Then, damp mop with an approved cleaner. </p>
                            <p>Finally, damp mop with water only. </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="our-team our-team-small padding-top-150 padding-bottom-80">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">

                        <!-- HEADING -->
                        <div class=" style-left">
                            <h4>For Best Results</h4>
                        </div>
                    </div>

                    <!-- TEAM -->
                    <div class="col-lg-8">

                        <div class="row">
                            <p>It’s a good idea to use walk-off mats at entrances and doorways and non-staining floor
                                protectors under heavy furniture, chairs, and tables. Do not use any protectors or rugs with
                                rubber backing. </p>
                            <p>Always check care and maintenance guidelines specific to your product. </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="blog-list light-gray-bg blog-list-3 padding-top-150 padding-bottom-80">
            <div class="container">

                <article >
                    <div class="row" >
                        <div class="col-sm-8">
                            <!-- Post Img -->
                            <img class="img-responsive"
                                src="{{ asset('template/images/image-installation-and-maintenance-end-page.jpg') }}"
                                alt="">
                        </div>
                        <div class="col-sm-4" style="line-height: 200px;">
                            <!-- Tittle -->
                            <div class="post-tittle left"> <a href="#." class="tittle">Questions?</a>
                                <!-- Post Info -->
                            </div>
                            <!-- Post Content -->
                            <div class="text-left">
                                <p>Share your questions or feedbaks with us and find answers to frequently asked questions</p>
                                <a href="{{ route('pages.all', 'contact-us') }}" class="btn">Contact Us</a>
                                <a href="{{ route('pages.all', 'flooring-faqs') }}" class="btn btn-reverse">View FAQs</a>
                            </div>
                        </div>
                    </div>
                </article>

                {{-- <div class="row">
                    <div class="col-lg-8">

                        <div class="row">
                            <img src="{{ asset('template/images/image-installation-and-maintenance-end-page.jpg') }}"
                                alt="" class="img-responsive">
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div>
                            <h4>Questions?</h4>
                            <p>Share your questions or feedbak whith us and find answers to frequently asked questions.</p>
                        </div>
                    </div>
                </div> --}}
            </div>
        </section>


    </div>
@endsection

@push('javascript')
    <script>
        jQuery('.faq-q').click(function() {
            if (jQuery(this).siblings().find('.faq-a').is(':visible')) {
                jQuery(this).removeClass('faq-q-open');
                jQuery(this).siblings().find('.faq-a').removeClass('faq-a-open').slideUp();
            } else {
                jQuery(this).addClass('faq-q-open');
                jQuery(this).siblings().find('.faq-a').addClass('faq-a-open').slideDown();
            }
        })
    </script>
@endpush

@push('css')
    <style>
        .schema-faq-code {
            border: 1px solid #dedee0;
            border-radius: 10px;
            background-color: #fefbf9;
            overflow: hidden;
        }

        .schema-faq-code .faq-q {
            font-size: 14px;
            font-weight: bold;
            margin: 0;
            padding: 12px 56px 12px 12px;
            line-height: 1.4;
            cursor: pointer;
            position: relative;
            border-bottom: 1px solid #dedee0;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .faq-q:after {
            content: "+";
            position: absolute;
            top: 50%;
            right: 0;
            width: 56px;
            text-align: center;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            font-weight: bold;
            color: #000;
            font-size: 20px;
        }

        .faq-q.faq-q-open:after {
            content: "-";
        }

        .faq-a {
            margin: 0;
            padding: 12px;
            background-color: #fff;
            font-size: 14px;
            line-height: 1.4;
            border-bottom: 1px solid #dedee0;
            display: none;
        }

        .schema-faq-code .faq-question:last-child .faq-a {
            border-bottom: 0px;
        }
    </style>
@endpush