@extends('frontend.layouts.app')
@section('services','nav-link')
@section('content')
            <div class="page-nav no-margin row">
                <div class="container">
                    <div class="row">
                        <h2 class="text-start">Our Services</h2>
                        <ul class="detail">
                            <li> <a href="{{ route('home') }}"><i class="bi bi-house-door"></i> Home</a></li>
                            <li><i class="bi bi-chevron-double-right pe-2"></i><span style="color:#EDB027;"> Services</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="container-fluid products bg-gray big-padding pt-3">
            <div class="container-xl">  
                    <div class="row mt-5">
                        <div class="col-lg-8">
                        <select class="p-1  w-50 category_select">
                            <option  class="select" selected>All</option>
                            @foreach($categories as $key => $category)
                                <option value="{{ $key }}" {{ request('category_id') == $key ? 'selected' : '' }}>{{ $category }}</option>
                            @endforeach
                        </select>
                        </div>
                    </div>
                
                    <div class="row mt-3 service_ajax">
                        @foreach($services as $service)
                            <div class="col-lg-4 mb-4 col-md-6">
                                <div class="cover text-center shadow-md p-5 bg-white">
                                @php
                                $service_images = explode(',', $service->image);
                                @endphp
                                        @if(!$service_images[1] == '')
                                            <a href="{{ route('detail' , $service->slug ) }}">
                                            <img src="{{asset('images/' . $service_images[1])}}" alt="" style="width:500px;height:200px;padding:2px;object-fit:contain;" class="border border-dark border-2 rounded w-full ">
                                            </a>
                                        @else
                                            <img src="{{asset('backend/assets/img/noimage.jpg')}}" alt="" style="width:500px;height:200px;padding:2px;object-fit:contain;" class="border border-dark border-2 rounded w-full ">
                                        @endif
                                            <a href="{{ route('detail' , $service->slug) }}">
                                                <h2 class="fs-5 fw-bolder mt-4 mb-3">{{ $service->title }}</h2>
                                            </a>
                                </div>
                            </div>
                        @endforeach
                        <div class="d-flex w-100 justify-content-end" style="font-size:30px;">
                             {{$services->links()}}
                        </div>
                    </div>
                </div>
            </div> 
@endsection
@push('script')
<script>
            $(function(){
                $('.category_select').on('change',function(){
                    let current_category = $(this).val();
                    
                    let change_location = "{{ route('services') }}";
                    window.location = `${change_location}?category_id=${current_category}`;
                });

                $('.select').on('click' , function(){
                    let change_location = "{{ route('services') }}";
                    window.location = `${change_location}`;
                });
            })
</script>
@endpush