@extends('layouts.website.app')
    @section('content')
        <main class="main">
            <div class="site-breadcrumb" style="background: url({{ url('website/img/breadcrumb/01.jpg') }})">
                <div class="container">
                    <h2 class="breadcrumb-title"> Contact Us </h2>
                    <ul class="breadcrumb-menu">
                        <li><a href="{{ url('/') }}"> Home </a></li>
                        <li class="active"> Contact Us </li>
                    </ul>
                </div>
            </div>

            <div class="contact-area pd-20">
                <div class="container">
                    <div class="contact-content">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="contact-info">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="contact-info-icon">
                                            <i class="fal fa-phone-volume"></i>
                                        </div>

                                        <div class="contact-info-content ms-3">
                                            <h5> Call Us </h5>
                                            <p> {{ env('PHONE') }} </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="contact-info">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="contact-info-icon">
                                            <i class="fal fa-envelopes"></i>
                                        </div>

                                        <div class="contact-info-content ms-3">
                                            <h5> Email Us </h5>
                                            <p> <a href="mailto:{{ env('EMAIL') }}"> {{ env('EMAIL') }} </a> </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="contact-wrapper">
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="contact-img">
                                    <img src="{{ url('website/img/contact/01.jpg') }}" alt="">
                                </div>
                            </div>

                            <div class="col-lg-7 align-self-center">
                                <div class="contact-form">
                                    <div class="contact-form-header">
                                        <h2>Get In Touch</h2>
                                    </div>

                                    <form method="post" id="contact-form">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <input type="text" class="form-control" name="name"
                                                        placeholder="Your Name" required>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <input type="email" class="form-control" name="email"
                                                        placeholder="Your Email" required>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <input type="text" class="form-control" name="subject"
                                                placeholder="Your Subject" required>
                                        </div>
                                        <div class="form-group">
                                            <textarea name="message" cols="30" rows="5" class="form-control"
                                                placeholder="Write Your Message"></textarea>
                                        </div>
                                        <button type="submit" class="theme-btn">Send
                                            Message <i class="far fa-paper-plane"></i></button>
                                        <div class="col-md-12 mt-3">
                                            <div class="form-messege text-success"></div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    @endsection