<main class="flex-1 py-4 px-4 bg-purple-50">
    <h1 class="text-xl font-bold mb-4 text-[#333]">Ubah Review</h1>
    <?php if ($this->session->flashdata('message')): ?>
        <div class="alert flex items-center justify-between bg-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-100 border-l-4 border-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-500 text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-800 px-6 py-4 rounded-lg shadow-lg transition transform duration-300">
            <div class="flex items-center">
                <!-- Ikon Feather sesuai jenis pesan -->
                <i data-feather="<?php echo $this->session->flashdata('message_type') === 'success' ? 'check-circle' : 'x-circle'; ?>" class="h-6 w-6 mr-3"></i>
                <span class="font-semibold"><?php echo $this->session->flashdata('message'); ?></span>
            </div>
            <button class="ml-4 text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-500 hover:text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-700 focus:outline-none" onclick="this.parentElement.style.display='none'">
                <i data-feather="x" class="h-5 w-5"></i>
            </button>
        </div>
        <script>
            feather.replace();
        </script>
    <?php endif; ?>

    <form action="<?= base_url('admin/reviews/update_review/' . $review->id) ?>" method="POST" class="space-y-4" id="reviewForm">
        <input type="hidden" name="<?= $this->security->get_csrf_token_name() ?>" value="<?= $this->security->get_csrf_hash() ?>" class="csrf_token">

        <!-- Informasi Voucher Section -->
        <div class="bg-white rounded-lg shadow-sm p-6" id="voucherSection">
            <h2 class="text-lg font-semibold mb-6">Informasi Produk</h2>

            <div class="mb-4" id="product_select_container">
                <div class="flex items-start gap-4">
                    <div class="w-1/3">
                        <div class="flex items-center gap-2 mb-2">
                            <label class="text-[#333] font-medium">Pilih Produk</label>
                            <span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
                        </div>
                    </div>
                    <div class="w-2/3">
                        <select
                            id="product_id"
                            name="product_id"
                            class="tom-select">
                            <option value="">Pilih Produk</option>
                            <?php foreach ($products as $product): ?>
                                <option value="<?= $product->id_products ?>" <?= ($product->id_products == $review->product_id) ? 'selected' : '' ?>><?= $product->title ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Review Subject-->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <!-- Label & Info -->
                    <div class="w-1/3">
                        <div class="flex items-center gap-2 mb-2">
                            <label class="text-[#333] font-medium">Nama</label>
                            <span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
                        </div>
                        <div class="mt-3 text-sm text-gray-600">
                            <p>Boleh pakai nama samaran ya.</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <input
                            id="reviewer"
                            type="text"
                            name="reviewer"
                            placeholder="Misalnya: Agus"
                            autocomplete="off"
                            required
                            value="<?= $review->display_name ?>"
                            class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500" />
                    </div>
                </div>
            </div>

            <!-- Rating Section -->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <div class="w-1/3">
                        <div class="flex items-center gap-2 mb-2">
                            <label class="text-[#333] font-medium">Rating</label>
                            <span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
                        </div>
                        <div class="mt-3 text-sm text-gray-600">
                            <p>Pilih rating dari 1 hingga 5 bintang</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <div class="rating flex space-x-1">
                            <?php for ($i = 1; $i <= 5; $i++): ?>
                                <label class="star-rating cursor-pointer" data-rating="<?= $i ?>">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                        class="h-8 w-8 star-icon <?= ($i <= $review->rating) ? 'text-yellow-400' : 'text-gray-300' ?> hover:text-yellow-400 transition-colors"
                                        fill="<?= ($i <= $review->rating) ? 'currentColor' : 'none' ?>"
                                        viewBox="0 0 24 24"
                                        stroke="currentColor">
                                        <path stroke-linecap="round"
                                            stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                                    </svg>
                                </label>
                            <?php endfor; ?>
                            <input type="hidden" name="rating" id="rating-input" value="<?= $review->rating ?>" required>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Review Subject-->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <!-- Label & Info -->
                    <div class="w-1/3">
                        <div class="flex items-center gap-2 mb-2">
                            <label class="text-[#333] font-medium">Judul Review</label>
                            <span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <input
                            id="review_subject"
                            type="text"
                            name="review_subject"
                            placeholder="Misalnya: Enak Banget"
                            autocomplete="off"
                            required
                            value="<?= $review->subject ?>"
                            class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500" />
                    </div>
                </div>
            </div>

            <!-- Review Description-->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <!-- Label & Info -->
                    <div class="w-1/3">
                        <div class="flex items-center gap-2 mb-2">
                            <label class="text-[#333] font-medium">Review</label>
                            <span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <textarea
                            id="review_description"
                            name="review_description"
                            placeholder="Misalnya: Thanks Laciasmara"
                            autocomplete="off"
                            required
                            class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500 resize-y min-h-[120px]"><?= $review->review ?></textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- Moderation Section -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold mb-6">Moderasi Review</h2>

            <!-- Status Review -->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <div class="w-1/3">
                        <div class="flex items-center gap-2 mb-2">
                            <label class="text-[#333] font-medium">Status</label>
                            <span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
                        </div>
                        <div class="mt-3 text-sm text-gray-600">
                            <p>Tentukan status moderasi review ini. Jika status 'Approved' maka akan ditampilkan di halaman produk</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <select
                            id="status"
                            name="status"
                            required
                            class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333]">
                            <option value="">Pilih Status</option>
                            <option value="pending" <?= (isset($review->status) && $review->status == 'pending') ? 'selected' : '' ?>>
                                <span class="inline-flex items-center">
                                    🟡 Pending
                                </span>
                            </option>
                            <option value="approved" <?= (isset($review->status) && $review->status == 'approved') ? 'selected' : '' ?>>
                                <span class="inline-flex items-center">
                                    ✅ Approved
                                </span>
                            </option>
                            <option value="rejected" <?= (isset($review->status) && $review->status == 'rejected') ? 'selected' : '' ?>>
                                <span class="inline-flex items-center">
                                    ❌ Rejected
                                </span>
                            </option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Verified Purchase -->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <div class="w-1/3">
                        <div class="flex items-center gap-2 mb-2">
                            <label class="text-[#333] font-medium">Verifikasi Pembelian</label>
                        </div>
                        <div class="mt-3 text-sm text-gray-600">
                            <p>Tandai jika ini adalah pembelian yang terverifikasi</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <div class="flex items-center mt-2">
                            <input
                                id="is_verified_purchase"
                                name="is_verified_purchase"
                                type="checkbox"
                                value="1"
                                <?= (isset($review->is_verified_purchase) && $review->is_verified_purchase == 1) ? 'checked' : '' ?>
                                class="h-4 w-4 text-[#7A4397] border-gray-300 rounded focus:ring-[#7A4397] focus:ring-1">
                            <label for="is_verified_purchase" class="ml-3 text-sm text-[#333]">
                                <span class="font-medium">Pembelian Terverifikasi</span>
                                <span class="block text-xs text-gray-500 mt-1">Review ini berasal dari pembeli yang terverifikasi</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Moderation Notes -->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <div class="w-1/3">
                        <div class="flex items-center gap-2 mb-2">
                            <label class="text-[#333] font-medium">Catatan Moderasi</label>
                            <span class="text-xs text-blue-600 px-2 py-1 bg-blue-100 rounded">Opsional</span>
                        </div>
                        <div class="mt-3 text-sm text-gray-600">
                            <p>Tambahkan catatan internal untuk moderasi review ini</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <textarea
                            id="moderation_notes"
                            name="moderation_notes"
                            placeholder="Misalnya: Review mengandung konten yang tidak pantas..."
                            autocomplete="off"
                            class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500 resize-y min-h-[100px]"><?= isset($review->moderation_notes) ? $review->moderation_notes : '' ?></textarea>
                        <div class="mt-2 text-xs text-gray-500">
                            <p>💡 Catatan ini hanya untuk internal admin dan tidak akan ditampilkan kepada user</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex justify-end gap-4 p-6">
            <button type="button" class="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                onclick="window.location.href='<?= base_url('admin/customer-services/review') ?>'">
                Batal
            </button>
            <button type="submit" class="px-6 py-2 bg-[#7A4397] text-white rounded-lg hover:bg-[#6B3A87] transition-colors">
                Simpan
            </button>
        </div>
    </form>
</main>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize feather icons (untuk alert message)
        feather.replace();

        // Initialize Tom Select for all select inputs with tom-select class
        document.querySelectorAll('.tom-select').forEach(function(select) {
            new TomSelect(select, {
                plugins: ['remove_button'],
                maxItems: 1,
                placeholder: 'Pilih produk...',
                searchField: 'text'
            });
        });

        const stars = document.querySelectorAll('.star-rating');
        const ratingInput = document.getElementById('rating-input');

        stars.forEach(star => {
            star.addEventListener('mouseover', function() {
                const rating = this.getAttribute('data-rating');
                highlightStars(rating);
            });

            star.addEventListener('mouseout', function() {
                if (!ratingInput.value) {
                    resetStars();
                } else {
                    highlightStars(ratingInput.value);
                }
            });

            star.addEventListener('click', function() {
                const rating = this.getAttribute('data-rating');
                ratingInput.value = rating;
                highlightStars(rating);
            });
        });

        function highlightStars(rating) {
            stars.forEach(star => {
                const starRating = star.getAttribute('data-rating');
                const starIcon = star.querySelector('.star-icon');

                if (starRating <= rating) {
                    starIcon.classList.remove('text-gray-300');
                    starIcon.classList.add('text-yellow-400');
                } else {
                    starIcon.classList.remove('text-yellow-400');
                    starIcon.classList.add('text-gray-300');
                }
            });
        }

        function resetStars() {
            stars.forEach(star => {
                const starIcon = star.querySelector('.star-icon');
                starIcon.classList.remove('text-yellow-400');
                starIcon.classList.add('text-gray-300');
            });
        }
    });
</script>