@extends('public.layout.app')

@section('body')
<section class="section" style="padding-top:110px;">
    <div class="container">

        {{-- Breadcrumb / Top Bar --}}
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
            <div>
                <h3 class="fw-bold mb-0">{{ __('front.contact') }}</h3>
                <div class="text-muted small">{{ __('front.we_d_love_to_hear_from_you') }}</div>
            </div>

            <div class="d-flex gap-2">
                <a href="{{ route('front.home') }}" class="btn btn-outline-light btn-sm">
                    <i class="fa-solid fa-house me-1"></i> {{ __('front.home') }}
                </a>
            </div>
        </div>

        {{-- Alerts --}}
        @if(session('success'))
            <div class="alert alert-success d-flex align-items-center gap-2">
                <i class="fa-solid fa-circle-check"></i>
                <div>{{ session('success') }}</div>
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger d-flex align-items-center gap-2">
                <i class="fa-solid fa-triangle-exclamation"></i>
                <div>{{ session('error') }}</div>
            </div>
        @endif

        <div class="row g-4">
            {{-- Left info --}}
            <div class="col-lg-5">
                <div class="card border-0 shadow-sm h-100" style="border-radius:18px;">
                    <div class="card-body p-4">
                        <div class="fw-semibold mb-2">
                            <i class="fa-solid fa-headset me-1"></i> {{ __('front.get_in_touch') }}
                        </div>

                        <div class="text-muted mb-4" style="line-height:1.9;">
                            {{ __('front.send_us_a_message_and_we_ll_respond_as_soon_as_possible') }}
                        </div>

                        <div class="alert alert-soft border-0 mb-4" style="background:#f8fafc;">
                            <div class="fw-bold mb-1"><i class="fab fa-facebook text-primary me-1"></i> Afghan Online Education Facebook</div>
                            <div class="text-muted small mb-2">Official page for announcements, contact and education updates.</div>
                            <a href="https://www.facebook.com/p/Afghan-Online-Education-61558804485057/" target="_blank" rel="noopener" class="btn btn-primary btn-sm rounded-pill px-3">
                                <i class="fab fa-facebook-f me-1"></i> Open Facebook Page
                            </a>
                        </div>

                        <div class="d-flex flex-column gap-3">
                            <div class="d-flex gap-3">
                                <div class="rounded-circle d-flex align-items-center justify-content-center"
                                     style="width:44px;height:44px;background:rgba(13,110,253,.12);">
                                    <i class="fa-solid fa-phone"></i>
                                </div>
                                <div>
                                    <div class="fw-semibold">{{ __('front.phone') }}</div>
                                    <div class="text-muted small">Official Facebook Page</div>
                                </div>
                            </div>

                            <div class="d-flex gap-3">
                                <div class="rounded-circle d-flex align-items-center justify-content-center"
                                     style="width:44px;height:44px;background:rgba(25,135,84,.12);">
                                    <i class="fa-solid fa-envelope"></i>
                                </div>
                                <div>
                                    <div class="fw-semibold">{{ __('front.email_2') }}</div>
                                    <div class="text-muted small">facebook.com/p/Afghan-Online-Education-61558804485057</div>
                                </div>
                            </div>

                            <div class="d-flex gap-3">
                                <div class="rounded-circle d-flex align-items-center justify-content-center"
                                     style="width:44px;height:44px;background:rgba(255,193,7,.18);">
                                    <i class="fa-solid fa-location-dot"></i>
                                </div>
                                <div>
                                    <div class="fw-semibold">{{ __('front.address') }}</div>
                                    <div class="text-muted small">Afghanistan / Online Education Platform</div>
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">

                        {{-- Optional Map (replace src) --}}
                        <div class="rounded-4 overflow-hidden" style="border:1px solid rgba(2,6,23,.08);">
                            <iframe
                                src="https://www.google.com/maps?q=Kabul&output=embed"
                                style="width:100%;height:240px;border:0;"
                                loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Right form --}}
            <div class="col-lg-7">
                <div class="card border-0 shadow-sm" style="border-radius:18px;">
                    <div class="card-body p-4">
                        <div class="fw-semibold mb-3">
                            <i class="fa-solid fa-paper-plane me-1"></i> {{ __('front.send_a_message') }}
                        </div>

                        <form method="POST" action="{{ route('front.contact.submit') }}">
                            @csrf

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('front.full_name') }}</label>
                                    <input type="text" name="name" value="{{ old('name') }}"
                                           class="form-control @error('name') is-invalid @enderror"
                                           placeholder="{{ __('front.your_name') }}">
                                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">{{ __('front.email_2') }}</label>
                                    <input type="email" name="email" value="{{ old('email') }}"
                                           class="form-control @error('email') is-invalid @enderror"
                                           placeholder="you@example.com">
                                    @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">{{ __('front.phone_optional') }}</label>
                                    <input type="text" name="phone" value="{{ old('phone') }}"
                                           class="form-control @error('phone') is-invalid @enderror"
                                           placeholder="+93 ...">
                                    @error('phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">{{ __('front.subject') }}</label>
                                    <input type="text" name="subject" value="{{ old('subject') }}"
                                           class="form-control @error('subject') is-invalid @enderror"
                                           placeholder="{{ __('front.subject') }}">
                                    @error('subject') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-12">
                                    <label class="form-label">{{ __('front.message') }}</label>
                                    <textarea name="message" rows="6"
                                              class="form-control @error('message') is-invalid @enderror"
                                              placeholder="{{ __('front.write_your_message') }}">{{ old('message') }}</textarea>
                                    @error('message') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-12 d-flex gap-2 align-items-center">
                                    <button class="btn btn-primary">
                                        <i class="fa-solid fa-paper-plane me-1"></i> {{ __('front.send') }}
                                    </button>
                                    <div class="text-muted small">
                                        {{ __('front.we_usually_reply_within_24_hours') }}
                                    </div>
                                </div>
                            </div>
                        </form>

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

    </div>
</section>
@endsection