@extends('layouts.frontend-master')

@section('title', 'Service Details')

@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">Service Details</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><a href="{{ route('security.services') }}">Security Services</a></li>
        <li class="active">{{ $service->name }}</li>
      </ul>
    </div>
  </section>

  <!-- Services-->
  <section class="section section-sm section-first bg-default text-left">
    <div class="container">
      <div class="row row-60">
        <div class="col-md-7 col-xl-8">
          <div class="single-service"><img src="{{ asset('assets/uploads/services/'.$service->image) }}" alt="" width="770" height="426" id="custserimg" style="height: 425px; object-fit: cover !important; object-position: top !important;" />
            <h2>{{ $service->name }}</h2>
            <br>
            {!! $service->description !!}

            <div class="row row-50 flex-xl-row-reverse">

              <div class="col-xl-5">
                @if ($service->id == 21)
                  <div class="card" style="border-radius: 5px; width: 18rem;">
                    <img src="https://camerasonsite.com.au/wp-content/uploads/2024/02/brochure-new-1.png" class="card-img-top" alt="...">
                    <ul class="list-group list-group-flush">
                      <li class="list-group-item"><a href="{{ asset('assets/uploads/star_tech_solar_cam.pdf') }}" target="_blank" style="padding: 14px;; font-weight: bold; color: #444343; font-size: 74%;">DOWNLOAD OUR BROCHURE <span class="download-arrow">→</span></a></li>
                    </ul>
                  </div>
                @else
                  <article class="team-classic"><a class="team-classic-figure" href="#"><img src="{{ asset('assets/uploads/services/service-solution.jpeg') }}" alt="" width="270" height="182"></a>
                    <div class="team-classic-title">Feel free to contact us, we are ready to help you!</div>
                  </article>
                @endif
              </div>
                <div class="col-xl-7">
                  @foreach($all_solutions as $key => $output)
                      <div class="card-group-custom card-group-corporate" id="accordion{{ $key + 1000 }}" role="tablist" aria-multiselectable="false">
                            <article class="card card-custom card-corporate">
                              <div class="card-header" id="accordion{{ $key + 1000 }}Heading2" role="tab">
                                <div class="card-title"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion{{ $key + 1000 }}" href="#accordion{{ $key + 1000 }}Collapse2" aria-controls="accordion{{ $key + 1000 }}Collapse2">{{ $output->solution_name }}
                                    <div class="card-arrow"></div></a>
                                </div>
                              </div>
                              <div class="collapse" id="accordion{{ $key + 1000 }}Collapse2" role="tabpanel" aria-labelledby="accordion{{ $key + 1000 }}Heading2">
                                <div class="card-body">
                                  <p>{{ $output->solution_note }}</p>
                                </div>
                              </div>
                            </article>
                      </div>
                  @endforeach
                </div>
            </div>
          </div>
        </div>

        <div class="col-md-5 col-xl-4">
          <div class="aside aside-services">
            <div class="row row-60">
              <div class="aside-item col-12">
                <h4 class="aside-services-title">What services we offer</h4>
                <ul class="list-category">
                    <li class="list-category-item"><a href="{{ route('security.services') }}" class="active">Security Services</a></li>
                    <li class="list-category-item"><a href="{{ route('electrical.services') }}">Electrical Services</a></li>
                    <li class="list-category-item"><a href="{{ route('airconditioning.services') }}">24/7 Site Cam</a></li>
                </ul>
              </div>
              <div class="aside-item col-sm-6 col-md-12">
                <h4 class="aside-services-title">Our contacts</h4>
                <!-- Box contacts-->
                <div class="box-contacts">
                  <div class="box-contacts-item">
                    <div class="box-contacts-title">Free consultation</div>
                    <div class="unit unit-spacing-xs flex-column flex-md-row">
                      <div class="unit-left"><span class="icon mdi mdi-phone"></span></div>
                      <div class="unit-body"><a class="phone" href="tel:{{ $contact->phone }}">{{ $contact->phone }}</a></div>
                    </div>
                  </div>
                  <div class="box-contacts-item">
                    <div class="box-contacts-title">Office</div>
                    <div class="unit unit-spacing-xs flex-column flex-md-row">
                      <div class="unit-left"><span class="icon mdi mdi-map-marker"></span></div>
                      <div class="unit-body"><a class="address" target="_blank" href="https://maps.google.com/?q={{ $contact->address }}">{{ $contact->address }}</a></div>
                    </div>
                  </div>
                  <div class="box-contacts-item">
                    <div class="box-contacts-title">E-mail</div>
                    <div class="unit unit-spacing-xs flex-column flex-md-row">
                      <div class="unit-left"><span class="icon mdi mdi-email"></span></div>
                      <div class="unit-body"><a class="mail" href="mailto:{{ $contact->email }}">{{ $contact->email }}</a></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="aside-item col-sm-6 col-md-12">
                <h4 class="aside-services-title">Our brochure</h4><a class="button button-lg button-icon button-icon-left button-primary button-winona" href="{{ route('contact') }}"><span class="icon mdi mdi-download"></span><span>Contact Us</span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

@endsection