@include('htmlpage.frontent.layout.app')
<!-- Start Page Banner Area -->
<main class="main">
    <section class="section-box-2">
        <div class="container">
            <div class="banner-hero banner-single banner-single-bg">
                <div class="block-banner text-center">
                    <h3 class="wow animate__ animate__fadeInUp animated"
                        style="visibility: visible; animation-name: fadeInUp;"><span class="color-brand-2">22
                            Casestudies</span>
                        Available Now</h3>
                    <div class="font-sm color-text-paragraph-2 mt-10 wow animate__ animate__fadeInUp animated"
                        data-wow-delay=".1s"
                        style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">Lorem ipsum dolor
                        sit amet consectetur adipisicing elit. Vero repellendus magni, <br
                            class="d-none d-xl-block">atque delectus molestias quis?</div>

                </div>
            </div>
        </div>
    </section>
    <section class="section-box mt-30">
        <div class="container">
            <div class="row flex-row-reverse">
                <div class="col-lg-9 col-md-12 col-sm-12 col-12 float-right">
                    <div class="content-page">
                        <div class="box-filters-job">
                            <div class="row">
                                <div class="col-xl-6 col-lg-5"></div>
                                <div class="col-xl-6 col-lg-7 text-lg-end mt-sm-15">
                                    <div class="display-flex2">
                                        {{--   <div class="box-border mr-10"><span class="text-sortby">Show:</span>
                                            <div class="dropdown dropdown-sort">
                                                <button class="btn dropdown-toggle" id="dropdownSort" type="button"
                                                    data-bs-toggle="dropdown" aria-expanded="false"
                                                    data-bs-display="static"><span>12</span><i
                                                        class="fi-rr-angle-small-down"></i></button>
                                                <ul class="dropdown-menu dropdown-menu-light"
                                                    aria-labelledby="dropdownSort">
                                                    <li><a class="dropdown-item active" href="#">10</a></li>
                                                    <li><a class="dropdown-item" href="#">12</a></li>
                                                    <li><a class="dropdown-item" href="#">20</a></li>
                                                </ul>
                                            </div>
                                        </div> --}}
                                        <div class="box-border">
                                            <span class="text-sortby">Sort by:</span>
                                            <div class="dropdown dropdown-sort">
                                                <button class="btn dropdown-toggle" id="dropdownSort2" type="button"
                                                    data-bs-toggle="dropdown" aria-expanded="false"
                                                    data-bs-display="static">
                                                    <span>{{ request('sort', 'Newest Post') }}</span><i
                                                        class="fi-rr-angle-small-down"></i>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-light"
                                                    aria-labelledby="dropdownSort2">
                                                    <li>
                                                        <a class="dropdown-item" href="#"
                                                            data-sort="newest">Newest Post</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#"
                                                            data-sort="oldest">Oldest Post</a>
                                                    </li>

                                                </div>

                                            </div>
                                        </div>



                                        <div class="box-view-type">
                                            <a class="view-type verticalview" href="#" id="vertical-view-toggle">
                                                <img src="{{ asset('images/icon-list.svg') }}" alt="Vertical View">
                                            </a>
                                            <a class="view-type horizontalview active" href="#"
                                                id="horizontal-view-toggle">
                                                <img src="{{ asset('images/icon-grid-hover.svg') }}" alt="Grid View">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row liststyle">
                            @foreach ($casestudies as $casestudy)
                                <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-box1"><img
                                                    src="{{ asset('storage/' . $casestudy->image_path) }}"
                                                    alt="zillion">
                                            </div>

                                        </div>
                                        <div class="card-block-info">
                                            <h6><a
                                                    href="{{ route('casestudy-details', ['url' => urlencode(str_replace(' ', '-', strtolower($casestudy->url)))]) }}">{{ $casestudy->title }}</a>
                                            </h6>
                                            <div class="mt-5"><span
                                                    class="card-briefcase p-0">{{ $casestudy->industryModel->page_name }}</span>
                                            </div>
                                            <p class="font-sm color-text-paragraph mt-15">{!! $casestudy->content !!}
                                            </p>
                                            <div class="mt-30">
                                                <a class="btn btn-grey-small mr-5"
                                                    href="{{ route('casestudy-details', ['url' => urlencode(str_replace(' ', '-', strtolower($casestudy->url)))]) }}">
                                                    @php
                                                        // Decode the JSON string into an array if it's a JSON string
$technologyIds = json_decode($casestudy->technologies, true);

// If it's a valid array, use it
                                                        if (is_array($technologyIds)) {
                                                            // Fetch the technology names using the decoded technology IDs
                                                            $technologies = \App\Models\Technology::whereIn(
                                                                'id',
                                                                $technologyIds,
                                                            )
                                                                ->pluck('technology')
                                                                ->toArray();
                                                        } else {
                                                            // If it's not an array, treat it as a single ID (like '12')
    $technologies = \App\Models\Technology::whereIn('id', [
        $casestudy->technologies,
    ])
        ->pluck('technology')
                                                                ->toArray();
                                                        }
                                                    @endphp

                                                    {{-- Display the technologies or 'No technology' --}}
                                                    {{ !empty($technologies) ? implode(', ', $technologies) : 'No technology' }}
                                                </a>
                                            </div>
                                            <div class="card-2-bottom mt-30">
                                                <div class="row">

                                                    <div class="col-lg-5 col-5">
                                                        <a href="{{ route('casestudy-details', ['url' => urlencode(str_replace(' ', '-', strtolower($casestudy->url)))]) }}"
                                                            class="btn btn-apply-now">Readmore</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    {{--           <div class="paginations">
                        <ul class="pager">
                            <li><a class="pager-prev" href="#"></a></li>
                            <li><a class="pager-number" href="#">1</a></li>
                            <li><a class="pager-number" href="#">2</a></li>
                            <li><a class="pager-number" href="#">3</a></li>
                            <li><a class="pager-number" href="#">4</a></li>
                            <li><a class="pager-number" href="#">5</a></li>
                            <li><a class="pager-number active" href="#">6</a></li>
                            <li><a class="pager-number" href="#">7</a></li>
                            <li><a class="pager-next" href="#"></a></li>
                        </ul>
                    </div> --}}
                </div>
                <div class="col-lg-3 col-md-12 col-sm-12 col-12">
                    <div class="sidebar-shadow none-shadow mb-30">
                        <div class="sidebar-filters">
                            <div class="filter-block head-border mb-30">
                                <h5>Advance Filter <a class="link-reset" href="{{ route('casestudy') }}">Reset</a></h5>
                            </div>
                            <form method="GET" action="{{ route('casestudy') }}" id="filterForm">
                                <div class="filter-block mb-20">
                                    <h5 class="medium-heading mb-15">Industry</h5>
                                    <div class="form-group">
                                        <ul class="list-checkbox">
                                            <li>
                                                <label class="cb-container">
                                                    <input type="checkbox" name="industry[]" value="all"
                                                        {{ in_array('all', request()->input('industry', [])) ? 'checked' : '' }}
                                                        onchange="this.form.submit()">
                                                    <span class="text-small">All</span>
                                                    <span class="checkmark"></span>
                                                </label>
                                            </li>
                                            @foreach ($industries as $industry)
                                                <li>
                                                    <label class="cb-container">
                                                        <input type="checkbox" name="industry[]"
                                                            value="{{ $industry->id }}"
                                                            {{ in_array($industry->id, request()->input('industry', [])) ? 'checked' : '' }}
                                                            onchange="this.form.submit()">
                                                        <span class="text-small">{{ $industry->page_name }}</span>
                                                        <span class="checkmark"></span>
                                                    </label>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>


                                <div class="filter-block mb-20">
                                    <h5 class="medium-heading mb-15">Service</h5>
                                    <div class="form-group">
                                        <ul class="list-checkbox">
                                            <li>
                                                <label class="cb-container">
                                                    <input type="checkbox" name="service[]" value="all"
                                                        {{ in_array('all', request()->input('service', [])) ? 'checked' : '' }}
                                                        onchange="this.form.submit()">
                                                    <span class="text-small">All</span>
                                                    <span class="checkmark"></span>
                                                </label>
                                            </li>
                                            @foreach ($services as $service)
                                                <li>
                                                    <label class="cb-container">
                                                        <input type="checkbox" name="service[]"
                                                            value="{{ $service->id }}"
                                                            {{ in_array($service->id, request()->input('service', [])) ? 'checked' : '' }}
                                                            onchange="this.form.submit()">
                                                        <span class="text-small">{{ $service->page_name }}</span>
                                                        <span class="checkmark"></span>
                                                    </label>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
</main>
<script>
    document.getElementById('vertical-view-toggle').addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector('.liststyle').classList.add('list-view'); // Switch to list view
        document.querySelector('.view-type.verticalview').classList.add('active');
        document.querySelector('.view-type.horizontalview').classList.remove('active');
    });

    document.getElementById('horizontal-view-toggle').addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector('.liststyle').classList.remove('list-view'); // Switch to grid view
        document.querySelector('.view-type.horizontalview').classList.add('active');
        document.querySelector('.view-type.verticalview').classList.remove('active');
    });
</script>
<!-- End Knock us Area -->
<script>
    document.querySelectorAll('.dropdown-item').forEach(function(item) {
        item.addEventListener('click', function(e) {
            e.preventDefault(); // Prevent default anchor behavior

            // Get the sort value from the data-sort attribute
            const sortBy = this.getAttribute('data-sort');

            // Set the active class on the clicked item
            document.querySelectorAll('.dropdown-item').forEach(function(i) {
                i.classList.remove('active');
            });
            this.classList.add('active');

            // Update the sorting option in the button text
            document.querySelector('#dropdownSort2 span').innerText = this.innerText;

            // Update the URL query string
            const urlParams = new URLSearchParams(window.location.search);

            // Set the new sorting option in the URL
            urlParams.set('sort', sortBy);

            // Construct the new URL with the updated parameters
            const newUrl = `${window.location.pathname}?${urlParams.toString()}`;

            // Redirect to the new URL with updated query parameters
            window.location.href = newUrl;
        });
    });
</script>



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