@extends('layouts.lookatme')

@section('title', trans('message.contact_us'))

@section('content')

    <div class="tw-relative tw-flex tw-justify-center tw-h-[12rem] tw-items-center tw-z-20 tw-bg-gradient-to-b tw-from-white-400 tw-to-white/20 tw-opacity-95">
        <h2 class="tw-uppercase tw-mt-6">{{trans('message.contact_us')}}</h2>
    </div>
    <div class="map tw-relative -tw-top-4 tw-z-10">
        <div id="googleMap" style="height: 350px;"></div>
    </div>

    <!-- contact-area-start -->
    <div class="tw-grid tw-grid-cols-2 tw-mx-8 tw-mt-6 tw-gap-16">
        <div class="information-form tw-w-10/12">
            @include('templates.lookatme.components.head-title',['title' => 'Shop location','fontStyle' => 'tw-text-2xl tw-font-bold'])
            <div class="branches tw-mt-6">
                <div class="accordion" id="according-branches">
                    @if(!$branches->isEmpty())
                        @foreach($branches as $key => $branch)
                            <div class="divider tw-mb-5 tw-pb-5 accordion-item">
                                <div class="">
                                    <div class="tw-flex tw-justify-between tw-items-center ">
                                        <label class="tw-cursor-pointer" for="branch-{{ $branch->id }}">
                                            <span>{{ $branch->name }}</span>
                                        </label>
                                        <i class="icon-plus btn-collapse"
                                           data-target="#branch-{{$branch->id}}"></i>
                                    </div>
                                    <div class="collapse tw-mt-4" id="branch-{{$branch->id}}"
                                         data-bs-parent="#according-branches">
                                        <div class="tw-flex tw-items-start tw-content-start tw-mb-4">
                                            <span class="tw-w-10 tw-text-left tw-block icon-phone1"></span>
                                            <span>
                                                {{ $branch->phone }}
                                            </span>
                                        </div>
                                        <div class="tw-flex tw-items-center tw-content-start tw-mb-4">
                                            <span class="tw-w-10 tw-text-left tw-block icon-mail"></span>
                                            <span>{{ $branch->email }}</span>
                                        </div>
                                        <div class="tw-flex tw-items-start tw-content-start tw-mb-4">
                                            <span class="tw-w-10 tw-text-left tw-block tw-text-2xl icon-location-pin"></span>
                                            <span>
                                                {{ $branch->street }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
<!--        <div class="contact-form tw-w-10/12 tw-mx-auto">
            <div class="cf-msg"></div>
            <form action="#" method="post" id="cf">
                @include('templates.lookatme.components.head-title',[
                    'title' => trans('message.contact_form'),'fontStyle' => 'tw-text-2xl tw-font-bold'
                ])

                <div class="tw-flex tw-flex-col tw-space-y-4">

                    <div class="form-group">
                        <label class="sr-only sr-only" for="input_name">{{trans('message.name')}}
                            <span class="text-danger">*</span>
                        </label>
                        <input class="tw-form-input tw-w-full tw-border-0 tw-border-b focus:tw-ring-0 tw-px-0"
                               placeholder="{{ trans('message.name') }}*"
                               type="text"
                               id="input_name"
                               name="input_name" required='required'>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="input_phone">{{trans('message.phone')}}
                            <span class="text-danger">*</span>
                        </label>
                        <input class="tw-form-input tw-w-full tw-border-0 tw-border-b focus:tw-ring-0 tw-px-0"
                               type="text"
                               placeholder="{{ trans('message.phone_number') }}*"
                               id="input_phone" name="input_phone" required='required'>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="input_email">{{trans('message.email')}}
                            <span class="text-danger">*</span>
                        </label>
                        <input class="tw-form-input tw-w-full tw-border-0 tw-border-b focus:tw-ring-0 tw-px-0"
                               type="email"
                               placeholder="{{ trans('message.email') }}*"
                               id="input_email" name="input_email" required='required'>
                    </div>
                    <div class="form-group">
                        <textarea rows="8"
                                  class="tw-form-input tw-w-full tw-border-gray-400/50 focus:tw-ring-0 tw-px-4 input-note"
                                  placeholder="{{ trans('message.message') }}*" id="textarea_message"
                                  name="textarea_message" required='required'></textarea>
                    </div>
                    <div class="group-button">
                        @include('templates.lookatme.components.button',[
                            'text' => trans('message.submit'),
                            'class' => 'tw-w-full btn-dark submit',
                            'type' => 'submit',
                        ])
                    </div>
                </div>
            </form>
        </div>-->
    </div>
    <!-- contact-area-end -->
@endsection

@section('script')
    @parent
    <!-- google-map-script -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key={{config('global.google_key')}}"></script>

    <script>
        var shop_name = "{{$shop_name}}",
            shop_email = "{{$email}}";

        var lat = {{$default_lat}},
            lng = {{$default_lng}};

        var default_lat_lng = {lat: parseFloat(lat), lng: parseFloat(lng)};

        var array_markers = {!!json_encode($array_markers) !!};

        // var infoWindow;

        function initialize() {

            var map = new google.maps.Map(document.getElementById('googleMap'), {
                center: {lat: lat, lng: lng},
                zoom: 14
            });

            $.each(array_markers, function (index, value) {
                // Add markers
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(value.latitude, value.longitude),
                    map: map,
                    title: value.name,
                    icon: {
                        url: '{{ asset($public_assets . 'assets/lookatme/images/icon/location_marker.svg') }}',
                        scaledSize: new google.maps.Size(45, 45),
                    },
                });
                var infoWindow = new google.maps.InfoWindow({
                    content: value.name
                });

                google.maps.event.addListener(marker, 'click', function () {
                    infoWindow.open(map, marker);
                });
            });
        }

        initialize();

        // google.maps.event.addDomListener(window, "load", initialize);

        $(function () {
            $('.cf-msg').hide();
            $('form#cf').submit(function (event) {
                event.preventDefault();
                getSentMail();
            });
        });

        // send mail
        function getSentMail() {
            var url = "{!! url('/send-mail') !!}";
            $.ajax({
                url: url,
                type: 'POST',
                data:
                    {
                        name: $('#input_name').val(),
                        phone: $('#input_phone').val(),
                        email: $('#input_email').val(),
                        website: $('#input_website').val(),
                        message: $('#textarea_message').val(),
                        contact_name: shop_name,
                        contact_email: shop_email,
                    },
                beforeSend: function () {
                    // before send
                },
                success: function (data) {
                    $('#input_name').val('');
                    $('#input_phone').val('');
                    $('#input_email').val('');
                    $('#input_website').val('');
                    $('#textarea_message').val('');

                    if (data.success == true) {
                        $('.cf-msg').fadeIn()
                                    .html('<div class="alert alert-success"><strong>Success!</strong> Email has been sent successfully.</div>');
                        setTimeout(function () {
                            $('.cf-msg').fadeOut('slow');
                        }, 4000);
                    } else {
                        $('.cf-msg').fadeIn()
                                    .html('<div class="alert alert-danger"><strong>Warning!</strong> Please fillup the informations correctly.</div>')
                    }
                    $("html, body").animate({scrollTop: 300}, "slow");
                }
            });
        }
    </script>
    <!-- google-map-script -->

@endsection