192 lines
10 KiB
PHP
192 lines
10 KiB
PHP
@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
|