@extends('template.master')
@section('body')

@section('title', $telekomunikasi[0]->Category)
@section('description', $telekomunikasi[0]->title)

<!-- /header -->
<section class="section-frame mx-xxl-11 overflow-hidden mt-10">
  <div class="wrapper image-wrapper bg-cover rounded-5 bg-gray bg-soft-blue-light">
    <div class="container py-8 py-sm-4 py-md-10 position-relative">
      <div class="row mb-0 align-items-center">
        <div class="col-lg-6 position-relative mb-8 order-lg-2">
          <div class="overlap-grid overlap-grid-2">
            <img src="https://cms.ciptadrasoft.com/upload/{!! $telekomunikasi[0]->lampiran !!}" alt="" class="w-100">
          </div>
        </div>
        <div class="margin-tab col-lg-6">
          <div class="tt-el-caption mb-0">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb mb-4">
                <li class="breadcrumb-item"><a href="{{url('/')}}" title="Beranda">Beranda</a></li>
                <li class="breadcrumb-item"><a href="#" title="Studi Kasus">Studi Kasus</a></li>
                <li class="breadcrumb-item active" aria-current="page">{!! $telekomunikasi[0]->Category !!}</li>
              </ol>
            </nav>
            <h1 class="display-2 m-0"><span style="color: #3a9dc2 ;">{!! $telekomunikasi[0]->Category !!}</span></h1>
            <h1 class="display-2 mb-0 mx-sm-n2 mx-md-0 text-justify">{!! $telekomunikasi[0]->title !!}</h1>
            <div class="d-flex justify-content-lg-start mt-5" data-cues="slideInDown"
              data-group="page-title-buttons" data-delay="200">
              <a class="feature-button" href="{{url('/hubungi')}}" title="Demo Aplikasi"><i class='bx bxl-whatsapp me-2' ></i>Konsultasi Gratis</a>
            </div>
          </div>

          <!--/column -->
        </div>
      </div>
    </div>
  </div>
</section>

<section class="untung-wrapper bg-light position-relative d-lg-flex align-items-center">
  <div class="container py-4 pt-md-13 pb-0">

    <div class="row py-5">
      <div class="text">
        {!! $telekomunikasi[0]->content !!}
      </div>
    </div>



    <div class="row py-5">
      <div class="col-md-9 col-lg-7 col-xl-8 col-xxl-9 mx-auto text-center">
        <div class="tt-el-caption mb-5">
          <h3 class="mb-4">Portofolio Studi Kasus Onebox
          </h3>

        </div>
      </div>
    </div>
    <div class="row justify-content-around">
        <div class="col-lg-12">
            <div id="portofolio" class="splide" role="group" aria-label="Splide Basic HTML Example">
                <div class="splide__track mt-5">
                    <ul class="splide__list">
                        @if (!empty($portotele))
                            @php
                                // Membagi array portotele menjadi dua bagian
                                $chunks = array_chunk($portotele, ceil(count($portotele) / 2));
                            @endphp

                            @foreach ($chunks as $chunk)
                                <li class="splide__slide">
                                    <div class="container">
                                        <div class="row row-cols-2 row-cols-sm-2 row-cols-md-2 row-cols-lg-3 justify-content-center">
                                            @foreach ($chunk as $item)
                                                <div class="col mb-3 portof" style="justify-items: center">
                                                    <figure class="overlay overlay-1 hover-scale rounded custom-img">
                                                        <a href="https://cms.ciptadrasoft.com/upload/externalLogo/{{ $item->ImageMenu }}"
                                                           data-glightbox
                                                           data-gallery="gallery-image">
                                                            <img class="max-h-6 w-20"
                                                                 src="https://cms.ciptadrasoft.com/upload/externalLogo/{{ $item->ImageMenu }}"
                                                                 alt="Portfolio Image" loading="lazy" />
                                                        </a>
                                                    </figure>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    </div>
  </div>
</section>

<section class="card-prom wrapper cta-wrapper">
  <div class="container py-md-2">
    <div class="row align-items-center">
      <div class="card-pad container py-md-2">
        <div class="card-solusi bg-gray bg-gray bg-soft-blue-light rounded-4">
          <div class="row align-items-center justify-content-between">
            <div class="col-lg-6">
              <h5>Transformasikan Bisnis Anda dengan Solusi Omnichannel Terintegrasi</h5>
              <p>Diskusikan dengan tim kami untuk memberikan solusi yang tepat untuk bisnis Anda</p>

              <div class="justify-content-center justify-content-lg-start mt-5" data-cues="slideInDown"
                data-group="page-title-buttons" data-delay="200">
                <a class="feature-button"
                  {{-- href="https://wa.me/{{$profil[0]['Telp']}}?text=Halo Tim Onebox, Saya ingin mengajukan beberapa pertanyaan" --}}
                  target="_blank"><i class='bx bxl-whatsapp me-2' ></i>Hubungi Whatsapp Kami</a>
              </div>
            </div>

            <div class="col-lg-6 text-end">
              <img src="{{asset('assets/img/illustrations/img-cta.png')}}" alt="cta-onebox">
            </div>
          </div>

        </div>
      </div>
    </div>
    <!--/.row -->

    <!--/.row -->
  </div>
</section>

@endsection