@extends('front.layouts.app')

@section('title', 'اتصل بنا | منصة MedExchange')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/contact-page.css') }}">
@endsection

@section('content')
    <!-- Hero Section -->
    <section class="hero-contact">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">تواصل معنا</h1>
                <p class="hero-subtitle">نحن هنا للإجابة على استفساراتك ومساعدتك في أي وقت</p>
            </div>
        </div>
        <div class="hero-shape"></div>
    </section>

    <!-- Contact Section -->
    <section class="contact-section" style="padding: 80px 0;">
        <div class="container">
            <div class="contact-grid">
                <!-- Contact Form -->
                <div class="contact-form-wrapper">
                    <h2>أرسل لنا رسالة</h2>
                    <p class="form-desc">املأ النموذج وسنرد عليك في أقرب وقت ممكن</p>

                    <form id="contactForm" class="contact-form" action="#" method="POST">
                        @csrf
                        <div class="form-row">
                            <div class="form-group">
                                <label for="fullName">الاسم الكامل *</label>
                                <input type="text" id="fullName" name="name" required placeholder="أدخل اسمك الكامل">
                            </div>
                            <div class="form-group">
                                <label for="email">البريد الإلكتروني *</label>
                                <input type="email" id="email" name="email" required placeholder="example@email.com">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="phone">رقم الهاتف *</label>
                                <input type="tel" id="phone" name="phone" required placeholder="01xxxxxxxxx">
                            </div>
                            <div class="form-group">
                                <label for="subject">الموضوع *</label>
                                <select id="subject" name="subject" required>
                                    <option value="">اختر الموضوع</option>
                                    <option value="general">استفسار عام</option>
                                    <option value="technical">مشكلة تقنية</option>
                                    <option value="complaint">شكوى</option>
                                    <option value="suggestion">اقتراح</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="message">رسالتك *</label>
                            <textarea id="message" name="message" rows="6" required placeholder="اكتب رسالتك هنا..."></textarea>
                        </div>

                        <button type="submit" class="btn-submit">
                            <i class="fas fa-paper-plane"></i>
                            <span>إرسال الرسالة</span>
                        </button>
                    </form>
                </div>

                <!-- Contact Info -->
                <div class="contact-info">
                    @if($contact)
                    <div class="info-card">
                        <div class="info-icon"><i class="fas fa-map-marker-alt"></i></div>
                        <h4>العنوان</h4>
                        <p>{{ $contact->address }}</p>
                    </div>

                    <div class="info-card">
                        <div class="info-icon"><i class="fas fa-phone-alt"></i></div>
                        <h4>الهاتف</h4>
                        @if($contact->phone1) <p dir="ltr">{{ $contact->phone1 }} @if($contact->phone2) - {{ $contact->phone2 }} @endif</p> @endif
                    </div>

                    @if($contact->whatsapp)
                    <div class="info-card" style="border-right-color: #25d366;">
                        <div class="info-icon" style="background: #25d366; color: white;"><i class="fab fa-whatsapp"></i></div>
                        <h4>واتساب</h4>
                        <p dir="ltr"><a href="https://wa.me/{{ $contact->whatsapp }}" style="color: inherit; text-decoration: none;">+{{ $contact->whatsapp }}</a></p>
                    </div>
                    @endif

                    <div class="info-card">
                        <div class="info-icon"><i class="fas fa-envelope"></i></div>
                        <h4>البريد الإلكتروني</h4>
                        <p>{{ $contact->email1 }}</p>
                        @if($contact->email2) <p>{{ $contact->email2 }}</p> @endif
                    </div>

                    @if($contact->working_hours)
                    <div class="info-card">
                        <div class="info-icon"><i class="fas fa-clock"></i></div>
                        <h4>ساعات العمل</h4>
                        <p>{{ $contact->working_hours }}</p>
                    </div>
                    @endif

                    <div class="social-links">
                        <h4>تابعنا على</h4>
                        <div class="social-icons">
                            @if($contact->facebook) <a href="{{ $contact->facebook }}" class="social-icon" aria-label="فيسبوك"><i class="fab fa-facebook-f"></i></a> @endif
                            @if($contact->twitter) <a href="{{ $contact->twitter }}" class="social-icon" aria-label="تويتر"><i class="fab fa-twitter"></i></a> @endif
                            @if($contact->instagram) <a href="{{ $contact->instagram }}" class="social-icon" aria-label="انستجرام"><i class="fab fa-instagram"></i></a> @endif
                            @if($contact->linkedin) <a href="{{ $contact->linkedin }}" class="social-icon" aria-label="لينكد إن"><i class="fab fa-linkedin-in"></i></a> @endif
                            @if($contact->youtube) <a href="{{ $contact->youtube }}" class="social-icon" aria-label="يوتيوب"><i class="fab fa-youtube"></i></a> @endif
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script src="{{ asset('js/contact-page.js') }}" defer></script>
@endsection