@extends('frontend::layouts.master')
@section('content')

<!-- Page Title -->
<!-- <section id="page-title" class="page-title-dark"
    style="background-image: url('{{ asset('assets/frontend/images/bg-about.jpg') }}');">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                <h2 class="m-b-0">Service</h2>
                <p class="">Pro Part Distributor Co., Ltd.</p>
            </div>
        </div>
        <nav class="breadcrumb-container">
            <div class="container">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('frontend.index') }}">หน้าหลัก</a>
                    </li>
                    <li class="breadcrumb-item active">
                        <a href="#">เกี่ยวกับเรา</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</section> -->

<div id="slider" class="carousel subpage-hero-slider" data-items="1" data-autoplay="2000">
    <div class="slide">
        <a href="#"><img src="{{ Module::asset('frontend:images/1920x500.jpg') }}" alt=""></a>
    </div>
    <div class="slide">
        <iframe src="https://www.youtube.com/embed/p1gmh3IBCoo?si=YvQC-mg50KChYMEP" title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </div>
</div>

<section class="no-padding">
    <nav class="breadcrumb-container">
        <div class="container">
            <ul class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('frontend.index') }}">Home</a>
                </li>
                <li class="breadcrumb-item active">
                    <a href="#">Service</a>
                </li>
            </ul>
        </div>
    </nav>
</section>

<section class="page-service p-t-40">
    <div class="container">

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 m-b-40 text-center">
                <!-- <h2 class="section-title text-center">Our Service</h2> -->
                <h3>We are the service provider for energy solutions<br>including energy saving and cost reduction.</h3>
            </div>
        </div>

        <div class="row m-b-60">
            <div class="col-xs-12 col-sm-12 col-md-6 cleft">
                <img src="{{ Module::asset('frontend:images/mockup.jpg') }}" class="w100">
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 cright align-content-middle">
                <h4 class="htitle">Our Service Support</h4>
                <h5 class="m-b-20">We provide a rental service of rooftop solar power system including installation and
                    maintenance
                </h5>
                <p><strong>ITC ENEX (Thailand) Co., Ltd.</strong> provides a rental service of the rooftop solar power
                    system without initial investment. The advantages of the service are electricity cost reduction and
                    CO<sub>2</sub> free. We install the solar power system and provide maintenance service throughout
                    the contract period of approximately 10-13 years. After the contract termination, the solar power
                    system will be transferred to the customer.</p>
                <!-- <a href="" class="btn-see-more m-t-10">More Details</a> -->
            </div>
        </div>

        <!-- <div class="row m-b-60 flex-row-reverse">
            <div class="col-xs-12 col-sm-12 col-md-6 cleft">
                <img src="{{ Module::asset('frontend:images/mockup.jpg') }}" class="w100">
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 cright align-content-middle">
                <h4 class="htitle">7 STEPS TO INSTALL A SOLAR POWER SYSTEM</h4>
                <h5 class="m-b-20">Here is the process of the solar power system installation.</h5>
                <p><strong>ITC ENEX (Thailand) Co., Ltd.</strong> will install the solar panels and equipment on the customer's building
                    rooftop or ground and have them rent to the customer, as well as, take care of them until the expiry
                    of the contract.</p>
                    <a href="" class="btn-see-more m-t-10">More Details</a>
            </div>
        </div>

        <div class="row m-b-60">
            <div class="col-xs-12 col-sm-12 col-md-6 cleft">
                <img src="{{ Module::asset('frontend:images/mockup.jpg') }}" class="w100">
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 cright align-content-middle">
                <h4 class="htitle">ABOUT SOLAR POWER SYSTEM</h4>
                <h5 class="m-b-20">Solar energy is one of the renewable energy which generates power by sunlight with various benefits.</h5>
                <p>Solar energy is the renewable and eco-rich energy source available. Solar power system has proved to be beneficial – both for the future society</p>
                <a href="" class="btn-see-more m-t-10">More Details</a>
            </div>
        </div> -->

        <div class="row page-service-usecase m-t-80">
            <div class="col-xs-12 col-sm-12 col-md-12 headbar">
                <h3 class="htitle m-b-0">Use Cases</h3>
                <a href="{{ route('frontend.use-case') }}" class="text-link">View All <i class="icon-chevron-right"></i> </a>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 cleft">
                <div class="carousel" data-items="4" data-autoplay="2000" data-margin="20">
                                        <div class="use-case-card">
                        <div class="card-image">
                            <a href="{{ route('frontend.use-case-detail') }}"><img src="{{ Module::asset('frontend:images/mockup.jpg') }}"
                                    alt="Healthcare"></a>
                        </div>
                        <div class="card-content">
                            <h4><a href="#">Consolidated Financial Results for the 3th Quarter of FY2020 </a></h4>
                            <p>It is a long established fact that a reader will be distracted by the readable content of
                                a page when looking at its layout.
                            </p>
                            <a href="{{ route('frontend.use-case-detail') }}" class="btn-see-more">See More</a>
                        </div>
                    </div>
                                        <div class="use-case-card">
                        <div class="card-image">
                            <a href="{{ route('frontend.use-case-detail') }}"><img src="{{ Module::asset('frontend:images/mockup.jpg') }}"
                                    alt="Healthcare"></a>
                        </div>
                        <div class="card-content">
                            <h4><a href="#">Consolidated Financial Results for the 3th Quarter of FY2020 </a></h4>
                            <p>It is a long established fact that a reader will be distracted by the readable content of
                                a page when looking at its layout.
                            </p>
                            <a href="{{ route('frontend.use-case-detail') }}" class="btn-see-more">See More</a>
                        </div>
                    </div>
                                        <div class="use-case-card">
                        <div class="card-image">
                            <a href="{{ route('frontend.use-case-detail') }}"><img src="{{ Module::asset('frontend:images/mockup.jpg') }}"
                                    alt="Healthcare"></a>
                        </div>
                        <div class="card-content">
                            <h4><a href="#">Consolidated Financial Results for the 3th Quarter of FY2020 </a></h4>
                            <p>It is a long established fact that a reader will be distracted by the readable content of
                                a page when looking at its layout.
                            </p>
                            <a href="{{ route('frontend.use-case-detail') }}" class="btn-see-more">See More</a>
                        </div>
                    </div>
                                        <div class="use-case-card">
                        <div class="card-image">
                            <a href="{{ route('frontend.use-case-detail') }}"><img src="{{ Module::asset('frontend:images/mockup.jpg') }}"
                                    alt="Healthcare"></a>
                        </div>
                        <div class="card-content">
                            <h4><a href="#">Consolidated Financial Results for the 3th Quarter of FY2020 </a></h4>
                            <p>It is a long established fact that a reader will be distracted by the readable content of
                                a page when looking at its layout.
                            </p>
                            <a href="{{ route('frontend.use-case-detail') }}" class="btn-see-more">See More</a>
                        </div>
                    </div>
                                        <div class="use-case-card">
                        <div class="card-image">
                            <a href="{{ route('frontend.use-case-detail') }}"><img src="{{ Module::asset('frontend:images/mockup.jpg') }}"
                                    alt="Healthcare"></a>
                        </div>
                        <div class="card-content">
                            <h4><a href="#">Consolidated Financial Results for the 3th Quarter of FY2020 </a></h4>
                            <p>It is a long established fact that a reader will be distracted by the readable content of
                                a page when looking at its layout.
                            </p>
                            <a href="{{ route('frontend.use-case-detail') }}" class="btn-see-more">See More</a>
                        </div>
                    </div>
                                        <div class="use-case-card">
                        <div class="card-image">
                            <a href="{{ route('frontend.use-case-detail') }}"><img src="{{ Module::asset('frontend:images/mockup.jpg') }}"
                                    alt="Healthcare"></a>
                        </div>
                        <div class="card-content">
                            <h4><a href="#">Consolidated Financial Results for the 3th Quarter of FY2020 </a></h4>
                            <p>It is a long established fact that a reader will be distracted by the readable content of
                                a page when looking at its layout.
                            </p>
                            <a href="{{ route('frontend.use-case-detail') }}" class="btn-see-more">See More</a>
                        </div>
                    </div>
                                        <div class="use-case-card">
                        <div class="card-image">
                            <a href="{{ route('frontend.use-case-detail') }}"><img src="{{ Module::asset('frontend:images/mockup.jpg') }}"
                                    alt="Healthcare"></a>
                        </div>
                        <div class="card-content">
                            <h4><a href="#">Consolidated Financial Results for the 3th Quarter of FY2020 </a></h4>
                            <p>It is a long established fact that a reader will be distracted by the readable content of
                                a page when looking at its layout.
                            </p>
                            <a href="{{ route('frontend.use-case-detail') }}" class="btn-see-more">See More</a>
                        </div>
                    </div>
                                        <div class="use-case-card">
                        <div class="card-image">
                            <a href="{{ route('frontend.use-case-detail') }}"><img src="{{ Module::asset('frontend:images/mockup.jpg') }}"
                                    alt="Healthcare"></a>
                        </div>
                        <div class="card-content">
                            <h4><a href="#">Consolidated Financial Results for the 3th Quarter of FY2020 </a></h4>
                            <p>It is a long established fact that a reader will be distracted by the readable content of
                                a page when looking at its layout.
                            </p>
                            <a href="{{ route('frontend.use-case-detail') }}" class="btn-see-more">See More</a>
                        </div>
                    </div>
                                    </div>
            </div>
        </div>

        <div class="row page-service-button" style="margin-top: 120px;">
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                <a href="{{ route('frontend.contact') }}" class="btn btn-lg btn-outline">Contact us</a>
                <a href="{{ route('frontend.request-document') }}" class="btn btn-lg m-l-20">Request Document</a>
            </div>

        </div>

    </div>
</section>

@endsection