@extends('front.layout')
@section('title', 'Kontak Kami')
@section('konten')
    <!-- START SECTION BANNER -->
    <section class="breadcrumb_section bg_gray overlay_bg_blue_90"
        style="background: url({{asset('assets')}}/images/gedungpdam.png); background-position: center; padding-top:120px; background-repeat:no-repeat; background-size:cover">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="page-title">
                        <h1 style="color: #fff; font-family: 'Otomanopee One', sans-serif;">Kontak Kami</h1>
                    </div>
                </div>
                <div class="col-sm-6">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-sm-end">
                            <li class="breadcrumb-item"><a href="/" style="color: #fff">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page" style="color: #fff">Kontak Kami
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>
    <!-- END SECTION BANNER -->

    <!-- START SECTION BLOG -->
    <section>
        <div class="container">
            <div class="row">
                <div class="row">
                    <!-- Baris 1: 3 lokasi -->
                    <div class="col-md-4 d-flex mb-4">
                        <div class="card w-100 h-100" style="border-radius:10px; box-shadow: 6px 6px 3px #7be3e7;">
                            <div class="card-body text-center">
                                <i class="fas fa-map-marker-alt" style="font-size: 50px; color:#5027e2"></i>
                                <h5 class="card-title mt-3">Kantor Pusat</h5>
                                <p class="card-text">Jl. Hang Tuah No.29, Tegalsari, Kec. Tegal Barat, Kota Tegal, Jawa Tengah 52111</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-flex mb-4">
                        <div class="card w-100 h-100" style="border-radius:10px; box-shadow: 6px 6px 3px #7be3e7;">
                            <div class="card-body text-center">
                                <i class="fas fa-map-marker-alt" style="font-size: 50px; color:#5027e2"></i>
                                <h5 class="card-title mt-3">Menara Water Leiding</h5>
                                <p class="card-text">Jl. Pancasila No.30, Panggung, Kec. Tegal Timur, Kota Tegal, Jawa Tengah 52122</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-flex mb-4">
                        <div class="card w-100 h-100" style="border-radius:10px; box-shadow: 6px 6px 3px #7be3e7;">
                            <div class="card-body text-center">
                                <i class="fas fa-map-marker-alt" style="font-size: 50px; color:#5027e2"></i>
                                <h5 class="card-title mt-3">Loket Cabang Margadana</h5>
                                <p class="card-text">Jl. Ki Hajar Dewantara, Sumurpanggang, Kec. Margadana, Kota Tegal, Jawa Tengah</p>
                            </div>
                        </div>
                    </div>
                
                    <div class="container">
                        <div class="row gx-4">
                            <div class="col-md-4 mb-4">
                                <div class="contact-card text-center h-100">
                                    <div class="icon-circle bg-whatsapp">
                                        <i class="fa-brands fa-whatsapp"></i>
                                    </div>
                                    <h5 class="card-title mt-3">WhatsApp</h5>
                                    <p class="card-text">
                                        <a href="https://wa.me/6285700007059" target="_blank" class="contact-link">
                                            +62 857 0000 7059
                                        </a>
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-4 mb-4">
                                <div class="contact-card text-center h-100">
                                    <div class="icon-circle bg-phone">
                                        <i class="fa fa-phone"></i>
                                    </div>
                                    <h5 class="card-title mt-3">Telepon</h5>
                                    <p class="card-text">
                                        <a href="tel:0283356175" class="contact-link">(0283) 356175</a>
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-4 mb-4">
                                <div class="contact-card text-center h-100">
                                    <div class="icon-circle bg-email">
                                        <i class="fa fa-envelope"></i>
                                    </div>
                                    <h5 class="card-title mt-3">Email</h5>
                                    <p class="card-text">
                                        <a href="mailto:pdam.kotategal@gmail.com" class="contact-link">
                                            pdam.kotategal@gmail.com
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>                    
                </div>                

                <!-- Tambahan: Layanan Customer Service WhatsApp -->
                <div class="col-md-12 d-flex mb-4">
                    <div class="card w-100 h-100" style="border-radius:15px; box-shadow: 6px 6px 10px rgba(0,0,0,0.1); border: 1px solid #e0f7fa;">
                        <div class="card-body">
                            <h5 class="card-title text-center mb-4" style="color:#5027e2; font-weight:600">
                                <i class="fa-brands fa-whatsapp"></i> Layanan Customer Service via WhatsApp
                            </h5>
                            <div class="row text-center">
                                <!-- Nomor 1 -->
                                <div class="col-md-3 col-6 mb-3">
                                    <a href="https://wa.me/6287880871319" target="_blank" class="whatsapp-card">
                                        <i class="fa-brands fa-whatsapp"></i>
                                        <p>CS 1</p>
                                        <p>+62 878 8087 1319</p>
                                    </a>
                                </div>
                                <!-- Nomor 2 -->
                                <div class="col-md-3 col-6 mb-3">
                                    <a href="https://wa.me/6287738609655" target="_blank" class="whatsapp-card">
                                        <i class="fa-brands fa-whatsapp"></i>
                                        <p>CS 2</p>
                                        <p>+62 877 3860 9655</p>
                                    </a>
                                </div>
                                <!-- Nomor 3 -->
                                <div class="col-md-3 col-6 mb-3">
                                    <a href="https://wa.me/6288225339720" target="_blank" class="whatsapp-card">
                                        <i class="fa-brands fa-whatsapp"></i>
                                        <p>CS 3</p>
                                        <p>+62 882 2533 9720</p>
                                    </a>
                                </div>
                                <!-- Nomor 4 -->
                                <div class="col-md-3 col-6 mb-3">
                                    <a href="https://wa.me/6282265550818" target="_blank" class="whatsapp-card">
                                        <i class="fa-brands fa-whatsapp"></i>
                                        <p>CS 4</p>
                                        <p>+62 822 6555 0818</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-12">
                    <div style="overflow:hidden;width:100%;height:500px; margin-top: 30px"><div id="my-map-display" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://maps.google.com/maps?q=Perumda%20Air%20Minum%20Tirta%20Bahari%20Kota%20Tegal&t=&z=17&ie=UTF8&iwloc=&output=embed"></iframe></div><a class="my-codefor-googlemap" rel="nofollow" href="https://www.bootstrapskins.com/themes" id="grab-map-info">premium bootstrap themes</a><style>#my-map-display img{max-height:none;max-width:none!important;background:none!important;}</style></div>
                </div>
                <div class="col-xl-12" style="margin: 20px 0px">
                    <hr>
                </div>
                <div class="col-lg-4">
                    <div class="sidebar">
                        <div class="widget" style="margin-bottom:25px">
                            <h5 class="widget_title" style="margin-bottom: 0px">Berita Lainnya</h5>
                        <hr style="width:32%;text-align:left;margin-left:0; border-width: 2px; margin-bottom: 30px; background-color:#5027e2">
                            <ul class="recent_post border_bottom_dash list_none">
                                @foreach ($beritaterkait as $item)    
                                <li>
                                    <div class="post_footer">
                                        <div class="post_img">
                                            <a href="/detail_berita/{{$item->id_berita}}"><img style="width: 80px" src="{{ asset('foto berita') }}/{{ $item->gambar_berita }}" alt="letest_post1"></a>
                                        </div>
                                        <div class="post_content">
                                            <h6><a href="/detail_berita/{{$item->id_berita}}">{{ \Illuminate\Support\Str::words(strip_tags($item->judul_berita), 5, $end = '...') }}</a></h6>
                                            <p class="small m-0">{{ date('d-m-Y H:i:s', strtotime($item->tanggal_berita)) }}</p>
                                        </div>
                                    </div>
                                </li>
                                @endforeach
                            </ul>
                        </div>

                    </div>
                </div>
                
                <div class="col-lg-4">
                    <div class="sidebar">
                        <div class="widget" style="margin-bottom:25px">
                            <h5 class="widget_title" style="margin-bottom: 0px">Gangguan Lainnya</h5>
                        <hr style="width:32%;text-align:left;margin-left:0; border-width: 2px; margin-bottom: 30px; background-color:#5027e2">
                            <ul class="recent_post border_bottom_dash list_none">
                                @foreach ($gangguanterkait as $item)    
                                <li>
                                    <div class="post_footer">
                                        <div class="post_img">
                                            <a href="/detail_gangguan/{{$item->id_gangguan}}"><img style="width: 80px" src="{{ asset('foto gangguan') }}/{{ $item->gambar_gangguan }}" alt="letest_post1"></a>
                                        </div>
                                        <div class="post_content">
                                            <h6><a href="/detail_gangguan/{{$item->id_gangguan}}">{{ \Illuminate\Support\Str::words(strip_tags($item->judul_gangguan), 5, $end = '...') }}</a></h6>
                                            <p class="small m-0">{{ date('d-m-Y H:i:s', strtotime($item->tanggal_gangguan)) }}</p>
                                        </div>
                                    </div>
                                </li>
                                @endforeach
                            </ul>
                        </div>

                    </div>
                </div>

                <div class="col-xl-4">
                    <div class="widget" style="margin-bottom:25px">
                        <h5 class="widget_title" style="margin-bottom: 0px">Galeri Lainnya</h5>
                        <hr style="width:32%;text-align:left;margin-left:0; border-width: 2px; margin-bottom: 30px; background-color:#5027e2">
                        <ul class="grid_container gutter_medium work_col3 portfolio_gallery portfolio_style1 animation masonry" data-animation="fadeInUp" data-animation-delay="0.04s" style="margin-top: 20px">
                            @foreach ($galeriterkait as $item)
                            <!-- START PORTFOLIO ITEM -->
                            <li class="grid_item web-design">
                                <div class="portfolio_item" style="box-shadow: 1px 1px 8px #11c4e4;">
                                    <a href="#" class="image_link">
                                        <img src="{{asset('foto galeri')}}/{{$item->gambar_galeri}}" alt="image" style="height:100px" class="d-none d-md-block">
                                        <img src="{{asset('foto galeri')}}/{{$item->gambar_galeri}}" alt="image" class="d-sm-block d-md-none">
                                    </a>
                                        <div class="portfolio_content">
                                            <div class="link_container">
                                                <a href="{{asset('foto galeri')}}/{{$item->gambar_galeri}}" class="image_popup"><i class="ion-image"></i></a>
                                                <a href="/detail_galeri/{{$item->id_galeri}}" ><i
                                                    class="ion-eye" title="detail"></i></a>
                                            </div>
                                    </div>
                                </div>
                            </li>
                            <!-- END PORTFOLIO ITEM -->
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
<!-- END SECTION BLOG -->