@extends('layouts.admin')
@section('content')
<style>
    .ck-editor__editable{
        height: 200px;
    }
</style>

<div class="col-9 main-dash-left">
    <div class="upper-main-user-navigation">
        <div class="user-manage">
            <a href="{{route('admin.content.index')}}">Content management</a>
            <a class="active">Edit Testimonial Page</a>
        </div>
    </div>

    <div class="add-user-form">
        <form class="row g-3" action="{{route('admin.admin_settings_update_page',$page_type)}}" method="POST" id="content_manage" enctype="multipart/form-data">
            @csrf

            <div class="col-md-12 mt-4">
                <h4>Testimonials Section</h4>


                 <div class="col-md-12 mt-4">
                    <div class="form-group comn-input-select">
                        <label>Total reviews</label>
                        <input type="number"  class="form-control" 
                        name="total_reviews" 
                        placeholder="Total reviews" required value="{{ GetMetaData('total_reviews', 'home') }}"
                        >
                    </div>
                </div>
                
                <div class="comn-input-select">
                    <label for="title_testimonial" class="form-label">Section Title</label>
                    <input type="text" class="form-control" name="title_testimonial" id="title_testimonial" 
                           value="{{ GetMetaData('title_testimonial', 'home') }}" placeholder="Enter Section Title">
                </div>

                
                <div id="testimonials-container">
                    @php
                    use App\Models\PageMetaTag;
                      
                        $testimonials = PageMetaTag::where('type', 'home')
                            ->where('key', 'like', 'testimonial_%')
                            ->get()
                            ->groupBy(function ($item) {
                                // Extract the testimonial number (e.g., "1" from "testimonial_1_name")
                                preg_match('/testimonial_(\d+)_/', $item->key, $matches);
                                return $matches[1] ?? 0;
                            })
                            ->map(function ($group, $index) {
                                // Reconstruct the original keys with values
                                $result = [];
                                foreach ($group as $item) {
                                    $result[$item->key] = $item->key_value;
                                }
                                return $result;
                            })
                            ->toArray();
                            @endphp
  
                    @foreach($testimonials as $index => $testimonial)
                
                   
                 
                    <div class="testimonial-item card mb-3 mt-3" data-index="{{ $index }}">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5>Testimonial</h5>
                            <button type="button" class="btn add-user btn-sm remove-testimonial">
                                <i class="fas fa-trash"></i> Remove
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group comn-input-select">
                                        <label>Name</label>
                                        <input type="text" class="form-control" name="testimonial_{{ $index }}_name" 
                                        value="{{ $testimonial['testimonial_'.$index.'_name'] ?? '' }}"   placeholder="Name" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group comn-input-select">
                                        <label>Date</label>
                                        <input type="text" class="form-control review_date" name="testimonial_{{ $index }}_date" 
                                               value="{{ isset($testimonial['testimonial_'.$index.'_date']) 
                                                        ? \Carbon\Carbon::parse($testimonial['testimonial_'.$index.'_date'])->format('d.m.Y') 
                                                        : '' }}" placeholder="Date" required>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group comn-input-select">
                                        <label>Rating</label>
                                        <input type="number" min="1" max="5" class="form-control rating-input" 
                                        name="testimonial_{{ $index }}_rating" 
                                        placeholder="Rating (1-5)" required value="{{ $testimonial['testimonial_'.$index.'_rating']??"" }}"
                                        oninput="this.value = Math.min(5, Math.max(1, this.value))">
                                    </div>
                                </div>
                                <div class="col-md-12 mt-2">
                                    <div class="form-group comn-input-select">
                                        <label>Content</label>
                                        <textarea class="form-control " name="testimonial_{{ $index }}_content" 
                                                  placeholder="Testimonial Content" required>{{ $testimonial['testimonial_'.$index.'_content']??"" }}</textarea>
                                    </div>
                                </div>
                                <div class="col-md-12 mt-2">
                                    <div class="form-group comn-input-select">
                                        <label>Avatar Image</label>
                                        <input type="file" class="form-control" name="testimonial_{{ $index }}_avatar">
                                        @if($testimonial['testimonial_'.$index.'_avatar']??"")
                                            <img src="{{ asset('storage/'.$testimonial['testimonial_'.$index.'_avatar']) }}" width="100" class="mt-2">
                                          <input type="hidden" name="testimonial_{{ $index }}_avatar" value="{{$testimonial['testimonial_'.$index.'_avatar']}}">
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                  
                </div>
                
                <button type="button" id="add-new-testimonial" class="add-user">
                    <i class="fas fa-plus"></i> Add New Testimonial
                </button>
            </div>
            

            <div class="col-12 mt-4">
                <div class="upper-main-btn-last-comn d-flex">
                    <button type="submit" class="add-user">Save</button>
                    <button class="cancel-btn"><a href="{{route('admin.content.index')}}">Cancel</a></button>
                </div>
            </div>
        </form>
    </div>
</div>
@push('script')
<script src="https://cdn.ckeditor.com/ckeditor5/38.1.0/classic/ckeditor.js"></script>
<script>
    // Initialize CKEditor for textareas
    ClassicEditor
        .create(document.querySelector('#roof_rack_description'))
        .catch(error => {
            console.error(error);
        });
        
   

    $(document).ready(function() {
        $(".review_date").datepicker({
        dateFormat: 'dd.mm.yy',
        changeMonth: true,
        changeYear: true,
        yearRange: "-100:+0"
    });
        // initializeEditors();

    // Initialize CKEditor for existing testimonials
 

    // Add new testimonial
    $('#add-new-testimonial').click(function() {
        const testimonialCount = ($('.testimonial-item').last().data('index') ?? 0) + 1;
        // console.log(testimonialCount);
        
        const newTestimonial = `
        <div class="testimonial-item card mb-3 mt-3" data-index="${testimonialCount}">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Testimonial</h5>
                <button type="button" class="btn add-user btn-sm remove-testimonial">
                    <i class="fas fa-trash"></i> Remove
                </button>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group comn-input-select">
                            <label>Name</label>
                            <input type="text" class="form-control" name="testimonial_${testimonialCount}_name" placeholder="Name" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group comn-input-select">
                            <label>Date</label>
                            <input class="form-control review_date" name="testimonial_${testimonialCount}_date" placeholder="Date" required>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group comn-input-select">
                            <label>Rating</label>
                             <input type="number" min="1" max="5" class="form-control rating-input" 
               name="testimonial_${testimonialCount}_rating" 
               placeholder="Rating (1-5)" required
               oninput="this.value = Math.min(5, Math.max(1, this.value))">
                        </div>
                    </div>
                    <div class="col-md-12 mt-2">
                        <div class="form-group comn-input-select">
                            <label>Content</label>
                            <textarea class="form-control" name="testimonial_${testimonialCount}_content" placeholder="Testimonial Content" required></textarea>
                        </div>
                    </div>
                    <div class="col-md-12 mt-2">
                        <div class="form-group comn-input-select">
                            <label>Avatar Image</label>
                            <input type="file" class="form-control" name="testimonial_${testimonialCount}_avatar">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        `;
        
        $('#testimonials-container').append(newTestimonial);
        $('#testimonials-container .testimonial-item:last .review_date').datepicker({
            dateFormat: 'dd.mm.yy',
            changeMonth: true,
        changeYear: true,
        yearRange: "-100:+0"
        });
        initializeEditorForNewTestimonial(testimonialCount);
        
        // Initialize CKEditor for the new testimonial
      
    });

    // Remove testimonial
    $(document).on('click', '.remove-testimonial', function() {
        $(this).closest('.testimonial-item').remove();
        reindexTestimonials();
    });
});
function initializeEditors() {
    document.querySelectorAll('.testimonial-editor').forEach(textarea => {
        ClassicEditor
            .create(textarea, {
                toolbar: ['bold', 'italic', 'link', 'bulletedList', 'numberedList'],
                height: 150
            })
            .catch(error => {
                console.error(error);
            });
    });
}
// Initialize editor for newly added testimonial
function initializeEditorForNewTestimonial(index) {
    const editorElement = document.getElementById(`testimonial-editor-${index}`);
    if (editorElement) {
        ClassicEditor
            .create(editorElement, {
                toolbar: ['bold', 'italic', 'link', 'bulletedList', 'numberedList'],
                height: 150
            })
            .catch(error => {
                console.error(error);
            });
    }
}
// Reindex testimonials after removal
function reindexTestimonials() {
    $('.testimonial-item').each(function(index) {
        const newIndex = index + 1;
        $(this).attr('data-index', newIndex);
        $(this).find('h5').text('Testimonial #' + newIndex);
        
        // Update all input names
        $(this).find('[name^="testimonial["]').each(function() {
            const name = $(this).attr('name').replace(/testimonial\[\d+\]/, `testimonial[${newIndex}]`);
            $(this).attr('name', name);
        });
    });
}
$(document).on('focus', '.review_date', function() {
    $(this).datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        yearRange: "-100:+0"
       
        
    });
});
$(document).on('change', '.rating-input', function() {
    let value = parseInt($(this).val());
    if (isNaN(value) || value < 1) {
        $(this).val(1);
    } else if (value > 5) {
        $(this).val(5);
    }
});

// Prevent invalid keyboard input
$(document).on('keydown', '.rating-input', function(e) {
    // Allow backspace, delete, tab and arrow keys
    if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
        (e.keyCode === 65 && e.ctrlKey === true) || 
        (e.keyCode === 67 && e.ctrlKey === true) ||
        (e.keyCode === 86 && e.ctrlKey === true) ||
        (e.keyCode === 88 && e.ctrlKey === true) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
            return;
    }
    
    // Ensure it's a number and stop if key is not 1-5
    if ((e.shiftKey || (e.keyCode < 49 || e.keyCode > 53)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});
</script>
@endpush
@endsection