<script src="<?= root ?>assets/js/bootstrap.min.js"></script>

<div class="container mt-5 pb-5">
        <h4 class="fw-bold py-4 bg-light rounded-1 px-4 mb-5"><?=T::more_services?></h4>

        <!-- packages -->
        <div class="row mt-4">

            <div class="col-sm-2">
                <span class="text-muted fw-bold"><?=T::packages?></span>
            </div>

            <div class="col-sm-10 mt-3 mt-sm-0">

                <div class="row main--container">

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Packages/Domestic packages.svg" alt="">
                        <p class="lh-sm"><?=T::domestic_packages?></p>
                    </div>

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Packages/Cruise packages.svg" alt="">
                        <p class="lh-sm"><?=T::cruise_packages?></p>
                    </div>

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Packages/Packages.svg" alt="">
                        <p class="lh-sm"><?=T::packages?></p>
                    </div>

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Packages/Sports packages.svg" alt="">
                        <p class="lh-sm"><?=T::sports_packages?></p>
                    </div>

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Packages/Language course packages.svg" alt="">
                        <p class="lh-sm"><?=T::language_course_packages?></p>
                    </div>

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Packages/Summer camps.svg" alt="">
                        <p class="lh-sm"><?=T::summer_camps?></p>
                    </div>

                </div>

            </div>

        </div>

        <!-- transportation -->
        <div class="row mt-3 mt-md-4">

            <div class="col-sm-2">
                <span class="text-muted fw-bold"><?=T::transportation?></span>
            </div>

            <div class="col-sm-10 mt-3 mt-sm-0">

                <div class="row main--container">

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Transportation/Car rental.svg" alt="">
                        <p class="lh-sm"><?=T::car_rental?></p>
                    </div>

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Transportation/Transfers.svg" alt="">
                        <p class="lh-sm"><?=T::transfers?></p>
                    </div>

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Transportation/Train tickets.svg" alt="">
                        <p class="lh-sm"><?=T::train_tickets?></p>
                    </div>

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Transportation/Private jet.svg"" alt="">
                        <p class="lh-sm"><?=T::private_jet?></p>
                    </div>

                </div>

            </div>

        </div>

        <!-- sightseening  -->
        <div class="row mt-3 mt-md-4">

            <div class="col-sm-2">
                <span class="text-muted fw-bold"><?=T::sightseeing_and_activities?></span>
            </div>

            <div class="col-sm-10 mt-3 mt-sm-0">

                <div class="row main--container">

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Sightseeing & activities/Domestic activities.svg" alt="">
                        <p class="lh-sm"><?=T::domestic_activities?></p>
                    </div>

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Sightseeing & activities/International activities.svg" alt="">
                        <p class="lh-sm"><?=T::international_activities?></p>
                    </div>

                </div>

            </div>

        </div>

        <!-- visa  -->
        <div class="row mt-3 mt-md-4">

            <div class="col-sm-2">
                <span class="text-muted fw-bold"><?=T::visa_services?></span>
            </div>

            <div class="col-sm-10 mt-3 mt-sm-0">

                <div class="row main--container">

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Visa services/Visa.svg" alt="">
                        <p class="lh-sm"><?=T::visa?></p>
                    </div>

                </div>

            </div>

        </div>

        <!-- meet & greet  -->
        <div class="row mt-3 mt-md-4">

            <div class="col-sm-2">
                <span class="text-muted fw-bold"><?T::meet_and_greet?></span>
            </div>

            <div class="col-sm-10 mt-3 mt-sm-0">

                <div class="row main--container">

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Meet & greet/Airport lounge passes.svg" alt="">
                        <p class="lh-sm"><?=T::airport_lounge_passes?></p>
                    </div>

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Meet & greet/VIP meet & greet.svg"" alt="">
                        <p class="lh-sm"><?=T::vIP_meet_and_greet?></p>
                    </div>

                </div>

            </div>

        </div>

        <!-- other services  -->
        <div class="row mt-3 mt-md-4">

            <div class="col-sm-2">
                <span class="text-muted fw-bold"><?=T::other_services?></span>
            </div>

            <div class="col-sm-10 mt-3 mt-sm-0">

                <div class="row main--container">

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Other services/Triptyque.svg" alt="">
                        <p class="lh-sm"><?=T::triptyque?></p>
                    </div>

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Other services/International driving licence.svg" alt="">
                        <p class="lh-sm"><?=T::international_driving_licence?></p>
                    </div>

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Other services/cargo.svg" alt="">
                        <p class="lh-sm"><?=T::cargo?></p>
                    </div>

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Other services/Conference services.svg" alt="">
                        <p class="lh-sm"><?=T::conference_services?></p>
                    </div>

                    <div class="col-12 mb-5 col-sm-4 mb-sm-3 col-md-2 service">
                        <img src="<?=root?>assets/img/services/Other services/Concierge services.png" alt="">
                        <p class="lh-sm"><?=T::concierge_services?></p>
                    </div>

                </div>

            </div>

        </div>


        <!-- modal  -->
        <div class="modal fade" id="modal">
            <div class="modal-dialog">
                <div class="modal-content">
        
                    <div class="modal-header">
                    <?=T::how_to_book?>
                        <button class="btn-close" data-bs-dismiss="modal" type="button"></button>
                    </div>
                    <div class="modal-body">
                        <h5 class="text-muted mb-2">
                            <span id="service--name"></span>
                        </h5>
                        <p><?=T::please_contact_us_for_the_service?></p>
                        <!-- <p>fdfds</p> -->
                    </div>
        
                    <a href="tel:+92 300 1234567" class="modal-body d-flex gap-3 align-items-center border-top text-decoration-none text-black call--us">
                        <div class="service--name-icon">
                            <img src="<?=root?>assets/img/services/call-icon.svg" alt="">
                        </div>
                        <div class="d-flex flex-column">
                            <span><?=T::call_us?></span>
                            <?php if (!empty(app()->app->contact_phone)){?>
                                <span class="text-muted fw-bold"><?=app()->app->contact_phone?></span>
                            <?php } ?>
                        </div>
                    </a>
        
                    <div class="modal-footer">
                        <button class="btn btn-danger" data-bs-dismiss="modal" type="button"><?=T::close?></button>
                    </div>
        
                </div>
            </div>
        </div>

    </div>
    
<hr>

<script>
const modalContainer = document.querySelector('#modal.modal.fade');
const modal = new bootstrap.Modal(modalContainer);
const btns = document.querySelectorAll('.service');

btns.forEach(btn => btn.addEventListener('click', function(e) {
    e.stopPropagation();
    modalContainer.querySelector('.modal-body #service--name').textContent = `(${this.querySelector('p').textContent.trim()})`;
    modal.show();
}))
</script>