@extends('layouts.app')

@section('title', __('navigation.contact'))

@section('content')
<!-- Contact Start -->
<div class="contact mt-100">
<div class="container-fluid page-header py-6 my-6 mt-0 wow fadeIn" data-wow-delay="0.1s">
    <div class="container text-center">
        <h1 class="display-4 text-white animated slideInDown mb-4">{{ __('contact.page_title') }}</h1>
        <nav aria-label="breadcrumb animated slideInDown">
            <ol class="breadcrumb justify-content-center mb-0">
                <li class="breadcrumb-item"><a class="text-white" href="{{ route('home', ['locale' => app()->getLocale()]) }}">{{ __('home.title') }}</a></li>
                <li class="breadcrumb-item"><a class="text-white" href="#">{{ __('contact.pages') }}</a></li>
                <li class="breadcrumb-item text-primary active" aria-current="page">{{ __('contact.page_title') }}</li>
            </ol>
        </nav>
    </div>
</div>

    <div class="container">
        <div class="section-header">
            <h2>{{ __('navigation.contact_title') }}</h2>
            <p>{{ __('navigation.contact_subtitle') }}</p>
        </div>

        <div class="col-12 wow fadeInUp" data-wow-delay="0.1s">
            <div class="row g-5">
                @foreach($contactInfos as $index => $contact)
                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="{{ 0.1 + ($index * 0.2) }}s">
                    <div class="contact-add-item p-4">
                        <div class="contact-icon mb-4">
                            <i class="{{ $contact->icon_class }} fa-2x"></i>
                        </div>
                        <div>
                            <h4>{{ $contact->title }}</h4>
                            <p class="mb-0">{{ $contact->value }}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form">
                    <form action="{{ route('contact.submit', app()->getLocale()) }}" method="post" class="contactForm">
                        @csrf
                        <div class="form-row">
                            <div class="form-group col-sm-6">
                                <input type="text" name="name" class="form-control" placeholder="{{ __('navigation.name') }}" required />
                            </div>
                            <div class="form-group col-sm-6">
                                <input type="email" name="email" class="form-control" placeholder="{{ __('navigation.email') }}" required />
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-sm-6">
                                <input type="text" name="phone" class="form-control" placeholder="{{ __('navigation.phone') }}" required />
                            </div>
                            <div class="form-group col-sm-6">
                                <input type="text" name="project" class="form-control" placeholder="{{ __('navigation.project') }}" />
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="text" name="subject" class="form-control" placeholder="{{ __('navigation.subject') }}" required />
                        </div>
                        <div class="form-group">
                            <textarea name="message" class="form-control" rows="5" placeholder="{{ __('navigation.message') }}" required></textarea>
                        </div>
                        <div><button class="btn" type="submit">{{ __('navigation.send_message') }}</button></div>
                    </form>
                </div>
            </div>
            <div class="col-md-6">
                <div class="map">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited%20States!5e0!3m2!1sen!2sbd!4v1574923227698!5m2!1sen!2sbd" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Contact End -->
@endsection