@extends('layouts.user.app')
@section('content')
<div class="container mx-auto px-4">
    <div class="max-w-6xl mx-auto space-y-8">
        <!-- Reviews Section -->
        <div class="py-12 px-4 md:px-6 2xl:container 2xl:mx-auto">
            <div class="flex flex-col justify-start items-start w-full space-y-8">
                <div class="flex justify-start items-start">
                    <p class="text-3xl lg:text-4xl font-semibold leading-7 lg:leading-9 text-[#8B0000]">Reviews</p>
                </div>

                @foreach($kritikSarans as $review)
                <div class="w-full flex justify-start items-start flex-col bg-gray-50 dark:bg-gray-800 p-8">
                    <div class="flex flex-col md:flex-row justify-between w-full">
                        <div class="flex flex-row justify-between items-start">
                            <p class="text-xl md:text-2xl font-medium leading-normal text-gray-800 dark:text-white">{{ ucfirst($review->jenis) }}</p>
                            <button onclick="showMenu(true)" class="ml-4 md:hidden">
                                <svg id="closeIcon" class="hidden" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M15 12.5L10 7.5L5 12.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <svg id="openIcon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button>
                        </div>
                        <div class="cursor-pointer mt-2 md:mt-0">
                            <svg class="dark:text-white" width="152" height="24" viewBox="0 0 152 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                @for($i = 0; $i < 5; $i++)
                                <g clip-path="url(#clip{{ $i }})">
                                    <path d="M{{ 17.5598 + ($i * 32) }} 24.4285C{{ 17.3999 + ($i * 32) }} 24.4291 {{ 17.2422 + ($i * 32) }} 24.3914 {{ 17.0998 + ($i * 32) }} 24.3185L{{ 11.9998 + ($i * 32) }} 21.6485L{{ 6.89982 + ($i * 32) }} 24.3185C{{ 6.73422 + ($i * 32) }} 24.4056 {{ 6.5475 + ($i * 32) }} 24.4444 {{ 6.3609 + ($i * 32) }} 24.4307C{{ 6.1743 + ($i * 32) }} 24.4169 {{ 5.9953 + ($i * 32) }} 24.3511 {{ 5.84425 + ($i * 32) }} 24.2407C{{ 5.6932 + ($i * 32) }} 24.1303 {{ 5.57616 + ($i * 32) }} 23.9797 {{ 5.50644 + ($i * 32) }} 23.8061C{{ 5.43671 + ($i * 32) }} 23.6324 {{ 5.4171 + ($i * 32) }} 23.4427 {{ 5.44982 + ($i * 32) }} 23.2585L{{ 6.44982 + ($i * 32) }} 17.6285L{{ 2.32982 + ($i * 32) }} 13.6285C{{ 2.20128 + ($i * 32) }} 13.5002 {{ 2.1101 + ($i * 32) }} 13.3394 {{ 2.06605 + ($i * 32) }} 13.1632C{{ 2.02201 + ($i * 32) }} 12.987 {{ 2.02677 + ($i * 32) }} 12.8022 {{ 2.07982 + ($i * 32) }} 12.6285C{{ 2.13778 + ($i * 32) }} 12.4508 {{ 2.2444 + ($i * 32) }} 12.2928 {{ 2.38757 + ($i * 32) }} 12.1726C{{ 2.53075 + ($i * 32) }} 12.0525 {{ 2.70475 + ($i * 32) }} 11.9748 {{ 2.88982 + ($i * 32) }} 11.9485L{{ 8.58982 + ($i * 32) }} 11.1185L{{ 11.0998 + ($i * 32) }} 5.98849C{{ 11.1817 + ($i * 32) }} 5.81942 {{ 11.3096 + ($i * 32) }} 5.67683 {{ 11.4687 + ($i * 32) }} 5.57706C{{ 11.6279 + ($i * 32) }} 5.47729 {{ 11.812 + ($i * 32) }} 5.42438 {{ 11.9998 + ($i * 32) }} 5.42438C{{ 12.1877 + ($i * 32) }} 5.42438 {{ 12.3717 + ($i * 32) }} 5.47729 {{ 12.5309 + ($i * 32) }} 5.57706C{{ 12.6901 + ($i * 32) }} 5.67683 {{ 12.8179 + ($i * 32) }} 5.81942 {{ 12.8998 + ($i * 32) }} 5.98849L{{ 15.4398 + ($i * 32) }} 11.1085L{{ 21.1398 + ($i * 32) }} 11.9385C{{ 21.3249 + ($i * 32) }} 11.9648 {{ 21.4989 + ($i * 32) }} 12.0425 {{ 21.6421 + ($i * 32) }} 12.1626C{{ 21.7852 + ($i * 32) }} 12.2828 {{ 21.8919 + ($i * 32) }} 12.4408 {{ 21.9498 + ($i * 32) }} 12.6185C{{ 22.0029 + ($i * 32) }} 12.7922 {{ 22.0076 + ($i * 32) }} 12.977 {{ 21.9636 + ($i * 32) }} 13.1532C{{ 21.9196 + ($i * 32) }} 13.3294 {{ 21.8284 + ($i * 32) }} 13.4902 {{ 21.6998 + ($i * 32) }} 13.6185L{{ 17.5798 + ($i * 32) }} 17.6185L{{ 18.5798 + ($i * 32) }} 23.2485C{{ 18.6155 + ($i * 32) }} 23.436 {{ 18.5968 + ($i * 32) }} 23.6297 {{ 18.526 + ($i * 32) }} 23.8069C{{ 18.4551 + ($i * 32) }} 23.9841 {{ 18.335 + ($i * 32) }} 24.1374 {{ 18.1798 + ($i * 32) }} 24.2485C{{ 17.9987 + ($i * 32) }} 24.3754 {{ 17.7807 + ($i * 32) }} 24.4387 {{ 17.5598 + ($i * 32) }} 24.4285V24.4285Z" fill="currentColor"/>
                                </g>
                                @endfor
                            </svg>
                        </div>
                    </div>
                    <div id="menu" class="md:block">
                        <p class="mt-3 text-base leading-normal text-gray-600 dark:text-white w-full md:w-9/12 xl:w-5/6">{{ $review->pesan }}</p>
                        <div class="mt-6 flex justify-start items-center flex-row space-x-2.5">
                            <div class="flex flex-col justify-start items-start space-y-2">
                                <p class="text-base font-medium leading-none text-gray-800 dark:text-white">{{ $review->nama }}</p>
                                <p class="text-sm leading-none text-gray-600 dark:text-white">{{ $review->created_at->format('d F Y') }}</p>
                                <p class="text-sm leading-none text-gray-600 dark:text-white">{{ $review->email }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach

                @if(count($kritikSarans) === 0)
                <div class="w-full flex justify-center items-center p-8 bg-gray-50">
                    <p class="text-gray-500">Belum ada kritik dan saran</p>
                </div>
                @endif
            </div>
        </div>

        <!-- Form Section -->
        <div class="bg-white rounded-lg shadow-lg p-8 mb-8">
            <h2 class="text-2xl font-bold text-[#8B0000] mb-6">Tambah Kritik & Saran</h2>
            
            <form action="{{ route('kritiksaran.store') }}" method="POST" class="space-y-6">
                @csrf
                
                <div>
                    <label for="nama" class="block text-gray-600 mb-2">Nama</label>
                    <input type="text" id="nama" name="nama" required
                           class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8B0000] focus:border-transparent"
                           placeholder="Masukkan nama Anda">
                </div>

                <div>
                    <label for="email" class="block text-gray-600 mb-2">Email</label>
                    <input type="email" id="email" name="email" required
                           class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8B0000] focus:border-transparent"
                           placeholder="Masukkan email Anda">
                </div>

                <div>
                    <label for="jenis" class="block text-gray-600 mb-2">Jenis</label>
                    <select id="jenis" name="jenis" required
                            class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8B0000] focus:border-transparent">
                        <option value="">Pilih jenis</option>
                        <option value="kritik">Kritik</option>
                        <option value="saran">Saran</option>
                    </select>
                </div>

                <div>
                    <label for="pesan" class="block text-gray-600 mb-2">Pesan</label>
                    <textarea id="pesan" name="pesan" rows="5" required
                              class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8B0000] focus:border-transparent"
                              placeholder="Tulis pesan Anda di sini..."></textarea>
                </div>

                <div class="flex justify-end space-x-4">
                    <button type="submit" class="px-6 py-2 bg-[#8B0000] text-white rounded-lg font-bold hover:bg-[#660000] transition">
                        Kirim
                    </button>
                </div>
            </form>
        </div>

        @if(session('success'))
        <div class="mt-6 p-4 bg-green-100 text-green-800 rounded-lg">
            {{ session('success') }}
        </div>
        @endif

        @if($errors->any())
        <div class="mt-6 p-4 bg-red-100 text-red-800 rounded-lg">
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
    </div>
</div>

<script>
let menu = document.getElementById("menu");
let closeIcon = document.getElementById("closeIcon");
let openIcon = document.getElementById("openIcon");
const showMenu = (flag) => {
    if (flag) {
        menu.classList.toggle("hidden");
        closeIcon.classList.toggle("hidden");
        openIcon.classList.toggle("hidden");
    }
};
</script>

<style>
.carousel-cell {
    width: 150px;
    height: 150px;
    margin-right: 24px;
    counter-increment: carousel-cell;
}

.carousel-cell:before {
    display: block;
    width: 20%;
}

.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    left: -260px !important;
}

.flickity-button {
    position: absolute !important;
    inset: 0 !important;
    top: 50% !important;
    left: 80% !important;
    background: white;
    border: 0px;
    color: #27272a;
}

.flickity-prev-next-button:hover {
    background-color: #27272a;
    color: white;
}

.flickity-prev-next-button.previous {
    visibility: hidden;
}

.flickity-prev-next-button.next {
    margin-left: 50px;
    width: 48px;
    height: 48px;
    visibility: hidden;
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: none;
    cursor: default;
}

.flickity-prev-next-button .flickity-button-icon {
    margin-left: 2px;
    margin-top: 2px;
    width: 24px;
    height: 24px;
}
</style>
@endsection