@extends('web.layout')

@section('title', 'Kontak')

@section('content')
    <section class="container my-3 my-md-5">
        <div class="row">
            <!-- Informasi Kontak -->
            <div class="col-12 col-md-4 mb-4 mb-md-0">
                <h2 class="mb-3">Kontak Kami</h2>
                <p><strong>Kampus 1:</strong><br>
                    Jl. KH. Harun Nafsi Gg. Dharma, Kel. Rapak Dalam Kec. Loa Janan Ilir, Kota Samarinda</p>

                <p><strong>Kampus 2:</strong><br>
                    Jl. APT Pranoto, Kel. Gunung Panjang Kec. Samarinda Seberang, Kota Samarinda</p>

                <p><strong>Email:</strong><br>
                    <a target="_blank"
                        href="{{ \App\Models\WebSetting::where('key', 'EMAIL_ADDRESS')->first()->value }}">unukaltim@gmail.com</a>
                </p>

                <p><strong>No. Telepon / WhatsApp:</strong><br>
                    <a target="_blank"
                        href="{{ \App\Models\WebSetting::where('key', 'WHATSAPP_LINK')->first()->value }}">085750417213</a>
                </p>
            </div>

            <!-- Google Maps Embed -->
            <div class="col-12 col-md-8">
                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                            aria-selected="true">
                            Kampus 1
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile"
                            aria-selected="false">
                            Kampus 2
                        </button>
                    </li>
                </ul>
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"
                        tabindex="0">
                        <div class="ratio ratio-16x9">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d8956.447369110001!2d117.13066649209588!3d-0.535825596726494!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2df6807c65b6bd9d%3A0xc8b28b3d1b46bcf8!2sNahdlatul%20Ulama%20University%20of%20East%20Borneo%20in%20SAMARINDA%20-%20CAMPUS%201!5e0!3m2!1sen!2sid!4v1747579682745!5m2!1sen!2sid"
                                width="600" height="450" style="border:0;" class="rounded-4" allowfullscreen=""
                                loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"
                        tabindex="0">
                        <div class="ratio ratio-16x9">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3989.649583273482!2d117.12873178872987!3d-0.526948111175702!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2df67f382d6e5633%3A0xb15fef11f1f68259!2sNahdlatul%20Ulama%20University%20SAMARINDA%20-%20CAMPUS%202!5e0!3m2!1sen!2sid!4v1747579625931!5m2!1sen!2sid"
                                width="600" height="450" style="border:0;" class="rounded-4" allowfullscreen=""
                                loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection