@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;
    }
  </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/' . $product['product_image_1']) }}" width="80" height="80" class="me-3 rounded">
                            <div>
                                <h5 class="mb-1">{{ $product->product_name }}</h5>
                                <small class="text-muted">You're reviewing this product</small>
                            </div>
                        </div>

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

                            <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="{{ $i }}" {{ old('rating') == $i ? 'checked' : '' }}>
                                          <label for="{{ $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') }}" 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') }}</textarea>
                                    @error('description')
                                      <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>

                                {{-- Media Upload Section --}}
                                <div class="mb-3">
                                    <label class="form-label">Upload up to 5 Images or Videos</label>
                                    <div class="row" id="media-preview-container"></div>
                                    <small class="text-muted">Accepted formats: jpg, png, mp4. Max 5 files.</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">Submit Review</button>
                        </form>

                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        // Rating Stars Highlight Logic (Change the color of stars when hovered)
        const stars = document.querySelectorAll('.star-rating');
        const labels = document.querySelectorAll('.star-rating + label');

        stars.forEach((star, index) => {
            star.addEventListener('change', () => {
                labels.forEach((label, idx) => {
                    if (idx <= index) {
                        label.style.color = "#FFD700"; // Gold color for active stars
                    } else {
                        label.style.color = ""; // Reset color
                    }
                });
            });
        });
    </script>

    <script>
        let mediaCount = 0;
        const maxFiles = 5;

        document.addEventListener('DOMContentLoaded', function() {
            addNextMediaCard(); // Add first empty card on load
        });

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

            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 next upload card only if limit not reached
                if (mediaCount < maxFiles) {
                    addNextMediaCard();
                }
            };

            reader.readAsDataURL(file);
        }

        function addNextMediaCard() {
            if (mediaCount >= maxFiles) return;

            const index = mediaCount;
            const container = document.getElementById('media-preview-container');

            const card = document.createElement('div');
            card.className = 'col-6 col-md-4 mb-3';
            card.id = `media-card-${index}`;

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

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

        function removeMedia(index) {
            const card = document.getElementById(`media-card-${index}`);
            if (card) {
                card.remove();
                mediaCount--;

                const existingInputs = document.querySelectorAll('[id^="media-card-"] input[type="file"]');
                if (existingInputs.length === 0 && mediaCount < maxFiles) {
                    addNextMediaCard(); // Re-add one card if everything is deleted
                }
            }
        }
    </script>
@endsection