
<script src="<?=root?>assets/js/bootstrap.min.js"></script>
 <div class="container-fluid" style="background-image: url('assets/img/mores.png'); background-size: cover;     background-position: center;  height: 400px;">
     <div class="container-fluid" style="     position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    background-color: #218cffab;
    padding: 1%;
}">
        <h4 class="fw-bold container-fluid" style="font-size: 40px;
    color: #fff;"><?=T::more_services?></h4>
    </div>
</div>

<div class="container mt-5 pb-5" >


        <!-- packages -->
        <div class="row mt-4"  style="background-color: #fff;box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
    padding: 28px 39px 0px;
    border-radius: 10px;" >

            <div class="col-sm-2" style="margin-top:30px;">
                <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/first.png" 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/sec.png" 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/th.png" 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/hand.png" 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/gr.png" 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/camping.png" alt="">
                        <p class="lh-sm"><?=T::summer_camps?></p>
                    </div>

                </div>

            </div>

        </div>

        <!-- transportation -->
        <div class="row mt-3 mt-md-4"  style="background-color: #fff;box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
    padding: 28px 39px 0px;
    border-radius: 10px;">

            <div class="col-sm-2"  style="margin-top:30px;">
                <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.png" 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/arrow.png" 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.png" 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/jet.png"" alt="">
                        <p class="lh-sm"><?=T::private_jet?></p>
                    </div>

                </div>

            </div>

        </div>

        <!-- sightseening  -->
        <div class="row mt-3 mt-md-4" style="background-color: #fff;box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
    padding: 28px 39px 0px;
    border-radius: 10px;">

            <div class="col-sm-2"  style="margin-top:30px;">
                <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/camera.png" 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/global.png" alt="">
                        <p class="lh-sm"><?=T::international_activities?></p>
                    </div>

                </div>

            </div>

        </div>

        <!-- visa  -->
        <div class="row mt-3 mt-md-4"  style="background-color: #fff;box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
    padding: 28px 39px 0px;
    border-radius: 10px;">

            <div class="col-sm-2"  style="margin-top:30px;">
                <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/passport.png" alt="">
                        <p class="lh-sm"><?=T::visa?></p>
                    </div>

                </div>

            </div>

        </div>

        <!-- meet & greet  -->
        <div class="row mt-3 mt-md-4"  style="background-color: #fff;box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
    padding: 28px 39px 0px;
    border-radius: 10px;">

            <div class="col-sm-2"  style="margin-top:30px;">
                <span class="text-muted fw-bold">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.png" 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/handshake.png"" 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"  style="background-color: #fff;box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
    padding: 28px 39px 0px;
    border-radius: 10px;">

            <div class="col-sm-2"  style="margin-top:30px;">
                <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/Triptyqu.png" 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/ticket.png" 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/ship.png" 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.png" 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.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>