@extends('front.layout.app')
@section('title', 'Contact Us')
@section('content')

    @if(!empty($page->pageComponents))
        @forelse($page->pageComponents as $key => $section)
            @if($key == 0)
                <div class="innerBanner">
                    @if(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'image')
                        <img src="{{asset($section->pageComponentMedia[0]->file_name) ?? asset('front/images/aboutBanner.jpg')}}" class="w-100">
                    @elseif(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'video')
                        <video>
                            <source src="{{asset($section->pageComponentMedia[0]->file_name)}}" type="video/*">
                            Your browser does not support the video tag.
                        </video>
                    @endif

                    <h2>{{$section->title ?? 'Contact Us'}}</h2>
                </div>
            @endif
        @empty
            <div class="innerBanner">
                <img src="{{asset('front')}}/images/aboutBanner.jpg" alt="First slide" class="w-100">
                <h2>Contact Us</h2>
            </div>
        @endforelse
    @endif


    <section class="contactSec sectionSpace">
        <div class="container">
            <div class="row">
                <div class="col-md-5">
                    <div class="title mb-5"><h2>Contact Info</h2></div>
                    <ul class="contactInfo">
                        <li><a href="javascript:;"><i class="fa fa-map-marker"></i><span>Address:</span>{{$setting->address ?? '518 Miles Drive Mount, SC'}}</a></li>
                        <li><a href="mailto:{{$setting->email??''}}"><i class="fa fa-envelope"></i><span>Email:</span>{{$setting->email ?? ''}}</a></li>
                        <li><a href="tel:{{$setting->phone_no_1??''}}"><i class="fa fa-phone"></i><span>Phone:</span>{{$setting->phone_no_1??''}}</a></li>
                    </ul>
                </div>
                <div class="col-md-7">
                    <div class="title mb-5"><h2>Get in touch with us</h2></div>
                    @if(Session::has('msg'))
                        <div class="alert alert-success">{{Session::get('msg')}}</div>
                    @endif
                    <form class="formStyle row" method="post" action="{{route('contactUs')}}">
                        @csrf
                        <div class="col-md-6">
                            <input type="text" class="form-control @error('first_name') is-invalid @enderror" placeholder="First Name" name="first_name" value="{{old('first_name')}}">
                            @error('first_name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <input type="text" class="form-control @error('last_name') is-invalid @enderror" placeholder="Last Name" name="last_name" value="{{old('last_name')}}">
                            @error('last_name')
                            <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <input type="text" class="form-control @error('phone') is-invalid @enderror" placeholder="Phone No" name="phone" value="{{old('phone')}}">
                            @error('phone')
                            <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <input type="email" class="form-control @error('email') is-invalid @enderror" placeholder="Email" name="email" value="{{old('email')}}">
                            @error('email')
                            <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <input type="text" class="form-control" placeholder="Country" name="country" value="{{old('country')}}">
                        </div>
                        <div class="col-md-6">
                            <input type="text" class="form-control" placeholder="State" name="state" value="{{old('state')}}">
                        </div>
                        <div class="col-md-12">
                            <textarea name="message" cols="30" rows="6" class="form-control @error('message') is-invalid @enderror" placeholder="Your Message">{{old('message')}}</textarea>
                            @error('message')
                            <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            <button class="btnStyle" type="submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <section class="mapSec">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d5664.943758996236!2d-93.29050842653304!3d44.77118433852274!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1614939659698!5m2!1sen!2s" width="100%" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </section>
@endsection