@extends('website.main')
@section('main-content')
    <section class="hero-wrap hero-wrap-2" style="background-image: url('{{ asset('assets/images/bag2.webp') }}');">
        <div class="overlay"></div>
        <div class="container">
            <div class="row no-gutters slider-text align-items-center justify-content-center">
                <div class="col-md-9 pt-5 text-center">
                    <p class="breadcrumbs"><span class="mr-2"><a href="{{ route('home') }}">Home <i
                                    class="fa fa-chevron-right"></i></a></span> <span>Contact <i
                                class="fa fa-chevron-right"></i></span></p>
                    <h1 class="mb-0 bread">Contact Us</h1>
                </div>
            </div>
        </div>
    </section>

<style>
    /* ===== Appointment Section ===== */

.ftco-appointment{
    position: relative;
}

.ftco-appointment .overlay{
    background: rgba(31,48,68,.88) !important;
}

/* Left Heading */

.ftco-appointment .subheading{
    color:#ffffff !important;
    font-weight:700;
    letter-spacing:2px;
}

.ftco-appointment h2{
    color:#ffffff !important;
}

.ftco-appointment p{
    color:rgba(255,255,255,.85) !important;
}

/* Vision Mission Values */

.ftco-appointment .services{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    padding:20px;
    margin-bottom:18px;
    transition:.35s;
}

.ftco-appointment .services:hover{
    background:#ffffff;
    transform:translateY(-5px);
}

.ftco-appointment .services:hover h2,
.ftco-appointment .services:hover p{
    color:#1F3044 !important;
}

.ftco-appointment .services .icon{
    width:65px;
    height:65px;
    background:#ffffff;
    border-radius:50%;
}

.ftco-appointment .services .icon span{
    color:#1F3044 !important;
    font-size:28px;
}

/* Form */

.ftco-appointment .appointment{
    background:#ffffff;
    padding:40px;
    border-radius:15px;
    box-shadow:0 20px 60px rgba(0,0,0,.15);
}

.ftco-appointment .appointment .subheading{
    color:#1F3044 !important;
}

.ftco-appointment .appointment-head{
    color:#1F3044 !important;
}

.ftco-appointment .form-control{
    border:1px solid #d7dde5;
    border-radius:8px;
    height:52px;
}

.ftco-appointment textarea.form-control{
    height:auto;
}

.ftco-appointment .form-control:focus{
    border-color:#1F3044;
    box-shadow:0 0 0 .2rem rgba(31,48,68,.15);
}

/* Button */

.ftco-appointment .btn-primary{
    background:#1F3044 !important;
    border-color:#1F3044 !important;
    color:#fff;
    width:100%;
    font-weight:600;
    transition:.3s;
}

.ftco-appointment .btn-primary:hover{
    background:#2d4868 !important;
    border-color:#2d4868 !important;
}

/* Validation */

.ftco-appointment .text-danger{
    color:#dc3545 !important;
    font-size:13px;
}

/* Success Message */

.ftco-appointment .alert-success{
    border:none;
    background:#e8f5e9;
    color:#1b5e20;
    border-left:4px solid #28a745;
}
</style>

    <section class="ftco-appointment ftco-section img" style="background-image: url({{ asset('assets/images/bg_4.jpg') }});">
        <div class="overlay"></div>
        <div class="container-xl">
            <div class="row">
                <div class="col-md-6 d-flex align-items-center order-lg-last pl-lg-5">
                    <div class="heading-section heading-section-white" data-aos="fade-up">
                        <span class="subheading">The Esteemed Legal Practice</span>
                        <h2 class="mb-3">Directing the Future</h2>
                        <p>Quality in providing various legal services and consultancies in innovative,
                            non-traditional methods and in a highly professional manner, with integrity, dedication
                            and excellence at the heart of everything we do.</p>
                        <div class="row mt-md-5">
                            <div class="col-lg-12">
                                <div class="services d-flex w-100">
                                    <div class="icon icon-2 d-flex align-items-center justify-content-center">
                                        <span class="flaticon-law"></span>
                                    </div>
                                    <div class="text pl-3">
                                        <h2>Our Vision</h2>
                                        <p>Quality in providing various legal services and consultancies in innovative,
                                            non-traditional methods and in a highly professional manner.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="services d-flex w-100">
                                    <div class="icon icon-2 d-flex align-items-center justify-content-center">
                                        <span class="flaticon-law"></span>
                                    </div>
                                    <div class="text pl-3">
                                        <h2>Our Mission</h2>
                                        <p>We are committed to upholding our distinguished reputation by delivering
                                            exceptional quality in every service we provide and striving for
                                            continuous excellence.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="services d-flex w-100">
                                    <div class="icon icon-2 d-flex align-items-center justify-content-center">
                                        <span class="flaticon-law"></span>
                                    </div>
                                    <div class="text pl-3">
                                        <h2>Our Values</h2>
                                        <p>In every responsibility entrusted to us, we uphold the principles we
                                            believe in, with integrity, dedication, and excellence at the heart of
                                            everything we do.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 d-flex align-items-center">
                    <form action="{{ route('contact.store') }}" method="POST" class="appointment" data-aos="fade-up"
                        data-aos-duration="1000" data-aos-delay="200">

                        @csrf

                        <span class="subheading">Contact Our Office</span>

                        <h2 class="mb-4 appointment-head">
                            Please Enter Your Details
                        </h2>

                        {{-- Success Message --}}
                        @if (session('success'))
                            <div class="alert alert-success">

                                {{ session('success') }}

                            </div>
                        @endif

                        <div class="row">

                            <!-- Name -->

                            <div class="col-md-6">

                                <div class="form-group">

                                    <label>Your Full Name</label>

                                    <input type="text" name="name" value="{{ old('name') }}"
                                        class="form-control @error('name') is-invalid @enderror"
                                        placeholder="Your Full Name">

                                    @error('name')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror

                                </div>

                            </div>

                            <!-- Email -->

                            <div class="col-md-6">

                                <div class="form-group">

                                    <label>Email Address</label>

                                    <input type="email" name="email" value="{{ old('email') }}"
                                        class="form-control @error('email') is-invalid @enderror"
                                        placeholder="Email Address">

                                    @error('email')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror

                                </div>

                            </div>

                            <!-- Phone -->

                            <div class="col-md-6">

                                <div class="form-group">

                                    <label>Phone Number</label>

                                    <input type="text" name="phone" value="{{ old('phone') }}"
                                        class="form-control @error('phone') is-invalid @enderror"
                                        placeholder="+966XXXXXXXXX">

                                    @error('phone')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror

                                </div>

                            </div>

                            <!-- Subject -->

                            <div class="col-md-6">

                                <div class="form-group">

                                    <label>Select Subject</label>

                                    <div class="form-field">

                                        <div class="select-wrap">

                                            <div class="icon">

                                                <span class="fa fa-chevron-down"></span>

                                            </div>

                                            <select name="subject"
                                                class="form-control @error('subject') is-invalid @enderror">

                                                <option value="">Choose Practice Area</option>

                                                <option value="Commercial & Financial Disputes">Commercial & Financial
                                                    Disputes</option>

                                                <option value="Commercial Contracts">Commercial Contracts</option>

                                                <option value="Tax Disputes">Tax Disputes</option>

                                                <option value="Labor & Employment Law">Labor & Employment Law</option>

                                                <option value="Foreign Investment">Foreign Investment</option>

                                                <option value="Intellectual Property">Intellectual Property</option>

                                                <option value="Banking & Finance">Banking & Finance</option>

                                                <option value="Arbitration & Mediation">Arbitration & Mediation</option>

                                                <option value="Corporate Law">Corporate Law</option>

                                            </select>

                                        </div>

                                    </div>

                                    @error('subject')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror

                                </div>

                            </div>

                            <!-- Message -->

                            <div class="col-md-12">

                                <div class="form-group">

                                    <label>Message</label>

                                    <textarea name="message" rows="7" class="form-control @error('message') is-invalid @enderror"
                                        placeholder="Write Your Message">{{ old('message') }}</textarea>

                                    @error('message')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror

                                </div>

                            </div>

                            <!-- Submit -->

                            <div class="col-md-12">

                                <button type="submit" class="btn btn-primary py-3 px-4 rounded">

                                    Send Message

                                </button>

                            </div>

                        </div>

                    </form>
                </div>
            </div>
        </div>
    </section>

    <div class="col-lg-12 d-flex align-items-stretch">
        <div id="map" class="bg-white w-100 h-100"
            style="min-height: 400px; border-radius: 8px; overflow: hidden;">
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11045.367991763966!2d46.685879!3d24.687493!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e2f03007eeb048f%3A0x54e1ed0ec3801b4d!2z2YXZg9iq2Kgg2YbYp9i12LEg2LnZitiz2Ykg2KfZhNis2KjZitmEINmE2YTZhdit2KfZhdin2Kkg2YjYp9mE2KfYs9iq2LTYp9ix2KfYqiDYp9mE2YLYp9mG2YjZhtmK2Kk!5e1!3m2!1sen!2seg!4v1785395989064!5m2!1sen!2seg"
                width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>

        </div>
    </div>
@endsection
