@include('htmlpage.frontent.layout.app')
<main class="main">
    <section class="section-box">
        <div class="banner-hero hero-1 banner-homepage4">
            <div class="banner-inner">
                <div class="row">
                    <div class="col-xl-7 col-lg-12">
                        <div class="block-banner">
                            <h1 class="heading-banner wow animate__animated animate__fadeInUp">
                                {{ strtok($solution->page_name, ' ') }} <span
                                    class="color-brand-2">{{ substr($solution->page_name, strlen(strtok($solution->page_name, ' '))) }}</span>
                            </h1>

                            <div class="banner-description mt-20 wow animate__animated animate__fadeInUp"
                                data-wow-delay=".1s">{!! $solution->content !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-5 col-lg-12 d-none d-xl-block col-md-6">
                        <div class="banner-imgs">
                            <div class="block-1 shape-1"><img class="img-responsive" alt="zillion"
                                    src="{{ asset('storage/' . $solution->image_path) }}"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-box mt-50">
        <div class="container">
            <div class="box-improve">
                <div class="row">
                    <div class="col-lg-5 col-md-12 col-sm-12 "><a href="blog-details.html"><img
                                src="{{ asset('storage/' . $solution->about_image) }}" alt="zillion"
                                class="mt-20 "></a></div>
                    <div class="col-lg-7 col-md-12 col-sm-12">
                        <div class="pb-30 pl-30 pr-30">
                            <h2 class="mt-20 mb-20"><a href="blog-details.html">{{ $solution->about_heading }}</a></h2>
                            <p class="mb-20">{!! $solution->about_content !!}</p>
                            <div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-box mt-50">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-12">

                    <div class="row">
                        <h5 class="border-bottom pb-15 mb-30">{{ $solution->section2_heading }}</h5>
                        <p class="mb-30">{!! $solution->section2_content !!}
                        </p>
                        @foreach ($features as $feature)
                            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
                                <div class="card-grid-2 hover-up">
                                    <div class="card-grid-2-image-left"><span class="flash"></span>
                                        <div class="image-box"><img src="http://127.0.0.1:8000/images/expertise.png"
                                                alt="Zillion" width="50"></div>
                                        <div class="right-info"><a class="name-job"
                                                href="company-details.html">{{ $feature->title }}</a></div>
                                    </div>
                                    <div class="card-block-info">
                                        <p class="font-sm color-text-paragraph">
                                            {!! $feature->content !!}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-box bg-15 pt-50 pb-50">
        <div class="container">
            <div class="row">

                <div class="col-md-5">
                    <img class="img-job-search mt-20" src="http://127.0.0.1:8000/images/img-job-search.png"
                        alt="Zillion">
                </div>
                <div class="col-md-7">
                    <h5 class="border-bottom pb-15 mb-30">{{ $solution->section3_heading }}
                    </h5>
                    {!! $solution->section3_content !!}
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 servicelistpage">
                    <h3 class="pt-4 pb-4">Frequently Asked Questions (FAQ)</h3>
                    <div class="accordion" id="accordionExample">
                        <div class="accordion" id="accordionExample">
                            @foreach ($faqs as $key => $serv)
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="heading{{ $key }}">
                                        <button class="accordion-button {{ $key === 0 ? '' : 'collapsed' }}"
                                            type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapse{{ $key }}"
                                            aria-expanded="{{ $key === 0 ? 'true' : 'false' }}"
                                            aria-controls="collapse{{ $key }}">
                                            {{ $serv->question }} <!-- Assuming `title` is a field from the service -->
                                        </button>
                                    </h2>
                                    <div id="collapse{{ $key }}"
                                        class="accordion-collapse collapse {{ $key === 0 ? 'show' : '' }}"
                                        aria-labelledby="heading{{ $key }}"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            {!! $serv->answer !!} <!-- Displaying rich text content here -->
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </section>
    <section class="section-box mt-50 mb-20">
        <div class="container">
            <div class="box-newsletter">
                <div class="row">
                    <div class="col-xl-3 col-12 text-center d-none d-xl-block"><img
                            src="{{ asset('img/newsletter-left.png') }}" alt="Zillion"></div>
                    <div class="col-lg-12 col-xl-6 col-12">
                        <h2 class="text-md-newsletter text-center">New Things Will Always<br> Update Regularly</h2>
                        <div class="box-form-newsletter mt-40">
                            <form class="form-newsletter">
                                <input class="input-newsletter" type="text" value=""
                                    placeholder="Enter your email here">
                                <button class="btn btn-default font-heading icon-send-letter">Subscribe</button>
                            </form>
                        </div>
                    </div>
                    <div class="col-xl-3 col-12 text-center d-none d-xl-block"><img
                            src="{{ asset('img/newsletter-right.png') }}" alt="Zillion"></div>
                </div>
            </div>
        </div>
    </section>
</main>
<div class="modal fade" id="ModalApplyJobForm" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content apply-job-form">
            <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            <div class="modal-body pl-30 pr-30 pt-50">
                <div class="row">
                    <div class="col-md-5">
                        <div class="media contact-info">
                            <span class="contact-info__icon"><i class="mdi mdi-phone-dial-outline"></i></span>
                            <div class="media-body">
                                <h3>Call Enquiry Assistance</h3>
                                <p>We are always available on call to assist you with any questions you may have.</p>
                            </div>
                        </div>
                        <div class="media contact-info">
                            <span class="contact-info__icon"><i class="mdi mdi-laptop"></i></span>
                            <div class="media-body">
                                <h3>Project Consultation</h3>
                                <p>We provide you with all technical consultations for your project.</p>
                            </div>
                        </div>
                        <div class="media contact-info">
                            <span class="contact-info__icon"><i class="mdi mdi-book-edit-outline"></i></span>
                            <div class="media-body">
                                <h3>Project Estimation</h3>
                                <p>You come to us with your project, and we do all of the planning and costing for you.
                                </p>
                            </div>
                        </div>
                        <div class="media contact-info">
                            <span class="contact-info__icon"><i class="mdi mdi-account-clock-outline"></i></span>
                            <div class="media-body">
                                <h3>Schedule Your Appointment</h3>
                                <p>We assist you in scheduling appointments whenever you wish to meet us.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <!-- <form class="form-contact contact_form" action="" method="post" id="contactForm" novalidate="novalidate"> -->
                        <form class="login-register text-start mt-20 pb-30" action="#">
                            <div class="form-group">
                                <textarea name="" id="" cols="30" rows="10" placeholder="Whats your project about?"></textarea>
                            </div>
                            <div class="form-group">

                                <input class="form-control" id="input-1" type="text" required=""
                                    name="fullname" placeholder="Enter Full Name">
                            </div>
                            <div class="form-group">

                                <input class="form-control" id="input-2" type="email" required=""
                                    name="emailaddress" placeholder="Enter email">
                            </div>
                            <div class="form-group">

                                <input class="form-control" id="number" type="text" required=""
                                    name="phone" placeholder="Enter work phone">
                            </div>
                            <div class="form-group">

                                <input class="form-control" id="des" type="text" required=""
                                    name="Description" placeholder="Enter company">
                            </div>
                            <div class="form-group">
                                <button class="btn btn-default hover-up w-100" type="submit"
                                    name="login">Send</button>
                            </div>
                            <div class="text-muted text-center">Do you need support? <a
                                    href="page-contact.html">Contact
                                    Us</a></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('htmlpage.frontent.layout.footer')