<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Admin Panel{% endblock %}</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <!-- <link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}"> -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    {% block extra_css %}{% endblock %}
   
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('admin_blueprint.index') }}">LKgetaways Admin</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('admin_blueprint.manage_cars') }}">Manage Cars</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('admin_blueprint.manage_tours') }}">Manage Tours</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('admin_blueprint.manage_bookings') }}">Manage Bookings</a>
                    </li>
                </ul>
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('admin_blueprint.logout') }}">Logout</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <main class="container mt-4">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        {% block content %}{% endblock %}
    </main>

    <footer class="footer mt-auto py-3 bg-light">
        <div class="container text-center">
            <span class="text-muted">© 2024 LKgetaways Admin Panel</span>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
   
    

    {% block extra_js %}

    
     
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            console.log('DOM fully loaded and parsed');
            const $addDayButton = $('#add-day-btn');
            const $tourDaysContainer = $('#tour-days-container');
        
            if ($addDayButton.length === 0 || $tourDaysContainer.length === 0) {
                console.error('Required elements not found');
                return;
            }
        
            console.log('Add Day button and container found');
        
            // Function to renumber days
            function renumberDays() {
                $('.tour-day').each(function(index) {
                    $(this).find('.day-number').text(index + 1);
                    $(this).find('input, textarea, select').each(function() {
                        const newName = $(this).attr('name').replace(/\d+/, index);
                        const newId = $(this).attr('id').replace(/\d+/, index);
                        $(this).attr('name', newName).attr('id', newId);
                    });
                    $(this).find('label').each(function() {
                        const newFor = $(this).attr('for').replace(/\d+/, index);
                        $(this).attr('for', newFor);
                    });
                });
            }
        
            // Function to add delete button
            function addDeleteButton($day) {
                const $deleteButton = $('<button>', {
                    type: 'button',
                    class: 'btn btn-danger delete-day',
                    text: 'Delete Day'
                });
                $day.append($deleteButton);
            }
        
            // Delete day functionality
            $tourDaysContainer.on('click', '.delete-day', function() {
                if ($('.tour-day').length > 1) {
                    $(this).closest('.tour-day').remove();
                    renumberDays();
                    console.log('Day deleted');
                } else {
                    alert('You cannot delete the last day.');
                }
            });
        
            $addDayButton.on('click', function() {
                console.log('Add Day button clicked');
                const $dayForms = $('.tour-day');
                const newIndex = $dayForms.length;
        
                const $newDay = $dayForms.first().clone(true);
                $newDay.find('.day-number').text(newIndex + 1);
        
                // Update input names and IDs
                $newDay.find('input, textarea, select').each(function() {
                    const $input = $(this);
                    const oldName = $input.attr('name');
                    const oldId = $input.attr('id');
        
                    if (oldName) {
                        const newName = oldName.replace(/\d+/, newIndex);
                        $input.attr('name', newName);
                        console.log(`Updated input name: ${oldName} -> ${newName}`);
                    }
        
                    if (oldId) {
                        const newId = oldId.replace(/\d+/, newIndex);
                        $input.attr('id', newId);
                        console.log(`Updated input id: ${oldId} -> ${newId}`);
                    }
        
                    $input.val('');
                });
        
                // Update label 'for' attributes
                $newDay.find('label').each(function() {
                    const $label = $(this);
                    const oldFor = $label.attr('for');
        
                    if (oldFor) {
                        const newFor = oldFor.replace(/\d+/, newIndex);
                        $label.attr('for', newFor);
                        console.log(`Updated label for: ${oldFor} -> ${newFor}`);
                    }
                });
        
                // Ensure the new day has a delete button
                addDeleteButton($newDay);
        
                $tourDaysContainer.append($newDay);
                console.log('New day added');

                // Initialize CKEditor for the new textarea
                $newDay.find('textarea').each(function() {
                    CKEDITOR.replace(this, {
                        toolbar: [
                            { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike'] },
                            { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote'] },
                            { name: 'links', items: ['Link', 'Unlink'] },
                            { name: 'insert', items: ['Image', 'Table'] },
                            { name: 'tools', items: ['Maximize'] },
                            { name: 'document', items: ['Source'] },
                        ],
                        height: 300,
                        width: '100%'
                    });
                });
            });
        });
    </script>
    
    {% endblock %}

</body>
</html>