
<div class="container-fluid">

    <div class="row py-5 px-5 text-center bg-sky-blue">
        <?php
        $details = [
            ['icon' => 'bi bi-telephone-fill', 'label' => 'Phone:', 'value' => h($contactDetails->phone1)],
            ['icon' => 'bi bi-envelope-fill', 'label' => 'Location:', 'value' => h($contactDetails->address1)],
            ['icon' => 'bi bi-geo-alt-fill', 'label' => 'Email:', 'value' => h($contactDetails->email1)],
            ['icon' => 'bi bi-mailbox2', 'label' => 'Write to us:', 'value' => h($contactDetails->postal_address)]
        ];

        foreach ($details as $detail) {
            ?>
            <div class="col-xs-12 col-sm-12 col-md-3 col-xl-3 col-xxl-3 ">
                <span class="icon">
                    <div class="mb-3">
                        <i class="<?= h($detail['icon']) ?> icon-bg fs-4"></i>
                    </div>
                </span>
                <div class="mb-3"><b><?= h($detail['label']) ?></b></div>
                <?= $detail['value'] ?>
            </div>
        <?php } ?>
    </div>

    <div class="row pt-4 px-4">
        <div class="col-xs-12 col-sm-6 col-md-6 col-xl-6 col-xxl-6 mt-4">
            <div class="row mb-3">
                <h2 class="font-weight-bolder">Our Branches</h2>
            </div>

            <?php
            $branches = [
                ['name' => 'Head Office', 'address' => h($contactDetails->address1), 'phone' => h($contactDetails->phone1), 'email' => h($contactDetails->email1)],
                ['name' => 'Madina Agency', 'address' => h($contactDetails->address3), 'phone' => h($contactDetails->phone2), 'email' => h($contactDetails->email2)],
                ['name' => 'Teshie Nungua Agency', 'address' => h($contactDetails->address2), 'phone' => h($contactDetails->phone3), 'email' => h($contactDetails->email3)],
            ];

            foreach ($branches as $branch) {
                ?>
                <div class="row mb-4">
                    <div>
                    <h6 class="mb-4"><b><?= $branch['name'] ?></b></h6>
                        <p class="mb-4">
                            <span class="f-icon_back me-3">
                                <i class="bi bi-geo-alt-fill fs-5 fw-bold"></i>
                            </span>
                            <span class="branch-name"><?= $branch['address'] ?></span>
                        </p>

                        <p class="mb-4">
                            <span class="f-icon_back me-3">
                                <i class="bi bi-phone-fill fs-5 fw-bold"></i>
                            </span> <?= $branch['phone'] ?>
                        </p>

                        <p class="mb-4">
                            <span class="f-icon_back me-3">
                                <i class="bi bi-envelope-fill fs-5 fw-bold">
                                </i>
                            </span> <?= $branch['email'] ?>
                        </p>

                    </div>
                </div>
            <?php } ?>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-6 col-xl-6 col-xxl-6">
            <div class="shadow p-5 mb-5 bg-body rounded">
                <div class="mb-4">
                    <h2 class="d-flex justify-content-start "><b>Get in touch</b></h2>
                    <p>You can reach us anytime</p>
                </div>
                <?= $this->Flash->render() ?>
                <?= $this->Form->create(null, ['url' => ['controller' => 'ContactUs', 'action' => 'contacForm']]) ?>

                <?= $this->Form->hidden('formName', ['value' => 'usersFeedback']); ?>

                <?= $this->Form->control('name', [
                    'label' => 'Full Name',
                    'class' => 'form-control text-line-input mb-3 h-60',
                    'required' => true
                ]) ?>

                <?= $this->Form->control('phone', [
                    'type' => 'tel',
                    'label' => 'Phone',
                    'class' => 'form-control text-line-input mb-3 h-60',
                    'required' => true
                ]) ?>

                <?= $this->Form->control('email', [
                    'type' => 'email',
                    'label' => 'Email',
                    'class' => 'form-control text-line-input mb-3 h-60',
                    'required' => true
                ]) ?>

                <?= $this->Form->control('message', [
                    'type' => 'textarea',
                    'label' => 'Message',
                    'class' => 'form-control text-line-input mb-3',
                    'rows' => 6,
                    'required' => true
                ]) ?>

                <div class="py-4">
                    <?= $this->Form->button('Send', ['class' => 'btn btn-primary btn-lg btn-block mb-10 form-control shadow', 'id' => 'send_message']) ?>
                </div>
                <?= $this->Form->end() ?>
            </div>
        </div>
    </div>

    <div class="row-fluid">
        <iframe
            src="https://maps.google.com/maps?q=<?= urlencode(h($contactDetails->google_map_address)) ?>&amp;output=embed"
            height="400" width="100%"  allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade">
        </iframe>
    </div>

</div>

