@extends('layouts.main')
@section('title', 'Edit CheckList Template')
@section('container')

<style>
    .question-card-row { margin-bottom: 20px; }
    .question-card { 
        border: 1px solid #ddd; 
        border-radius: 8px; 
        overflow: hidden; 
        box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
        background:#fff; 
    }
    .card-header { 
        background:#f39c12 !important; 
        color:#fff; 
        padding:10px 15px !important; 
        font-weight:600; 
        display:flex; 
        justify-content:space-between; 
        align-items:center; 
        font-size:16px; 
    }
    .card-body { padding:18px; background:#fdfdfd; }
    .form-group label { font-weight:600; font-size:14px; margin-bottom:6px; display:block; }
    .option-row { position:relative; margin-bottom:10px; }
    .delete-option { position:absolute; right:8px; top:8px; padding:3px 8px; }
    .hidden { display:none !important; }
    .mt-2 { margin-top:10px; }
    .ml-3 { margin-left: 1.25rem; }
</style>

<input type="hidden" id="project_id" value="{{ $projectId }}">
<input type="hidden" id="template_id" value="{{ $template->id }}">

<div class="card mb-4">
    <div class="card-header" style="background:var(--secondary);color:white;">
        <h4>Edit Check List Template: {{ $template->name }}</h4>
    </div>
    <div class="card-body">
        <form id="duplicateForm">
            @csrf
            <input type="hidden" name="template_id" value="{{ $template->id }}">
            <div class="row mb-4">
                <div class="col-md-9">
                    <label>Template Name (New Copy)</label>
                    <input type="text" name="name" class="form-control" value="{{ $template->name }}" readonly required>
                    <input type="hidden" name="project_id" value="{{ $projectId }}">
                </div>
                <div class="col-md-3">
                    <button type="button" id="addQuestion" class="btn btn-primary mt-4">+ Add Question</button>
                </div>
            </div>
            <div id="questions" class="row"></div>
            <button type="button" id="saveDuplicate" class="btn btn-danger mt-4">Save as New Copy</button>
        </form>
    </div>
</div>

<!-- Floating FAB -->
<button type="button" id="fabAdd" class="fab-add-question" title="Add New Question">
    <svg viewBox="0 0 24 24" width="28" height="28" stroke="currentColor" stroke-width="3" fill="none">
        <line x1="12" y1="5" x2="12" y2="19"></line>
        <line x1="5" y1="12" x2="19" y2="12"></line>
    </svg>
</button>

<style>
    .fab-add-question {
        position: fixed;
        bottom: 24px;
        right: 24px;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #f39c12;
        color: white;
        border: none;
        box-shadow: 0 6px 16px rgba(0,0,0,0.28);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        transition: all 0.25s ease;
    }
    .fab-add-question:hover {
        background: #e67e22;
        transform: translateY(-4px) scale(1.06);
        box-shadow: 0 12px 24px rgba(0,0,0,0.32);
    }
    .fab-add-question:active {
        transform: scale(0.92);
    }
    @media (max-width: 576px) {
        .fab-add-question { width:56px; height:56px; bottom:16px; right:16px; }
    }
</style>

<script nonce="{{ $cspNonce }}" src="{{ asset('public/js/jquery-3.6.0.min.js') }}"></script>
<script nonce="{{ $cspNonce }}" src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script nonce="{{ $cspNonce }}">
// FAB
document.getElementById('fabAdd').addEventListener('click', function() {
    document.getElementById('addQuestion').click();
    this.style.transform = 'scale(0.88)';
    setTimeout(() => this.style.transform = 'scale(1)', 140);
});

let questionCount = 0;

function addQuestion() {
    const idx = questionCount++;
    const html = `
<div class="col-md-6 question-card-row">
    <div class="card question-card" data-idx="${idx}" data-db-id="">
        <div class="card-header">
            <h4>Question ${idx + 1}</h4>
            <div>
                <button type="button" class="toggle-card btn btn-info btn-sm">-</button>
                <button type="button" class="delete-question btn btn-danger btn-sm">×</button>
            </div>
        </div>
        <div class="card-body">
            <input type="hidden" name="questions[${idx}][db_id]" class="question-db-id" value="">
            <div class="form-group">
                <label>Question Text</label>
                <input type="text" name="questions[${idx}][question_text]" class="form-control question-text">
            </div>
            <div class="form-group">
                <label>Input Type</label>
                <select name="questions[${idx}][input_type]" class="form-control input-type">
                    <option value="text">Free Text</option>
                    <option value="dropdown">Dropdown</option>
                    <option value="Number">Number</option>
                    <option value="Float">Float Number</option>
                    <option value="multi-image">Multi Image</option>
                    <option value="image">Image</option>
                    <option value="video">Video</option>
                    <option value="date">Date</option>
                    <option value="file">File Upload</option>
                    <option value="location">Location</option>
                    <option value="audio">Audio</option>
                </select>
            </div>

            <div class="options mt-2 hidden">
                <label>Options</label>
                <div class="option-group"></div>
                <button type="button" class="add-option btn btn-secondary btn-sm mt-2">Add Option</button>
            </div>

            <div class="multi-image-fields mt-2 hidden">
                <div class="row">
                    <div class="col-6"><label>Total Images Allowed</label><input type="number" min="1" name="questions[${idx}][totalimage]" class="form-control"></div>
                    <div class="col-6"><label>Required Images</label><input type="number" min="0" name="questions[${idx}][required_image]" class="form-control"></div>
                </div>
            </div>


            <div class="form-group mt-2">
                <label><input type="checkbox" name="questions[${idx}][is_required]"> Required</label>
                <label class="ml-3"><input type="checkbox" name="questions[${idx}][is_view]" checked> Visible</label>
            </div>

            <div class="dependencies mt-2">
                <label>Dependency</label>
                <select name="questions[${idx}][dependencies][0][dependency_type]" class="form-control dependency-type-select">
                    <option value="No">No</option>
                    <option value="Yes">Yes</option>
                </select>
                <div class="parent-question-container mt-2 hidden">
                    <label>Parent Question</label>
                    <select name="questions[${idx}][dependencies][0][parent_question_index]" class="form-control parent-question">
                        <option value="">Select Parent</option>
                    </select>
                </div>
                <div class="parent-options-container mt-2 hidden"></div>
            </div>
        </div>
    </div>
</div>`;

    $('#questions').append(html);

    setTimeout(() => {
        $('html, body').animate({ scrollTop: $(document).height() }, 500);
    }, 150);
}

function renumberQuestions() {
    $('#questions .question-card').each(function (i) {
        $(this).find('h4').first().text('Question ' + (i + 1));
        $(this).attr('data-idx', i);
        $(this).find('[name]').each(function () {
            let name = $(this).attr('name');
            name = name.replace(/\[\d+\]/g, '[' + i + ']');
            $(this).attr('name', name);
        });
    });
    questionCount = $('#questions .question-card').length;
}

function rebuildParentLists() {
    const parents = [];
    $('.question-card').each(function () {
        const idx = $(this).data('idx');
        const type = $(this).find('.input-type').val();
        const text = $(this).find('.question-text').val().trim() || `Q${Number(idx)+1}`;
        if (type === 'dropdown') {
            parents.push({ idx: String(idx), text: `Q${Number(idx)+1}: ${text}` });
        }
    });

    $('.question-card').each(function () {
        const $sel = $(this).find('.parent-question');
        const currentVal = $sel.val();  // preserve

        $sel.empty().append('<option value="">Select Parent</option>');
        parents.forEach(p => {
            if (p.idx !== String($(this).data('idx'))) {
                $sel.append(`<option value="${p.idx}">${p.text}</option>`);
            }
        });

        if (currentVal) $sel.val(currentVal);
    });
}

function manualLoadAndSelectDependency($childCard, parentIdx, savedOptionText = '') {
    const childIdx = $childCard.data('idx');
    const $container = $childCard.find('.parent-options-container');
    $container.empty();

    if (!parentIdx) {
        $container.addClass('hidden');
        return;
    }

    const options = [];
    $(`.question-card[data-idx="${parentIdx}"] .option-group input`).each(function() {
        const v = $(this).val()?.trim();
        if (v) options.push(v);
    });

    if (!options.length) {
        $container.html('<p class="text-danger">Parent has no options.</p>').removeClass('hidden');
        return;
    }

    let html = `
        <label>Dependency Option</label>
        <select name="questions[${childIdx}][dependencies][0][parent_answer]" class="form-control dependency-option-select">
            <option value="">Select Option</option>`;

    options.forEach(o => {
        html += `<option value="${o.replace(/"/g,'&quot;')}">${o}</option>`;
    });

    html += `</select>`;

    $container.html(html).removeClass('hidden');

    if (savedOptionText) {
        const target = String(savedOptionText).trim();
        const $select = $childCard.find('.dependency-option-select');

        $select.val(target);

        if (!$select.val()) {
            $select.find('option').each(function() {
                if ($(this).text().trim() === target) {
                    $select.val($(this).val());
                    return false;
                }
            });
        }

        console.log(`[DEP OPTION] Q${childIdx+1} → target "${target}" → final "${$select.val() || 'FAILED'}"`);
    }
}

function populateForm(data) {
    $('#questions').empty();
    questionCount = 0;

    data.questions.forEach((q, i) => {
        addQuestion();
        const $card = $(`.question-card[data-idx="${i}"]`);

        $card.find('.question-text').val(q.question_text || '');
        $card.find('.input-type').val(q.input_type || 'text').trigger('change');

        if (q.is_required) $card.find('[name*="is_required"]').prop('checked', true);
        if (q.is_view === 0 || q.is_view === false) $card.find('[name*="is_view"]').prop('checked', false);

        if (q.input_type === 'dropdown' && q.options?.length) {
            const $group = $card.find('.option-group').empty();
            q.options.forEach(opt => {
                const text = String(opt.option_text || '').trim();
                if (text) {
                    const $row = $(`
                        <div class="option-row mb-2 position-relative">
                            <input type="text" name="questions[${i}][options][]" class="form-control">
                            <button type="button" class="delete-option btn btn-danger btn-sm">X</button>
                        </div>
                    `);
                    $row.find('input').val(text);
                    $group.append($row);
                }
            });
        }

        if (q.input_type === 'multi-image') {
            $card.find('[name*="totalimage"]').val(q.totalimage || '');
            $card.find('[name*="required_image"]').val(q.required_image || '');
        }

        if (q.total_digits) $card.find('[name*="total_digits"]').val(q.total_digits);
    });

    renumberQuestions();
    rebuildParentLists();

    setTimeout(() => {
        console.log("Starting manual dependencies load...");

        data.questions.forEach((q, i) => {
            const $card = $(`.question-card[data-idx="${i}"]`);

            if (!q.dependencies || !q.dependencies.length) {
                console.log(`Q${i+1}: no dependencies`);
                $card.find('.dependency-type-select').val('No');
                return;
            }

            const dep = q.dependencies[0];
            console.log(`Q${i+1} has dependency → parent index: ${dep.parent_question_index}, answer: "${dep.parent_answer}"`);

            $card.find('.dependency-type-select').val('Yes');

            const parentIdx = String(dep.parent_question_index);
            const $parentSelect = $card.find('.parent-question');

            rebuildParentLists();       
            $parentSelect.val(parentIdx);

            $parentSelect.trigger('change'); 

            setTimeout(() => {
                manualLoadAndSelectDependency($card, parentIdx, dep.parent_answer || '');
            }, 120);
        });

        console.log("Manual dependencies processing complete");
    }, 600);
}

$(document).ready(function () {
    $.get('/checklist-template/data/' + $('#template_id').val(), function (res) {
        if (res.success) {
            console.log("API data loaded:", res.data);
            populateForm(res.data);
        } else {
            Swal.fire('Error', 'Failed to load template data.', 'error');
        }
    }).fail(err => {
        Swal.fire('Error', 'Could not fetch template.', 'error');
    });

    $('#addQuestion').on('click', function() {
        addQuestion();
        setTimeout(rebuildParentLists, 80);
    });

    $(document).on('change', '.input-type', function () {
        const $card = $(this).closest('.question-card');
        const val = $(this).val();

        $card.find('.options, .multi-image-fields, .number-length').addClass('hidden');
        if (val === 'dropdown') $card.find('.options').removeClass('hidden');
        if (val === 'multi-image') $card.find('.multi-image-fields').removeClass('hidden');
        if (['text','Number','Float'].includes(val)) $card.find('.number-length').removeClass('hidden');

        setTimeout(rebuildParentLists, 80);
    });

    $(document).on('change', '.dependency-type-select', function () {
        const show = this.value === 'Yes';
        const $card = $(this).closest('.question-card');
        $card.find('.parent-question-container').toggleClass('hidden', !show);
        $card.find('.parent-options-container').toggleClass('hidden', !show).empty();
        if (show) setTimeout(rebuildParentLists, 80);
    });

    $(document).on('change', '.parent-question', function () {
        manualLoadAndSelectDependency($(this).closest('.question-card'), this.value);
    });

    $(document).on('click', '.add-option', function () {
        const $card = $(this).closest('.question-card');
        const idx = $card.data('idx');
        $(this).prev().append(`
            <div class="option-row mb-2 position-relative">
                <input type="text" name="questions[${idx}][options][]" class="form-control" value="">
                <button type="button" class="delete-option btn btn-danger btn-sm">X</button>
            </div>
        `);
        setTimeout(rebuildParentLists, 80);
    });

    $(document).on('click', '.delete-option', function () {
        const $group = $(this).closest('.option-group');
        if ($group.find('.option-row').length > 1) {
            $(this).closest('.option-row').remove();
            setTimeout(rebuildParentLists, 80);
        }
    });

    $(document).on('click', '.delete-question', function () {
        $(this).closest('.question-card-row').remove();
        renumberQuestions();
        rebuildParentLists();
    });

    $(document).on('click', '.toggle-card', function() {
        const $body = $(this).closest('.card').find('.card-body');
        $body.slideToggle(200);
        $(this).text($body.is(':visible') ? '-' : '+');
    });

    $('#saveDuplicate').on('click', function () {
        renumberQuestions();
        $('.question-db-id').val('');

        const $btn = $(this);
        $btn.prop('disabled', true).text('Saving...');

        $.post('/checklist-template/duplicate', $('#duplicateForm').serialize(), res => {
            $btn.prop('disabled', false).text('Save as New Copy');
            if (res.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Saved!',
                    text: 'Template has been saved successfully.',
                    confirmButtonText: 'OK'
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = "{{ route('Project') }}";
                    }
                });
            } else {
                Swal.fire('Error', res.message || 'Save failed.', 'error');
            }
        }).fail(err => {
            $btn.prop('disabled', false).text('Save as New Copy');
            Swal.fire('Error', err.responseJSON?.message || 'Request failed.', 'error');
        });
    });
});
</script>
@endsection