@extends('admin.layouts.app')
@section('title')
    {{ isset($edit) ? 'Edit PTE Question' : 'Create PTE Question' }}
@endsection
@section('content')
    <div class="container-fluid">
        @php
            $route = isset($edit) ? route('pte.question.update', $edit->id) : route('pte.question.store');
        @endphp
        <form class="form-horizontal" action="{{ $route }}" method="POST" enctype="multipart/form-data" id="form">
            @csrf
            @if (isset($edit))
                @method('POST')
            @endif

            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="card-title mb-0">
                            PTE Question {!! isset($edit) ? "Edit <span class='badge badge-primary'>" . $edit->id . '</span>' : 'Create' !!}
                        </h4>
                        <div>
                            <a href="{{ URL::previous() }}" class="btn btn-secondary mr-2">
                                <i class="fas fa-arrow-left"></i> Back
                            </a>
                            <button type="{{ isset($edit) ? 'button' : 'submit' }}" class="btn btn-success"
                                id="{{ isset($edit) ? 'submitbtn' : 'btn' }}">
                                {!! isset($edit) ? '<i class="fas fa-sync"></i> Update' : '<i class="fas fa-save"></i> Save' !!}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <ul class="nav nav-tabs" role="tablist">
                                @php
                                    $navItems = [['id' => 'tabs-1', 'icon' => 'fas fa-book', 'label' => 'Question']];
                                @endphp
                                @foreach ($navItems as $navItem)
                                    <li class="nav-item">
                                        <a class="nav-link{{ $loop->first ? ' active' : '' }}" data-toggle="tab"
                                            href="#{{ $navItem['id'] }}" role="tab">
                                            <i class="{{ $navItem['icon'] }}"></i>
                                            {{ $navItem['label'] }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="card-body tab-content">
                            <div class="card tab-pane border active" id="tabs-1" role="tabpanel">
                                <div class="card-header">
                                    Question Details
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div id="desc_subcategory" class="bg-light border p-3">
                                                <!-- Description will be appended here dynamically -->
                                            </div>
                                        </div>
                                        <div class="form-group col-3">
                                            <x-forms.label name="Question Category" />
                                            <select name="category" class="form-control" id="category">
                                                <option value="">Select Category</option>
                                                @foreach ($category as $data)
                                                    <option
                                                        {{ $data->category == old('category', isset($edit) ? $edit->category : '') ? 'selected' : '' }}
                                                        value="{{ $data->category }}">
                                                        {{ $data->category }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group col-3">
                                            <x-forms.label name="Question Sub Category" />
                                            <select name="sub_category" class="form-control" id="sub_category">
                                                <option value="">Select Sub Category</option>
                                                @isset($edit->sub_category)
                                                    <option value="{{ $edit->sub_category }}" selected>
                                                        {{ $edit->sub_category_name }}
                                                    </option>
                                                @endisset
                                                {{-- By Ajax --}}
                                            </select>
                                        </div>
                                        <div class="form-group col-3">
                                            <label for="code" class="form-label">Question Code</label>
                                            <input class="form-control {{ error('code') }}" type="text" name="code"
                                                placeholder="Question Name"
                                                value="{{ old('code', isset($edit) ? $edit->code : '') }}" />
                                            <x-forms.error name="code" />
                                        </div>
                                        <div class="form-group col-3">
                                            <label for="name" class="form-label">Question Name</label>
                                            <input class="form-control {{ error('name') }}" type="text" name="name"
                                                placeholder="Question Name"
                                                value="{{ old('name', isset($edit) ? $edit->name : '') }}" />
                                            <x-forms.error name="name" />
                                        </div>
                                        @php
                                            $desc =
                                                isset($edit) && isset($edit->desc)
                                                    ? json_decode($edit->desc, true)
                                                    : [];
                                        @endphp

                                        <div class="form-group col-4" id="textarea_ques">
                                            <label for="desc" class="form-label">Question</label>
                                            <textarea id="editor1" rows="3" name="desc[qText]" placeholder="Question desc" class="form-control">
                                                {{ isset($desc['qText']) ? $desc['qText'] : '' }}
                                            </textarea>
                                        </div>

                                        <div class="form-group col-4" id="textarea_trans">
                                            <label for="desc" class="form-label">Audio Transcript</label>
                                            <textarea id="editor2" rows="3" name="desc[transcript]" placeholder="Audio Trans" class="form-control">
                                                {{ isset($desc['transcript']) ? $desc['transcript'] : '' }}
                                            </textarea>
                                        </div>
                                        <div class="form-group col-4" id="textarea_ans">
                                            <label for="desc" class="form-label">Answers</label>
                                            <div class="maindiv">
                                                <textarea id="editor3" rows="3" name="desc[answers][text]" placeholder="Question answers" class="form-control">
                                                    {{ isset($desc['answers']['text']) ? $desc['answers']['text'] : '' }}                                          
                                                </textarea>
                                            </div>
                                            <div class="row subdiv">
                                                <div class="form-group col-6">
                                                    <label>Answers Type:</label>
                                                    <select class="form-control" name="desc[answers][type]"
                                                        id="ans_type">
                                                        <option value=""> Choose One Type</option>
                                                        <option value="radio"
                                                            {{ isset($desc['answers']['type']) && $desc['answers']['type'] == 'radio' ? 'selected' : '' }}>
                                                            Radio</option>
                                                        <option value="dropdown"
                                                            {{ isset($desc['answers']['type']) && $desc['answers']['type'] == 'dropdown' ? 'selected' : '' }}>
                                                            Drop down</option>
                                                        <option value="checkbox"
                                                            {{ isset($desc['answers']['type']) && $desc['answers']['type'] == 'checkbox' ? 'selected' : '' }}>
                                                            CheckBox</option>
                                                        <option value="input"
                                                            {{ isset($desc['answers']['type']) && $desc['answers']['type'] == 'input' ? 'selected' : '' }}>
                                                            Input Box
                                                        </option>
                                                    </select>
                                                </div>
                                                <div class="form-group col-6">
                                                    <label>Number of Inputs:</label>
                                                    <input id="number_input" type="number" class="form-control"
                                                        placeholder="Enter number of inputs" name="desc[answers][count]"
                                                        value="{{ $desc['answers']['count'] ?? '' }}">
                                                </div>
                                                <div class="form-group col-12" id="options-container">
                                                    @if (isset($desc['answers']['count']) && !empty($desc['answers']['count']))
                                                        @php
                                                            $type = $desc['answers']['type'];
                                                        @endphp
                                                        @if ($type != 'dropdown')
                                                            <label class="mt-2">Create the Options</label>
                                                            @for ($j = 1; $j <= $desc['answers']['count']; $j++)
                                                                <div class="row">
                                                                    <div class="form-group col-3 createoption">
                                                                        <input type="{{ $type }}" value="1"
                                                                            {{ isset($desc['answers']['ans'][$j]['anscheck']) && $desc['answers']['ans'][$j]['anscheck'] == 1 ? 'checked' : '' }}
                                                                            name="desc[answers][ans][{{ $j }}][anscheck]">
                                                                        Option
                                                                    </div>
                                                                    <div class="form-group col-9">
                                                                        <input type="text" class="form-control"
                                                                            name="desc[answers][ans][{{ $j }}][anstext]"
                                                                            value="{{ isset($desc['answers']['ans'][$j]['anstext']) ? $desc['answers']['ans'][$j]['anstext'] : '' }}">
                                                                    </div>
                                                                </div>
                                                            @endfor
                                                        @else
                                                        <div class="indexfor">
                                                            @for ($i = 1; $i <= $desc['answers']['count']; $i++)
                                                            <label class="mt-2">Option Each Dropdown </label>
                                                            <div class="row">
                                                                @php $innerInput = $desc['answers']['option'][$i-1]['anstext']; @endphp
                                                                <div class="form-group col-9">
                                                                    <input type="text" class="form-control inner-input" value="{{count($innerInput)}}" placeholder="Option {{$i}}">
                                                                </div>
                                                                <div class="form-group col-3 createoption"></div>
                                                            </div>
                                                            <div class="row options-row">
                                                                @for ($j = 0; $j < count($innerInput); $j++)
                                                                    <div class="form-group col-3 createoption">
                                                                        <input type="radio" name="desc[answers][option][{{$i - 1}}][anscheck][]" value="{{$j}}" @if(isset($desc['answers']['option'][$i-1]['anscheck'][0]) && $desc['answers']['option'][$i-1]['anscheck'][0] == $j) checked @endif>
                                                                        <label class="mt-2">Option</label>
                                                                    </div>
                                                                    <div class="form-group col-9">
                                                                        <input type="text" class="form-control" name="desc[answers][option][{{$i - 1}}][anstext][]" placeholder="Option {{$j + 1}}" value="{{$innerInput[$j]}}">
                                                                    </div>
                                                                @endfor
                                                            </div> 
                                                          @endfor
                                                        </div> 
                                                        @endif
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-3" id="media">
                                            <label for="audio" class="form-label">Media</label>
                                            <div class="file-upload-section">
                                                <div class="preview-filemanger" id="preview101">

                                                    @if (isset($edit->audio))
                                                        @php
                                                            $file_extension = pathinfo(
                                                                $edit->audio,
                                                                PATHINFO_EXTENSION,
                                                            );
                                                        @endphp
                                                        @switch($file_extension)
                                                            @case('jpg')
                                                            @case('jpeg')

                                                            @case('png')
                                                            @case('gif')
                                                                <img src="{{ htmlspecialchars($edit->audio) }}" alt="Image">
                                                            @break

                                                            @case('mp3')
                                                            @case('wav')
                                                                <audio controls>
                                                                    <source src="{{ htmlspecialchars($edit->audio) }}"
                                                                        type="audio/{{ $file_extension }}">
                                                                </audio>
                                                            @break

                                                            @default
                                                                <img src="https://placehold.jp/300x175.png" alt="Placeholder">
                                                        @endswitch
                                                    @else
                                                        <img src="https://placehold.jp/300x175.png" alt="Placeholder">
                                                    @endif
                                                </div>
                                                <input type="hidden"
                                                    value="{{ !empty($edit->audio) ? $edit->audio : '' }}" name="audio"
                                                    id="input101">
                                                <div class="class d-flex mt-4">
                                                    <a class="btn btn-sm btn-primary mr-2"
                                                        onclick="uploadMedia('preview101','input101','PteTestExam/assest/')">
                                                        <i class="fa fa-folder"></i> Browse
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col-3">
                                            <label for="source" class="form-label">Source</label>
                                            <input class="form-control {{ error('source') }}" type="text"
                                                name="source" placeholder="Question source"
                                                value="{{ old('source', isset($edit) ? $edit->source : '') }}" />
                                            <x-forms.error name="source" />
                                        </div>
                                        <div class="form-group col-1">
                                            <label for="difficulty" class="form-label">Difficulty</label>
                                            <select class="form-control" name="difficulty">
                                                <option value="">Choose Type</option>
                                                <option value="Easy"
                                                    {{ isset($edit->difficulty) && $edit->difficulty == 'Easy' ? 'selected' : '' }}>
                                                    Easy</option>
                                                <option value="Medium"
                                                    {{ isset($edit->difficulty) && $edit->difficulty == 'Medium' ? 'selected' : '' }}>
                                                    Medium</option>
                                                <option value="Hard"
                                                    {{ isset($edit->difficulty) && $edit->difficulty == 'Hard' ? 'selected' : '' }}>
                                                    Hard</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-1">
                                            <label>Status:</label>
                                            <select class="form-control" name="status">
                                                <option value="1"
                                                    {{ isset($edit->status) && $edit->status == '1' ? 'selected' : '' }}>
                                                    Active</option>
                                                <option value="0"
                                                    {{ isset($edit->status) && $edit->status == '0' ? 'selected' : '' }}>
                                                    De-Active</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-3">
                                            <label>Tags:</label>
                                            <input data-role="tagsinput" class="form-control tagsclass" type="text"
                                                placeholder="Enter your question Paper Tag" name="tag"
                                                value="{{ isset($edit->tag) ? $edit->tag : '' }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('style')
    <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('frontend') }}/secondary-theme/assets/css/bootstrap-datepicker.min.css">
    <style>
        .ck-editor__editable_inline {
            min-height: 400px;
        }

        .select2-results__option[aria-selected=true] {
            display: none;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
            color: #fff;
            border: 1px solid #fff;
            background: #007bff;
            border-radius: 30px;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }

        .bootstrap-tagsinput {
            width: 100%;
        }

        /* Optional: Adjust tag colors */
        .label-info {
            background-color: #5bc0de;
        }

        .label-danger {
            background-color: #d9534f;
        }
    </style>
    <x-map.leaflet.map_links />
    <x-map.leaflet.autocomplete_links />
    @include('map::links')
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
    <script src="{{ asset('frontend/secondary-theme/assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('backend/plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>

    <script>
        $(document).ready(function() {

            for (i = 0; i < 11; i++) {
                ClassicEditor.create($(`#editor${i}`)[0]).catch(error => {
                    console.error(error);
                });
            }

            $('.select2bs4').select2({
                theme: 'bootstrap4'
            })

            $('#submitbtn').on('click', function() {
                Swal.fire({
                    title: "Do you want to save the changes?",
                    showDenyButton: true,
                    showCancelButton: true,
                    confirmButtonText: "Save",
                    denyButtonText: `Don't save`
                }).then((result) => {
                    if (result.isConfirmed) {
                        // If the user confirms, submit the form
                        $('#form').submit();
                    } else if (result.isDenied) {
                        // Handle the case where the user chooses not to save
                        Swal.fire("Changes are not saved", "", "info");
                    }
                });
            });

            $('#category').on('change', function() {
                var category = $(this).val();

                if (category == '') {
                    $('#sub_category').empty();
                    $("#desc_subcategory").empty();
                    return;
                }
                $('#sub_category').empty();
                $("#desc_subcategory").empty();
                $.ajax({
                    url: "{{ route('pte.question.subcategory') }}",
                    type: "POST",
                    data: {
                        category: category,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(result) {
                        $.each(result.data, function(key, value) {
                            $("#sub_category").append('<option value="' + value.id +
                                '">' +
                                value.sub_category + '</option>');

                            $("#desc_subcategory").append(
                                `<strong>${value.sub_category}</strong>:<p>${value.description}</p>`
                            )
                        });
                    },
                    error: function(error) {
                        console.error(error);
                    }
                });
            });

            // Check on load
            checkSelectedOption();

            // Add onchange event
            $('#sub_category').change(function() {
                // Check on change
                checkSelectedOption();
            });

            $('#number_input').keyup(handleKeyup);

        });

        function checkSelectedOption() {
            let selectedValue = $('#sub_category').val();
            console.log(selectedValue);
            if (selectedValue === "20") {
                $('#textarea_ques, #textarea_ans').hide();
            } else if (selectedValue === "19") {
                $('#textarea_trans, #textarea_ans').hide();
            } else if (selectedValue === "18") {
                $('#textarea_ques').hide();
                $('#textarea_ans .maindiv').hide();
                $('#textarea_ans .subdiv').show();
                $('#ans_type').val('radio').find('option').prop('disabled', true);
                $('#ans_type option[value="radio"]').prop('disabled', false);
            } else if (selectedValue === "17") {
                $('#textarea_ans .maindiv').hide();
                $('#ans_type').val('radio').find('option').prop('disabled', true);
                $('#ans_type option[value="radio"]').prop('disabled', false);
            } else if (selectedValue === "16") {
                $('#textarea_ans .maindiv').hide();
                $('#ans_type').val('radio').find('option').prop('disabled', true);
                $('#ans_type option[value="radio"]').prop('disabled', false);
            } else if (selectedValue === "15") {
                $('#textarea_trans, #textarea_ans').hide();
            } else if (selectedValue === "14") {
                $('#textarea_ans .maindiv').hide();
                $('#ans_type').val('checkbox').find('option').prop('disabled', true);
                $('#ans_type option[value="checkbox"]').prop('disabled', false);
            } else if (selectedValue === "13") {
                $('#textarea_ques, #textarea_ans').hide();
            } else if (selectedValue === "12") {
                $('#media').hide();
                $('#textarea_ans .maindiv').hide();
                $('#textarea_ans .subdiv').show();
                $('#ans_type').val('radio').find('option').prop('disabled', true);
                $('#ans_type option[value="radio"]').prop('disabled', false);
            } else if (selectedValue === "11") {
                $('#textarea_trans, #media').hide();
                $('#textarea_ans .maindiv').hide();
                $('.createoption').hide();
                $('#ans_type').val('checkbox').find('option').prop('disabled', true);
                $('#ans_type option[value="checkbox"]').prop('disabled', false);
            } else if (selectedValue === "10") {
                $('#textarea_ques, #textarea_trans, #media').hide();
                $('#textarea_ans .subdiv').show();
                $('#textarea_ans .maindiv').hide();
                $('.createoption').hide();
                $('#ans_type').val('input').find('option').prop('disabled', true);
                $('#ans_type option[value="input"]').prop('disabled', false);
            } else if (selectedValue === "9") {
                $('#media').hide();
                $('#textarea_ans .subdiv').show();
                $('#textarea_ans .maindiv').hide();
                $('#ans_type').val('checkbox').find('option').prop('disabled', true);
                $('#ans_type option[value="checkbox"]').prop('disabled', false);
            } else if (selectedValue === "8") {
                $('#textarea_trans, #media').hide();
                $('#textarea_ans .maindiv').hide();
                $('#ans_type').val('dropdown').find('option').prop('disabled', true);
                $('#ans_type option[value="dropdown"]').prop('disabled', false);
                $('#textarea_ans .subdiv').show();
            } else if (selectedValue === "7") {
                $('#textarea_trans, #textarea_ans, #media').hide();
            } else if (selectedValue === "6") {
                $('#textarea_trans, #textarea_ans, #media').hide();
            } else if (selectedValue === "5") {
                $('#textarea_ques').hide();
                $('#textarea_ans .subdiv').hide();
                $('#textarea_ans .maindiv').show();
            } else if (selectedValue === "4") {
                $('#textarea_ques, #textarea_ans').hide();
            } else if (selectedValue === "3") {
                $('#textarea_ques, #textarea_trans, #textarea_ans').hide();
            } else if (selectedValue === "2") {
                $('#textarea_ques, #textarea_ans').hide();
            } else if (selectedValue === "1") {
                $('#textarea_ques, #textarea_ans').hide();
            }
        }

        function handleKeyup() {
            let count = parseInt($(this).val());
            let answerType = $('#ans_type').val();

            if (answerType != 'dropdown') {

                let inputType = answerType === 'radio' ? 'radio' : 'checkbox';

                if (count >= 2 && count <= 15) {
                    let optionInputsContainer = $('#options-container');
                    optionInputsContainer.empty();
                    optionInputsContainer.append(`<label class="mt-2">Create the Options</label>`);

                    for (let i = 1; i <= count; i++) {
                        optionInputsContainer.append(`
                            <div class="row">
                                <div class="form-group col-3 createoption">
                                    <input type="${inputType}" name="desc[answers][ans][${i}][anscheck]" value="1"> Option
                                </div>
                                <div class="form-group col-9">
                                    <input type="text" class="form-control" name="desc[answers][ans][${i}][anstext]" placeholder="Option ${i}">
                                </div>
                            </div>
                        `);
                    }
                }

            } else {
                if (count >= 2 && count <= 10) {
                    let optionInputsContainer = $('#options-container');
                    optionInputsContainer.empty();

                    for (let i = 1; i <= count; i++) {
                        optionInputsContainer.append(`
                            <div class="indexfor">
                            <label class="mt-2">Option Each Dropdown </label>
                            <div class="row">
                                <div class="form-group col-9">
                                    <input type="text" class="form-control inner-input" placeholder="Option ${i}">
                                </div>
                                <div class="form-group col-3 createoption"></div>
                            </div>
                            <div class="row options-row"></div> 
                        </div>
                        `);
                    }
                    $(document).on('keyup', '.inner-input', function() {
                        let innerInput = parseInt($(this).val());
                        console.log("innerInput", innerInput);
                        let inputType = answerType === 'dropdown' ? 'radio' : '';

                        if (innerInput >= 2 && innerInput <= 15) {
                            let questionNumber = $(this).closest('.indexfor').index();
                            let optionsRow = $(this).closest('.row').next('.options-row');
                            optionsRow.empty();

                            for (let j = 0; j < innerInput; j++) { // Adjusted loop index to start from 0
                                optionsRow.append(`
                                    <div class="form-group col-3 createoption">
                                        <input type="${inputType}" name="desc[answers][option][${questionNumber}][anscheck][]" value="${j}">
                                        <label class="mt-2">Option</label>
                                    </div>
                                    <div class="form-group col-9">
                                        <input type="text" class="form-control" name="desc[answers][option][${questionNumber}][anstext][]" placeholder="Option ${j + 1}">
                                    </div>
                                `);
                            }
                        }
                    });
                }
            }
        }
    </script>
@endsection