@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; 
        color: #fff; 
        padding: 10px 15px; 
        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: 2px 8px; 
        font-size: 12px;
    }
    .hidden { display: none !important; }
    .mt-2 { margin-top: 10px; }
    .ml-3 { margin-left: 1.25rem; }
    .fab-add-question {
        position: fixed; right: 24px; bottom: 24px;
        width: 64px; height: 64px; border-radius: 50%;
        background: #f39c12; color: white; border: none;
        box-shadow: 0 6px 16px rgba(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); }
    .fab-add-question:active { transform: scale(0.92); }
    @media (max-width: 576px) {
        .fab-add-question { width:56px; height:56px; bottom:16px; right:16px; }
    }
</style>

<form id="duplicateForm">
    @csrf
    <input type="hidden" name="template_id" value="{{ $template->id }}">

    <div class="card mb-3">
        <div class="card-header">
            <h4>Edit Checklist Template : {{ $template->name }}</h4>
            <button type="button" id="saveDuplicate" class="btn btn-danger btn-sm">
                Save
            </button>
        </div>
    </div>

    <div class="row" id="questions">

        @php
            $questionIndexMap = [];
            foreach($template->questions as $j => $q) {
                $questionIndexMap[$q->id] = $j;
            }
        @endphp

        @foreach($template->questions as $i => $question)
            @php $dep = $question->childDependencieschecklist->first(); @endphp

            <div class="col-md-6 question-card-row">
                <div class="card question-card" data-idx="{{ $i }}">

                    <div class="card-header">
                        <span>Question {{ $i+1 }}</span>
                        <div>
                            <button type="button" class="btn btn-info btn-sm toggle-card">-</button>
                            <button type="button" class="btn btn-danger btn-sm delete-question">×</button>
                        </div>
                    </div>

                    <div class="card-body">

                        <input type="hidden" name="questions[{{ $i }}][id]" value="{{ $question->id }}">

                        <div class="form-group">
                            <label>Question Text</label>
                            <input type="text" class="form-control question-text"
                                name="questions[{{ $i }}][question_text]"
                                value="{{ $question->question_text }}">
                        </div>

                        <div class="form-group">
                            <label>Input Type</label>
                            <select class="form-control input-type"
                                name="questions[{{ $i }}][input_type]">
                                @foreach(['text','dropdown','Number','Float','multi-image','image','video','date','file','location','audio'] as $t)
                                    <option value="{{ $t }}" {{ $question->input_type == $t ? 'selected' : '' }}>
                                        {{ ucfirst($t) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="options mt-2 {{ $question->input_type == 'dropdown' ? '' : 'hidden' }}">
                            <label>Options</label>
                            <div class="option-group">
                                @foreach($question->options as $opt)
                                    <div class="option-row mb-2 position-relative">
                                        <input type="text" class="form-control"
                                            name="questions[{{ $i }}][options][]"
                                            value="{{ $opt->option_text }}">
                                        <button type="button" class="btn btn-danger btn-sm delete-option">X</button>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="btn btn-secondary btn-sm add-option mt-2">
                                Add Option
                            </button>
                        </div>

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

               
                        <div class="form-group mt-2">
                            <label>
                                <input type="checkbox"
                                    name="questions[{{ $i }}][is_required]"
                                    {{ $question->is_required ? 'checked' : '' }}> Required
                            </label>
                            <label class="ms-3">
                                <input type="checkbox"
                                    name="questions[{{ $i }}][is_view]"
                                    {{ $question->is_view ? 'checked' : '' }}> Visible
                            </label>
                        </div>

                        <div class="mt-3 dependencies">
                            <label>Dependency</label>
                            <select class="form-control dependency-type-select"
                                name="questions[{{ $i }}][dependencies][0][dependency_type]">
                                <option value="No">No</option>
                                <option value="Yes" {{ $dep ? 'selected' : '' }}>Yes</option>
                            </select>

                            <div class="parent-question-container mt-2 {{ $dep ? '' : 'hidden' }}">
                                <label>Parent Question</label>
                                <select class="form-control parent-question"
                                    name="questions[{{ $i }}][dependencies][0][parent_question_index]">
                                    <option value="">Select Parent</option>
                                    @foreach($template->questions as $pq)
                                        @if($pq->input_type == 'dropdown' && $pq->id != $question->id)
                                            <option value="{{ $questionIndexMap[$pq->id] }}"
                                                {{ $dep && $dep->parent_question_id == $pq->id ? 'selected' : '' }}>
                                                Q{{ $questionIndexMap[$pq->id] +1 }}: {{ $pq->question_text }}
                                            </option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>

                            <div class="parent-options-container mt-2 {{ $dep ? '' : 'hidden' }}">
                                @if($dep)
                                    <label>Dependency Option</label>
                                    <select class="form-control dependency-option-select"
                                        name="questions[{{ $i }}][dependencies][0][parent_answer]">
                                        <option value="">Select Option</option>
                                        @foreach($dep->parentQuestion->options as $op)
                                            <option value="{{ $op->option_text }}"
                                                {{ $dep->parent_option_id == $op->id ? 'selected' : '' }}>
                                                {{ $op->option_text }}
                                            </option>
                                        @endforeach
                                    </select>
                                @else
                                    <p class="text-muted small mt-2">Parent option select karne ke liye pehle parent question choose karein</p>
                                @endif
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        @endforeach

    </div>
</form>

<button class="fab-add-question" id="fabAdd">+</button>

<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 se add question
    $('#fabAdd').click(function(){
        addQuestion();
        this.style.transform = 'scale(0.88)';
        setTimeout(() => this.style.transform = 'scale(1)', 140);
    });

    // Naya question add karna (blank)
    function addQuestion() {
        const idx = $('.question-card').length;
        $('#questions').append(`
            <div class="col-md-6 question-card-row">
                <div class="card question-card" data-idx="${idx}">
                    <div class="card-header">
                        <span>Question ${idx+1}</span>
                        <div>
                            <button type="button" class="btn btn-info btn-sm toggle-card">-</button>
                            <button type="button" class="btn btn-danger btn-sm delete-question">×</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <input type="hidden" name="questions[${idx}][id]" value="">

                        <div class="form-group">
                            <label>Question Text</label>
                            <input type="text" class="form-control question-text" name="questions[${idx}][question_text]">
                        </div>

                        <div class="form-group">
                            <label>Input Type</label>
                            <select class="form-control input-type" name="questions[${idx}][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="btn btn-secondary btn-sm add-option mt-2">Add Option</button>
                        </div>

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

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

                        <div class="mt-3 dependencies">
                            <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>
        `);

        renumberQuestions();
        rebuildParentLists();
        $('html, body').animate({ scrollTop: $(document).height() }, 300);
    }

    // Questions ko renumber karna (delete/add ke baad)
    function renumberQuestions() {
        $('.question-card').each(function(i) {
            $(this).attr('data-idx', i);
            $(this).find('.card-header span').text('Question ' + (i + 1));
            $(this).find('[name]').each(function() {
                let name = $(this).attr('name');
                if (name) {
                    name = name.replace(/\[\d+\]/, '[' + i + ']');
                    $(this).attr('name', name);
                }
            });
        });
    }

    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;
                    }
                });
            }
        }
    }

    // Input type change pe fields show/hide
    $(document).on('change', '.input-type', function() {
        const $card = $(this).closest('.question-card');
        const val = this.value;

        $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);
    });

    // Dependency Yes/No toggle
    $(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);
    });

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

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

    // Delete option
    $(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);
        }
    });

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

    // Toggle card body
    $(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();

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

        $.post('/mobile-master-template/duplicate', $('#duplicateForm').serialize(), res => {
            $btn.prop('disabled', false).text('Save Duplicate');
            if (res.success) {
                 Swal.fire({
                        icon: 'success',
                        title: 'Saved!',
                        text: 'Template has been saved successfully.',
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            location.reload();
                        }
                    });
                
            } else {
                Swal.fire('Error', res.message || 'Save failed.', 'error');
            }
        }).fail(err => {
            $btn.prop('disabled', false).text('Save');
            Swal.fire('Error', err.responseJSON?.message || 'Request failed.', 'error');
        });
    });

    $(document).ready(function () {
        rebuildParentLists();
    });
</script>

@endsection