@extends('frontend.layouts.app')
@section('page_content')
<script src="{{asset('frontend/vendor/sweetalert2/dist/sweetalert2.min.js')}}"></script>
<link rel="stylesheet" href="{{asset('frontend/vendor/sweetalert2/dist/sweetalert2.min.css')}}">
<script>
    function updateFeatureProject(icon, title, text) {
        Swal.fire({
            icon: icon,
            title: title,
            text: text,
        });
    }
</script>
<link rel='stylesheet' href="{{asset('frontend/vendor/intl-tel/css/intlTelInput.css')}}">
<div class="inner_page_with_banner contact_template">

    <div class="bg_image">
        @if(file_exists($contact->banner_image))
        <img src="{{asset($contact->banner_image)}}" alt="contact_banner" class="w-100">
        @else
        <img src="{{asset('frontend/images/contact_banner.png')}}" alt="contact_banner" class="w-100">
        @endif
    </div>

    <section class="main_content">
        <section class="breadcrumb_sec header-width">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('index')}}">Home</a></li>
                <li class="breadcrumb-item active">Contact us</li>
            </ol>
        </section>
        <div class="container mb-3">
            <div class="row justify-content-center">
                <div class="col-lg-5 col-md-9 text-center">
                    <h2 class="fs-50 mb-0 fw-s-bold text-white">{{LangTranslate::translate($contact->title ?? '',$contact->ar_title ?? '') ?? 'Contact us'}}</h2>
                    <div class="text-white fs-14"> {!! LangTranslate::translate($contact->description ?? '',$contact->ar_description ?? '') ?? '' !!} </div>
                </div>
            </div>
        </div>
        <div class="container pb-5">
            <div class="row contact_cards">
                <div class="col-lg-4">
                    <div class="address_card">
                        <div class="title">
                            <h3>UAE</h3>
                        </div>
                        <div class="desc">
                            <p class="lg">{{LangTranslate::translate($contact->uae_title ?? '',$contact->ar_uae_title ?? '') ?? 'Enpower Electronics LLC'}}</p>
                            <ul>
                                <li><i class="fa fa-phone"></i>
                                    @if(!empty($contact->uae_phone))
                                        <a href="tel:{{ $contact->uae_phone }}">{{ $contact->uae_phone }}</a>
                                    @endif
                                    @if(!empty($contact->uae_alternate_phone))
                                       , <a href="tel:{{ $contact->uae_alternate_phone }}">{{ $contact->uae_alternate_phone }}</a>
                                    @endif
                                </li>
                                @if(!empty($contact->uae_email))
                                    <li><i class="fa fa-envelope"></i>
                                        <a href="mailto:{{ $contact->uae_email }}">{{ $contact->uae_email }}</a>
                                    </li>
                                @endif
                                @if(!empty($contact->uae_address))
                                    <li><i class="fa fa-map-marker"></i>{{ LangTranslate::translate($contact->uae_address ?? '',$contact->ar_uae_address ?? '') }}</li>
                                @endif
                            </ul>
                            <a href="{{$contact->uae_link}}" target="_blank" class="map_link"><img src="{{asset('frontend/images/icons/google_map.png')}}"></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="address_card">
                        <div class="title">
                            <h3>INDIA</h3>
                        </div>
                        <div class="desc">
                            <p class="lg">{{LangTranslate::translate($contact->ia_title ?? '',$contact->ia_title ?? '') ?? 'Enpower Electronics LLC'}}</p>
                            <ul>
                                <li><i class="fa fa-phone"></i>
                                    @if(!empty($contact->ai_phone))
                                        <a href="tel:{{ $contact->ai_phone }}">{{ $contact->ai_phone }}</a>
                                    @endif
                                    @if(!empty($contact->ia_alternate_phone))
                                       , <a href="tel:{{ $contact->ia_alternate_phone }}">{{ $contact->ia_alternate_phone }}</a>
                                    @endif
                                </li>
                                @if(!empty($contact->ai_email))
                                    <li><i class="fa fa-envelope"></i>
                                        <a href="mailto:{{ $contact->ai_email }}">{{ $contact->ai_email }}</a>
                                    </li>
                                @endif
                                @if(!empty($contact->ai_address))
                                    <li><i class="fa fa-map-marker"></i>{{ LangTranslate::translate($contact->ai_address ?? '',$contact->ar_ai_address ?? '') }}</li>
                                @endif
                            </ul>
                            <a href="{{$contact->ia_link}}" target="_blank" class="map_link"><img src="{{asset('frontend/images/icons/google_map.png')}}"></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="contact_form">
                        <h3>Get In Touch</h3>
                        <form method="post" id="contactDetailsForm">
                            @csrf
                            <input type="hidden" name="type" value="1">
                            <div class="form-group">
                                <label for="email">E-MAIL*</label>
                                <input type="email" class="form-control" name="email" required id="email" placeholder="Enter Email ID">
                            </div>
                            <div class="form-group">
                                <label for="phone">Phone*</label>
                                <input type="text" class="form-control" id="phone" name="phone" required placeholder="Phone *">
                            </div>
                            <div class="form-group">
                                <label for="subject">SUBJECT*</label>
                                <input type="text" class="form-control" name="submit" required id="subject" placeholder="Enter Subject">
                            </div>
                            <div class="form-group">
                                <label for="message">MESSAGE*</label>
                                <textarea class="form-control" id="message" name="message" required placeholder="Enter Message"></textarea>
                            </div>
                            <button type="submit" id="sendBtnContact" class="btn btn-green">Send Message</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<script src="{{asset('frontend/vendor/sweetalert2/dist/sweetalert2.all.min.js')}}"></script>

<!-- Include a polyfill for ES6 Promises (optional) for IE11 -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>

<script>
    $('#contactDetailsForm').submit(function (eve) {  
        eve.preventDefault();
        $("#sendBtnContact").text('Sending wait...');
        $.ajax({
            type: "POST",
            url: "{{route('admin.contact.details.save')}}",
            data: $(this).serialize(),
            dataType: "JSON",
            success: function (response) {
                console.log(response);
                $("#sendBtnContact").text('Send Message');
                if(response.res == true){
                    updateFeatureProject('success', response.title, response.message);
                }else{
                    updateFeatureProject('error', response.title, response.message);
                }
                $('#contactDetailsForm').trigger('reset');
            }
        });
    });
</script>
@endsection
@section('page_script')
    <script>
        $(window).scroll(function () {
            var scroll = $(window).scrollTop();
            if (scroll >= 120) {
                $(".desktop_menu").addClass("desktop_menu_fixed");
            } else {
                $(".desktop_menu").removeClass("desktop_menu_fixed");
            }
        });
    </script>
    <script src="{{asset('frontend/vendor/intl-tel/js/intlTelInput.js')}}"></script>
    <script>
        $("#phone").intlTelInput({
            //       allowDropdown: false,
            //       autoHideDialCode: false,
            //       autoPlaceholder: "off",
            //       dropdownContainer: "body",
            //       excludeCountries: ["us"],
            //       formatOnDisplay: false,
            hiddenInput: "full_number",
            //       initialCountry: "auto",
            //       nationalMode: false,
            //       onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
            //        placeholderNumberType: "MOBILE",
            preferredCountries: ['ae', 'in'],
            separateDialCode: true,
            // utilsScript: "intl-tel/js/utils.js"
            utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
        });
    </script>
@endsection