@extends('frontend.layouts.app')
@section('frontend_title', 'Tushar Enterprise')

@section('frontend_content')
    <div class="container">
        <div class="row">
            <div class="col-md-3 px-5 py-5 my-5">
                @include('profile.partials.sidebar')
            </div>
            <div class="col-md-9 px-5 py-5 my-5">
                <div class="col-12 d-flex justify-content-start">
                    <a href="{{ route('my_order', Auth::user()->id) }}" class="btn btn-info" style="box-shadow: 10px 5px 5px rgb(236, 233, 233);">Return Order List</a>
                </div>
                @foreach ($userReviewList as $item)
                    <div class="card mw-100 mt-1 col-12">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-lg-4 col-md-12">
                                            <div class="d-flex justify-content-start flex-wrap">
                                                @foreach ($item->review_images as $value)
                                                    <img src="{{ $value->review_img }}" alt="review_img" height="80" width="100" class="p-1">
                                                @endforeach
                                            </div>
                                        </div>
                                        <div class="col-lg-8 col-md-12">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="display-4"><strong>{{ $item->products->en_name }}</strong></div>
                                                    <div class="ratings-container">
                                                        <div class="ratings">
                                                            <div class="ratings-val" style="width: {{ $item->rating * 2 }}0%;"></div><!-- End .ratings-val -->
                                                        </div><!-- End .ratings -->
                                                    </div><!-- End .rating-container -->
                                                    <div>
                                                        <textarea readonly name="" class="form-control">{{ $item->review }}</textarea>
                                                    </div>

                                                    <button type="button" class="updatereviewbtn btn btn-primary" data-toggle="modal" data-review_id="{{ $item->id }}" data-Product_id="{{ $item->products->id }}" data-target="#exampleModal">Edit Review </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach


                <!-- Modal -->
                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">My All Review</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <input type="hidden" id="product_id" name="product_id" placeholder="product">
                                    <input type="hidden" id="review_id" name="review_id" placeholder="review">
                                    <div class="form-row">
                                        <div class="col px-4 mt-2">
                                            <select class="custom-select custom-select-lg mb-3" name="rating" id="reviewRating">
                                                <option></option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                            </select>
                                        </div>
                                        <div class="col-12 px-4">
                                            <label for="">Write review</label>
                                            <textarea name="review" id="reviewText" cols="75" rows="5" class="form-control"></textarea>
                                        </div>
                                        <div class="col-12 px-4">
                                            <div class="form-group">
                                                <div id="previewContainer" class="h-25 w-25 p-1 d-flex justify-content-start img-thumbnail"></div>
                                                <input type="file" class="form-control-file" name="review_img[]" id="multi_images" multiple onchange="previewImages()">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        <button type="submit" id="reviewUpdate" class="btn btn-primary">Update</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('frontend_scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.2/axios.min.js"></script>

    <script>
        $('.updatereviewbtn').on('click', async function() {
            let review_id = $(this).data('review_id');
            let product_id = $(this).data('product_id');

            console.log('Review ID:', review_id); // Debug statement
            console.log('Product ID:', product_id); // Debug statement

            $('#product_id').val(product_id);
            $('#review_id').val(review_id);

            try {
                const res = await axios.get(`/signle-review/${review_id}`);
                $('#reviewRating').val(res.data?.rating);
                $('#reviewText').val(res.data?.review);

                let images = '';
                for (let i = 0; i < res.data?.review_images?.length; ++i) {
                    images += `<img class="ml-1 img-thumbnail" src=${res.data?.review_images[i]?.review_img} alt=${res.data?.review_images[i]?.review_id} />`;
                }
                $('#previewContainer').html(images);
            } catch (error) {
                console.error('Error fetching review:', error); // Handle any errors
            }
        });


        $('#reviewUpdate').on('click', async function(event) {
            event.preventDefault(); // Prevent default form submission

            let review_id = $('#review_id').val();
            let product_id = $('#product_id').val();
            let rating = $('#reviewRating').val();
            let review = $('#reviewText').val();
            let files = document.getElementById('multi_images').files;

            const formData = new FormData();
            formData.append('review_id', review_id);
            formData.append('product_id', product_id);
            formData.append('rating', rating);
            formData.append('review', review);

            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                formData.append('review_img[]', file);
            }

            const config = {
                headers: {
                    'content-type': 'multipart/form-data'
                }
            };

            try {
                const res = await axios.post('/product-review/update', formData, config);
                console.log('Review updated:', res.data);
                $('#exampleModal').modal('hide'); // Hide the modal on successful update
                window.location.href = `/my-reviews/${review_id}`;
            } catch (error) {
                console.error('Error updating review:', error); // Handle any errors
            }
        });



        function previewImages() {
            var previewContainer = document.getElementById('previewContainer');
            previewContainer.innerHTML = '';
            var files = document.getElementById('multi_images').files;

            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var img = document.createElement('img');
                img.src = URL.createObjectURL(file);
                img.classList.add('img-thumbnail');
                img.style.width = '150px';
                img.style.height = '150px';
                img.style.margin = '5px';
                previewContainer.appendChild(img);
            }
        }
    </script>


@endsection