@extends('web.layouts.container')

@section('css')
    <style>
        iframe{
            width: 100% !important;
        }
    </style>
@endsection

@section('inner_header')
    <section class="inner-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 valign">
                    <div class="pg-links">
                        <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home')}}</a>/
                        <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url(''), [], true)}}">{{__('main.contact_us')}}</a>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="title">
                        <h2>{{__('main.contact_us')}}</h2>
                        <span class="trans-logo">
                        <img src="{{asset('assets/web/images/trans-logo.png')}}" alt="">
                    </span>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="inner-slide">
        <div class="img">
            <img src="{{asset('assets/web/images/about-pg.png')}}" alt="">
        </div>
    </section>
@endsection

@section('content')
    <section class="contact section-padding">
        <div class="container">
            <div class="contact-info">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="items">
                            <div class="icons">
                                <i class="fas fa-mobile-alt"></i>
                            </div>
                            <div class="info">
                                <p>{{settings('site_phone')}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="items">
                            <div class="icons">
                                <i class="fas fa-location-arrow"></i>
                            </div>
                            <div class="info">
                                <p>{{settings('site_address')}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="items">
                            <div class="icons">
                                <i class="far fa-envelope"></i>
                            </div>
                            <div class="info">
                                <p>{{settings('site_email')}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-7">
                    <div class="contact-form">
                        <div class="text-center section-head">
                            <p>{{__('main.contact_us')}}</p>
                        </div>
                        <form action="{{route('contactUs.store')}}" method="post" class="contact_us_form">
                            @csrf()
                            <div class="form-group">
                                <label> {{__('contacts.name')}} </label>
                                <input name="name" class="form-control" placeholder="{{__('contacts.name')}}">
                            </div>
                            <div class="form-group">
                                <label> {{__('contacts.email')}} </label>
                                <input name="email" class="form-control" placeholder="{{__('contacts.email')}}">
                            </div>
                            <div class="form-group">
                                <label> {{__('contacts.message_subject')}} </label>
                                <input name="subject" class="form-control" placeholder="{{__('contacts.message_subject')}}">
                            </div>
                            <div class="form-group">
                                <label> {{__('contacts.write_message')}} </label>
                                <textarea name="message" class="form-control" placeholder="{{__('contacts.write_message')}}"></textarea>
                            </div>
                            <div class="text-center">
                                <button class="butn color contact_us_button"><span>{{__('contacts.send')}}</span></button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="form-group mb-3 mt-5">
                        <h6 class="main-color">{{__('main.choose_hotel')}}</h6>
                        <select class="form-control map_select">
                            @if(count($hotels))
                                @foreach($hotels as $hotel)
                                    <option value="{{$hotel->id}}">{{$hotel->room_name}}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    @if(count($hotels))
                        @foreach($hotels as $hotel)
                            <div class="map map_{{$hotel->id}} d-none">
                                {!! $hotel->map !!}
                            </div>
                        @endforeach
                    @endif

                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>

        $('.map').each(function () {
            if ($(this).index() === 1){
                $(this).removeClass('d-none');
            }
        });

        $('.map_select').change(function () {
            let id = $(this).val(), map = $('.map_'+id);
            map.removeClass('d-none');
            map.siblings('.map').addClass('d-none');

        });
    </script>
@endsection