@extends('layouts.main',['title'=>'Seller Rating'])

@section('head')
<style>
    .rating-field {
        border: 2px solid #FFFFFF;
        background: rgb(255 255 255 / 70%);
        color: #85888b;
        font-size: 12px;
        line-height: 16px;
        border-radius: 8px;
        height: 48px;
        padding: 1rem;
    }
    .rating-field .star {
        transition: color 0.2s ease;
        color: #E5E5E5;
        font-size: 14px;
    }
    .rating-field .star.hover, .rating-field .star.selected {
        color: #ffc107;
        cursor: pointer;
    }
    .rating-field .text {
        color: #B5B6B7;
    }
</style>
@endsection

@section('content')
<section class="mt-4">
    <div class="main-card">
        <form id="RatingForm" action="{{route('rating.store')}}" method="POST" enctype="multipart/form-data">
            @csrf <!-- Add CSRF token -->
            <div class="form-container mt-3">
                <button class="back-btn d-flex align-items-center justify-content-center link" onclick="window.location.href='{{ route('displaySeller', $id) }}'">
                    <svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6 9.93429L2.2915 6L6 2.06571L4.8583 0.857143L-2.24801e-07 6L4.8583 11.1429L6 9.93429Z" fill="black"/>
                    </svg>
                </button>
                <div class="row mt-4">
                    <div class="col-md-7">
                        <h2>Submit Your Review</h2>
                        <p class="font-14 m-0 mt-3">We'd love to hear your feedback! Your review helps us improve and assists others in making informed decisions. Please take a moment to share your experience with us.</p>
                        
                        <div class="mt-4 pt-2">
                            <input type="hidden" name="seller_id" value="{{ $id }}" />

                            <input type="hidden" name="image0" id="image0Input" />
                            <input type="hidden" name="image1" id="image1Input" />
                            <input type="hidden" name="image2" id="image2Input" />
                            <input type="hidden" name="image3" id="image3Input" />
                            <input type="hidden" name="image4" id="image4Input" />
                            <input type="hidden" name="image5" id="image5Input" />

                            <div class="row">
                                <div class="col-md-12 mb-4 form-field">
                                    <label for="fullName" class="form-label font-12">Name<span>*</span></label>
                                    <input type="text" class="form-control" name="name" id="name" placeholder="Handmade Wooden Chair" value="{{ old('name') }}" required />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 mb-4 form-field">
                                    <label class="form-label font-12">Email<span>*</span></label>
                                    <input name="email" type="email" class="form-control" id="email" placeholder="john@gmail.com" value="{{ old('email') }}" required />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-4 form-field">
                                    <label for="marketplace" class="form-label font-12">Marketplace<span>*</span></label>
                                    <select name="marketplace" id="marketplace" class="form-select form-control" required>
                                        @foreach($filtere_market_places as $key => $val)
                                            <option value="{{ $key }}">{{ $val }}</option>
                                        @endforeach
                                    </select>
                                </div>
            
                                <div class="col-md-6 mb-4 form-field">
                                    <input type="hidden" name="rating" id="rating-value">
                                    <label for="phoneNumber" class="form-label font-12">Rating<span>*</span></label>
                                    <div class="rating-field d-flex align-items-center justify-content-between">
                                        <span id="rating-stars">
                                            @for ($i = 1; $i <= 5; $i++)
                                                <span class="star fa fa-star" data-value="{{ $i }}"></span>
                                            @endfor
                                        </span>
                                        <span id="rating-text" class="text">0 Star rating</span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 mb-4 form-field">
                                    <label for="topic" class="form-label font-12">Topic<span>*</span></label>
                                    <input type="text" class="form-control" name="topic" id="topic" placeholder="" value="{{ old('topic') }}" required />
                                </div>
                                <div class="col-md-12 mb-4 form-field">
                                    <label for="review" class="form-label font-12">Your Review<span>*</span></label>
                                    <textarea class="form-control" id="review" rows="4" placeholder="your review text goes here..." name="review" required>{{ old('review') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1"></div>
                    <div class="col-md-4">
                        <div class="upload-photo d-flex flex-column justify-content-between h-100">
                            <div>
                                <p class="font-18 m-0 mb-2">Upload Photo</p>
                                <p class="font-12 m-0 mb-3">Submit Photos for a review</p>
                                <div class="product-img">
                                    <label for="file-input" class="file-upload">
                                        <div>
                                            <img src="{{ asset('images/file-upload.png') }}" alt="File Icon">
                                            <p class="font-10 mb-2">Drag your file(s) to upload<br>or <span>Browse</span></p>
                                            <p class="font-10 m-0"> Max file size 5MB</p>
                                        </div>
                                        <input type="file" id="file-input" accept="image/*">
                                    </label>
                                </div>
                                <div class="row pt-4 g-4">
                                    <div class="col-lg-4 col-md-6 col-sm-3 col-6" data-index="0">
                                        <div class="upload-img position-relative">
                                            <img id="img0" src="{{ asset('images/upload-img.svg') }}" alt="">
                                            <div class="icons-postion d-flex gap-1 position-absolute">
                                                <div class="link edit-icon" data-index="0">
                                                    <img src="{{ asset('images/edit-icon.svg') }}" alt="">
                                                </div>
                                                <div class="link delete-icon" data-index="0">
                                                    <img src="{{ asset('images/delete-icon.svg') }}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-sm-3 col-6" data-index="1">
                                        <div class="upload-img position-relative">
                                            <img id="img1" src="{{ asset('images/upload-img.svg') }}" alt="">
                                            <div class="icons-postion d-flex gap-1 position-absolute">
                                                <div class="link edit-icon" data-index="1">
                                                    <img src="{{ asset('images/edit-icon.svg') }}" alt="">
                                                </div>
                                                <div class="link delete-icon" data-index="1">
                                                    <img src="{{ asset('images/delete-icon.svg') }}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-sm-3 col-6" data-index="2">
                                        <div class="upload-img position-relative">
                                            <img id="img2" src="{{ asset('images/upload-img.svg') }}" alt="">
                                            <div class="icons-postion d-flex gap-1 position-absolute">
                                                <div class="link edit-icon" data-index="2">
                                                    <img src="{{ asset('images/edit-icon.svg') }}" alt="">
                                                </div>
                                                <div class="link delete-icon" data-index="2">
                                                    <img src="{{ asset('images/delete-icon.svg') }}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-sm-3 col-6" data-index="3">
                                        <div class="upload-img position-relative">
                                            <img id="img3" src="{{ asset('images/upload-img.svg') }}" alt="">
                                            <div class="icons-postion d-flex gap-1 position-absolute">
                                                <div class="link edit-icon" data-index="3">
                                                    <img src="{{ asset('images/edit-icon.svg') }}" alt="">
                                                </div>
                                                <div class="link delete-icon" data-index="3">
                                                    <img src="{{ asset('images/delete-icon.svg') }}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-sm-3 col-6" data-index="4">
                                        <div class="upload-img position-relative">
                                            <img id="img4" src="{{ asset('images/upload-img.svg') }}" alt="">
                                            <div class="icons-postion d-flex gap-1 position-absolute">
                                                <div class="link edit-icon" data-index="4">
                                                    <img src="{{ asset('images/edit-icon.svg') }}" alt="">
                                                </div>
                                                <div class="link delete-icon" data-index="4">
                                                    <img src="{{ asset('images/delete-icon.svg') }}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-sm-3 col-6" data-index="5">
                                        <div class="upload-img position-relative">
                                            <img id="img5" src="{{ asset('images/upload-img.svg') }}" alt="">
                                            <div class="icons-postion d-flex gap-1 position-absolute">
                                                <div class="link edit-icon" data-index="5">
                                                    <img src="{{ asset('images/edit-icon.svg') }}" alt="">
                                                </div>
                                                <div class="link delete-icon" data-index="5">
                                                    <img src="{{ asset('images/delete-icon.svg') }}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row powerd-content align-items-center mt-4">
                    <div class="col-6">
                        <p class="font-10 m-0">Powered By Axencis</p>
                    </div>
                    <div class="col-6">
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary" id="submitButton">Submit Review</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
@endsection

@section('script')
<script>
    document.getElementById('submitButton').addEventListener('click', function(event) {
        event.preventDefault(); // Prevent default form submission
    
        const form = document.getElementById('RatingForm');
        let isValid = true;
        let firstInvalidInput = null; // Store the first invalid input for focusing

        // Validate required fields
        document.querySelectorAll('.form-field').forEach(function(group) {
            const input = group.querySelector('input[required], select[required], textarea[required]');
            const label = group.querySelector('label');
            
            if (input) {
                if (!input.value) {
                    input.style.border = '1px solid red'; // Add red border for invalid inputs
                    isValid = false;

                    if (!firstInvalidInput) {
                        firstInvalidInput = input; // Store the first invalid input
                    }
                } else {
                    input.style.border = ''; // Reset border if valid
                }
            }
        });


        if (!isValid && firstInvalidInput) {
            firstInvalidInput.focus(); // Focus the first invalid input
        } else {
            // Get base64 image data from images with id "img0" to "img5" and set hidden input fields
            for(let i = 0; i <= 5; i++) {
                const imgElement = document.getElementById('img' + i);
                const hiddenInput = document.getElementById('image' + i + 'Input');
                
                if(imgElement && hiddenInput) {
                    const base64Image = imgElement.src.startsWith('data:image/') ? imgElement.src : '';
                    hiddenInput.value = base64Image;  // Set hidden input value
                }
            }

            // Example: Disable a button and change its text
            const submitButton = form.querySelector('button[type="submit"]'); // Find the submit button

            if(submitButton) {
                submitButton.disabled = true; // Disable the button
                submitButton.textContent = 'Processing...'; // Change the button text
            }

            // Regular form submit
            form.submit();
        }
    });

    const defaultImgSrc = "{{ asset('images/upload-img.svg') }}";
    let currentUploadIndex = 0; 
    let imageUploads = Array(6).fill(null);

    if(document.querySelector('#file-input')) {
        document.getElementById('file-input').addEventListener('change', function(e) {
            const file = e.target.files[0];
            
            if(file && currentUploadIndex < 6) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const imgElement = document.getElementById('img' + currentUploadIndex);
                    imgElement.src = event.target.result;
                    imageUploads[currentUploadIndex] = file;
                    currentUploadIndex++;
                };
                reader.readAsDataURL(file);
            }
        });
    }

    document.querySelectorAll('.edit-icon').forEach(function(editBtn) {
        editBtn.addEventListener('click', function(e) {
            e.preventDefault();
            const index = e.target.closest('div').dataset.index;
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.accept = 'image/*';
            fileInput.onchange = function(event) {
                const file = event.target.files[0];
                if(file) {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        const imgElement = document.getElementById('img' + index);
                        imgElement.src = event.target.result;
                        imageUploads[index] = file;
                    };
                    reader.readAsDataURL(file);
                }
            };
            fileInput.click();
        });
    });

    document.querySelectorAll('.delete-icon').forEach(function(deleteBtn) {
        deleteBtn.addEventListener('click', function(e) {
            e.preventDefault();
            const index = e.target.closest('div').dataset.index;
            const imgElement = document.getElementById('img' + index);
            imgElement.src = defaultImgSrc;
            imageUploads[index] = null;
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const stars = document.querySelectorAll('.star');
        const ratingValue = document.getElementById('rating-value');
        const ratingText = document.getElementById('rating-text');

        let selectedRating = 0;

        // Highlight stars on hover
        stars.forEach(star => {
            star.addEventListener('mouseover', () => {
                const value = star.getAttribute('data-value');
                highlightStars(value);
            });

            star.addEventListener('mouseout', () => {
                highlightStars(selectedRating); // Reset to selected value on mouse out
            });

            star.addEventListener('click', () => {
                selectedRating = star.getAttribute('data-value');
                ratingValue.value = selectedRating;

                let rating = `${selectedRating} Star rating`;
                if(selectedRating == 1) {
                    rating = `0${selectedRating} Star rating`;
                } else if(selectedRating > 1) {
                    rating = `0${selectedRating} Star ratings`;
                }
                ratingText.textContent = rating;
                highlightStars(selectedRating);
            });
        });

        function highlightStars(value) {
            stars.forEach(star => {
                if (star.getAttribute('data-value') <= value) {
                    star.classList.add('hover');
                } else {
                    star.classList.remove('hover');
                }
            });
        }
    });
</script>
@endsection