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

@section('title', 'Whats New')
@section('description', 'Semua Produk Onebox Contact Center Omnichanel')

<!-- /header -->
<section class="atas-wrapper bg-soft-primary">
    <div class="container pt-10 pb-7 pt-md-10 pb-md-10 text-center">
      <div class="row">
        <div class="col-md-9 col-lg-7 col-xl-6 mx-auto">
          <h1 class="display-1 mb-3">What's New</h1>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-center">
              <li class="breadcrumb-item"><a href="{{url('/')}}" title="Beranda">Beranda</a></li>
              <li class="breadcrumb-item"><a title="What's New">What's New</a></li>
            </ol>
          </nav>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
  </section>

<section>
    <div class="whats-new-page-component mb-10">
        <div class="whats-new-page-content">
            <div class="items-list-wrapper">
                <div class="square-list-container">
                    <div class="square-list">
                        <h2 class="square-list-title">Semua Update Terkini</h2>

                        @php
                            // Konversi array menjadi koleksi Laravel
                            $whatsnewCollection = collect($whatsnew);

                            // Mengelompokkan data berdasarkan bulan dan tahun dari tgl_publish
                            $groupedByMonth = $whatsnewCollection->groupBy(function($item) {
                                return \Carbon\Carbon::parse($item->tgl_publish)->format('F Y'); // Menggunakan notasi objek
                            });
                        @endphp

                        @if (!empty($whatsnew))
                            @foreach ($groupedByMonth as $month => $items)
                                <div class="desktop-date-title">
                                    <div class="line-dot-container">
                                        <div class="vertical-line page-first-item"></div>
                                        <div class="date-dot">
                                            <div class="inner-dot"></div>
                                            <div class="outer-ring"></div>
                                        </div>
                                    </div>
                                    <div class="date-content">{{ $month }}</div> <!-- Menampilkan bulan dan tahun -->
                                </div>

                                @foreach ($items as $item)
                                <div class="square-wrapper">
                                    <div class="line-dot-container">
                                        <div class="vertical-line"></div>
                                        <div class="dot"></div>
                                    </div>
                                    <div class="square" style="margin-bottom:0">
                                        <div class="content-wrapper">
                                            <div class="card-top-part-wrapper">
                                                <h4 class="release-type-name"><i class='bx bx-tachometer'></i>Improvement</h4>
                                                <span class="separator-dot" style="color:#006278">•</span>
                                                <p class="full-date-title">
                                                    {{ \Carbon\Carbon::parse($item->tgl_publish)->format('d M Y') }} <!-- Akses objek -->
                                                </p>
                                            </div>
                                            <div class="name">
                                                <strong>1.48.1</strong>{{ $item->title }} <!-- Akses objek -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

@endsection