@extends('layout.master')

@section('title', 'Hubungi Kami')

@push('css')
<style>
    .embed-responsive-4by3 {
        height: 100%;
    }

    .embed-container {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .embed-container iframe {
        flex-grow: 1;
    }
</style>
@endpush


@section('content')
<div class="page-header">
    <h5 class="page-title">Hubungi Kami</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('laman_utama') }}">Laman Utama</a></li>
            <li class="breadcrumb-item active">Hubungi</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">        
        <div class="container">

            <div class="card mx-auto" style="max-width: 80rem;">
                <div class="row g-0">
                    <!-- Map Section -->
                    <div class="col-md-6">
                        <div class="embed-container">
                            <iframe width="100%" height="100%" style="aspect-ratio: 16 / 11;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="{{ $cms['hubungikami-addressurl'] ?? '' }}">
                                <a href="https://www.maps.ie/population/">Population calculator map</a>
                            </iframe>
                        </div>
                    </div>
                    
                    <!-- Address Section -->
                    <div class="col-md-6">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <h2 class="mb-5 fw-bold" style="font-size: 2rem;">Hubungi Kami</h2>
                                @if(Auth::user()->role_id != 4)
                                    <div><a class="btn btn-primary btn-sm" href="{{ route('pengurusan_web.hubungikami') }}"><i class="bi bi-pencil"></i> Kemaskini</a></div>
                                @endif
                            </div>

                            <div class="d-flex flex-column gap-4">
                                <!-- Address -->
                                <div class="d-flex align-items-start">
                                    <div class="contact-icon bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width: 50px; height: 50px; font-size: 1.25rem;">
                                        <i class="fa-solid fa-location-dot"></i>
                                    </div>
                                    <div>
                                        <h6 class="fw-bold mb-1">Alamat</h6>
                                        <div class="text-muted" style="line-height: 1.6;" id="address"></div>
                                    </div>
                                </div>

                                <!-- Phone -->
                                <div class="d-flex align-items-start">
                                    <div class="contact-icon bg-success bg-opacity-10 text-success rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width: 50px; height: 50px; font-size: 1.25rem;">
                                        <i class="fa-solid fa-phone"></i>
                                    </div>
                                    <div>
                                        <h6 class="fw-bold mb-1">No. Telefon</h6>
                                        <div class="text-muted" style="line-height: 1.6;">{{ $cms['hubungikami-phoneno'] ?? '' }}</div>
                                    </div>
                                </div>

                                <!-- Email -->
                                <div class="d-flex align-items-start">
                                    <div class="contact-icon bg-warning bg-opacity-10 text-warning rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width: 50px; height: 50px; font-size: 1.25rem;">
                                        <i class="fa-solid fa-envelope"></i>
                                    </div>
                                    <div>
                                        <h6 class="fw-bold mb-1">E-mel</h6>
                                        <a class="text-muted mb-0 text-decoration-underline" href="mailto:{{ $cms['hubungikami-email'] ?? '' }}">
                                            {{ $cms['hubungikami-email'] ?? '' }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

@section('js')


<script>

    const deltaAddress = @json($cms['hubungikami-address'] ?? '{}');
    document.querySelector('#address').innerHTML = deltaToHtml(JSON.parse(deltaAddress));

    function deltaToHtml(delta) {
        let html = '';

        delta.ops.forEach(op => {
            if (typeof op.insert === 'string') {
                const escaped = op.insert
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;');

                html += escaped.replace(/\n/g, '<br>');
            }
        });

        return html;
    }
</script>
@endsection