@extends('layouts.frontend-master')

@section('title', 'Electrical Services')

@section('content')

  <!-- Breadcrumbs -->
  <section class="bg-gray-7">
    <div class="breadcrumbs-custom bg-image" style="background-image: url(images/bg-breadcrumbs.jpeg);">
      <div class="container">
        <h1 class="breadcrumbs-custom-title">Electrical Services</h1>
        <div class="breadcrumbs-custom-decor"></div>
      </div>
    </div>
    <div class="container">
      <ul class="breadcrumbs-custom-path">
        <li><a href="{{ route('home') }}">Home</a></li>
        <li class="active">Electrical Services</li>
      </ul>
    </div>
  </section>
        
  <!-- Services-->
  <section class="section section-lg bg-default">
    <div class="container">
      <div class="row row-60">
        <div class="col-md-7 col-xl-8">
          <div class="row row-40">

            @foreach($all_services as $service)
                <div class="col-lg-12 col-xl-6">
                  <!-- Services Classic-->
                  <article class="services-classic"><a class="services-classic-figure" href="{{ route('electrical.service.details', strtolower(str_replace('/', '-', preg_replace('/\s+/u', '-', trim($service->name))))) }}"><img src="{{ asset('assets/uploads/services/'.$service->image) }}" alt="" width="370" height="274" style="height:260px; object-fit:cover;" /></a>
                    <div class="services-classic-caption">
                      <div class="unit align-items-lg-center">
                        <div class="unit-left"><span class="box-icon-modern-icon" style="background: #213a62 !important;width: 45px;height: 45px;"><img src="{{ asset('assets/uploads/services/electri.png') }}" style="padding: 8px;margin-top: -23px;"></span></div>
                        <div class="unit-body">
                          <h3 class="services-classic-title"><a href="{{ route('electrical.service.details', strtolower(str_replace('/', '-', preg_replace('/\s+/u', '-', trim($service->name))))) }}">{{ $service->name }}</a></h3>
                          <p class="services-classic-text">{!! str_limit($service->description, 100) !!}</p>
                        </div>
                      </div>
                    </div>
                  </article>
                </div>
            @endforeach
            
          </div>
        </div>

        <div class="col-md-5 col-xl-4">
          <div class="aside-services">
            <h4 class="aside-services-title">What Services We Offer</h4>
            <ul class="list-category">
              
              <li class="list-category-item"><a href="{{ route('security.services') }}" >Security Services</a></li>
              <li class="list-category-item"><a href="{{ route('electrical.services') }}" class="active">Electrical Services</a></li>
              <li class="list-category-item"><a href="{{ route('airconditioning.services') }}">Air Conditioning Services</a></li>
              
            </ul><a class="button button-lg button-primary button-winona" href="{{ route('contact') }}">Contact us</a>
          </div>
        </div>
      </div>
    </div>
  </section>

@endsection