@extends('layouts.main')

@section('content')
<style>
    .star-rating {
      direction: rtl;
      font-size: 2rem;
      unicode-bidi: bidi-override;
      display: inline-flex;
    }

    .star-rating input {
      display: none;
    }

    .star-rating label {
      color: #ccc;
      cursor: pointer;
      padding: 0 5px;
    }

    .star-rating input:checked~label,
    .star-rating label:hover,
    .star-rating label:hover~label {
      color: gold;
    }

    .existing-media-item,
    .new-media-item {
        position: relative;
        margin-bottom: 15px;
    }
    .remove-media-btn {
        position: absolute;
        top: 5px;
        right: 5px;
        background: rgba(0,0,0,0.5);
        color: white;
        border: none;
        border-radius: 50%;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }
    .upload-label {
        cursor: pointer;
    }
</style>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>{{ session('success') }}</strong>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif

            <div class="card shadow border-0 rounded-4">
                <div class="card-body p-4">

                    {{-- Product Info --}}
                    <div class="d-flex align-items-center mb-4">
                        <img src="{{ url('images/products/' . $review->product->product_image_1) }}" width="80" height="80" class="me-3 rounded">
                        <div>
                            <h5 class="mb-1">{{ $review->product->product_name }}</h5>
                            <small class="text-muted">You're editing your review for this product</small>
                        </div>
                    </div>

                    {{-- Review Form --}}
                    <form action="{{ route('review.update', $review->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        {{-- Rating, Title, Description fields (same as before) --}}
                        <div class="mb-3">
                            <label class="form-label d-block">Your Rating:</label>
                            <div class="star-rating">
                                @for ($i = 5; $i >= 1; $i--)
                                  <input type="radio" name="rating" value="{{ $i }}" id="rating-{{ $i }}" {{ old('rating', $review->rating) == $i ? 'checked' : '' }}>
                                  <label for="rating-{{ $i }}">★</label>
                                @endfor
                            </div>
                            @error('rating')
                              <small class="text-danger d-block">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="title" class="form-label">Review Title</label>
                            <input type="text" name="title" class="form-control" id="title" value="{{ old('title', $review->title) }}" required>
                            @error('title')
                              <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">Write a Review</label>
                            <textarea name="description" class="form-control" id="description" rows="4" required>{{ old('description', $review->description) }}</textarea>
                            @error('description')
                              <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        {{-- Existing Media Display --}}
                        @if($review->media && count(json_decode($review->media)))
                            <div class="mb-3">
                                <label class="form-label">Existing Media</label>
                                <div class="row" id="existing-media-container">
                                    @foreach(json_decode($review->media) as $media)
                                        <div class="col-6 col-md-4 existing-media-item">
                                            @if(pathinfo($media, PATHINFO_EXTENSION) === 'mp4')
                                                <video class="w-100 rounded" style="height: 150px; object-fit: cover;" controls>
                                                    <source src="{{ url('images/review/'.$media) }}" type="video/mp4">
                                                </video>
                                            @else
                                                <img src="{{ url('images/review/'.$media) }}" class="w-100 rounded" style="height: 150px; object-fit: cover;">
                                            @endif
                                            <button type="button" class="remove-media-btn remove-existing-media" data-media="{{ $media }}">
                                                <i class="fas fa-times"></i>
                                            </button>
                                            <input type="hidden" name="existing_media[]" value="{{ $media }}">
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        {{-- New Media Upload Section --}}
                        <div class="mb-3">
                            <label class="form-label">Upload New Media</label>
                            <div class="row" id="media-preview-container">
                                <!-- New media upload cards will be added here dynamically -->
                            </div>
                            <small class="text-muted">Max 5 files total (including existing). Formats: jpg, png, mp4</small>
                            @error('media')
                              <small class="text-danger d-block">{{ $message }}</small>
                            @enderror
                            @error('media.*')
                              <small class="text-danger d-block">{{ $message }}</small>
                            @enderror
                        </div>

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

@section('script')
<script>
    // Rating Stars Highlight Logic
    document.querySelectorAll('.star-rating input').forEach(input => {
        input.addEventListener('change', function() {
            const labels = document.querySelectorAll('.star-rating label');
            labels.forEach(label => {
                if (label.htmlFor <= this.id) {
                    label.style.color = "#FFD700";
                } else {
                    label.style.color = "";
                }
            });
        });
    });

    // Media Upload Script - Improved Version
    const maxFiles = 5;
    let existingMediaCount = {{ $review->media ? count(json_decode($review->media)) : 0 }};
    let removedExistingCount = 0;
    let newMediaCount = 0;

    document.addEventListener('DOMContentLoaded', function() {
        // Initialize stars
        const currentRating = {{ $review->rating }};
        if (currentRating) {
            document.querySelector(`.star-rating input[value="${currentRating}"]`).checked = true;
        }

        // Initialize one empty upload card if there's space
        if (existingMediaCount - removedExistingCount + newMediaCount < maxFiles) {
            addNewUploadCard();
        }
    });

    function addNewUploadCard() {
        if (existingMediaCount - removedExistingCount + newMediaCount >= maxFiles) return;

        const container = document.getElementById('media-preview-container');
        const cardId = `new-media-${newMediaCount}`;

        const card = document.createElement('div');
        card.className = 'col-6 col-md-4 mb-3 new-media-item';
        card.id = cardId;

        card.innerHTML = `
            <div class="position-relative border rounded p-2" style="height: 180px;">
                <div id="preview-${cardId}" class="h-100 d-flex justify-content-center align-items-center">
                    <label for="media-input-${cardId}" id="label-${cardId}" class="w-100 h-100 d-flex flex-column justify-content-center align-items-center upload-label text-muted">
                        <i class="fas fa-plus fa-2x"></i>
                        <span class="small">Upload</span>
                    </label>
                    <div class="spinner-border text-primary d-none" id="loader-${cardId}" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <input type="file" name="media[]" accept="image/*,video/*" class="d-none" id="media-input-${cardId}" onchange="handleMediaUpload(this, '${cardId}')">
                <button type="button" class="remove-media-btn d-none" id="remove-${cardId}" onclick="removeNewMedia('${cardId}')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        `;

        container.appendChild(card);
        newMediaCount++;
    }

    function handleMediaUpload(input, cardId) {
        const file = input.files[0];
        const preview = document.getElementById(`preview-${cardId}`);
        const loader = document.getElementById(`loader-${cardId}`);
        const label = document.getElementById(`label-${cardId}`);
        const removeBtn = document.getElementById(`remove-${cardId}`);

        if (!file) return;

        loader.classList.remove('d-none');
        label.classList.add('d-none');

        const reader = new FileReader();

        reader.onload = function(e) {
            loader.classList.add('d-none');

            if (file.type.startsWith('image/')) {
                preview.innerHTML = `<img src="${e.target.result}" class="w-100 rounded" style="height: 150px; object-fit: cover;">`;
            } else if (file.type.startsWith('video/')) {
                preview.innerHTML = `<video class="w-100 rounded" style="height: 150px; object-fit: cover;" controls>
                                    <source src="${e.target.result}" type="${file.type}">
                                 </video>`;
            }

            removeBtn.classList.remove('d-none');

            // Add another upload card if there's space
            if (existingMediaCount - removedExistingCount + newMediaCount < maxFiles) {
                addNewUploadCard();
            }
        };

        reader.readAsDataURL(file);
    }

    function removeNewMedia(cardId) {
        const card = document.getElementById(cardId);
        if (card) {
            card.remove();
            newMediaCount--;

            // Reset the file input if needed
            const input = document.getElementById(`media-input-${cardId}`);
            if (input) input.value = '';

            // If we're below max files and there isn't already an empty card, add one
            const emptyCards = document.querySelectorAll('.new-media-item #upload-label:not(.d-none)');
            if (emptyCards.length === 0 && existingMediaCount - removedExistingCount + newMediaCount < maxFiles) {
                addNewUploadCard();
            }
        }
    }

    // Handle removal of existing media
    document.querySelectorAll('.remove-existing-media').forEach(button => {
        button.addEventListener('click', function() {
            const mediaItem = this.closest('.existing-media-item');
            if (mediaItem) {
                mediaItem.remove();
                removedExistingCount++;

                // Track removed media for server-side processing
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'removed_media[]';
                hiddenInput.value = this.dataset.media;
                document.querySelector('form').appendChild(hiddenInput);

                // Add an upload card if there's space
                if (existingMediaCount - removedExistingCount + newMediaCount < maxFiles) {
                    addNewUploadCard();
                }
            }
        });
    });
</script>
@endsection