@extends("backend.layouts.app")

@section("title")
    {{ __($module_action) }} {{ __($module_title) }}
@endsection

@section("breadcrumbs")
    <x-backend.breadcrumbs>
        <x-backend.breadcrumb-item route='{{ route("backend.$module_name.index") }}' icon="{{ $module_icon }}">
            {{ __($module_title) }}
        </x-backend.breadcrumb-item>

        <x-backend.breadcrumb-item type="active">{{ __($module_action) }}</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">Manage Your Testimonials</h4>
                    <div>
                        <a href="{{ route('backend.testimonials.create') }}" class="btn btn-success mr-2">
                            <i class="fas fa-plus"></i> Add Testimonial
                        </a>
                    </div>
                </div>
                
                <!-- Existing Testimonials Table -->
                @if(count($$module_name_singular) > 0)
                    <div class="testimonial-listing mt-3">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th width="5%">#</th>
                                        <th width="10%">Image</th>
                                        <th width="20%">Name</th>
                                        <th width="40%">Description</th>
                                        <th width="15%">Rating</th>
                                        <th width="10%">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($$module_name_singular as $index => $testimonial)
                                        <tr id="testimonial-{{ $testimonial->id }}">
                                            <td>{{ $index + 1 }}</td>
                                            
                                            <!-- Image Column -->
                                            <td>
                                                @if($testimonial->image)
                                                    <img src="{{ asset($testimonial->image) }}" alt="Testimonial Image" style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%; border: 2px solid #ddd;">
                                                @else
                                                    <div style="width: 50px; height: 50px; background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #ddd;">
                                                        <i class="fas fa-user text-secondary"></i>
                                                    </div>
                                                @endif
                                            </td>
                                
                                            <td>
                                                <strong>{{ $testimonial->name }}</strong>
                                            </td>
                                
                                            <td>{{ Str::limit($testimonial->description, 60) }}</td>
                                
                                            <td>
                                                @for ($i = 1; $i <= 5; $i++)
                                                    <i class="fas fa-star {{ $i <= $testimonial->stars ? 'text-warning' : 'text-muted' }}"></i>
                                                @endfor
                                            </td>
                                
                                            <td>
                                                <!-- Action Buttons -->
                                                <div class="btn-group">
                                                    
                                                    <div class="">
                                                        <a class="mr-2" href="{{ route('backend.testimonials.edit', $testimonial->id) }}">
                                                            <i class="fas fa-edit"></i>
                                                        </a>
                                                        <a class="ml-2 text-danger" href="#" onclick="confirmDelete({{ $testimonial->id }}); return false;">
                                                            <i class="fas fa-trash"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                
                                                <!-- Hidden Delete Form -->
                                                <form id="deleteForm-{{ $testimonial->id }}" action="{{ route('backend.testimonials.destroy', $testimonial->id) }}" method="POST" style="display: none;">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @else
                    <div class="alert alert-info mt-4">
                        <i class="fas fa-info-circle"></i> You haven't added any testimonials yet. Click one of the "Add" buttons to get started!
                    </div>
                @endif
            </div>
        </div>
    </section>
    
   
    <!-- View Testimonial Modal -->
    <div class="modal fade" id="viewTestimonialModal" tabindex="-1" role="dialog" aria-labelledby="viewTestimonialModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewTestimonialModalLabel">View Testimonial</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4 text-center">
                            <div id="viewImageContainer">
                                <img id="viewImage" src="" alt="Testimonial" class="img-fluid rounded-circle mb-3" style="max-width: 150px; max-height: 150px; border: 3px solid #ddd;">
                            </div>
                            <div id="viewNoImage" style="display: none;">
                                <div class="rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 150px; height: 150px; background-color: #f0f0f0; border: 3px solid #ddd;">
                                    <i class="fas fa-user fa-4x text-secondary"></i>
                                </div>
                            </div>
                            <h5 id="viewName" class="mb-3"></h5>
                            <div id="viewStarRating" class="mb-3">
                                <!-- Stars populated dynamically -->
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Testimonial</h6>
                                </div>
                                <div class="card-body">
                                    <blockquote class="blockquote" style="font-size: 1rem;">
                                        <p id="viewDescription"></p>
                                    </blockquote>
                                </div>
                            </div>
                            
                            <div class="card mt-3">
                                <div class="card-header">
                                    <h6 class="mb-0">Details</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <p><strong>Created:</strong> <span id="viewCreatedAt"></span></p>
                                        </div>
                                        <div class="col-md-6">
                                            <p><strong>Last Updated:</strong> <span id="viewUpdatedAt"></span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <div class="btn-group">
                        <button type="button" id="viewQuickEditBtn" class="btn btn-info" onclick="editFromView()">
                            <i class="fas fa-edit"></i> Quick Edit
                        </button>
                        <a id="viewEditPageBtn" class="btn btn-primary" href="">
                            <i class="fas fa-edit"></i> Edit Page
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
<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.5rem;
        padding: 0 0.2rem;
        color: #ddd;
    }
    
    .rating-input label:hover,
    .rating-input label:hover ~ label,
    .rating-input input:checked ~ label {
        color: #ffc107;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    let currentTestimonialId = null;
    
    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');
        const form = document.getElementById('testimonialForm');
        const testimonialModal = document.getElementById('addTestimonialModal');
        
        // 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';
        });
        
        // Reset form when modal is hidden
        $(testimonialModal).on('hidden.bs.modal', function () {
            resetForm();
        });
        
        // 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;
            });
        });
    });
    
    // Reset the form
    function resetForm() {
        document.getElementById('testimonialForm').reset();
        document.getElementById('testimonialForm').action = "{{ route('backend.testimonials.store') }}";
        document.getElementById('testimonialModalLabel').textContent = "Add New Testimonial";
        document.getElementById('testimonialSubmitBtn').textContent = "Save Testimonial";
        document.getElementById('imagePreview').style.display = 'none';
        document.querySelector('.upload-box').style.display = 'flex';
        currentTestimonialId = null;
        
        // Reset star ratings
        document.getElementById('star5').checked = true;
    }
    
    // Edit testimonial
    function editTestimonial(id) {
        currentTestimonialId = id;
        
        fetch(`/admin/testimonials/${id}/edit`)
            .then(response => response.json())
            .then(data => {
                document.getElementById('testimonialForm').action = `/admin/testimonials/${id}`;
                document.getElementById('testimonialModalLabel').textContent = "Edit Testimonial";
                document.getElementById('testimonialSubmitBtn').textContent = "Update Testimonial";
                
                // Add method override for PUT/PATCH
                let methodField = document.querySelector('input[name="_method"]');
                if (!methodField) {
                    methodField = document.createElement('input');
                    methodField.type = 'hidden';
                    methodField.name = '_method';
                    document.getElementById('testimonialForm').appendChild(methodField);
                }
                methodField.value = 'PATCH';
                
                // Populate form
                document.getElementById('testimonialName').value = data.name;
                document.getElementById('testimonialDescription').value = data.description;
                
                // Set star rating
                document.getElementById(`star${data.stars}`).checked = true;
                
                // Handle image preview
                const imagePreview = document.getElementById('imagePreview');
                const previewImage = document.getElementById('previewImage');
                const uploadBox = document.querySelector('.upload-box');
                
                if (data.image) {
                    previewImage.src = "{{ asset('') }}" + data.image;
                    imagePreview.style.display = 'block';
                    uploadBox.style.display = 'none';
                } else {
                    imagePreview.style.display = 'none';
                    uploadBox.style.display = 'flex';
                }
                
                // Show the modal
                $('#addTestimonialModal').modal('show');
            })
            .catch(error => {
                console.error('Error fetching testimonial:', error);
                Swal.fire('Error', 'Failed to load testimonial data', 'error');
            });
    }
    
    // View testimonial details
    function viewTestimonial(id) {
        currentTestimonialId = id;
        
        fetch(`/admin/testimonials/${id}/edit`)
            .then(response => response.json())
            .then(data => {
                // Set name
                document.getElementById('viewName').textContent = data.name;
                document.getElementById('viewDescription').textContent = data.description;
                
                // Set dates
                document.getElementById('viewCreatedAt').textContent = new Date(data.created_at).toLocaleString();
                document.getElementById('viewUpdatedAt').textContent = new Date(data.updated_at).toLocaleString();
                
                // Update edit page link
                document.getElementById('viewEditPageBtn').href = `/admin/testimonials/${id}/edit`;
                
                // Set star rating
                const starContainer = document.getElementById('viewStarRating');
                starContainer.innerHTML = '';
                
                for (let i = 1; i <= 5; i++) {
                    const star = document.createElement('i');
                    star.className = i <= data.stars ? 'fas fa-star text-warning mx-1' : 'fas fa-star text-muted mx-1';
                    starContainer.appendChild(star);
                }
                
                // Handle image
                const imageContainer = document.getElementById('viewImageContainer');
                const noImageContainer = document.getElementById('viewNoImage');
                const viewImage = document.getElementById('viewImage');
                
                if (data.image) {
                    viewImage.src = "{{ asset('') }}" + data.image;
                    imageContainer.style.display = 'block';
                    noImageContainer.style.display = 'none';
                } else {
                    imageContainer.style.display = 'none';
                    noImageContainer.style.display = 'block';
                }
                
                // Show the modal
                $('#viewTestimonialModal').modal('show');
            })
            .catch(error => {
                console.error('Error fetching testimonial:', error);
                Swal.fire('Error', 'Failed to load testimonial data', 'error');
            });
    }
    
    // Edit from view modal
    function editFromView() {
        $('#viewTestimonialModal').modal('hide');
        setTimeout(() => {
            editTestimonial(currentTestimonialId);
        }, 500);
    }
    
    // Delete confirmation
    function confirmDelete(id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "This testimonial will be permanently deleted!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById(`deleteForm-${id}`).submit();
            }
        });
    }
    
    // Update broker profile with AJAX
    function updateBrokerProfile(userId, field, value) {
        fetch('/admin/testimonials/update-broker-profile', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                user_id: userId,
                field: field,
                value: value
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                Swal.fire({
                    title: 'Success!',
                    text: data.message,
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                });
            } else {
                Swal.fire('Error', data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error updating profile:', error);
            Swal.fire('Error', 'Failed to update broker profile', 'error');
        });
    }
</script>
@endsection