@extends('layouts.base')
@section('title', 'Contact US')
@section('content')

<style>
    .map-responsive {
        overflow: hidden;
        padding-bottom: 56.25%;
        position: relative;
        height: 0;
    }

    .map-responsive iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }

    .whatsapp-float {
        position: fixed;
        width: 200px;
        height: auto;
        bottom: -30px;
        right: 60px;
        /* background-color: #25d366; */
        color: #fff;
        /* border-radius: 50px; */
        text-align: center;
        font-size: 24px;
        /* box-shadow: 2px 2px 3px #999; */
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease-in-out;
    }


    /* You might want to hide the icon on very small screens */
    @media (max-width: 576px) {
        .whatsapp-icon {
            right: 10px;
            bottom: 10px;
            width: 60px;
            /* Smaller size on small screens */
            height: 60px;
        }

        .mail-mobile-views {
            display: block;
            /* Setel ke tampilan blok agar elemen <br/> memiliki efek */
        }

        .mail-mobile-views:after {
            content: '\A';
            /* Tambahkan konten kosong setelah elemen */
            display: block;
            /* Setel ke tampilan blok agar elemen memiliki efek */
        }

        @media screen and (max-width: 768px) {
            .mail-tablet-views {
                display: block;
            }

            .mail-tablet-views:after {
                content: '\A';
                display: block;
            }
        }
    }
</style>

<section class="imagebg image--light cover cover-blocks bg-primary-100 ">
    <div class="background-image-holder hidden-xs">
        <img alt="background" src="{{ asset('assets/img/images/hero/4.jpg') }}" />
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <!-- <h3 class="text-2xl font-semibold md:mb-3 md:text-3xl">Layanan<span class="text-primary-500"> Kami</span></h3> -->
                <h1 class="text-center text-3xl font-bold text-primary-500 md:text-5xl mt-4">Hubungi Kami</h1>
            </div>
        </div>
        <!--end of row-->
    </div>
    <!--end of container-->
</section>

<div class="bg-primary-50 p-12 lg:py-24 lg:px-64">
    <div class="container">
        <div class="row">
            <!-- Contact Info -->
            <div class="col-md-6 my-3">
                <div class="bg-light p-4 rounded">
                    <div class="d-flex align-items-center mb-md-4">
                        <img src="{{ asset('assets/img/location_on.png') }}" alt="Location Icon" style="width: 24px; height: 24px; margin-right: 4px" class="mt-2">
                        <p class="mb-0 font-medium text-xl text-default pb-2">Jl. Kopo Permai I No 92, Bandung, Indonesia</p>
                    </div>
                    <div class="d-flex align-items-center mb-md-4" style="overflow-x:scroll;">
                        <img src="{{ asset('assets/img/email.png') }}" alt="Email Icon" style="width: 24px; height: 24px; margin-right: 4px">
                        <a href="mailto:carta.niskalalokeswara@gmail.com" class="pb-4 mb-0 text-lg text-default"><span class="mail-mobile-views">carta.</span><span class="mail-mobile-views">niskalalokeswara</span><span class="mail-tablet-views">@gmail.com</span></a>
                    </div>
                    <div class="d-flex align-items-center mb-md-4">
                        <img src="{{ asset('assets/img/call.png') }}" alt="Call Icon" style="width: 24px; height: 24px; margin-right: 4px">
                        <p class="mb-0 font-medium text-xl text-default pb-4">+62 822-2100-9488</p>
                    </div>
                </div>
            </div>

            <!-- Google Maps Embed -->
            <div class="col-md-6 my-3">
                <div class="map-responsive rounded">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31693.83516700548!2d107.57476656977539!3d-6.9349668000000095!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e68e64c3e4e2c3d%3A0x705b73b7abc6e7e2!2sBandung%2C%20Bandung%20City%2C%20West%20Java%2C%20Indonesia!5e0!3m2!1sen!2sus!4v1654620041186!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
            </div>
        </div>


    </div>
</div>

</div>
<a href="https://wa.me/6282221009488" target="_blank" class="whatsapp-float">
    <img src="{{ asset('assets/img/images/wa.png') }}" alt="WhatsApp Icon">
</a>
@endsection