@extends('layouts.site')

@section('title', 'تواصل معنا | XRD LAB')

@push('styles')
<style>
    .contact-map-shell {
        border: 1px solid color-mix(in srgb, var(--theme-primary) 28%, #d1d5db);
        background:
            linear-gradient(140deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)),
            rgba(255, 255, 255, 0.12);
        box-shadow:
            0 10px 24px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.45);
        overflow: hidden;
    }

    .contact-map-embed {
        width: 100%;
        height: 384px;
        border: 0;
        display: block;
        filter: grayscale(0.18) contrast(1.03) saturate(0.88);
    }
</style>
@endpush

@section('content')
<main id="main">
    @include('partials.breadcrumbs', [
        'title' => 'تواصل معنا',
        'items' => [
            ['label' => 'الرئيسية', 'url' => route('home')],
            ['label' => 'تواصل معنا'],
        ],
    ])

    <section id="contact" class="contact">
        <div class="container">
            @if (session('status'))
                <div class="alert alert-success" dir="rtl">{{ session('status') }}</div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger" dir="rtl">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="row">
                <div class="col-lg-6">
                    <div class="info-box mb-4">
                        <i class="bx bx-map"></i>
                        <h3></h3>
                        <p></p>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="info-box mb-4">
                        <i class="bx bx-envelope"></i>
                        <h3></h3>
                        <p>joammarey@uqu.edu.sa - aaashehri@uqu.edu.sa</p>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="info-box mb-4">
                        <i class="bx bx-phone-call"></i>
                        <h3></h3>
                        <p>+966508739149 - +966552721518</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <div class="contact-map-shell mb-4 mb-lg-0">
                        <iframe class="contact-map-embed" src="https://www.openstreetmap.org/export/embed.html?bbox=42.1499151,19.1368878,41.1499151,19.1368878&marker=19.1368878,41.1499151&layers=M" frameborder="0" allowfullscreen></iframe>
                    </div>
                </div>

                <div class="col-lg-6" dir="rtl">
                    <form action="{{ route('contact.store') }}" method="post" role="form" class="php-email-form" dir="rtl">
                        @csrf

                        <div style="position:absolute;left:-9999px;opacity:0;pointer-events:none;">
                            <label for="website">Website</label>
                            <input type="text" id="website" name="website" value="{{ old('website') }}" tabindex="-1" autocomplete="off">
                        </div>

                        <div class="row">
                            <div class="col-md-6 form-group">
                                <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" id="name" placeholder="الاسم" value="{{ old('name') }}" required>
                            </div>
                            <div class="col-md-6 form-group mt-3 mt-md-0">
                                <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" id="email" placeholder="الايميل" value="{{ old('email') }}" required>
                            </div>
                        </div>

                        <div class="form-group mt-3">
                            <input type="text" class="form-control @error('subject') is-invalid @enderror" name="subject" id="subject" placeholder="الموضوع" value="{{ old('subject') }}" required>
                        </div>

                        <div class="form-group mt-3">
                            <textarea class="form-control @error('message') is-invalid @enderror" name="message" rows="5" placeholder="محتوى الرسالة.. اكتب ايضا عن مهاراتك واهدافك من الانضمام لنا" required>{{ old('message') }}</textarea>
                        </div>

                        <div class="my-3">
                            <div class="loading">Loading</div>
                            <div class="error-message"></div>
                            <div class="sent-message">تم ارسال الرسالة بنجاح شكرا على تواصلك معنا</div>
                        </div>

                        <div class="text-center"><button type="submit">ارســـل</button></div>
                    </form>
                </div>
            </div>
        </div>
    </section>
</main>
@endsection