@extends('layout.app')

@section('content')
    @include('includes.services.registration')
    @include('includes.services.compliance')
    @include('includes.services.accounting')
    @include('includes.services.taxation')
    @include('includes.services.training')
    @include('includes.services.bank-works')
    @include('includes.services.advisory')
    @include('includes.services.agreement-drafting')
    @include('includes.services.share-lagat')
    @include('includes.services.renewals')
    @include('includes.services.conversion')
    @include('includes.services.special-package')
    @include('includes.services.license-and-approval')
    @include('includes.services.amendment')

    @include('includes.service-enquiry-modal')

    <!-- section start -->
    <section class="layout-pt-xl layout-pb-md">
        <!-- container start -->
        <div data-anim-wrap class="container">
            <!-- row start -->
            <div class="row justify-content-center text-center">
                <div class="col-xl-7 col-lg-9">
                    <div data-anim-child="slide-up" class="sectionHeading -lg">
                    <p class="sectionHeading__subtitle">
                        Services
                    </p>
                    <h2 class="sectionHeading__title">
                        Our Services
                    </h2>
                    </div>
                </div>
            </div>
            <!-- row end -->

            <!-- row start -->
            <div data-anim-wrap class="row x-gap-60 y-gap-48 layout-pt-md">
                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-regular fa-registered d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Registration
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We register company and business firm within short and stipulated time in as per our client&#39;s budget.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('registration')" class="button -icon text-black">
                                    Place Order
                                    <i
                                        class="icon size-xs str-width-md"
                                        data-feather="arrow-right"
                                    ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-regular fa-newspaper d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Compliance
                            </h3>

                            <p class="serviceCard__text mt-16">
                                Business Basket suggests right procedures or help you as
                                per the requirements for the registration.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('compliance')"  class="button -icon text-black">
                                    Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-solid fa-file-invoice-dollar d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Accounting
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We provide accounting and book keeping services both on a part-time or full -time basis.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('accounting')"  class="button -icon text-black">
                                    Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-solid fa-coins d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Taxation
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We provide various training programs regarding VAT and tax planning. We control extravagant
                                wastage of client&#39;s budget.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('taxation')" class="button -icon text-black">
                                    Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-solid fa-book d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Training
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We provide various training programs regarding Accounting, VAT and tax planning.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('training')" class="button -icon text-black">
                                    Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-solid fa-building-columns d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Bank Works
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We offer bank related services such as loan documentation, projection and provisional report along
                                with consulting which loan is feasible to the clients.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('bank-works')" class="button -icon text-black">
                                    Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-solid fa-comment-dots d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Advisory
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We advise the client regarding start-us, taxation and VAT planning as well as business growth.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('advisory')" class="button -icon text-black">
                                    Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-solid fa-folder-plus d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Agreement Drafting
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We assist our clients in the drafting and vetting of a variety of agreements and commercial
                                contracts.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('agreement-drafting')" class="button -icon text-black">
                                    Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-solid fa-users d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Share Lagat
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We assist our clients in the drafting and vetting of a variety of agreements and commercial
                                contracts.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('share-lagat')" class="button -icon text-black">
                                    Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-solid fa-plus d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Renewals
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We provide a bunch of renewal services in the sectors like business firms, industries, wards,
                                municipals, companies, trademarks, licenses, and soon.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('renewals')" class="button -icon text-black">
                                    Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-solid fa-rotate d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Conversion
                            </h3>

                            <p class="serviceCard__text mt-16">
                                Our service includes conversion within the area of private to public, public to private, single
                                shareholder to multiple shareholders, and vice versa.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('conversion')" class="button -icon text-black">
                                    Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-solid fa-box d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Special Package
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We provide a range of customized and economical business packages suitable for SMEs.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('special-package')" class="button -icon text-black">
                                    Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                    data-anim-child="img-right cover-dark-2"
                                    class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                    <i
                                        class="fa-solid fa-circle-check d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                    ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                License & Approval
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We provide a range of customized and economical business packages suitable for SMEs.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('license-and-approval')" class="button -icon text-black">
                                    Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-solid fa-dice d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Amendment Works
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We provide a range of customized and economical business packages suitable for SMEs.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('amendment')" class="button -icon text-black">
                                    Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->
@endsection

@section('scripts')
    <script>
        MicroModal.init();
        let activeServiceModal = '';

        function openServiceModal (service) {
            activeServiceModal = service;

            MicroModal.show(service);
        }

        function openServiceEnquiryModal (service, mainService = '') {
            MicroModal.show('enquiry-modal');
            let serviceName = document.querySelector(`#${activeServiceModal} .service__title`).innerText;

            document.querySelector('.service_name').value = `${serviceName}, ${mainService ?? null} ${service}`;
            document.querySelector('.service__enquiry__title').innerText = mainService ? `${service} (${mainService})` : `${service}`;
        }

        let services = document.querySelectorAll('.service');

        services.forEach(service => {
            service.addEventListener('click', () => {
                let chosenService = service.querySelector('.sub-text').innerText;
                let hasMultipleServices = service.parentElement.parentElement.className.includes('has-multiple-services');

                let mainService = '';

                if (hasMultipleServices) {
                    mainService = service.parentElement.parentElement.querySelector('.service__subtitle').innerText;
                }

                MicroModal.close();

                openServiceEnquiryModal(chosenService, mainService);
            })
        })
    </script>
@endsection