@extends('website.layouts.master')

@section('title')
    {{__('website-trans.Contact')}}
@endsection

@section('content')
    <div style="height: 120px;"></div>

    <!-- ============================================================== -->
    <!-- Contact Us Container -->
    <!-- ============================================================== -->
    <div class="container-fluid contact-us-container my-5">
        <div class="row">
            <div class="col-12 text-center">
                <div class="site-header">
                    <h2 class="site-blue-text">{{__('website-trans.Contact')}}</h2>
                    <div class="her-line"></div>
                    <div class="ver-line"></div>
                </div>
            </div>
        </div>
        <div class="row inner-wrapper">
            <div class="col-md-5">
                <h4>{{__('website-trans.footerMsg')}}</h4>
                <h4> {{__('website-trans.contactNumbers')}}</h4>
                <p class="mb-0"><span> <i class="fas fa-tty"></i> </span><a
                        href="tel:{{config('site.telephone')}}"
                        class="text-decoration-none text-muted">{{config('site.telephone')}}</a>
                </p>
                <p class="mb-0"><span> <i class="fas fa-fax"></i> </span><a
                        href="tel:{{config('site.phone')}}"
                        class="text-decoration-none text-muted">{{config('site.phone')}}</a></p>
                <p class="mb-0"><span> <i class="fas fa-mobile-alt"></i> </span><a
                        href="tel:{{config('site.salesPhone')}}"
                        class="text-decoration-none text-muted">{{config('site.salesPhone')}}</a></p>
                <p class="mb-0"><i class="fas fa-mobile-alt"></i> </span><a
                        href="tel:00966592918663"
                        class="text-decoration-none text-muted">00966592918663</a></p>
                <h4>{{__('website-trans.email')}}</h4>
                <p><a href="mailto:test@test.com" class="text-decoration-none text-muted">{{config('site.email')}}</a></p>
                <!--<h4>{{__('website-trans.address')}}</h4>-->
                <h4> {{__('website-trans.contactNumbers')}}</h4>
                <p class="text-muted"> <i class="fas fa-map-marker-alt"></i> <a target="_blank" href="https://www.google.com/maps/place/%D8%B1%D9%8A%D8%A7%D8%B6+%D8%A7%D9%84%D8%B7%D8%A8%D8%A7%D8%B9%D8%A9+Riyadh+Print%E2%80%AD/@24.6537034,46.7498547,17z/data=!3m1!4b1!4m5!3m4!1s0x3e2f037047980ecb:0xa0472d1204d4483d!8m2!3d24.6537034!4d46.7498547?hl=en-EG"> {{App::getLocale() == 'ar' ? config('site.address_ar') : config('site.address_en')}} </a> </p>
            </div>
            <div class="col-md-7">
                <form method="POST" action="{{route('connectWithUs')}}" class="needs-validation" novalidate>
                    @csrf
                    <div class="form-row">
                        <div class="col-md-6 mb-3">
                            <label for="validationTooltipName"></label>
                            <input type="text" class="form-control" name="name" id="validationTooltipName"
                                   placeholder="Name"
                                   required>
                            @error('name')
                            <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="validationTooltipEmail"></label>
                            <input type="email" name="email" class="form-control" id="validationTooltipEmail"
                                   placeholder="email@test.test" required>
                            @error('email')
                            <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-12 mb-5 ">
                            <label for="exampleFormControlTextarea1"></label>
                            <textarea class="form-control" name="message" placeholder="Your Message"
                                      rows="3" required></textarea>
                            @error('message')
                            <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="form-row button-wrapper">
                        <button class="btn btn-dark border-0 btn-lg px-5 " type="submit">Send</button>
                    </div>
                </form>
                <script>

                </script>
            </div>

            <div class="col-12 mt-5">
                <div id="map" style="width: 100%; height: 450px;">

                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- Contact Us Container End -->
    <!-- ============================================================== -->
@endsection

@section('js')
    <!-- Maps Script For This Page Only -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuTeg0_hKSuO9kaDmVU1rg-2RXi2ZNqRk"></script>
    <script>
        // ==========================================Brands Locations===============================
        //Store map location here
        var storeLocation = [
            new google.maps.LatLng(24.6537034, 46.747666),
            // new google.maps.LatLng(24.6071549,46.7417901),
            // new google.maps.LatLng(21.6057434,39.4999199),
            // new google.maps.LatLng(28.2550221,42.0073366),
            // new google.maps.LatLng(29.2463167,37.8333037),
            // new google.maps.LatLng(30.87929,40.1866097),
            // new google.maps.LatLng(29.9535816,40.2338066)
        ];
        //store location info here
        var storeInfo = [
            'https://www.google.com/maps/place/%D8%B1%D9%8A%D8%A7%D8%B6+%D8%A7%D9%84%D8%B7%D8%A8%D8%A7%D8%B9%D8%A9+Riyadh+Print%E2%80%AD/@24.6537034,46.747666,17z/data=!3m1!4b1!4m5!3m4!1s0x3e2f037047980ecb:0xa0472d1204d4483d!8m2!3d24.6537034!4d46.7498547?hl=en-EG',
            // 'https://www.google.com/maps/place/%D9%85%D8%B3%D8%AA%D8%B4%D9%81%D9%8A+%D8%A7%D9%84%D8%A3%D8%B2%D9%87%D8%B1+%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D8%B5%D9%8A%E2%80%AD/@30.0631638,31.3198485,15z/data=!4m5!3m4!1s0x0:0x673ac38a22cf771a!8m2!3d30.0544164!4d31.3141325',
            // 'https://www.google.com/maps/place/%D9%85%D8%B3%D8%AA%D8%B4%D9%81%D9%89+%D8%AF%D8%A7%D8%B1+%D8%A7%D9%84%D9%81%D8%A4%D8%A7%D8%AF+%D8%A8%D9%85%D8%AF%D9%8A%D9%86%D8%A9+%D9%86%D8%B5%D8%B1%E2%80%AD/@30.0631638,31.3198485,15z/data=!4m5!3m4!1s0x14583fb09c8bc065:0x67c232c16efa06f7!8m2!3d30.0686309!4d31.325506',
            // 'https://www.google.com/maps/place/%D9%85%D8%B3%D8%AA%D8%B4%D9%81%D9%8A+%D8%A7%D9%84%D8%A3%D8%B2%D9%87%D8%B1+%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D8%B5%D9%8A%E2%80%AD/@30.0631638,31.3198485,15z/data=!4m5!3m4!1s0x0:0x673ac38a22cf771a!8m2!3d30.0544164!4d31.3141325',
            // 'https://www.google.com/maps/place/%D9%85%D8%B3%D8%AA%D8%B4%D9%81%D9%89+%D8%AF%D8%A7%D8%B1+%D8%A7%D9%84%D9%81%D8%A4%D8%A7%D8%AF+%D8%A8%D9%85%D8%AF%D9%8A%D9%86%D8%A9+%D9%86%D8%B5%D8%B1%E2%80%AD/@30.0631638,31.3198485,15z/data=!4m5!3m4!1s0x14583fb09c8bc065:0x67c232c16efa06f7!8m2!3d30.0686309!4d31.325506',
            // 'https://www.google.com/maps/place/%D9%85%D8%B3%D8%AA%D8%B4%D9%81%D9%8A+%D8%A7%D9%84%D8%A3%D8%B2%D9%87%D8%B1+%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D8%B5%D9%8A%E2%80%AD/@30.0631638,31.3198485,15z/data=!4m5!3m4!1s0x0:0x673ac38a22cf771a!8m2!3d30.0544164!4d31.3141325',
            // 'https://www.google.com/maps/place/%D9%85%D8%B3%D8%AA%D8%B4%D9%81%D9%89+%D8%AF%D8%A7%D8%B1+%D8%A7%D9%84%D9%81%D8%A4%D8%A7%D8%AF+%D8%A8%D9%85%D8%AF%D9%8A%D9%86%D8%A9+%D9%86%D8%B5%D8%B1%E2%80%AD/@30.0631638,31.3198485,15z/data=!4m5!3m4!1s0x14583fb09c8bc065:0x67c232c16efa06f7!8m2!3d30.0686309!4d31.325506',

        ];
    </script>

    <!-- Script For This Page Only -->
    <script src="{{asset('website/assets/js/private-map.js')}}"></script>
@endsection