@extends('web.layouts.app')

@section('content')
    <style>
        .hero-sub {
            min-height: 350px;
            background: linear-gradient(rgba(10, 25, 55, 0.75), rgba(10, 25, 55, 0.75)),
                url('{!! asset($settings[151]) !!}') center/cover no-repeat;
            display: flex;
            align-items: center;
            padding: 60px 0;
        }

        .hero-sub h1 {
            color: #fff;
            font-size: 2.8rem;
            font-weight: 800;
        }

        .hero-sub p {
            color: rgba(255, 255, 255, 0.88);
            margin-bottom: 0;
        }

        .breadcrumb-custom {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.85rem;
            margin-bottom: 12px;
        }

        .breadcrumb-custom a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
        }

        .breadcrumb-custom a:hover {
            color: #fff;
        }

        .breadcrumb-custom span {
            color: #fff;
        }

        .contact-info-card {
            padding: 35px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
            height: 100%;
            border-bottom: 4px solid var(--primary);
        }

        .info-item {
            display: flex;
            gap: 18px;
            margin-bottom: 28px;
        }

        .info-item:last-child {
            margin-bottom: 0;
        }

        .info-item .icon-box {
            width: 50px;
            height: 50px;
            background: rgba(26, 58, 107, 0.09);
            color: var(--primary);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            flex-shrink: 0;
        }

        .info-item h6 {
            font-weight: 700;
            margin-bottom: 5px;
            color: var(--primary);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        .info-item p {
            margin-bottom: 0;
            color: #475569;
            font-size: 0.93rem;
            line-height: 1.6;
        }

        .info-item a {
            color: #475569;
            text-decoration: none;
        }

        .info-item a:hover {
            color: var(--primary);
        }

        .contact-form-wrap {
            padding: 40px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
        }

        .form-control {
            padding: 12px 18px;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            font-size: 0.93rem;
            margin-bottom: 0;
        }

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 0.2rem rgba(26, 58, 107, 0.1);
        }

        .social-box {
            width: 44px;
            height: 44px;
            background: rgba(26, 58, 107, 0.09);
            color: var(--primary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            text-decoration: none;
            transition: background .25s, color .25s;
        }

        .social-box:hover {
            background: var(--primary);
            color: #fff;
        }

        .map-container {
            height: 450px;
            width: 100%;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
    </style>

    {{-- ========== HERO ========== --}}
    <section class="hero-sub">
        <div class="container">

            <h1 style="margin-top:20px;">{{ \App\Helpers\TransHelper::get('contact_us', $lang) }}</h1>
            
    </section>

    {{-- ========== CONTACT CONTENT ========== --}}
    <section class="section bg-soft-light">
        <div class="container">
            <div class="row g-5">

                {{-- Left: Contact Details --}}
              {!! $settings[112] !!}
                {{-- Right: Contact Form --}}
                <div class="col-lg-7">
                    <div class="contact-form-wrap">
                        <h3 class="fw-bold mb-1">{{ \App\Helpers\TransHelper::get('send_message', $lang) }}</h3>
                        <p class="text-muted mb-4" style="font-size:.93rem;">
                            {{ \App\Helpers\TransHelper::get('contact_form_desc', $lang) }}
                        </p>

                        @if(session('success'))
                            <div class="alert alert-success rounded-3">
                                <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                            </div>
                        @endif

                        <form action="{{ route('contact-process') }}" method="POST">
                            @csrf
                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">{{ \App\Helpers\TransHelper::get('full_name', $lang) }} <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                        placeholder="{{ \App\Helpers\TransHelper::get('your_full_name', $lang) }}" value="{{ old('name') }}" required>
                                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">{{ \App\Helpers\TransHelper::get('email_address', $lang) }} <span
                                            class="text-danger">*</span></label>
                                    <input type="email" name="email"
                                        class="form-control @error('email') is-invalid @enderror"
                                        placeholder="name@example.com" value="{{ old('email') }}" required>
                                    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ \App\Helpers\TransHelper::get('phone_number', $lang) }}</label>
                                <input type="tel" name="phone" class="form-control" dir="ltr" placeholder="+964 7XX XXX XXXX"
                                    value="{{ old('phone') }}">
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ \App\Helpers\TransHelper::get('subject', $lang) }} <span class="text-danger">*</span></label>
                                <input type="text" name="subject"
                                    class="form-control @error('subject') is-invalid @enderror"
                                    placeholder="{{ \App\Helpers\TransHelper::get('subject_placeholder', $lang) }}" value="{{ old('subject') }}"
                                    required>
                                @error('subject')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="mb-4">
                                <label class="form-label fw-semibold">{{ \App\Helpers\TransHelper::get('your_message', $lang) }} <span
                                        class="text-danger">*</span></label>
                                <textarea name="message" class="form-control @error('message') is-invalid @enderror"
                                    rows="5" placeholder="{{ \App\Helpers\TransHelper::get('message_placeholder', $lang) }}"
                                    required>{{ old('message') }}</textarea>
                                @error('message')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <button type="submit" class="btn-primary-custom w-100 py-3">
                                {{ \App\Helpers\TransHelper::get('send_message_btn', $lang) }} &nbsp;<i class="fas fa-paper-plane"></i>
                            </button>
                        </form>
                    </div>
                </div>

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

    {{-- ========== MAP ========== --}}
    <section class="section bg-soft-white">
        <div class="container">
            <h2 class="section-title text-center mb-5">{{ \App\Helpers\TransHelper::get('find_us_map', $lang) }} <span></span></h2>
            <div class="map-container">
                <iframe
                    src="{!! $settings[16] !!}"
                    width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
            <div class="text-center mt-4">
                <a href="https://maps.google.com/?q=Al-Zubair,Basra,Iraq" target="_blank" class="btn-primary-custom">
                    <i class="fas fa-map-location-dot me-2"></i>{{ \App\Helpers\TransHelper::get('open_google_maps', $lang) }}
                </a>
            </div>
        </div>
    </section>

@endsection