<?php $__env->startSection('section'); ?>
    <!-- Page sidebar end-->
    <div class="page-body">
        <div class="container-fluid">
            <div class="row page-title">
                <div class="col-sm-6">
                    <h3><?php echo e($title); ?></h3>
                </div>
                <div class="col-sm-6">
                    <nav>
                        <ol class="breadcrumb justify-content-sm-end align-items-center">
                            <li class="breadcrumb-item"> <a href="<?php echo e(route('dashboard')); ?>">
                                    <svg class="svg-color">
                                        <use href="<?php echo e(asset('assets/svg/iconly-sprite.svg#Home')); ?>"></use>
                                    </svg></a></li>
                            <li class="breadcrumb-item">Category</li>

                            <li class="breadcrumb-item ">Title List</li>
                            <li class="breadcrumb-item active"><?php echo e($title); ?></li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <!-- Container-fluid starts-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <!-- Display Validation Errors -->
                            <?php if($errors->any()): ?>
                                <div class="alert alert-danger">
                                    <ul>
                                        <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <li><?php echo e($error); ?></li>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </ul>
                                </div>
                            <?php endif; ?>
                            <form class="form theme-form" action="<?php echo e($url); ?>" method="POST"
                                enctype="multipart/form-data">
                                <?php echo csrf_field(); ?>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="category">Select Category *</label>
                                            <select class="form-select <?php $__errorArgs = ['category_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                                id="category" name="category_id">
                                                <option value="">Select Category</option>
                                                <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <option value="<?php echo e($category->id); ?>"
                                                        <?php if(old('category_id') == $category->id): ?> selected <?php endif; ?>>
                                                        <?php echo e($category->name); ?>

                                                    </option>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </select>
                                            <?php $__errorArgs = ['category_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                                <p class="invalid-feedback"><?php echo e($message); ?></p>
                                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                        </div>

                                        <div class="mb-3">
                                            <label for="image">Image</label>
                                            <input class="form-control <?php $__errorArgs = ['image'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" id="image"
                                                type="file" name="image" placeholder="image"
                                                onchange="previewImage(event)">
                                            <?php $__errorArgs = ['image'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                                <p class="invalid-feedback"><?php echo e($message); ?></p>
                                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                        </div>


                                        <div class="mb-3">
                                            <label for="tag_id">Select Tags</label>
                                            <select class="form-select <?php $__errorArgs = ['tag_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" id="tag_id"
                                                name="tag_id[]" multiple>
                                                <option value="">Select Tags</option>
                                                <?php $__currentLoopData = $tags; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tag): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <option value="<?php echo e($tag->id); ?>"
                                                        <?php if(in_array($tag->id, old('tag_id', []))): ?> selected <?php endif; ?>>
                                                        <?php echo e($tag->name); ?>

                                                    </option>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                <option value="other" id="other_option">Other</option>
                                            </select>

                                            <div id="manual_tag_container" class="mt-2" style="display: none;">
                                                <div class="input-group">
                                                    <input id="manual_tag_input" class="form-control" type="text"
                                                        placeholder="Enter new tag" aria-describedby="button-addon2">
                                                    <button class="btn btn-outline-primary" id="add_tag_button"
                                                        type="button">Add</button>
                                                </div>
                                            </div>

                                            <?php $__errorArgs = ['tag_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                                <p class="invalid-feedback"><?php echo e($message); ?></p>
                                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                        </div>

                                    </div>


                                    <div class="col-md-6">
                                        <div class="card" style=" width: 100%; height: 257px; border-radius: 5px;">
                                            <div class="card-body">
                                                
                                                <img id="imagePreview" src="" alt="Image Preview" class="img-fluid"
                                                    style="display: none; width: 100%; height: 208px; border-radius: 5px;">
                                                <!-- You can add additional styling as needed -->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label for="title">Title *</label>
                                        <input class="form-control <?php $__errorArgs = ['title'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" id="title"
                                            type="text" value="<?php echo e(old('title')); ?>" name="title"
                                            placeholder="Title *">
                                        <?php $__errorArgs = ['title'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                            <p class="invalid-feedback"><?php echo e($message); ?></p>
                                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                    </div>
                                </div>

                                <div id="dynamic-sections">
                                    <div class="section">
                                        <div class="row">
                                            <div class="col-8">
                                                <div class="mb-3">
                                                    <label>Heading <span class="heading-number">1</span>:</label>
                                                    <input class="form-control" type="text" name="headings[]" >
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <div class="mb-3">
                                                    <label>Language:</label>
                                                    <input class="form-control" type="text" name="languages[]" >
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label>Paragraph:</label>
                                            <textarea class="form-control" name="paragraphs[]" rows="6" ></textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label>Code Snippet:</label>
                                            <textarea class="form-control" name="code_snippets[]" rows="6" ></textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="">
                                    <button type="button" id="remove-last" class="btn btn-danger">Remove Last</button>
                                    <button type="button" id="add-more" class="btn btn-primary">Add More</button>
                                </div>
                                <div class="text-end">
                                    <button type="submit" class="btn btn-success">Create Question</button>
                                </div>
                            </form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#add-more').click(function() {
            const container = $('#dynamic-sections');
            const sections = container.find('.section');
            const newIndex = sections.length + 1;

            const newSection = `
                <hr>
                <div class="section">
                    <div class="row">
                        <div class="col-8">
                            <div class="mb-3">
                                <label>Heading <span class="heading-number">${newIndex}</span>:</label>
                                <input class="form-control" type="text" name="headings[]">
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="mb-3">
                                <label>Language:</label>
                                <input class="form-control" type="text" name="languages[]">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label>Paragraph:</label>
                            <textarea class="form-control" name="paragraphs[]" rows="6"></textarea>
                        </div>
                        <div class="mb-3">
                            <label>Code Snippet:</label>
                            <textarea class="form-control" name="code_snippets[]" rows="6"></textarea>
                        </div>
                    </div>
                </div>
            `;

            container.append(newSection);
        });

        $('#remove-last').click(function() {
            const container = $('#dynamic-sections');
            const sections = container.find('.section');

            if (sections.length > 1) { // Ensure at least one section is there
                sections.last().remove();
            }
        });
    });
</script>
                            <script>
                                // Function to display the selected image as a preview
                                function previewImage(event) {
                                    const file = event.target.files[0];
                                    const reader = new FileReader();

                                    reader.onload = function(e) {
                                        const imagePreview = document.getElementById('imagePreview');
                                        imagePreview.src = e.target.result;
                                        imagePreview.style.display = 'block'; // Show the preview image
                                    };

                                    if (file) {
                                        reader.readAsDataURL(file);
                                    }
                                }
                            </script>
                            

                            <script>
                                $(document).ready(function() {
                                    // Show the input field when 'Other' is selected
                                    $('#tag_id').change(function() {
                                        if ($(this).val().includes('other')) {
                                            $('#manual_tag_container').show();
                                        } else {
                                            $('#manual_tag_container').hide();
                                        }
                                    });

                                    // Add a new tag using AJAX
                                    $('#add_tag_button').click(function() {
                                        var newTag = $('#manual_tag_input').val();
                                        if (newTag.trim() !== '') {
                                            $.ajax({
                                                url: '<?php echo e(route('tags.store')); ?>',
                                                method: 'POST',
                                                data: {
                                                    name: newTag, // Send 'name' instead of 'tag'
                                                    _token: '<?php echo e(csrf_token()); ?>'
                                                },
                                                success: function(response) {
                                                    if (response.success) {
                                                        $('#tag_id').append('<option value="' + response.tag.id +
                                                            '" selected>' + response.tag.name + '</option>');
                                                        $('#manual_tag_input').val('');
                                                        $('#manual_tag_container').hide();
                                                    }
                                                },
                                                error: function() {
                                                    alert('Failed to add tag');
                                                }
                                            });
                                        }
                                    });
                                });
                            </script>


                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- Container-fluid starts -->
    </div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layouts.main', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH A:\xamp102024\htdocs\sachin\androidwale.com\resources\views/admin/title/create.blade.php ENDPATH**/ ?>