@extends('layouts.content')

@section('content')
    <style>
        .review-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 1.5rem 1rem;
        }
        .review-card {
            background: #fff;
            border: 1px solid rgba(0,0,0,.08);
            border-radius: 16px;
            padding: 1.5rem;
        }
        .star-rating {
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-end;
            gap: 4px;
        }
        .star-rating input {
            display: none;
        }
        .star-rating label {
            font-size: 2rem;
            color: #ddd;
            cursor: pointer;
            transition: color 0.15s;
        }
        .star-rating input:checked ~ label,
        .star-rating label:hover,
        .star-rating label:hover ~ label {
            color: #f59e0b;
        }
        .star-rating input:checked + label {
            color: #f59e0b;
        }
        .media-preview-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        .product-thumb-sm {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            object-fit: cover;
            flex-shrink: 0;
        }
        .already-reviewed-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: #10b98115;
            color: #10b981;
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        .media-upload-box {
            width: 100px;
            height: 100px;
            border: 2px dashed #ccc;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #999;
            transition: all 0.2s;
            background: #fafafa;
        }
        .media-upload-box:hover {
            border-color: #20603d;
            color: #20603d;
            background: #f0f8f0;
        }
        .media-upload-box i {
            font-size: 1.5rem;
            margin-bottom: 2px;
        }
        .media-preview-item {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 12px;
            overflow: hidden;
            border: 2px solid #e0e0e0;
        }
        .media-preview-item .remove-media {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(0,0,0,0.6);
            color: #fff;
            border: none;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 2;
        }
        @media (max-width: 576px) {
            .review-container { padding: 1rem 0.75rem; }
            .star-rating label { font-size: 1.6rem; }
        }
    </style>

    <main class="review-container">
        <!-- Back -->
        <a href="{{ route('order-history.show', $order->order_id) }}" class="btn btn-sm btn-outline-secondary rounded-pill mb-3">
            <i class="bi bi-arrow-left me-1"></i> Kembali
        </a>

        <div class="d-flex align-items-center gap-3 mb-4">
            <div>
                <h4 class="fw-bold mb-1">Beri Ulasan</h4>
                <p class="text-secondary mb-0 small">Pesanan: {{ $order->invoice_number }}</p>
            </div>
            <span class="ms-auto badge bg-success rounded-pill px-3 py-2" style="font-size:0.8rem;">
                <i class="bi bi-check-circle me-1"></i> Selesai
            </span>
        </div>

        @if (session('error'))
            <div class="alert alert-danger border-0 rounded-3 shadow-sm mb-4">{{ session('error') }}</div>
        @endif
        @if (session('success'))
            <div class="alert alert-success border-0 rounded-3 shadow-sm mb-4">{{ session('success') }}</div>
        @endif

        {{-- Produk yang sudah diulas --}}
        @php
            $allProductIds = $order->details->pluck('package.product_id')->unique()->values();
        @endphp

        {{-- 1. Tampilkan produk yang sudah diulas (read-only & form edit) --}}
        @foreach($allProductIds as $productId)
            @php
                $detail = $order->details->firstWhere('package.product_id', $productId);
                $prod = $detail?->package?->product;
                $alreadyReviewed = isset($existingReviews[$productId]);
                $existingReview = $alreadyReviewed ? $existingReviews[$productId] : null;

                // Photo
                $photoUrl = asset('assets/img/selada.png');
                if ($prod && $prod->media->isNotEmpty()) {
                    $mainMedia = $prod->media->firstWhere('is_main', true) ?? $prod->media->first();
                    $ext = strtolower(pathinfo($mainMedia->getRawOriginal('file_url'), PATHINFO_EXTENSION));
                    if (in_array($ext, ['jpg','jpeg','png','webp','gif','heic'])) {
                        $photoUrl = $mainMedia->file_url;
                    }
                }
            @endphp

            @if($alreadyReviewed)
            <div class="review-card mb-3" id="review-{{ $productId }}">
                @php $rv = $existingReview; @endphp
                {{-- Tampilan ulasan yang sudah diberikan (read-only) --}}
                <div id="review-view-{{ $rv->review_id }}">
                    <div class="d-flex align-items-start gap-3 mb-3">
                        <img src="{{ $photoUrl }}" alt="{{ $prod->product_name ?? '-' }}" class="product-thumb-sm">
                        <div class="flex-grow-1">
                            <div class="fw-bold text-dark">{{ $prod->product_name ?? '-' }}</div>
                            <div class="already-reviewed-badge mt-1">
                                <i class="bi bi-check-lg"></i> Sudah diulas
                            </div>
                        </div>
                    </div>

                    {{-- Rating stars --}}
                    <div class="mb-2">
                        @for($i = 1; $i <= 5; $i++)
                            <i class="bi bi-star{{ $i <= $rv->rating ? '-fill' : '' }} text-warning" style="font-size:1.2rem;"></i>
                        @endfor
                        <span class="ms-2 fw-medium">{{ $rv->rating }}/5</span>
                    </div>

                    @if($rv->comment)
                        <p class="text-secondary small mb-2">{{ $rv->comment }}</p>
                    @endif

                    {{-- Media existing --}}
                    @if($rv->media->isNotEmpty())
                        <div class="media-preview-grid">
                            @foreach($rv->media as $media)
                                @if($media->media_type === 'photo')
                                    <div class="media-preview-item">
                                        <img src="{{ $media->file_url }}" alt="Review photo" style="width:100%; height:100%; object-fit:cover;">
                                    </div>
                                @else
                                    <div class="media-preview-item">
                                        <video src="{{ $media->file_url }}" muted style="width:100%; height:100%; object-fit:cover;"></video>
                                        <span style="position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,0.6);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:10px;">
                                            <i class="bi bi-play-fill"></i>
                                        </span>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    @endif

                    {{-- Tombol Edit --}}
                    <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill mt-3" onclick="toggleEditReview({{ $rv->review_id }})">
                        <i class="bi bi-pencil me-1"></i> Edit Ulasan
                    </button>
                </div>

                {{-- Form Edit Ulasan (hidden by default) --}}
                <div id="review-edit-{{ $rv->review_id }}" style="display:none;">
                    <form method="POST" action="{{ route('review.update', [$order->order_id, $rv->review_id]) }}" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="d-flex align-items-start gap-3 mb-3">
                            <img src="{{ $photoUrl }}" alt="{{ $prod->product_name ?? '-' }}" class="product-thumb-sm">
                            <div class="flex-grow-1">
                                <div class="fw-bold text-dark">{{ $prod->product_name ?? '-' }}</div>
                                <div class="text-secondary small">Edit ulasan Anda</div>
                            </div>
                        </div>

                        {{-- Rating --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold small text-secondary">Rating <span class="text-danger">*</span></label>
                            <div class="star-rating">
                                @for($star = 5; $star >= 1; $star--)
                                    <input type="radio" name="rating" value="{{ $star }}" id="edit-star{{ $star }}-{{ $rv->review_id }}" {{ $rv->rating == $star ? 'checked' : '' }} required>
                                    <label for="edit-star{{ $star }}-{{ $rv->review_id }}" title="{{ $star }}">★</label>
                                @endfor
                            </div>
                            @error('rating')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Comment --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold small text-secondary">Komentar</label>
                            <textarea name="comment" class="form-control rounded-3" rows="3" placeholder="Bagikan pengalaman Anda...">{{ old('comment', $rv->comment) }}</textarea>
                            @error('comment')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Existing media with delete checkbox --}}
                        @if($rv->media->isNotEmpty())
                            <div class="mb-3">
                                <label class="form-label fw-semibold small text-secondary">Media Saat Ini (centang untuk hapus)</label>
                                <div class="d-flex flex-wrap gap-2">
                                    @foreach($rv->media as $media)
                                        <div class="position-relative" style="width:80px; height:80px;">
                                            @if($media->media_type === 'photo')
                                                <img src="{{ $media->file_url }}" class="rounded-3 w-100 h-100 object-fit-cover" style="opacity:0.7;">
                                            @else
                                                <video src="{{ $media->file_url }}" class="rounded-3 w-100 h-100 object-fit-cover" muted style="opacity:0.7;"></video>
                                            @endif
                                            <label class="position-absolute top-0 start-0 p-1" style="cursor:pointer;">
                                                <input type="checkbox" name="delete_media[]" value="{{ $media->review_media_id }}" class="form-check-input">
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        {{-- Upload media baru --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold small text-secondary">Tambah Media Baru (maks. 5 file)</label>
                            <div class="d-flex flex-wrap gap-2" id="edit-media-boxes-{{ $rv->review_id }}">
                                <div class="media-upload-box mb-2" onclick="document.getElementById('edit-media-input-{{ $rv->review_id }}').click()">
                                    <i class="bi bi-plus-lg"></i>
                                    <span class="small text-center">Tambah Media</span>
                                </div>
                            </div>
                            <input type="file" name="media[]" id="edit-media-input-{{ $rv->review_id }}" class="d-none" multiple accept="image/jpeg,image/png,image/gif,image/webp,video/mp4,video/quicktime">
                            <small class="text-muted">Format: JPG, PNG, GIF, WEBP, MP4, MOV. Maks 20MB per file.</small>
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary-custom rounded-3 fw-semibold px-4">
                                <i class="bi bi-check-lg me-1"></i> Simpan Perubahan
                            </button>
                            <button type="button" class="btn btn-outline-secondary rounded-3 fw-semibold px-3" onclick="toggleEditReview({{ $rv->review_id }})">
                                Batal
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            @endif
        @endforeach

        {{-- 2. Form Master untuk semua produk yang BELUM diulas --}}
        @php
            $unreviewedIds = $allProductIds->filter(fn($id) => !isset($existingReviews[$id]));
        @endphp

        @if($unreviewedIds->count() > 0)
            <form method="POST" action="{{ route('review.store', $order->order_id) }}" enctype="multipart/form-data">
                @csrf
                
                @foreach($unreviewedIds as $productId)
                    @php
                        $detail = $order->details->firstWhere('package.product_id', $productId);
                        $prod = $detail?->package?->product;
                        $photoUrl = asset('assets/img/selada.png');
                        if ($prod && $prod->media->isNotEmpty()) {
                            $mainMedia = $prod->media->firstWhere('is_main', true) ?? $prod->media->first();
                            $ext = strtolower(pathinfo($mainMedia->getRawOriginal('file_url'), PATHINFO_EXTENSION));
                            if (in_array($ext, ['jpg','jpeg','png','webp','gif','heic'])) {
                                $photoUrl = $mainMedia->file_url;
                            }
                        }
                    @endphp

                    <div class="review-card mb-3" id="review-{{ $productId }}">
                        <input type="hidden" name="reviews[{{ $productId }}][product_id]" value="{{ $productId }}">

                        <div class="d-flex align-items-start gap-3 mb-3">
                            <img src="{{ $photoUrl }}" alt="{{ $prod->product_name ?? '-' }}" class="product-thumb-sm">
                            <div class="flex-grow-1">
                                <div class="fw-bold text-dark">{{ $prod->product_name ?? '-' }}</div>
                                <div class="text-secondary small">Varian: {{ $detail->package->weight_in_kg ? $detail->package->weight_in_kg . ' Kg' : '-' }}</div>
                            </div>
                        </div>

                        {{-- Rating --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold small text-secondary">Rating <span class="text-danger">*</span></label>
                            <div class="star-rating" id="star-group-{{ $productId }}">
                                <input type="radio" name="reviews[{{ $productId }}][rating]" value="5" id="star5-{{ $productId }}" required>
                                <label for="star5-{{ $productId }}" title="5 - Sangat Puas">★</label>
                                <input type="radio" name="reviews[{{ $productId }}][rating]" value="4" id="star4-{{ $productId }}">
                                <label for="star4-{{ $productId }}" title="4 - Puas">★</label>
                                <input type="radio" name="reviews[{{ $productId }}][rating]" value="3" id="star3-{{ $productId }}">
                                <label for="star3-{{ $productId }}" title="3 - Cukup">★</label>
                                <input type="radio" name="reviews[{{ $productId }}][rating]" value="2" id="star2-{{ $productId }}">
                                <label for="star2-{{ $productId }}" title="2 - Kurang">★</label>
                                <input type="radio" name="reviews[{{ $productId }}][rating]" value="1" id="star1-{{ $productId }}">
                                <label for="star1-{{ $productId }}" title="1 - Sangat Kurang">★</label>
                            </div>
                            @error("reviews.{$productId}.rating")
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Comment --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold small text-secondary">Komentar</label>
                            <textarea name="reviews[{{ $productId }}][comment]" class="form-control rounded-3" rows="3" placeholder="Bagikan pengalaman Anda tentang produk ini...">{{ old("reviews.{$productId}.comment") }}</textarea>
                            @error("reviews.{$productId}.comment")
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Media Upload --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold small text-secondary">Foto / Video (maks. 5 file)</label>
                            <div class="d-flex flex-wrap gap-2" id="media-boxes-{{ $productId }}">
                                <div class="media-upload-box mb-2" data-index="0" onclick="document.getElementById('media-input-{{ $productId }}').click()">
                                    <i class="bi bi-plus-lg"></i>
                                    <span class="small text-center">Tambah Media</span>
                                </div>
                            </div>
                            <input type="file" name="media_{{ $productId }}[]" id="media-input-{{ $productId }}" class="d-none" multiple accept="image/jpeg,image/png,image/gif,image/webp,video/mp4,video/quicktime">
                            <small class="text-muted">Format: JPG, PNG, GIF, WEBP, MP4, MOV. Maks 20MB per file.</small>
                            @error("media_{$productId}.*")
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                @endforeach

                <div class="d-grid mt-4 mb-5">
                    <button type="submit" class="btn btn-primary-custom rounded-pill fw-bold py-3 shadow-sm" style="font-size: 1.1rem;">
                        <i class="bi bi-send-fill me-2"></i> Simpan Semua Ulasan
                    </button>
                </div>
            </form>
        @endif
    </main>

    <script>
        // ========== GLOBAL FILE STORE ==========
        // Menyimpan file yang dipilih per input, agar tetap ada saat form disubmit
        const reviewFileStores = {};
        let reviewFileCounter = 0;

        // ========== FUNGSI UTAMA UNTUK PREVIEW MEDIA ==========
        function createUploadBox(inputId, containerId) {
            const box = document.createElement('div');
            box.className = 'media-upload-box';
            box.innerHTML = '<i class="bi bi-plus-lg"></i><span class="small">Tambah Media</span>';
            box.addEventListener('click', function() {
                document.getElementById(inputId).click();
            });
            return box;
        }

        function initMediaPreview(inputElement, containerElement, maxFiles = 5) {
            if (!inputElement || !containerElement) return;

            var inputId = inputElement.id;
            reviewFileStores[inputId] = [];

            inputElement.addEventListener('change', function() {
                var files = Array.from(this.files);
                if (files.length === 0) return;

                var currentPreviews = containerElement.querySelectorAll('.media-preview-item').length;
                if (currentPreviews + files.length > maxFiles) {
                    alert('Maksimal ' + maxFiles + ' file media. Sudah ada ' + currentPreviews + ' file.');
                    return;
                }

                files.forEach(function(file) {
                    var fileId = ++reviewFileCounter;
                    reviewFileStores[inputId].push({ id: fileId, file: file });

                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var previewDiv = document.createElement('div');
                        previewDiv.className = 'media-preview-item';
                        previewDiv.dataset.fileId = fileId;

                        if (file.type.startsWith('video/')) {
                            var video = document.createElement('video');
                            video.src = e.target.result;
                            video.muted = true;
                            video.style.width = '100%';
                            video.style.height = '100%';
                            video.style.objectFit = 'cover';
                            previewDiv.appendChild(video);
                            var playIcon = document.createElement('span');
                            playIcon.style.cssText = 'position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,0.6);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:10px;';
                            playIcon.innerHTML = '<i class="bi bi-play-fill"></i>';
                            previewDiv.appendChild(playIcon);
                        } else {
                            var img = document.createElement('img');
                            img.src = e.target.result;
                            img.style.width = '100%';
                            img.style.height = '100%';
                            img.style.objectFit = 'cover';
                            previewDiv.appendChild(img);
                        }

                        // Tombol hapus
                        var removeBtn = document.createElement('button');
                        removeBtn.type = 'button';
                        removeBtn.className = 'remove-media';
                        removeBtn.innerHTML = '✕';
                        removeBtn.addEventListener('click', function() {
                            // Hapus dari file store
                            reviewFileStores[inputId] = reviewFileStores[inputId].filter(function(item) {
                                return item.id !== fileId;
                            });
                            previewDiv.remove();
                            var remaining = containerElement.querySelectorAll('.media-preview-item').length;
                            var uploadBox = containerElement.querySelector('.media-upload-box');
                            if (remaining < maxFiles && !uploadBox) {
                                var newBox = createUploadBox(inputElement.id, containerElement.id);
                                containerElement.appendChild(newBox);
                            }
                        });
                        previewDiv.appendChild(removeBtn);

                        // Sisipkan preview sebelum kotak upload
                        var uploadBox = containerElement.querySelector('.media-upload-box');
                        if (uploadBox) {
                            containerElement.insertBefore(previewDiv, uploadBox);
                        } else {
                            containerElement.appendChild(previewDiv);
                        }
                    };
                    reader.readAsDataURL(file);
                });

                // Reset input agar bisa pilih file yang sama lagi
                this.value = '';
            });
        }

        // ========== INISIALISASI UNTUK FORM ULASAN BARU ==========
        document.querySelectorAll('[id^="media-input-"]').forEach(input => {
            const productId = input.id.replace('media-input-', '');
            const container = document.getElementById('media-boxes-' + productId);
            if (container) {
                initMediaPreview(input, container, 5);
            }
        });

        // ========== INISIALISASI UNTUK FORM EDIT ULASAN ==========
        document.querySelectorAll('[id^="edit-media-input-"]').forEach(input => {
            const reviewId = input.id.replace('edit-media-input-', '');
            const container = document.getElementById('edit-media-boxes-' + reviewId);
            if (container) {
                initMediaPreview(input, container, 5);
                // Pastikan container memiliki kotak upload (jika tidak ada)
                if (!container.querySelector('.media-upload-box')) {
                    const box = createUploadBox(input.id, container.id);
                    container.appendChild(box);
                }
            }
        });

        // ========== SUBMIT HANDLER: populate file input sebelum form dikirim ==========
        // Agar file yang tersimpan di reviewFileStores ikut terkirim ke server
        document.querySelectorAll('form[enctype="multipart/form-data"]').forEach(function(form) {
            form.addEventListener('submit', function() {
                var fileInputs = form.querySelectorAll('input[type="file"]');
                fileInputs.forEach(function(fileInput) {
                    var stored = reviewFileStores[fileInput.id];
                    if (stored && stored.length > 0) {
                        var dt = new DataTransfer();
                        stored.forEach(function(item) {
                            dt.items.add(item.file);
                        });
                        fileInput.files = dt.files;
                    }
                });
            });
        });

        // ========== FUNGSI TOGGLE EDIT REVIEW ==========
        function toggleEditReview(reviewId) {
            const viewDiv = document.getElementById('review-view-' + reviewId);
            const editDiv = document.getElementById('review-edit-' + reviewId);
            if (viewDiv && editDiv) {
                const isHidden = editDiv.style.display === 'none' || editDiv.style.display === '';
                viewDiv.style.display = isHidden ? 'none' : 'block';
                editDiv.style.display = isHidden ? 'block' : 'none';
            }
        }
    </script>
@endsection