@extends('admin.layouts.app')

@section('title', __('PTE Paper Pattern'))

@section('content')
    <div class="row justify-content-center">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header text-center">
                    <h4>Create Your Own Mocktest #{{ $pattern->id }}</h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-danger" role="alert" style="display: none;">
                        This is a danger alert—check it out!
                    </div>
                </div>
                @php $paperPattern = json_decode($pattern->pattern, true); @endphp
                <div class="container mt-4">
                    <form id="createMocktestForm" action="{{ route('pte.mocktest.store') }}" method="POST">
                        @csrf
                        <input type="hidden" name="question_id" id="selectedOptions">
                        <input type="hidden" name="pattern_id" value="{{$pattern->id}}">
                        @foreach ($paperPattern as $section)
                            <div class="row mb-4">
                                <div class="col-lg-12">
                                    <h5>{{ key($section) }}</h5>
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Count</th>
                                                <th>Auto/Manual</th>
                                                <th>Input</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($section[key($section)] as $task)
                                                <tr>
                                                    <td>{{ $task['name'] }}</td>
                                                    <td class="task-count">{{ $task['count'] }}</td> 
                                                    <td class="taskid d-none">{{ $task['id'] }}</td> 
                                                    <td>
                                                        <select class="form-control task-mode" name="mode_{{ $task['id'] }}">
                                                            <option value="">Choose</option>
                                                            <option value="auto">Auto</option>
                                                            <option value="manual">Manual</option>
                                                        </select>
                                                    </td>
                                                    <td class="">
                                                        <select multiple class="input_class" name="input_{{ $task['id'] }}" class="form-control select2bs4" style="width: 100%;">
                                                            <option value=""></option>
                                                        </select>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        @endforeach
                        <button type="submit" class="btn btn-primary">Create</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <style>
        .select2-container--bootstrap4 .select2-selection--single {
            height: calc(1.5em + 0.75rem + 2px) !important; /* Adjust height as needed */
            padding: 0.375rem 0.75rem !important; /* Adjust padding as needed */
        }
    </style>
    <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">
@endsection

@section('script')
    <script src="{{ asset('backend/plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('backend/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.input_class').each(function() {
                var taskId = $(this).attr('name').split('_')[1];
                var taskCount = parseInt($(this).closest('tr').find('.task-count').text());
                var taskid = parseInt($(this).closest('tr').find('.taskid').text());

                var $selectInput = $(this);

                $(this).select2({
                    theme: "bootstrap4",
                    ajax: {
                        url: "{{ route('pte.mocktest.getPteques') }}",
                        type: "GET",
                        data: function(params) {
                            return {
                                term: params.term,
                                mode: $("select[name='mode_" + taskId + "']").val(),
                                sub_category: taskid,
                                limit: taskCount,
                            };
                        },
                        processResults: function(data) {
                            return {
                                results: data.data.map(function(item) { 
                                    return {
                                        id: item.id,
                                        text: `${item.name} (${item.id})`,
                                    };
                                }),
                            };
                        },
                    },
                    maximumSelectionLength: taskCount,
                    minimumInputLength: 3 
                });

                // Auto-select options if mode is "auto"
                $("select[name='mode_" + taskId + "']").change(function() {
                    if ($(this).val() === 'auto') {
                        $.ajax({
                            url: "{{ route('pte.mocktest.getPteques') }}",
                            type: "GET",
                            data: {
                                term: '',
                                mode: 'auto',
                                sub_category: taskid,
                                limit: taskCount,
                            },
                            success: function(data) {
                                var selectedOptions = data.data.map(function(item) {
                                    return { id: item.id.toString(), text: item.name };
                                });
                                $selectInput.empty().select2({ data: selectedOptions }).trigger('change.select2');
                                // Automatically select options
                                $selectInput.val(selectedOptions.map(function(option) { return option.id; })).trigger('change');
                                // Redraw Select2 to reflect changes
                                $selectInput.select2('close');
                            },
                        });
                    }
                });


                // Update hidden input with selected options
                $selectInput.on('change', function() {
                    var selectedValues = $(this).val() || [];
                    $('#selectedOptions').val(selectedValues.join(','));
                });
            });

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

            // Form submission validation
            $('#createMocktestForm').submit(function(event) {
                var selectedOptions = $('#selectedOptions').val().split(',');
                var totalCount = 0;
                $('.task-count').each(function() {
                    totalCount += parseInt($(this).text());
                });
                if (selectedOptions.length !== totalCount) {
                    event.preventDefault();
                    alert(`Total selected options count ${selectedOptions.length} does not match the total count ${totalCount} specified for each task.`);
                }
            });
        });
    </script>
    <!-- Additional scripts can be added here if needed -->
@endsection