@extends('front.layout.master')

@section('content')
<style>
    html {
  scroll-behavior: smooth;
}
</style>
<!-- begin:: hero -->
{{-- <div class="hero">
    <div class="slider-hero owl-carousel owl-theme">
        @foreach(@$sliders as $slider)
        <div class="item-slider" style="background: url('{{ url('image/' . $slider->image->path ) }}');background-repeat: no-repeat;background-size: cover;background-position: center;">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6 mx-auto">
                        <div class="hero-content">
                            <h1 class="hero-title">{{ @$slider->subject }}</h1>
                            <h3 class="hero-text">{{ @$slider->description }}</h3>
                            @if(@$slider->url)
                                <a class="hero-action" href="{{ @$slider->url }}" target="_blank">@lang('inquire_now')</a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach

    </div>
</div> --}}
<!-- end:: hero -->
<section class="section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 order-1 order-lg-0">
                <h2 class="title-section text-left">About us</h2>
                <div class="text-justify">
                    <p class="mb-2">{!!@$item->content!!}</p>
                </div>
            </div>
            <div class="col-lg-6 order-0 order-lg-1 mb-3" style="background-color:#493bd3  ">
                <img src="{{ asset('frontAssets/images/logo.svg') }}" alt="">
            </div>
        </div>
    </div>
</section>
<section class="section py-0">
    <div class="bg-general py-5">
        <div class="container">
            <div class="d-lg-flex align-items-center">
                <div class="col">
                    <h2 class="h1 text-left text-white mb-3">join our platform</h2>
                    <p class="text-white">Welcome to our company! We're so excited to have you as part of our team.
                    </p>
                </div>
                <div class="col-auto">
                    <a href="{{route('platform')}}" class="btn bg-white rounded-pill px-5">Join us</a>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="main-content" >
    <div class="container">
        <div class="portlet">
            <div class="portlet__body">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="main-title text-left">@lang('contact_information')</div>
                        <hr class="mt-2 mb-3" />
                        <div class="card-papper-content">
                            <div class="card-contact">
                                <ul>
                                    {{-- @dd($settings) --}}
                                    <li>{{ @$settings->valueOf('address') }}</li>

                                </ul>
                            </div>
                            <div class="card-contact">
                                <ul>
                                    <li>{{ @$settings->valueOf('phone') }}</li>
                                    <li>{{ @$settings->valueOf('email') }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6" id="#contact">
                        <div class="main-title text-left">@lang('contact_form')</div>
                        <hr class="mt-2 mb-3" />
                        <div class="card-papper-content">
                            <form class="contact_form" action="{{ route('support.store') }}" method="post">
                                <div class="d-none" id="errors"></div>

                                @csrf
                                <div class="form-group">
                                    <label>@lang('name')</label>
                                    <input class="form-control" type="text" name="name" />
                                </div>
                                <div class="form-group">
                                    <label>@lang('email')</label>
                                    <input class="form-control" type="text" name="email" />
                                </div>
                                <div class="form-group">
                                    <label>@lang('message')</label>
                                    <textarea class="form-control" rows="6" name="message"></textarea>
                                </div>
                                <div class="form-group">
                                    <button class="general_btn_lg" type="submit">@lang('send')</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<section class="section h-100 bg-white">
    <div class="container-fluid">
        <div class="row justify-content-center">
            {{-- <div class="col-lg-4 pt-5">
                <ul class="list-contact mb-4 pb-2">
                    <li class="item-contact mb-3">
                        <span class="item-contact-icon text-dark"><i class="fas fa-phone-alt"></i></span><span
                            class="item-contact-text text-dark">{{@$settings->valueof('phone')}}</span>
                    </li>
                    <li class="item-contact mb-3">
                        <span class="item-contact-icon text-dark"><i class="far fa-at"></i></span><span
                            class="item-contact-text text-dark">{{@$settings->valueof('email')}}</span>
                    </li>
                    <li class="item-contact mb-3">
                        <span class="item-contact-icon text-dark"><i class="fas fa-map-marker-alt"></i></span><span
                            class="item-contact-text text-dark">{{@$settings->valueof('address')}}</span>
                    </li>
                </ul>
                <ul class="social-media mt-3">
                    @if(! empty(@$settings->valueOf('facebook')))
                    <li>
                        <a class="fa" href="{{@$settings->valueOf('facebook')}}"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    @endif
                    @if(! empty(@$settings->valueOf('twitter')))
                    <li>
                        <a class="tw" href="{{@$settings->valueOf('twitter')}}"><i class="fab fa-twitter"></i></a>
                    </li>

                    @endif
                @empty(!@$settings->valueof('youtube'))
                    <li>
                        <a class="pi" href="{{@$settings->valueOf('youtube')}}"><i class="fab fa-youtube"></i></a>
                    </li>
                    @endempty
                    @empty(!@$settings->valueof('linkedIn'))
                    <li>
                        <a class="in" href="{{@$settings->valueOf('linkedIn')}}"><i class="fab fa-linkedin-in"></i></a>
                    </li>
                    @endempty
                    @empty(!@$settings->valueof('whatsapp'))
                    <li>
                        <a class="bg-success" href="{{@$settings->valueOf('whatsapp')}}"><i class="fab fa-whatsapp"></i></a>
                    </li>
                    @endempty

                </ul>
            </div> --}}
            <div class="col-lg-12">
                <div id="map" class="shadow rounded"></div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('js')
    <script>
        // Initialize and add the map
        function initMap() {
            // The location of Uluru
            var uluru = { lat: parseFloat({{ @$settings->valueOf('latitude') }}), lng: parseFloat({{ @$settings->valueOf('longitude') }}) };
            // The map, centered at Uluru
            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 12,
                center: uluru,
                mapTypeControl: true,
mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
  position: google.maps.ControlPosition.TOP_LEFT,

}
            });
            var mapOptions = {disableDefaultUI: true}

            // The marker, positioned at Uluru
            var marker = new google.maps.Marker({
                position: uluru,
                map: map,

                icon: "{{ asset('frontAssets/images/marker.png') }}"
            });

        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCcTWZnmuGjZKYeBR5vX8xS6p122spkpBM&amp;callback=initMap"></script>

@endpush