@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)">Pariwisata</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="page-header -type-1" style="background-image: url('{{ asset('assets/image/header-wisata.png') }}'); background-size: cover; background-position: center;">
        <div class="container">
            <div class="page-header__content">
                <div class="row justify-center text-center">
                    <div class="col-auto">
                        <div data-anim="slide-up delay-1">
                            <h1 class="page-header__title">{{ settings()->get('setting.home.pariwisata_kegiatan.title') }}</h1>
                        </div>
                        <div data-anim="slide-up delay-2">
                            <p class="page-header__text">{{ settings()->get('setting.home.pariwisata_kegiatan.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="pb-30" data-anim="slide-up delay-4">
                <div class="row align-items-center">
                    <div class="col-md-3 mb-3 mb-md-0">
                        <select class="form-select" name="kategori" id="kategori">
                            <option value="">Semua Kategori</option>
                            @foreach($kategoriPariwisata as $kategori)
                                <option value="{{ $kategori }}" {{ $filters->kategori == $kategori ? 'selected' : '' }}>
                                    {{ $kategori }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <form class="search-field h-50" action="">
                            <input class="bg-light-3 pr-50" type="search" placeholder="Cari..." value="{{ $filters->search }}"
                                name="search" id="search">
                            <button class="" type="submit">
                                <i class="icon-search text-20"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="row y-gap-30 pt-30">
                @forelse ($pariwisatas as $k => $pariwisata)
                    <div class="col-lg-4 col-md-6">
                        <div class="eventCard -type-1" data-anim="slide-left delay-{{ $k + 5 }}">
                            <div class="eventCard__img">
                                @if($pariwisata->foto_utama && file_exists(public_path('assets/pariwisata/foto_utama/' . $pariwisata->foto_utama)))
                                    <img src="{{ asset('assets/pariwisata/foto_utama/' . $pariwisata->foto_utama) }}"
                                         alt="{{ $pariwisata->nama }}"
                                         style="width: 100%; height: 250px; object-fit: cover;">
                                @else
                                    <!-- Fallback image jika foto tidak ada -->
                                    <img src="{{ asset('assets/image/default-wisata.png') }}"
                                         alt="Default Image"
                                         style="width: 100%; height: 250px; object-fit: cover;">
                                @endif
                            </div>

                            <div class="eventCard__bg bg-white shadow-sm"> <!-- 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">
                                            {{ $pariwisata->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 = $pariwisata->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">{{ $pariwisata->alamat_lengkap }}</div>
                                            </div>
                                        </div>
                                    </div> <!-- Ini adalah penutup yang benar untuk eventCard__inner -->

                                    <div class="eventCard__button">
                                        <a href="{{ route('pariwisata.detail', $pariwisata->slug) }}"
                                           target="_blank"
                                           rel="noopener noreferrer"
                                           class="button -sm -rounded -purple-1 text-white px-25">
                                           Lihat <i class="fas fa-external-link-alt ms-2"></i>
                                        </a>
                                    </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($pariwisatas->count())
                <div class="row pt-30">
                    <div class="col-12">
                        {!! $pariwisatas->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">
    <style>
        .card-main {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
            margin: 3px;
        }

        .card-main:hover {
            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
        }

        /* Tambahkan ini */
        .page-header.-type-1 {
            background-image: url('{{ asset('assets/image/header-wisata.png') }}');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            color: #fff; /* Warna teks disesuaikan dengan background */
        }

        /* Overlay untuk meningkatkan keterbacaan teks */
        .page-header.-type-1::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5); /* Sesuaikan opacity */
            z-index: 0;
        }

        /* Pastikan konten di atas overlay */
        .page-header__content {
            position: relative;
            z-index: 1;
        }

        /* Warna teks putih untuk header */
        .page-header__title,
        .page-header__text {
            color: #fff !important;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Optional: shadow untuk kontras */
        }
        /* Form pencarian */
        .search-field {
            max-width: 600px; /* Lebar maksimum form */
        }

        /* Dropdown kategori */
        #kategori {
            height: 50px;
            border-radius: 4px;
            border: 1px solid #ddd;
            padding: 0 15px;
        }
        /* Gaya untuk rating bintang */
        .text-warning {
            color: #ffc107 !important; /* Warna kuning untuk bintang */
        }

        .fa-star, .fa-star-half-alt {
            font-size: 14px; /* Ukuran bintang */
            margin-right: 2px;
        }

        .eventCard__bg {
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* shadow halus dan elegan */
            border-radius: 12px;
            transition: box-shadow 0.3s ease;
        }

        .eventCard__bg:hover {
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }
    </style>
@endsection

@section('javascript')
    <script>
        $(document).ready(function() {
            // Submit form saat dropdown kategori berubah
            $('#kategori').change(function() {
                $(this).closest('form').submit();
            });

            // Handle form submission
            $('.input-group button').click(function(e) {
                e.preventDefault();
                $(this).closest('form').submit();
            });
        });
    </script>
@endsection