@extends('layouts.admin')
@section('content')
<style>
    .ck-editor__editable{
        height: 200px;
    }
    .ck-editor__editable {
    font-size: 1.4rem !important;
}
</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 Home 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

            <!-- Hero Section -->
            <div class="col-md-12">
                <h4>Hero Section</h4>
            </div>
            
            <div class="col-md-12">
                <div class="comn-input-select">
                    <label for="hero_title" class="form-label">Hero Title</label>
                    <input type="text" class="form-control" name="hero_title" id="hero_title" value="{{ GetMetaData('hero_title', 'home') }}" placeholder="Enter Hero Title">
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="comn-input-select">
                    <label for="hero_image" class="form-label">Hero Background Image</label>
                    <input type="file" class="form-control" name="hero_image" id="hero_image" accept="image/*">
                    @if(GetMetaData('hero_image', 'home'))
                        <img src="{{ asset('storage/'.GetMetaData('hero_image', 'home')) }}" width="200" class="mt-2">
                    @endif
                </div>
            </div>
            
            <!-- Hero Features List -->
            <div class="col-md-12">
                <h5 class="mt-4">Hero Features List</h5>
                @for($i = 1; $i <= 8; $i++)
                <div class="row mt-2">
                    <div class="col-md-10 comn-input-select">
                        <input type="text" class="form-control" name="hero_feature_{{ $i }}" 
                               value="{{ GetMetaData('hero_feature_'.$i, 'home') }}" 
                               placeholder="Feature {{ $i }}">
                    </div>
                </div>
                @endfor
            </div>
            
            <!-- Our Products Section -->
            <div class="col-md-12 mt-4">
                <h4>Our Products Section</h4>
            </div>
            
            <div class="col-md-12">
                <div class="comn-input-select">
                    <label for="products_title" class="form-label">Section Title</label>
                    <input type="text" class="form-control" name="products_title" id="products_title" value="{{ GetMetaData('products_title', 'home') }}" placeholder="Enter Section Title">
                </div>
            </div>
            
            <!-- Roof Rack Section -->
            <div class="col-md-12 mt-4">
                <h4>Roof Rack Section</h4>
            </div>
            
            <div class="col-md-12">
                <div class="comn-input-select">
                    <label for="roof_rack_title" class="form-label">Section Title</label>
                    <input type="text" class="form-control" name="roof_rack_title" id="roof_rack_title" value="{{ GetMetaData('roof_rack_title', 'home') }}" placeholder="Enter Section Title">
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="comn-input-select">
                    <label for="roof_rack_description" class="form-label">Description</label>
                    <textarea class="form-control" id="roof_rack_description" name="roof_rack_description">{{ GetMetaData('roof_rack_description', 'home') }}</textarea>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="comn-input-select">
                    <label for="roof_rack_button_text" class="form-label">Button Text</label>
                    <input type="text" class="form-control" name="roof_rack_button_text" id="roof_rack_button_text" value="{{ GetMetaData('roof_rack_button_text', 'home') }}" placeholder="Enter Button Text">
                </div>
            </div>
            
            <!-- Booking Process Section -->
            <div class="col-md-12 mt-4">
                <h4>Booking Process Section</h4>
            </div>
            
            <div class="col-md-12">
                <div class="comn-input-select">
                    <label for="booking_title" class="form-label">Section Title</label>
                    <input type="text" class="form-control" name="booking_title" id="booking_title" value="{{ GetMetaData('booking_title', 'home') }}" placeholder="Enter Section Title">
                </div>
            </div>
            
            <!-- Booking Steps -->
            @for($i = 1; $i <= 5; $i++)
            <div class="col-md-12 mt-3">
                <h5>Step {{ $i }}</h5>
                <div class="row">
                    <div class="col-md-12 comn-input-select">
                        <input type="text" class="form-control" name="booking_step_{{ $i }}_title" 
                               value="{{ GetMetaData('booking_step_'.$i.'_title', 'home') }}" 
                               placeholder="Step {{ $i }} Title">
                    </div>
                    <div class="col-md-12 mt-2 comn-input-select">
                        <textarea class="form-control" name="booking_step_{{ $i }}_description" 
                                  placeholder="Step {{ $i }} Description">{{ GetMetaData('booking_step_'.$i.'_description', 'home') }}</textarea>
                    </div>
                </div>
            </div>
            @endfor
            
            <!-- Testimonials Section -->
          
            

            <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: 'yy-mm-dd',
        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: 'yy-mm-dd',
            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