@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 Detail</h2>
                        <ul class="detail">
                            <li> <a href="{{ route('services') }}"><i class="bi bi-house-door"></i> Services</a></li>
                            <li><i class="bi bi-chevron-double-right pe-2"></i> <span style="color:#EDB027;">{{ $service_detail[0]['title'] }}</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="testimonial" class="service bg-honey big-padding bg-gray container-fluid px-4 py-5">
                <div class="container-xl">
                    <div class="row">
                        @foreach($service_images as $service_image)
                        @if(!$service_image == '')
                                <div class="col-xl-3 col-md-6 mb-4">
                                    <div class="bg-white shadow-md">
                                    <img src="{{asset('images/' . $service_image)}}" alt="" style="width:800px;height:300px;padding:2px;object-fit:contain;" class="border border-dark border-2 rounded w-full ">
                                    </div>
                                </div>
                        @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
                        @endforeach
                    </div>
                </div>   
            </div>
@endsection