@extends('layouts.base')

@section('content')
    <div class="page-container">
        <div class="page-content-wrapper h-100">
            <div class="row no-margin h-100">
                <div class="col no-padding">
                    <div class="content no-padding overflow-hidden h-100">
                        <div class="container-fluid no-padding h-100">
                            <div class="row h-100 no-margin parentContainer">
                                <div class="col-8 bg-master-lightest d-md-none position-fixed h-100" v-if="$store.getters.isShowing('sideMenu')" style="z-index: 9999" >
                                    @include('partials.menu')
                                </div>
                                <div class="col-3 bg-master-lightest d-none d-md-inline" >
                                    @include('partials.menu')
                                </div>
                                <div class="col col-md-9">
                                    <div class="absolute bg-master w-100 h-100" style="opacity: 0.3; z-index:9998; left:0;" v-if="$store.getters.isShowing('sideMenu')"></div>
                                    @include('partials.header')
                                    <div class="row no-margin p-b-50">
                                        <div class="col p-t-15 p-b-25">
                                            @yield('inner_content')
                                        </div>
                                    </div>
                                </div>
                                <div class="modal modalContainer fade fill-in" data-type="contactUs">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-body">
                                                <div class="row text-center ">
                                                    <div class="col">
                                                        <div class="row">
                                                            <div class="col bg-info">
                                                                <div class="row m-t-10">
                                                                    <div class="col"></div>
                                                                    <div class="col-auto">
                                                                        <i class="fa fa-times pointer fs-16 text-white" data-dismiss="modal"></i>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col p-l-25 p-r-25 p-b-25 p-t-0">
                                                                        <h3 class="m-t-0 text-center bold text-white">Contact Us</h3>
                                                                        <h6 class="text-white text-center no-margin fs-14">Want to get in touch? We'd love to hear from you. Here's how you can reach us...</h6>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row d-none d-md-flex">
                                                            <div class="col bg-info">
                                                                <div class="row justify-content-center">
                                                                    <div class="col-11">
                                                                        <div class="row">
                                                                            <div class="col bg-white p-t-25 p-l-25 p-r-25 p-b-10 m-r-15" style="border-radius: 10px 10px 0 0;">
                                                                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                                                                     width="50" height="50"
                                                                                     viewBox="0 0 172 172"
                                                                                     style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#000000"><path d="M152.865,123.63844l-8.16463,22.47556c-2.03444,5.59806 -8.21031,8.44413 -13.81106,6.42044c-14.06906,-5.08206 -40.57588,-17.3505 -67.32456,-44.09919c-26.74869,-26.74869 -39.01981,-53.25281 -44.10188,-67.32188c-2.02369,-5.60075 0.82238,-11.77931 6.42044,-13.81106l22.47556,-8.16463c2.22525,-0.80894 4.71388,-0.06719 6.13556,1.8275l19.21025,25.61187c1.51037,2.01563 1.42169,4.81062 -0.21769,6.72144l-13.31925,15.53912c0,0 5.56581,11.3735 18.59481,24.4025c13.029,13.029 24.4025,18.59481 24.4025,18.59481l15.53912,-13.31925c1.9135,-1.63938 4.7085,-1.73075 6.72144,-0.21769l25.61188,19.21025c1.892,1.41631 2.63375,3.90763 1.8275,6.13019z"></path></g></g></svg>
                                                                            </div>
                                                                            <div class="col bg-white  p-t-25 p-l-25 p-r-25 p-b-10" style="border-radius: 10px 10px 0 0;">
                                                                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                                                                     width="50" height="50"
                                                                                     viewBox="0 0 172 172"
                                                                                     style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#000000"><path d="M86,6.88c-43.68531,0 -79.12,33.02938 -79.12,73.96c0,21.67469 9.97063,41.96531 27.52,56.07469v30.27469l29.58938,-15.48c7.21594,2.05594 14.44531,2.74125 22.01062,2.74125c43.68531,0 79.12,-33.01594 79.12,-73.96c0,-40.58125 -35.43469,-73.61063 -79.12,-73.61063zM93.91469,105.26938l-19.95469,-21.33875l-37.15469,20.98937l41.28,-43.68531l20.30406,20.29063l36.12,-20.29063z"></path></g></g></svg>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col bg-white">
                                                                <div class="row justify-content-center">
                                                                    <div class="col-11">
                                                                        <div class="row">
                                                                            <div class="col-12 col-md p-l-25 p-r-25 p-b-25 m-r-15" style="border-radius: 10px 10px 0 0;">
                                                                                <h4 class="text-center">Talk To us</h4>
                                                                                <p>Just pick up the phone to chat with us.</p>
                                                                                <h6 class="text-center text-primary bold">+60 18 290 9252</h6>
                                                                            </div>
                                                                            <div class="col-12 col-md p-l-25 p-r-25 p-b-25" style="border-radius: 10px 10px 0 0;">
                                                                                <h4 class="text-center">Contact Customer Service</h4>
                                                                                <p>Just click the Messenger button at the bottom right corner to chat with us.</p>
                                                                                <h6 class="text-center">Don't worry, we are here for you.</h6>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @include('partials.footer')
        </div>
    </div>

@endsection
