@extends("layouts.pelanggan")
@section("title","Keluhan Saya")
@section("content")
<div class="max-w-3xl mx-auto">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-blue-800">Keluhan Saya</h1>
    </div>

    {{-- Form kirim keluhan baru --}}
    <div class="card mb-6">

        <h2 class="text-2xl font-bold text-blue-900 mb-6">
            Kirim Keluhan / Customer Service
        </h2>

        <p class="text-gray-500 mb-6">
            Sampaikan keluhan atau masukan Anda mengenai perjalanan yang telah selesai.
        </p>

        <form method="POST"
            action="{{ route('p.keluhan.kirim') }}"
            enctype="multipart/form-data"
            class="space-y-6">
            @csrf

            {{-- Pilih Tiket --}}
            <div>
                <label class="block font-semibold text-blue-900 mb-2">
                    Tiket Perjalanan
                </label>

                <select
                    name="pemesanan_id"
                    class="w-full rounded-xl border border-blue-200 p-3 focus:ring-2 focus:ring-blue-500"
                    required>

                    <option value="">Pilih tiket perjalanan</option>

                    @foreach($pemesananLunas as $pm)
                    <option value="{{ $pm->id }}">
                        {{ $pm->kode_booking }}
                        •
                        {{ $pm->jadwal->rute->kota_asal }}
                        →
                        {{ $pm->jadwal->rute->kota_tujuan }}
                    </option>
                    @endforeach

                </select>

                @error('pemesanan_id')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- Rating --}}
            <div>

                <label class="block font-semibold text-blue-900 mb-4">
                    1. Bagaimana pengalaman perjalanan Anda?
                </label>

                <div class="flex gap-4 justify-center" id="rating">

                    @for($i=1;$i<=5;$i++)

                        <button
                        type="button"
                        class="star text-5xl text-gray-300 transition-all duration-200 hover:scale-125"
                        data-value="{{ $i }}">
                        ★
                        </button>

                        @endfor

                </div>

                <input
                    type="hidden"
                    id="ratingValue"
                    name="rating">

                <p id="ratingText"
                    class="text-center text-gray-500 mt-3">
                    Pilih bintang untuk memberi penilaian
                </p>

            </div>

            {{-- Keluhan --}}
            <div>

                <label class="block font-semibold text-blue-900 mb-3">
                    Apa yang ingin Anda sampaikan?
                </label>

                <textarea
                    name="isi_keluhan"
                    rows="5"
                    minlength="20"
                    maxlength="2000"
                    class="w-full rounded-2xl border border-blue-200 p-4 resize-none"
                    placeholder="Tuliskan keluhan atau masukan Anda di sini..."></textarea>

                <div class="flex justify-end mt-2">
                    <span class="text-gray-400 text-sm">
                        <span id="counter">0</span>/2000
                    </span>
                </div>
                {{-- Tambahkan Foto --}}
                <div>

                    <label class="block font-semibold text-blue-900 mb-4">
                        3. Tambahkan Foto (Opsional)
                    </label>

                    <label
                        for="fotoKeluhan"
                        class="group border-2 border-dashed border-blue-300 rounded-3xl bg-blue-50/40 hover:bg-blue-50 hover:border-blue-500 transition-all duration-300 cursor-pointer flex flex-col items-center justify-center py-12">

                        <div class="w-20 h-20 rounded-full bg-white shadow flex items-center justify-center mb-4">

                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="w-10 h-10 text-blue-600"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor">

                                <path stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M4 16l4-4a2 2 0 012.828 0L16 17m-2-2l1-1a2 2 0 012.828 0L20 16m-6-8h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />

                            </svg>

                        </div>

                        <span class="text-xl font-semibold text-blue-700">
                            Tambah Foto
                        </span>

                        <span class="text-gray-500 mt-1">
                            PNG, JPG atau JPEG
                        </span>

                        <input
                            id="fotoKeluhan"
                            type="file"
                            name="foto[]"
                            multiple
                            accept="image/*"
                            class="hidden">

                    </label>

                    <div
                        id="previewFoto"
                        class="grid grid-cols-2 md:grid-cols-5 gap-4 mt-5">
                    </div>
                    @error('foto')
                    <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
                    @enderror
                    @error('foto.*')
                    <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
                    @enderror

                </div>
            </div>

            <button
                class="w-full bg-blue-600 hover:bg-blue-700 text-white rounded-xl py-3 font-semibold">

                Kirim Keluhan / Masukan

            </button>

        </form>

    </div>
    {{-- Daftar keluhan --}}
    @forelse($keluhan as $k)
    <div class="card mb-3">
        <div class="flex justify-between items-start">
            <div>
                <div class="font-semibold">{{ $k->subjek }}</div>
                <div class="text-sm text-gray-500 mt-1">
                    {{ $k->created_at->diffForHumans() }}
                    @if($k->pemesanan) &nbsp;·&nbsp; {{ $k->pemesanan->kode_booking }} @endif
                </div>
            </div>
            <span class="px-2 py-1 rounded text-xs font-medium
                    {{ $k->status === "selesai" ? "bg-green-100 text-green-700" :
                      ($k->status === "diproses" ? "bg-yellow-100 text-yellow-700" :
                                                    "bg-red-100 text-red-700") }}">
                {{ ucfirst($k->status) }}
            </span>
        </div>
        @if($k->balasan_admin)
        <div class="mt-3 bg-blue-50 border-l-4 border-blue-400 p-3 text-sm">
            <strong class="text-blue-700">Balasan Admin:</strong>
            <p class="mt-1 text-gray-700">{{ $k->balasan_admin }}</p>
        </div>
        @endif
    </div>
    @empty
    <div class="card text-center text-gray-500 py-8">Belum ada keluhan yang dikirim.</div>
    @endforelse
    <div class="mt-4">{{ $keluhan->links() }}</div>
</div>
@endsection

@push('scripts')
<script>
    const stars = document.querySelectorAll(".star");
    const rating = document.getElementById("ratingValue");
    const ratingText = document.getElementById("ratingText");

    const text = [
        "",
        "Sangat Buruk",
        "Buruk",
        "Cukup",
        "Baik",
        "Sangat Baik"
    ];

    function paint(value) {

        stars.forEach((star, index) => {

            if (index < value) {

                star.classList.remove("text-gray-300");
                star.classList.add("text-yellow-400");
                star.classList.add("scale-110");

            } else {

                star.classList.remove("text-yellow-400");
                star.classList.remove("scale-110");
                star.classList.add("text-gray-300");

            }

        });

        ratingText.innerHTML = value ? text[value] : "Pilih bintang untuk memberi penilaian";

    }

    stars.forEach(star => {

        star.onclick = function() {

            let value = this.dataset.value;

            rating.value = value;

            paint(value);

        }

    });

    const textarea = document.querySelector("textarea");

    const counter = document.getElementById("counter");

    textarea.addEventListener("input", () => {

        counter.innerHTML = textarea.value.length;

    });
</script>
@endpush