@extends("backend.layouts.app")

@section("title")
    Create Testimonial
@endsection

@section("breadcrumbs")
    <x-backend.breadcrumbs>
        <x-backend.breadcrumb-item route='{{ route("backend.testimonials.index") }}' icon="fas fa-comment-dots">
            Testimonials
        </x-backend.breadcrumb-item>

        <x-backend.breadcrumb-item type="active">Create</x-backend.breadcrumb-item>
    </x-backend.breadcrumbs>
@endsection

@section("content")
    <section class="p-3 bg-white rounded-lg shadow-sm">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="mb-0">Create New Testimonial</h4>
                    <a href="{{ route('backend.testimonials.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back to List
                    </a>
                </div>
                
                <div class="card">
                    <div class="card-body">
                        <form id="testimonialForm" action="{{ route('backend.testimonials.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <!-- Image Upload -->
                                    <div class="form-group">
                                        <label class="form-label">Image</label>
                                        <div class="upload-box" 
                                            style="border: 2px dashed #007bff; padding: 20px; text-align: center; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 200px; margin-bottom: 15px;">
                                            
                                            <div>
                                                <span style="color: #007bff; font-size: 16px;">
                                                    <i class="fas fa-cloud-upload-alt" style="font-size: 36px;"></i><br>
                                                    Click to Upload Image
                                                </span>
                                            </div>
                            
                                            <!-- File Input (hidden) -->
                                            <input type="file" id="testimonialImage" name="image" accept="image/*" style="display: none;">
                                        </div>
                                        
                                        <!-- Image Preview Area -->
                                        <div id="imagePreview" style="display: none; text-align: center;">
                                            <img id="previewImage" src="" alt="Image Preview" class="img-thumbnail" style="max-height: 200px; max-width: 100%;">
                                            <button type="button" id="removeImage" class="btn btn-sm btn-danger mt-2">
                                                <i class="fas fa-times"></i> Remove Image
                                            </button>
                                        </div>
                                        
                                        @if($errors->has('image'))
                                            <span class="text-danger">{{ $errors->first('image') }}</span>
                                        @endif
                                    </div>
                                </div>
                                
                                <div class="col-md-8">
                                    <!-- Name Field -->
                                    <div class="form-group">
                                        <label for="testimonialName" class="form-label">Name <span class="text-danger">*</span></label>
                                        <input class="form-control @if($errors->has('name')) is-invalid @endif" 
                                            type="text" id="testimonialName" name="name" value="{{ old('name') }}" required>
                                        @if($errors->has('name'))
                                            <div class="invalid-feedback">{{ $errors->first('name') }}</div>
                                        @endif
                                    </div>
                                
                                    <!-- Description Field -->
                                    <div class="form-group">
                                        <label for="testimonialDescription" class="form-label">Description <span class="text-danger">*</span></label>
                                        <textarea class="form-control @if($errors->has('description')) is-invalid @endif" 
                                            id="testimonialDescription" name="description" rows="5" required>{{ old('description') }}</textarea>
                                        @if($errors->has('description'))
                                            <div class="invalid-feedback">{{ $errors->first('description') }}</div>
                                        @endif
                                    </div>
                                    
                                    <!-- Star Rating Field -->
                                    <div class="form-group">
                                        <label class="form-label">Rating <span class="text-danger">*</span></label>
                                        <div class="star-rating">
                                            <div class="rating-input">
                                                <input type="radio" id="star5" name="stars" value="5" {{ old('stars') == 5 ? 'checked' : '' }}>
                                                <label for="star5" data-rating="5"><i class="fas fa-star"></i></label>
                                                
                                                <input type="radio" id="star4" name="stars" value="4" {{ old('stars') == 4 ? 'checked' : '' }}>
                                                <label for="star4" data-rating="4"><i class="fas fa-star"></i></label>
                                                
                                                <input type="radio" id="star3" name="stars" value="3" {{ old('stars') == 3 ? 'checked' : '' }}>
                                                <label for="star3" data-rating="3"><i class="fas fa-star"></i></label>
                                                
                                                <input type="radio" id="star2" name="stars" value="2" {{ old('stars') == 2 ? 'checked' : '' }}>
                                                <label for="star2" data-rating="2"><i class="fas fa-star"></i></label>
                                                
                                                <input type="radio" id="star1" name="stars" value="1" {{ old('stars') == 1 ? 'checked' : '' }}>
                                                <label for="star1" data-rating="1"><i class="fas fa-star"></i></label>
                                            </div>
                                        </div>
                                        @if($errors->has('stars'))
                                            <span class="text-danger d-block mt-2">{{ $errors->first('stars') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group mt-4">
                                <div class="d-flex justify-content-end">
                                    <a href="{{ route('backend.testimonials.index') }}" class="btn btn-secondary mr-2">Cancel</a>
                                    <button type="submit" class="btn btn-primary">Save Testimonial</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('after-styles')
<style>
    /* Star Rating Styles */
    .star-rating {
        display: inline-block;
    }
    
    .rating-input {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    
    .rating-input input {
        display: none;
    }
    
    .rating-input label {
        cursor: pointer;
        font-size: 1.8rem;
        padding: 0 0.2rem;
        color: #ddd;
    }
    
    .rating-input label:hover,
    .rating-input label:hover ~ label,
    .rating-input input:checked ~ label {
        color: #ffc107;
    }
</style>
@endpush

@push('after-scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Image upload handling
        const uploadBox = document.querySelector('.upload-box');
        const testimonialImage = document.getElementById('testimonialImage');
        const imagePreview = document.getElementById('imagePreview');
        const previewImage = document.getElementById('previewImage');
        const removeImageBtn = document.getElementById('removeImage');
        
        // Click handler for upload box
        uploadBox.addEventListener('click', function() {
            testimonialImage.click();
        });
        
        // Change handler for file input
        testimonialImage.addEventListener('change', function(event) {
            const file = event.target.files[0];
            
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImage.src = e.target.result;
                    imagePreview.style.display = 'block';
                    uploadBox.style.display = 'none';
                };
                reader.readAsDataURL(file);
            }
        });
        
        // Remove image button
        removeImageBtn.addEventListener('click', function() {
            testimonialImage.value = '';
            previewImage.src = '';
            imagePreview.style.display = 'none';
            uploadBox.style.display = 'flex';
        });
        
        // Star rating interaction
        const ratingLabels = document.querySelectorAll('.rating-input label');
        
        ratingLabels.forEach(label => {
            label.addEventListener('click', function() {
                const rating = this.getAttribute('data-rating');
                document.querySelector(`#star${rating}`).checked = true;
            });
        });
    });
</script>
@endpush