<?php if (isset($component)) { $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\AppLayout::class, []); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>
        .training_container {
            margin-top: 100px;
            padding: 0 30px;
        }
        .training_container input,
        .training_container textarea {
            border: 1px solid #e2e2e2;
            width: 100%;
            padding: 8px;
            border-radius: 5px;
            outline: none;
        }
    </style>
    <header>
        <div class="d-flex justify-content-between header_box me-4">
            <h3>Training Modules Management</span></h3>
        </div>
    </header>

    <div class="training_container">
        <div class="container mx-auto p-4">

        <div class="bg-white p-4 rounded shadow mb-4">
            <h2 class="text-xl mb-2">Add Training Module</h2>
            <form id="add-module-form">
                <div class="mb-4">
                    <label class="block text-gray-700">Title</label>
                    <input type="text" id="title" class="mt-1 p-2 border rounded w-full" required>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700">Description</label>
                    <input type="text" id="description" class="mt-1 p-2 border rounded w-full">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700">Content Type</label>
                    <select id="content_type" class="mt-1 p-2 border rounded w-full" required>
                        <option value="">Select Content Type</option>
                        <!--<option value="user">User</option>-->
                        <!--<option value="Driver">Driver</option>-->
                        <option value="Vendor">Vendor</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700">Content (URL or Text)</label>
                    <input type="text" id="content" class="mt-1 p-2 border rounded w-full" required>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700">Has Quiz</label>
                    <input type="checkbox" id="has_quiz" class="mt-1" style="width: auto;">
                </div>
                <div id="quiz-section" class="hidden">
                    <h3 class="text-lg mb-2">Quiz</h3>
                    <div id="quiz-questions"></div>
                    <button type="button" id="add-question" class="bg-blue-500 text-white px-4 py-2 rounded">Add
                        Question</button>
                </div>
                <div class="mt-4">
                    <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded">Submit</button>
                </div>
            </form>
        </div>

        <div class="bg-white p-4 rounded shadow">
            <h2 class="text-xl mb-2">Get Training Modules</h2>
            <form id="get-modules-form">
                <div class="mb-4">
                    <label class="block text-gray-700">Content Type</label>
                    <select id="get_content_type" class="mt-1 p-2 border rounded w-full">
                        <option value="">Select Content Type</option>
                        <!--<option value="user">User</option>-->
                        <!--<option value="Driver">Driver</option>-->
                        <option value="Vendor">Vendor</option>
                    </select>
                </div>
                <div class="mt-4">
                    <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Get Modules</button>
                </div>
            </form>
            <div id="modules-list" class="mt-4"></div>
        </div>
    </div>
     </div>

    <script>
        $(document).ready(function () {
            $('#has_quiz').change(function () {
                if ($(this).is(':checked')) {
                    $('#quiz-section').removeClass('hidden');
                } else {
                    $('#quiz-section').addClass('hidden');
                }
            });

            $('#add-question').click(function () {
                $('#quiz-questions').append(`
            <div class="mb-4 p-4 border rounded">
                <label class="block text-gray-700">Question</label>
                <input type="text" class="quiz-question mt-1 p-2 border rounded w-full" required>
                <label class="block text-gray-700 mt-2">Option A</label>
                <input type="text" class="quiz-option-a mt-1 p-2 border rounded w-full" required>
                <label class="block text-gray-700 mt-2">Option B</label>
                <input type="text" class="quiz-option-b mt-1 p-2 border rounded w-full" required>
                <label class="block text-gray-700 mt-2">Option C</label>
                <input type="text" class="quiz-option-c mt-1 p-2 border rounded w-full" required>
                <label class="block text-gray-700 mt-2">Option D</label>
                <input type="text" class="quiz-option-d mt-1 p-2 border rounded w-full" required>
                <label class="block text-gray-700 mt-2">Correct Option</label>
                <input type="text" class="quiz-correct-option mt-1 p-2 border rounded w-full" required>
            </div>
        `);
            });

            $('#add-module-form').submit(function (e) {
                e.preventDefault();
                const quizQuestions = [];
                if ($('#has_quiz').is(':checked')) {
                    $('.quiz-question').each(function (index) {
                        const question = $(this).val();
                        const optionA = $('.quiz-option-a').eq(index).val();
                        const optionB = $('.quiz-option-b').eq(index).val();
                        const optionC = $('.quiz-option-c').eq(index).val();
                        const optionD = $('.quiz-option-d').eq(index).val();
                        const correctOption = $('.quiz-correct-option').eq(index).val();
                        quizQuestions.push({ question, option_a: optionA, option_b: optionB, option_c: optionC, option_d: optionD, correct_option: correctOption });
                    });
                }
                const moduleData = {
                    title: $('#title').val(),
                    description: $('#description').val(),
                    content_type: $('#content_type').val(),
                    content: $('#content').val(),
                    has_quiz: $('#has_quiz').is(':checked'),
                    quiz: quizQuestions
                };
                $.ajax({
                    url: 'https://drycleaneo.com/update/training.php',
                    type: 'POST',
                    data: JSON.stringify(moduleData),
                    contentType: 'application/json',
                    success: function (response) {
                        Swal.fire('Success', response.message, 'success');
                        $('#add-module-form')[0].reset();
                        $('#quiz-section').addClass('hidden');
                        $('#quiz-questions').empty();
                    },
                    error: function (xhr) {
                        Swal.fire('Error', xhr.responseJSON.message, 'error');
                    }
                });
            });

            $('#get-modules-form').submit(function (e) {
                e.preventDefault();
                const contentType = $('#get_content_type').val();
                const url = contentType ? `https://drycleaneo.com/update/training.php?content_type=${contentType}` : 'https://drycleaneo.com/update/training.php';
                $.ajax({
                    url: url,
                    type: 'GET',
                    success: function (response) {
                        $('#modules-list').empty();
                        if (response.modules.length > 0) {
                            response.modules.forEach(module => {
                                let quizContent = '';
                                if (module.has_quiz) {
                                    quizContent = '<h4 class="text-lg font-semibold mt-2">Quiz:</h4>';
                                    module.quiz.forEach(q => {
                                        quizContent += `
                                    <div class="mt-2">
                                        <p><strong>Q:</strong> ${q.question}</p>
                                        <p><strong>A:</strong> ${q.option_a}</p>
                                        <p><strong>B:</strong> ${q.option_b}</p>
                                        <p><strong>C:</strong> ${q.option_c}</p>
                                        <p><strong>D:</strong> ${q.option_d}</p>
                                        <p><strong>Correct:</strong> ${q.correct_option.toUpperCase()}</p>
                                    </div>
                                `;
                                    });
                                }
                                $('#modules-list').append(`
                            <div class="bg-white p-4 rounded shadow mt-4">
                                <h3 class="text-xl font-semibold">${module.title}</h3>
                                <p><strong>Description:</strong> ${module.description}</p>
                                <p><strong>Content Type:</strong> ${module.content_type}</p>
                                <p><strong>Content:</strong> ${module.content}</p>
                                ${quizContent}
                            <button class="bg-red-500 text-white px-2 py-1 rounded delete-module" data-id="${module.id}">Delete</button>
                            </div>

                        `);
                            });
                        } else {
                            $('#modules-list').append('<p>No training modules found</p>');
                        }
                    },
                    error: function (xhr) {
                        Swal.fire('Error', xhr.responseJSON.message, 'error');
                    }
                });
            });
        });
    </script>
    <script>
        $(document).on('click', '.delete-module', function () {
    const moduleId = $(this).data('id');
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `https://drycleaneo.com/admin/training/${moduleId}`,
                type: 'DELETE',
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function (response) {
                    Swal.fire('Deleted!', response.message, 'success');
                    // Remove the deleted module from the list
                    $(this).closest('.p-4.border.rounded.mb-4').remove();
                },
                error: function (xhr) {
                    Swal.fire('Error', xhr.responseJSON.message, 'error');
                }
            });
        }
    });
});

    </script>


 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da)): ?>
<?php $component = $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da; ?>
<?php unset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da); ?>
<?php endif; ?><?php /**PATH /home/u152672654/domains/drycleaneo.com/public_html/admin/resources/views/components/training_module.blade.php ENDPATH**/ ?>