@extends('layouts.frontend.master')
@section('content')
    <section data-anim="fade" class="breadcrumbs ">
        <div class="container">
            <div class="row">
                <div class="col-auto">
                    <div class="breadcrumbs__content">
                        <div class="breadcrumbs__item ">
                            <a href="{{ route('home') }}">Utama</a>
                        </div>
                        <div class="breadcrumbs__item ">
                            <a href="javascript:void(0)">Layanan</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="page-header -type-1" style="background-image: url('{{ asset('assets/image/header-layanan.png') }}'); background-size: cover; background-position: center;">
        <div class="container">
            <div class="page-header__content text-white">
                <div class="row justify-center text-center text-white">
                    <div class="col-auto">
                        <div data-anim="slide-up delay-1">
                            <h1 class="page-header__title text-white">{{ settings()->get('setting.home.layanan_jenis.title') }}</h1>
                        </div>
                        <div data-anim="slide-up delay-2">
                            <p class="page-header__text text-white">{{ settings()->get('setting.home.layanan_jenis.sub_title') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="layout-pt-md layout-pb-lg">
        <div data-anim-wrap class="container">
            <div class="row y-gap-30 pt-30">
                @forelse ($layanans as $k => $layanan)
                    <div class="col-lg-4 col-md-6">
                        <div class="eventCard -type-1" data-anim="slide-left delay-{{ $k + 5 }}">
                            <div class="eventCard__img">
                                  @php
                                      $gambarUtama = $layanan->foto_url ?: asset('assets/layanan/icon/kependudukan.png');
                                  @endphp
                                  <img src="{{ $gambarUtama }}"
                                       alt="{{ $layanan->nama }}"
                                       style="width: 100%; height: 250px; object-fit: cover;">
                            </div>
                            <div class="eventCard__bg bg-white shadow"> <!-- shadow-sm, shadow, atau shadow-lg -->
                                <div class="eventCard__content y-gap-10">
                                    <div class="eventCard__inner">
                                        <h4 class="eventCard__title text-17 fw-500">
                                            {{ $layanan->nama }}
                                        </h4>
                                        <div class="d-flex x-gap-15 pt-10">
                                            <div class="d-flex items-center">
                                                <div class="icon-rating-2 text-16 mr-8"></div>
                                                <div class="text-14">
                                                    @php
                                                        $rating = $layanan->rating ?? 0;
                                                        $fullStars = floor($rating);
                                                        $halfStar = ($rating - $fullStars) >= 0.5 ? 1 : 0;
                                                        $emptyStars = 5 - $fullStars - $halfStar;
                                                    @endphp
                                                    @for ($i = 0; $i < $fullStars; $i++)
                                                        <i class="fas fa-star text-warning"></i>
                                                    @endfor
                                                    @if ($halfStar)
                                                        <i class="fas fa-star-half-alt text-warning"></i>
                                                    @endif
                                                    @for ($i = 0; $i < $emptyStars; $i++)
                                                        <i class="far fa-star text-warning"></i>
                                                    @endfor
                                                    <span class="ms-2">{{ number_format($rating, 1) }}</span>
                                                </div>
                                            </div>
                                            <div class="d-flex items-center">
                                                <div class="icon-location text-16 mr-8"></div>
                                                <div class="text-14">{{ $layanan->alamat_lengkap }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="eventCard__button d-flex flex-wrap gap-10">
                                        <a href="{{ route('layanan.detail', $layanan->slug) }}"
                                           target="_blank"
                                           rel="noopener noreferrer"
                                           class="button -sm -rounded -purple-1 text-white px-25">
                                           Detail <i class="fas fa-external-link-alt ms-2"></i>
                                        </a>
                                        @if ($layanan->acceptsPublicComplaintIntake())
                                            <a href="{{ route('pengaduan', ['layanan_id' => $layanan->id]) }}"
                                               class="button -sm -rounded -outline-dark-1 text-dark-1 px-25">
                                               Lapor
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="d-flex justify-content-center align-items-center py-5">
                            <h6>Data Tidak Tersedia</h6>
                        </div>
                    </div>
                @endforelse
            </div>
            @if($layanans->count())
                <div class="row pt-30">
                    <div class="col-12">
                        {!! $layanans->links() !!}
                    </div>
                </div>
            @endif
        </div>
    </section>
@endsection
@section('stylesheet')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="{{ asset('assets/templates/frontend/css/layanan/list.css') }}"/>
@endsection
@section('javascript')
    <script src="{{ asset('assets/templates/frontend/js/layanan/list.js') }}"></script>
@endsection