@extends('layouts.frontend.master')

@section('title')
    {{ __('UNIGUIDE | e-Learning website') }}
@endsection
@push('css')
@endpush

@section('content')


    <!-- Header Start -->
    <div class="container-fluid bg-primary py-5 mb-5 page-header contactH">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-lg-10 text-center">
                    <h1 class="display-3 text-white animated slideInDown">{{ __('Contact') }}</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center">
                            <li class="breadcrumb-item"><a class="text-white"
                                    href="{{ route('home') }}">{{ __('Home') }}</a></li>
                            <li class="breadcrumb-item text-white active" aria-current="page">{{ __('Contact') }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Header End -->

    <!-- Contact Start -->
    <div class="container-xxl py-5">
        @if($contact)
            <div class="container">
                <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
                    <h6 class="section-title bg-white text-center text-primary px-3">{{ __('Contact Us') }}</h6>
                    <h1 class="mb-5">{{ $contact->title }}</h1>
                </div>

                <div class="row g-4">
                    <div class="col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                        <div>
                            {!! $contact->content !!}
                        </div>
                        <div class="d-flex align-items-center mb-3">
                            <div class="d-flex align-items-center justify-content-center flex-shrink-0 bg-primary"
                                 style="width: 50px; height: 50px;">
                                <i class="fa fa-map-marker-alt text-white"></i>
                            </div>
                            <div class="ms-3">
                                <h5 class="text-primary">{{ __('Location') }}</h5>
                                <p class="mb-0">{{ getSetting('map', 1) }}</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center mb-3">
                            <div class="d-flex align-items-center justify-content-center flex-shrink-0 bg-primary"
                                 style="width: 50px; height: 50px;">
                                <i class="fa fa-phone-alt text-white"></i>
                            </div>
                            <div class="ms-3">
                                <h5 class="text-primary">{{ __('Mobile') }}</h5>
                                <p class="mb-0">{{ getSetting('phone_number', 1) }}</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="d-flex align-items-center justify-content-center flex-shrink-0 bg-primary"
                                 style="width: 50px; height: 50px;">
                                <i class="fa fa-envelope-open text-white"></i>
                            </div>
                            <div class="ms-3">
                                <h5 class="text-primary">{{ __('Email') }}</h5>
                                <p class="mb-0">{{ getSetting('email_address', 1) }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                        <form action="{{ route('storeContact') }}" method="post">
                            @csrf
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="name" name="name"
                                               placeholder="Your Name">
                                        <label for="name">{{ __('Your Name') }}</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="email" class="form-control" id="email" name="email"
                                               placeholder="Your Email">
                                        <label for="email">{{ __('Your Email') }}</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="subject" name="subject"
                                               placeholder="Subject">
                                        <label for="subject">{{ __('Subject') }}</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <textarea class="form-control" name="message" placeholder="Leave a message here" id="message" style="height: 150px"></textarea>
                                        <label for="message">{{ __('Message') }}</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-primary w-100 py-3"
                                            type="submit">{{ __('Send Message') }}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    </div>
    <!-- Contact End -->


    @push('scripts')
    @endpush


@endsection