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

@section('title','Contact us')

@section('style')
    <style>
        .google-map iframe {
            width: 100% !important;
        }

    </style>
@endsection

@section('content')
    <div id="wrapper">

        <section class="breadcrumb">
            <div class="container">
                <ul>
                    <li><a href="{{ mwz_route('frontend.index') }}">{{ __('frontend.home') }}</a></li>
                    <li class="active text-muted">{{ __('frontend.contact_us') }}</li>
                </ul>
            </div>
        </section>

        <section class="contact-us">
            @if (!empty($data['data_contact']))
                <div class="container">
                    <h2 style="text-align: center;" class="htitle">{{ __('frontend.contact_us') }}</h2>
                    <div class="g-map google-map">
                        {!! !empty($data['data_contact']['google_map']) ? $data['data_contact']['google_map'] : '' !!}
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="contact-form">
                                <h3 class="htitle">{{ __('frontend.leave_a_message_to_us') }}</h3>
                                <p>{{ __('frontend.we_will_contact_you_back_as_soon') }}</p>

                                {{-- <form> --}}
                                <form id="contactuss_frm" name="contactuss_frm" method="POST"
                                    onsubmit="setSaveContact(); return false;">

                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label>{{ __('frontend.name') }}</label>
                                            <input type="text" class="form-control" id="name" name="name"
                                                placeholder="{{ __('frontend.name') }}">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>{{ __('frontend.company_name') }}</label>
                                            <input type="text" class="form-control" name="company_name"
                                                placeholder="{{ __('frontend.company_name') }}">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>{{ __('frontend.email') }}</label>
                                            <input type="email" class="form-control" id="email" name="email"
                                                placeholder="{{ __('frontend.email') }}">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>{{ __('frontend.phone') }}</label>
                                            <input type="text" class="form-control" id="phone" name="phone"
                                                placeholder="{{ __('frontend.phone') }}">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group select-down-ic">
                                            <label>{{ __('frontend.subject') }}</label>
                                            <select id="inputState" class="form-control " name="subject">
                                                <option value="" selected>{{ __('frontend.subject') }} </option>
                                                @foreach ($data['data_subject_us'] as $k => $item)
                                                    <option value="{{ $item['id'] }}">{{ $item['subject'] }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label>{{ __('frontend.detail') }}</label>
                                            <textarea class="form-control" id="message" name="message" placeholder="{{ __('frontend.detail') }}"
                                                rows="3"></textarea>
                                        </div>
                                        <div class="mt-4">
                                            <input id="accept_policy" type="checkbox" name="accept_policy" value="1"/>
                                                <label for="accept_policy"> <span> {!! $data['data_policy'] !!}</span>
                                            </label>
                                        </div>

                                        <div class="col-6 df aic jcc">
                                            <div class="capcha mb-2 d-flex justify-content-center justify-content-md-start">
                                                <div class="g-recaptcha" data-callback="makeaction"
                                                    data-sitekey="6Lf34uQrAAAAAF5KJb3I-oohYPfw8UmNnX3WiTJS"></div>
                                            </div>
                                        </div>
                                        {{-- <div class="btn-about disabled"> --}}
                                        <div class="btn-about disabled">
                                            <span role="button">
                                                <a onclick=setSaveContact(); type="submit"><i
                                                        class="fas fa-chevron-right"></i>{{ __('frontend.send_massage') }}</a>

                                            </span>

                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="contact-list">
                                <div class="logo-contact">
                                    <img src="{{ asset('assets/images/logo.jpg') }}">
                                </div>
                                <ul>
                                    <li>
                                        <div class="contact-list-item">
                                            <div class="img"><img src="{{ asset('assets/images/c-1.png') }}">
                                            </div>
                                            <div class="detail">
                                                <h5>{{ __('frontend.address') }}</h5>
                                                {!! !empty($data['data_contact']['description']) ? $data['data_contact']['description'] : '' !!}
                                                {{-- <a target="_blank" class="link" style="color: #213285;" href="{{url('/map')}}">Download Map</a> --}}
                                            </div>
                                        </div>
                                    </li>

                                    <li>
                                        <div class="contact-list-item">
                                            <div class="img"><img src="{{ asset('assets/images/c-2.png') }}">
                                            </div>
                                            <div class="detail">
                                                <h5>{{ __('frontend.phone') }}</h5>
                                                <p><a
                                                        href="tel:{{ !empty($data['data_contact']['phone_head_office']) ? $data['data_contact']['phone_head_office'] : '' }}">{{ !empty($data['data_contact']['phone_head_office']) ? $data['data_contact']['phone_head_office'] : '' }}</a>
                                                </p>
                                            </div>
                                        </div>
                                    </li>

                                    <li>
                                        <div class="contact-list-item">
                                            <div class="img"><img src="{{ asset('assets/images/c-4.png') }}">
                                            </div>
                                            <div class="detail">
                                                <h5>{{ __('frontend.fax') }}</h5>
                                                <p><a
                                                        href="tel:{{ !empty($data['data_contact']['phone_factory']) ? $data['data_contact']['phone_factory'] : '' }}">{{ !empty($data['data_contact']['phone_factory']) ? $data['data_contact']['phone_factory'] : '' }}</a>
                                                </p>
                                            </div>
                                        </div>
                                    </li>

                                    <li>
                                        <div class="contact-list-item">
                                            <div class="img"><img src="{{ asset('assets/images/c-5.png') }}">
                                            </div>
                                            <div class="detail">
                                                <h5>{{ __('frontend.email') }}</h5>
                                                <p><a
                                                        href="tel:{{ !empty($data['data_contact']['email_head_office']) ? $data['data_contact']['email_head_office'] : '' }}">{{ !empty($data['data_contact']['email_head_office']) ? $data['data_contact']['email_head_office'] : '' }}</a>
                                                </p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>

                                <ul class="list-contact l-c-page-contact">
                                    @if (!empty($data['data_contact']['fb']))
                                        <li>
                                            <a href="{{ $data['data_contact']['fb'] }}" target="_blank"><img
                                                    src="{{ asset('assets/images/face.png') }}">
                                            </a>
                                        </li>
                                    @endif
                                    @if (!empty($data['data_contact']['youtube']))
                                        <li>
                                            <a href="{{ $data['data_contact']['youtube'] }}" target="_blank"><img
                                                    src="{{ asset('assets/images/twitter.png') }}">
                                            </a>
                                        </li>
                                    @endif
                                    @if (!empty($data['data_contact']['line']))
                                        <li>
                                            <a href="{{ $data['data_contact']['line'] }}" target="_blank"><img
                                                    src="{{ asset('assets/images/line.png') }}">
                                            </a>
                                        </li>
                                    @endif
                                    @if (!empty($data['data_contact']['instagram_url']))
                                        <li>
                                            <a href="{{ $data['data_contact']['instagram_url'] }}" target="_blank"><img
                                                    src="{{ asset('assets/images/instagram.png') }}">
                                            </a>
                                        </li>
                                    @endif
                                </ul>

                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </section>
    </div>

    <!-- Go to top button -->
    <a id="goToTop"><i class="fa fa-angle-up top-icon"></i><i class="fa fa-angle-up"></i></a>
@endsection

@section('script')

    <!--Jquery Sparkline js-->
    <script src="{{ URL::asset('assets/plugins/vendors/jquery.sparkline.min.js') }}"></script>

    <!-- File uploads js -->
    <script src="{{ URL::asset('assets/plugins/fileuploads/js/dropify.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/fileuploads/js/dropify-demo.js') }}"></script>

    <!--Select2 js -->
    <script src="{{ URL::asset('assets/plugins/select2/select2.full.min.js') }}"></script>

    <!--MutipleSelect js-->
    <script src="{{ URL::asset('assets/plugins/multipleselect/multiple-select.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/multipleselect/multi-select.js') }}"></script>

    <!--ckeditor js-->
    <script src="{{ URL::asset('assets/plugins/tinymce/tinymce.min.js') }}"></script>

    <!-- Notifications js -->
    <link href="{{ URL::asset('assets/plugins/notify-growl/css/jquery.growl.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/notify-growl/css/notifIt.css') }}" rel="stylesheet" />
    <script src="{{ URL::asset('assets/plugins/bootbox/bootbox.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/notify-growl/js/rainbow.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/notify-growl/js/jquery.growl.js') }}"></script>

    <!-- validator js -->
    <script src="{{ URL::asset('assets/plugins/validator/js/jquery.validate.min.js') }}"></script>

    <!-- mwz master js css -->
    <link rel="stylesheet" href="{{ mix('css/mwz.css') }}">
    <script src="{{ mix('js/mwz.js') }}"></script>

    <!-- module js css -->
    <link rel="stylesheet" href="{{ mix('css/frontend.css') }}">
    <script src="{{ mix('js/frontend.js') }}"></script>

    <script type="text/javascript">
        var check = 1;
        function makeaction() {
            if($('#accept_policy').prop('checked') == true){
                 $('.btn-about').removeClass('disabled');
            }
            check = 2;
        }
        
        $('#accept_policy').change(function(){
            if($(this).prop('checked') == true){
                if(check == 2){
                    $('.btn-about').removeClass('disabled');
                }
            }else{
                $('.btn-about').addClass('disabled');
            }
        })

        $('#bnchSelect').on('change', function(e) {
            var optionSelected = $(this).val();
            $('.tab-pane').removeClass('active');
            console.log(optionSelected);
            $('#' + optionSelected).addClass('active');
        });

        function setChangeGoogleMap(gmap_embed) {
            if (gmap_embed != "") {
                $('#gmap-iframe').attr('src', gmap_embed);
            }
        }
    </script>
    <script src='https://www.google.com/recaptcha/api.js?hl={{ app()->getLocale() }}'></script>
@endsection