@extends('Front.layout')

@push('front-styles')
    <style>
        /* Menyembunyikan radio button asli */
        .rating-group .rating__input {
            display: none;
        }

        /* Grup untuk bintang */
        .rating-group {
            display: inline-flex;
            flex-direction: row-reverse;
            /* Membalik urutan agar hover-nya benar */
            justify-content: center;
        }

        /* Style untuk bintang (label) */
        .rating-group .rating__star {
            font-size: 2.5rem;
            /* Ukuran bintang */
            color: #d8d8d8;
            /* Warna bintang non-aktif */
            cursor: pointer;
            transition: color 0.2s;
        }

        /* Efek hover pada bintang */
        .rating-group:hover .rating__star:hover,
        .rating-group:hover .rating__star:hover~.rating__star {
            color: #ffc107;
            /* Warna bintang saat di-hover (kuning Bootstrap) */
        }

        /* Style untuk bintang yang dipilih (checked) */
        .rating-group .rating__input:checked~.rating__star {
            color: #ffc107;
            /* Warna bintang aktif */
        }
    </style>
@endpush
@section('frontcontent')
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body text-center">
                        <h5 class="card-title">Beri Ulasan Anda</h5>
                        <p class="card-text">Bagaimana pengalaman Anda dengan pelayanan kami?</p>

                        <form action="{{ route('review.store') }}" method="POST">
                            @csrf
                            @if (isset($pelanggan) && $pelanggan)
                                <input type="hidden" name="pelanggan_id" value="{{ $pelanggan->id }}">
                            @else
                                <div class="mb-3 text-start">
                                    <label for="telp_pelanggan" class="form-label">No Telp/Wa</label>
                                    <input class="form-control" type="number" id="telp_pelanggan" name="telp_pelanggan"
                                        placeholder="No Telp/Wa..." />
                                </div>
                                <div class="mb-3 text-start">
                                    <label for="no_service" class="form-label">No Service</label>
                                    <input class="form-control" id="no_service" name="no_service"
                                        placeholder="No Service..." />
                                </div>
                            @endif
                            <div class="mb-3">
                                <label for="rating" class="text-center">Rating</label>
                                <br>
                                <div class="rating-group">
                                    <input class="rating__input" name="nilai_review" id="rating-5" value="5"
                                        type="radio">
                                    <label for="rating-5" class="rating__star bi bi-star-fill"></label>

                                    <input class="rating__input" name="nilai_review" id="rating-4" value="4"
                                        type="radio">
                                    <label for="rating-4" class="rating__star bi bi-star-fill"></label>

                                    <input class="rating__input" name="nilai_review" id="rating-3" value="3"
                                        type="radio">
                                    <label for="rating-3" class="rating__star bi bi-star-fill"></label>

                                    <input class="rating__input" name="nilai_review" id="rating-2" value="2"
                                        type="radio">
                                    <label for="rating-2" class="rating__star bi bi-star-fill"></label>

                                    <input class="rating__input" name="nilai_review" id="rating-1" value="1" type="radio"
                                        required>
                                    <label for="rating-1" class="rating__star bi bi-star-fill"></label>
                                </div>
                            </div>

                            <div class="mb-3 text-start">
                                <label for="reviewMessage" class="form-label">Pesan Anda</label>
                                <textarea class="form-control" id="reviewMessage" name="pesan_review" rows="4"
                                    placeholder="Tuliskan ulasan Anda di sini..."></textarea>
                            </div>

                            <button type="submit" class="btn btn-primary w-100">Kirim Review</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection