@include('htmlpage.frontent.layout.app')
<!-- Start Page Banner Area -->
<main class="main">
    <section class="section-box">
        <div class="breacrumb-cover">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <h2 class="mb-10">Case Study / {{ $casestudy->title }}</h2>
                        <p class="font-lg color-text-paragraph-2">Get the latest news, updates and tips</p>
                    </div>
                    <div class="col-lg-6 text-end">
                        <ul class="breadcrumbs mt-40">
                            <li><a class="home-icon" href="index.html">Home</a></li>
                            <li>Casestudy</li>
                        </ul>
                    </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="#"><img
                                src="{{ asset('storage/' . $casestudy->image_path) }}" alt="{{ $casestudy->alt }}"></a>
                    </div>
                    <div class="col-lg-7 col-md-12 col-sm-12">
                        <div class="pt-40 pb-30 pl-30 pr-30"><a class="btn btn-tag"
                                href="blog-grid.html">{{ $casestudy->industryModel->page_name }}</a>
                            <h2 class="mt-20 mb-20"><a href="#">{{ $casestudy->title }}</a></h2>
                            <p class="font-md mb-20">{!! $casestudy->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-8 col-md-12 col-sm-12 col-12">

                    <div class="row">
                        <h5 class="border-bottom pb-15">Client</h5>
                        <p class="mb-30">{!! $casestudy->client !!}
                        </p>
                    </div>
                    <div class="row">
                        <h5 class="border-bottom pb-15 mt-30">Challenge</h5>
                        <p class="mb-30">{!! $casestudy->challenge !!}
                        </p>
                    </div>
                    <div class="row">
                        <h5 class="border-bottom pb-15 mt-30">Solutions</h5>
                        <p class="mb-30">{!! $casestudy->solutions !!}
                        </p>
                    </div>



                </div>
                <div class="col-lg-4 col-md-12 col-sm-12 col-12 pl-40 pl-lg-15 mt-lg-30">
                    <div class="sidebar-list-job">
                        <ul>
                            <div class="sidebar-border">
                                <h6 class="f-18">
                                    Technologies and Platforms we use

                                </h6>
                                <div class="sidebar-list-job">
                                    <ul>
                                        @foreach ($technologies as $tech)
                                            <li>
                                                <div
                                                    class="card-list-4 wow animate__ animate__fadeIn hover-up animated">
                                                    <div class="image">
                                                        <a href="#">
                                                            <!-- Use the image path or other details from the $tech object -->
                                                            <img src="{{ asset('storage/' . $tech->image_path) }}"
                                                                alt="{{ $tech->technology }}">
                                                        </a>
                                                    </div>
                                                    <div class="info-text">
                                                        <h5 class="font-md font-bold color-brand-1">
                                                            <a href="#">{{ $tech->technology }}</a>
                                                        </h5>
                                                        <div class="mt-5">
                                                            <div class="row">
                                                                <div class="col-6">
                                                                    <!-- Star rating example -->
                                                                    <img alt="Zillion"
                                                                        src="{{ asset('img/star.svg') }}">
                                                                    <img alt="Zillion"
                                                                        src="{{ asset('img/star.svg') }}">
                                                                    <img alt="Zillion"
                                                                        src="{{ asset('img/star.svg') }}">
                                                                    <img alt="Zillion"
                                                                        src="{{ asset('img/star.svg') }}">
                                                                    <img alt="Zillion"
                                                                        src="{{ asset('img/star.svg') }}">
                                                                </div>
                                                                <div class="col-6 text-end">
                                                                    <span class="card-briefcase">New York, US</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>

                        </ul>
                    </div>
                    <div class="sidebar-shadow sidebar-news-small">
                        <h5 class="sidebar-title">Recent Case Studies</h5>
                        <div class="post-list-small">
                            @forelse ($recentCaseStudies as $recentcaseStudy)
                                <div class="post-list-small-item d-flex align-items-center">
                                    <figure class="thumb mr-15">
                                        <img src="{{ asset('storage/' . $recentcaseStudy->image_path) }}"
                                            alt="{{ $recentcaseStudy->alt }}">
                                    </figure>
                                    <div class="content">
                                        <h5>
                                            <a
                                                href="{{ route('casestudy-details', ['url' => urlencode(str_replace(' ', '-', strtolower($recentcaseStudy->url)))]) }}">
                                                {{ $recentcaseStudy->title }}
                                            </a>
                                        </h5>
                                        <div class="post-meta text-muted d-flex align-items-center mb-15">
                                            <div class="author d-flex align-items-center mr-20">
                                                <span>{{ $recentcaseStudy->industryModel->page_name ?? 'General' }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <p>No recent case studies available.</p>
                            @endforelse
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </section>
    <section class="section-box mt-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mb-40"><span class="font-md color-brand-2 mt-20 d-inline-block">Contact us</span>
                    <h2 class="mt-5 mb-10">Want to consult for your business on similar projects?</h2>
                    <p class="font-md color-text-paragraph-2">The right move at the right time saves your investment.
                        live<br class="d-none d-lg-block"> the dream of expanding your business.</p>
                    <div id="notification"></div>

                    <form class="contact-form-style mt-30" id="contact-form"
                        action="{{ route('casestudy.casestudyStore') }}" method="POST">
                        @csrf
                        <div class="row wow animate__ animate__fadeInUp animated" data-wow-delay=".1s"
                            style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
                            <div class="form-group">

                                <input class="form-control" id="casestudy" type="hidden" required=""
                                    name="casestudy" value="{{ $casestudy->id }}">
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="input-style mb-20">
                                    <input class="font-sm color-text-paragraph-2" name="name"
                                        placeholder="Enter your name" type="text" required>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="input-style mb-20">
                                    <input class="font-sm color-text-paragraph-2" name="company"
                                        placeholder="Comapy (optioanl)" type="text" required>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="input-style mb-20">
                                    <input class="font-sm color-text-paragraph-2" name="email"
                                        placeholder="Your email" type="email" required>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="input-style mb-20">
                                    <input class="font-sm color-text-paragraph-2" name="phone"
                                        placeholder="Phone number" type="tel" required>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12">
                                <div class="textarea-style mb-30">
                                    <textarea class="font-sm color-text-paragraph-2" name="about" placeholder="Tell us about yourself"></textarea>
                                </div>
                                <button class="submit btn btn-send-message" type="submit">Send message</button>
                                <label class="ml-20">
                                    <input class="float-start mr-5 mt-6" type="checkbox"> By clicking contact us
                                    button, you agree our terms and policy,
                                </label>
                            </div>
                        </div>
                    </form>
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
                    <script>
                        $(document).ready(function() {
                            $('#contact-form').on('submit', function(event) {
                                event.preventDefault(); // Prevent the default form submission

                                var formData = $(this).serialize(); // Serialize the form data

                                $.ajax({
                                    url: $(this).attr('action'), // Get the action URL from the form
                                    type: 'POST',
                                    data: formData,
                                    success: function(response) {
                                        if (response.success) {
                                            // Success notification
                                            $('#notification').html('<div class="alert alert-success">' +
                                                response.message + '</div>');
                                            $('#contact-form')[0].reset(); // Reset the form fields
                                            $('#notification').fadeOut(5000); // Auto-hide after 5 seconds
                                        } else {
                                            // Handle other success cases if needed (for now, we assume success only sends a success message)
                                            $('#notification').html('<div class="alert alert-danger">' +
                                                response.message + '</div>');
                                            $('#notification').fadeOut(5000);
                                        }
                                    },
                                    error: function(xhr) {
                                        // Error handling (e.g., validation errors)
                                        var errorMessage = 'An error occurred while processing your request.';
                                        if (xhr.responseJSON && xhr.responseJSON.message) {
                                            errorMessage = xhr.responseJSON.message;
                                        }

                                        $('#notification').html('<div class="alert alert-danger">' +
                                            errorMessage + '</div>');
                                        $('#notification').fadeOut(5000); // Auto-hide after 5 seconds
                                    }
                                });
                            });
                        });
                    </script>
                    <p class="form-messege"></p>
                </div>
                <div class="col-lg-4 text-center d-none d-lg-block"><img src="{{ asset('images/contactus.png') }}"
                        alt="zillion">
                </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>
<!-- End Knock us Area -->

@include('htmlpage.frontent.layout.footer')