@extends('frontend.master')
@section('page_title', 'Contact Us | KYAMC Journal')

@section('frontend_content')

    <!-- Inner Page Header -->
    <section class="inner-page-header py-4 mb-4" style="background-color: var(--theme-primary);">
        <div class="container">
            <h2 class="fw-semibold text-white mb-0">Contact Us</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mt-2 mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}"
                            class="text-white-50 text-decoration-none">Home</a></li>
                    <li class="breadcrumb-item active text-white" aria-current="page">Contact</li>
                </ol>
            </nav>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container my-5 flex-grow-1">
        <div class="row gx-5">

            <!-- Contact Details -->
            <div class="col-lg-5 mb-5">
                <div class="card border-0 shadow-sm p-4 p-md-5 rounded-3 h-100">
                    <h3 class="fw-semibold text-theme-primary mb-4">Get In Touch</h3>

                    @if(isset($globalContact))
                        <div class="mb-4">
                            <h6 class="fw-bold text-dark">Address</h6>
                            <p class="text-muted">{{ $globalContact->address }}</p>
                        </div>
                        <div class="mb-4">
                            <h6 class="fw-bold text-dark">Email</h6>
                            <p class="text-muted"><a href="mailto:{{ $globalContact->email }}"
                                    class="text-theme-primary">{{ $globalContact->email }}</a></p>
                        </div>
                        <div class="mb-4">
                            <h6 class="fw-bold text-dark">Phone</h6>
                            <p class="text-muted">{{ $globalContact->mobile }}</p>
                        </div>
                    @else
                        <p class="text-muted">Contact details not configured.</p>
                    @endif
                </div>
            </div>

            <!-- Map Column -->
            <div class="col-lg-7 mb-5">
                <div class="card border-0 shadow-sm rounded-3 overflow-hidden h-100">
                    <!-- Updated Google Map Embed for Enayetpur, Sirajganj -->
                    <iframe
                        src="https://www.google.com/maps?q=Khwaja+Yunus+Ali+Medical+College,+Enayetpur,+Sirajganj,+Bangladesh&output=embed"
                        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy">
                    </iframe>
                </div>
            </div>

        </div>
    </main>

@endsection