@extends('website.layouts.app')

@section('content')

    <!-- Hero and nav -->
    <div class="hero is-cover is-relative is-fullheight is-default is-bold">
    
        <!-- Hero Wallop Slider -->
        <div class="Wallop Wallop--v2 Wallop--fade page_header">
            <div class="Wallop-list">
                <div class="has-background-image" data-background="{{ url('website/assets/img/contact.jpg') }}">
                    <div class="Wallop-overlay"></div>
                    <div class="Wallop-caption-wrapper">
                        <div class="container">
                            <div class="columns is-gapless is-vcentered" style="width: 100%">
                                <div class="column is-12">
                                    <div class="caption-inner has-text-centered">
                                        <h1>Contact Us</h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Form section -->
    <div class="contact-page section section-feature-grey is-medium">
        <div class="container">

            <!-- Title -->
            <div class="section-title-wrapper">
                <h2 class="title section-title has-text-centered dark-text">
                    Get in Touch.
                </h2>
                <div class="subtitle section-subtitle has-text-centered">
                    <b>Call us</b>, <b>send us</b> a message, or come <b>visit us</b>.
                </div>
            </div>
  
            <div class="content-wrapper">
                <div class="columns">
                    <!-- Side content -->
                    <div class="column is-4">
						<div class="place-title">Egypt</div>
						
                        <!-- Contact info -->
                        <div class="content">
                            <div class="flex-card contact-card light-bordered hover-inset padding-15">
                                <div class="icon">
                                    <i class="im im-icon-Email"></i>
                                </div>
                                <div class="contact-info">
                                    <div class="contact-name">Email</div>
                                    <div class="contact-details">
                                        <span class="details-text">
                                            <a href="mailto:{{ config('settings.email') }}"><b>{{ config('settings.email') }}</b></a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <!-- Card -->
                            <div class="flex-card contact-card light-bordered hover-inset padding-15">
                                <div class="icon">
                                    <i class="im im-icon-Phone-Wifi"></i>
                                </div>
                                <div class="contact-info">
                                    <div class="contact-name">Phone</div>
                                    <div class="contact-details">
                                        <span class="details-text">
                                            <a href="tel:{{ config('settings.phone') }}"><b>{{ config('settings.phone') }}</b></a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <!-- Card -->
                            <div class="flex-card contact-card light-bordered hover-inset padding-15">
                                <div class="icon">
                                    <i class="im im-icon-Map-Marker"></i>
                                </div>
                                <div class="contact-info">
                                    <div class="contact-name">Address</div>
                                    <div class="contact-details">
                                        <a href="{{ route('contact') }}#findUs"><b>{{ config('settings.address') }}</b></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
					
					@if($new_address)
					<!-- Side content -->
                    <div class="column is-4">
						<div class="place-title">{{ $new_address->name }}</div>

                        <!-- Contact info -->
                        <div class="content">
                            <div class="flex-card contact-card light-bordered hover-inset padding-15">
                                <div class="icon">
                                    <i class="im im-icon-Email"></i>
                                </div>
                                <div class="contact-info">
                                    <div class="contact-name">Email</div>
                                    <div class="contact-details">
                                        <span class="details-text">
                                            <a href="mailto:{{ $new_address->email }}"><b>{{ $new_address->email }}</b></a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <!-- Card -->
                            <div class="flex-card contact-card light-bordered hover-inset padding-15">
                                <div class="icon">
                                    <i class="im im-icon-Phone-Wifi"></i>
                                </div>
                                <div class="contact-info">
                                    <div class="contact-name">Phone</div>
                                    <div class="contact-details">
                                        <span class="details-text">
                                            <a href="tel:{{ $new_address->phone }}"><b>{{ $new_address->phone }}</b></a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <!-- Card -->
                            <div class="flex-card contact-card light-bordered hover-inset padding-15">
                                <div class="icon">
                                    <i class="im im-icon-Map-Marker"></i>
                                </div>
                                <div class="contact-info">
                                    <div class="contact-name">Address</div>
                                    <div class="contact-details">
                                        <a href="{{ route('contact') }}"><b>{{ $new_address->address }}</b></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
					@endif
					
                    <!-- Contact form -->
                    <div class="column is-4">
                        <div class="place-title py-2"></div>

                        <form action="{{ route('contact.send') }}" method="post">
                            @csrf

                            <div class="columns is-multiline">
                                <div class="column is-6">
                                    <!-- Input -->
                                    <div class="field">
                                        <label>Name *</label>
                                        <div class="control">
                                            <input class="input is-medium" type="text" name="name" placeholder="name" value="{{ old('name') }}" />
                                        </div>
                                        @error('name')
                                            <div class="validation-info is-error">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="column is-6">
                                    <!-- Input -->
                                    <div class="field">
                                        <label>Email *</label>
                                        <div class="control">
                                            <input class="input is-medium" type="email" name="email" placeholder="email" value="{{ old('email') }}" />
                                        </div>
                                        @error('email')
                                            <div class="validation-info is-error">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="column is-6">
                                    <div class="field">
                                        <label>Phone *</label>
                                        <div class="control">
                                            <input class="input is-medium" type="text" name="phone" placeholder="phone" value="{{ old('phone') }}" />
                                        </div>
                                        @error('phone')
                                            <div class="validation-info is-error">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="column is-6">
                                    <div class="field">
                                        <label>Subject</label>
                                        <div class="control">
                                            <input class="input is-medium" type="text" name="subject" placeholder="subject" value="{{ old('subject') }}" />
                                        </div>
                                        @error('subject')
                                            <div class="validation-info is-error">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="column is-12">
                                    <div class="field">
                                        <div class="control">
                                            <textarea name="message" class="textarea is-default-focus" rows="6" placeholder="Your message ...">
                                                {{ old('message') }}
                                            </textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="column is-12">
                                    <!-- Submit -->
                                    <button type="submit" class="button button-cta btn-align primary-btn startup-contact-button raised no-lh is-fullwidth is-bold">
                                        Send Message
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <div id="findUs"></div>
    
    <!-- Map -->
    <div id="google-map">
        <iframe src="{{ config('settings.location') }}" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" class="embed-responsive-item"></iframe>
    </div>
    

@endsection