<section class="main-contact-form-area py-5">
    <div class="container">
        <div class="row">
            <!-- Left Column -->
            <div class="col-12 col-md-6 shadow p-md-5 p-sm-4 text mb-4 mb-md-0">
                <div class="contact-info-box-style1">
                    <div class="box1"></div>
                    <div class="title d-block position-relative mb-4">
                        <h2 class="tag-line"><?= h($contactDetails->title) ?></h2>
                        <p><?= h($contactDetails->content) ?></p>
                    </div>

                    <ul class="list-unstyled border contact-info-1 p-3 p-md-5">
                        <li class="d-flex flex-column flex-md-row align-items-start mb-4">

                            <div class="icon mb-2 mb-md-0 me-3 me-md-5">
                                <span class="icon-map "></span>
                            </div> 

                            <div class="text">
                                <span>Locate Our Office</span>
                                <h5><?= $contactDetails->address1 ?></h5>
                               <h5><?= $contactDetails->postal_address ?></h5> 
                            </div>
                           
                        </li>

                        <li class="d-flex flex-column flex-md-row align-items-start mb-4">
                            <div class="icon mb-2 mb-md-0 me-3 me-md-4">
                                <span class="icon-clock"></span>
                            </div>
                            <div class="text">
                                <div class="mb-2"><span>Office Hours</span></div>
                                <h5><?= $contactDetails->othersocialmedialink ?></h5>
                            </div>
                        </li>

                        <li class="d-flex flex-column flex-md-row align-items-start">
                            <div class="icon mb-2 mb-md-0 me-3 me-md-4">
                                <span class="icon-phone"></span>
                            </div>
                            <div class="text">
                                <div class="mb-2"><span>Call Us</span></div>
                                <h5><?= $contactDetails->phone1 ?></h5>
                                <h5><?= $contactDetails->email1 ?></h5>
                            </div>
                        </li>
                    </ul>

                    <div class="bottom-box d-flex justify-content-between align-items-center flex-wrap mt-4 mt-md-5">
                        <div class="btn-box mb-3">
                            <a href="#" class="">
                                <i class="bi bi-arrow-down-short"></i> Customer Care
                            </a>
                        </div>

                        <div class="footer-social-link-style1">
                            <ul class="list-unstyled d-flex mb-0">
                                <li class="mx-2">
                                    <a href="#" class="social-icon">
                                        <i class="bi bi-youtube"></i>
                                    </a>
                                </li>
                                <li class="mx-2">
                                    <a href="#" class="social-icon">
                                        <i class="bi bi-instagram"></i>
                                    </a>
                                </li>
                                <li class="mx-2">
                                    <a href="#" class="social-icon">
                                        <i class="bi bi-twitter"></i>
                                    </a>
                                </li>
                                <li class="mx-2">
                                    <a href="#" class="social-icon">
                                        <i class="bi bi-facebook"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column (Contact Form) -->
            <div class="col-12 col-md-6 bg-gray pt-4 pt-md-5">
                <div class="contact-form mx-md-5 ps-md-4">
                    <?= $this->Flash->render() ?>
                    <?= $this->Form->create(null, ['url' => ['controller' => 'ContactUs', 'action' => 'contact-form']]) ?>

                    <div class="form-group mb-3">
                        <label>Name</label>
                        <div class="input-box">
                            <?= $this->Form->input('name', ['class' => 'form-control pb-3', 'required' => 'true']); ?>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label>Email Address</label>
                        <div class="input-box">
                            <?= $this->Form->input('email', ['class' => 'form-control pb-3', 'required' => 'true']); ?>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label>Ph. Num</label>
                        <div class="input-box">
                            <?= $this->Form->input('phone', ['class' => 'form-control pb-3', 'required' => 'true']); ?>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label>Subject</label>
                        <div class="input-box">
                            <?= $this->Form->input('subject', ['class' => 'form-control pb-3', 'required' => 'true']); ?>
                        </div>
                    </div>

                    <div class="form-group mb-4">
                        <label>Message</label>
                        <div class="input-box">
                            <?= $this->Form->textarea('message', [
                                'class' => 'form-control text-line-input mb-3',
                                'rows' => 6,
                                'id' => 'subject',
                                'required' => 'true'
                            ]); ?>
                        </div>
                    </div>

                    <div class="button-box">
                        <?= $this->Form->submit('Send A Message', ['class' => 'btn btn-custom p-3']); ?>
                    </div>

                    <?= $this->Form->end() ?>
                </div>
            </div>
        </div>
    </div>
</section>

<!--Google Map Start-->
<section class="google-map">
    <iframe
        src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1784.7827082237054!2d-0.19340058330564605!3d5.616743106973074!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfdf9ba565d19fc5%3A0xba4634367e4122e0!2sStandard%20Pensions%20Trust!5e1!3m2!1sen!2sgh!4v1705500776904!5m2!1sen!2sgh"
        width="100%" height="550" style="border:0;" allowfullscreen="" loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
    </iframe>
</section>
<!--Google Map End-->

<section class="customer-care-numbers-area">
    <div class="container">
        <div class="title-box">
            <h2>Contact an advisor today</h2>
        </div>
        <div class="row">
            <div class="col-xl-12"></div>
            <div class="customer-care-numbers-tab">
                <div class="customer-care-numbers-tab__button">
                    <ul class="tabs-button-box clearfix">
                        <li data-tab="#personal-banking" class="tab-btn-item active-btn-item">
                            <h4>Advisor - 1</h4>
                        </li>
                        <li data-tab="#corporate-banking" class="tab-btn-item">
                            <h4>Advisor - 2</h4>
                        </li>
                    </ul>
                </div>

                <!--Start Tabs Content Box-->
                <div class="tabs-content-box">
                    <!--Tab-->
                    <div class="tab-content-box-item tab-content-box-item-active" id="personal-banking">

                        <div class="customer-care-numbers-tab-content-box-item">
                            <div class="customer-care-numbers-table-box">
                                <div class="table-outer">
                                    <table class="customer-care-numbers-table">
                                        <thead class="header">
                                            <tr>
                                                <th>Names</th>
                                                <th>Contact Details</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="inner-title">
                                                    <h3>Mr. Benjamin</h3>
                                                </td>
                                                <td class="contact-info">
                                                    <ul>
                                                        <li>
                                                            <a href="+233(0)501600850">+233 (0) 501 600
                                                                850</a>
                                                        </li>
                                                        <li>
                                                            <a class="color2"
                                                                href="benosei@standardpensionstrust.com">benosei@standardpensionstrust.com</a>
                                                        </li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="inner-title">
                                                    <h3>Mrs. Gina Smith</h3>
                                                </td>
                                                <td class="contact-info">
                                                    <ul>
                                                        <li>
                                                            <a href="+233(0)501600846">+233 (0) 501 600
                                                                846</a>
                                                        </li>
                                                        <li>
                                                            <a class="color2"
                                                                href="gina.smith@standardpensionstrust.com">gina.smith@standardpensionstrust.com</a>
                                                        </li>
                                                    </ul>
                                                </td>
                                            </tr>


                                            <tr>
                                                <td class="inner-title">
                                                    <h3>Mr. Henry Opoku</h3>
                                                </td>
                                                <td class="contact-info">
                                                    <ul>
                                                        <li>
                                                            <a href="+233(0)501600856">+233 (0) 501 600
                                                                856</a>
                                                        </li>
                                                        <li>
                                                            <a class="color2"
                                                                href="h.opoku@standardpensionstrust.com">h.opoku@standardpensionstrust.com</a>
                                                        </li>
                                                    </ul>
                                                </td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </div>

                                <div class="bottom-text text-center">
                                    <h3>Let us know how we can help you.</h3>
                                </div>

                            </div>
                        </div>

                    </div>
                    <!--Tab-->
                    <div class="tab-content-box-item" id="corporate-banking">

                        <div class="customer-care-numbers-tab-content-box-item">
                            <div class="customer-care-numbers-table-box">
                                <div class="table-outer">
                                    <table class="customer-care-numbers-table">
                                        <thead class="header">
                                            <tr>
                                                <th>Names</th>
                                                <th>Contact Details</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="inner-title">
                                                    <h3>Mr. Benjamin</h3>
                                                </td>
                                                <td class="contact-info">
                                                    <ul>
                                                        <li>
                                                            <a href="+233(0)501600850">+233 (0) 501 600
                                                                850</a>
                                                        </li>
                                                        <li>
                                                            <a class="color2"
                                                                href="benosei@standardpensionstrust.com">benosei@standardpensionstrust.com</a>
                                                        </li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="inner-title">
                                                    <h3>Mrs. Gina Smith</h3>
                                                </td>
                                                <td class="contact-info">
                                                    <ul>
                                                        <li>
                                                            <a href="+233(0)501600846">+233 (0) 501 600
                                                                846</a>
                                                        </li>
                                                        <li>
                                                            <a class="color2"
                                                                href="gina.smith@standardpensionstrust.com">gina.smith@standardpensionstrust.com</a>
                                                        </li>
                                                    </ul>
                                                </td>
                                            </tr>


                                            <tr>
                                                <td class="inner-title">
                                                    <h3>Mr. Henry Opoku</h3>
                                                </td>
                                                <td class="contact-info">
                                                    <ul>
                                                        <li>
                                                            <a href="+233(0)501600856">+233 (0) 501 600
                                                                856</a>
                                                        </li>
                                                        <li>
                                                            <a class="color2"
                                                                href="h.opoku@standardpensionstrust.com">h.opoku@standardpensionstrust.com</a>
                                                        </li>
                                                    </ul>
                                                </td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </div>

                                <div class="bottom-text text-center">
                                    <h3>Let us know how we can help you.</h3>
                                </div>

                            </div>
                        </div>

                    </div>

                </div>

            </div>
        </div>

    </div>
    </div>

</section>