@extends('admin.layouts.app')
@php

    $categoryTitles = [
        1 => 'Listening',
        2 => 'Speaking',
        3 => 'Writing',
        4 => 'Reading',
    ];

    $title =
        isset($mockTest) && isset($categoryTitles[$mockTest->category_id])
            ? 'Edit ' . $categoryTitles[$mockTest->category_id]
            : 'Create';

@endphp

@section('title')
    {{ $title }}
@endsection
@section('content')
    <div class="container-fluid">
        @php
            $route = isset($mockTest) ? route('mocktest.update', $mockTest->id) : route('mocktest.store');
        @endphp
        <form class="form-horizontal" action="{{ $route }}" method="POST" enctype="multipart/form-data" id="myForm">
            @csrf
            @if (isset($mockTest))
                @method('PUT')
            @endif
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="card-title mb-0">
                            Mock Test {!! isset($mockTest) ? "$title <span class='badge badge-primary'>" . $mockTest->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="submit" class="btn btn-success" id="submitbtn"> {!! isset($mockTest) ? '<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' => '1', 'icon' => 'fas fa-headphones', 'label' => 'Listening'],
                                        ['id' => '2', 'icon' => 'fas fa-file-audio', 'label' => 'Speaking'],
                                        ['id' => '3', 'icon' => 'fas fa-pen', 'label' => 'Writing'],
                                        ['id' => '4', 'icon' => 'fas fa-book-open', 'label' => 'Reading'],
                                    ];
                                @endphp
                                @foreach ($navItems as $navItem)
                                    @if ($mockTest->category_id == $navItem['id'])
                                        <li class="nav-item d-flex justify-content-between w-100">
                                            <a class="nav-link {{ $mockTest->category_id != $navItem['id'] ? 'd-none' : '' }} {{ $mockTest->category_id != $navItem['id'] ? ' active' : '' }}"
                                                data-toggle="tab" href="#tabs-{{ $navItem['id'] }}" role="tab">
                                                <i class="{{ $navItem['icon'] }}"></i>
                                                {{ $navItem['label'] }}
                                            </a>
                                            <a href="{{ url('GRad_CMS/mocktest/' . $mock_id . '/edit/' . $mockTest->id) }}?removepaperformat=1"
                                                class="badge pt-2 bg-danger h-75">
                                                <i class="fas fa-trash"></i> Remove Paper
                                            </a>
                                        </li>
                                    @endif
                                @endforeach

                                @php
                                    $mockTest = isset($mockTest) ? $mockTest : null;
                                    if (isset($mockTest)) {
                                        $jsonData = json_decode($mockTest->questions_data, true) ?? [];
                                    }
                                @endphp
                            </ul>
                        </div>

                        <div class="card-body tab-content">
                            {{-- Listening --}}
                            @if ($mockTest->category_id == 1)
                                @if (!empty($jsonData))
                                    <div class="card tab-pane border {{ $mockTest->category_id == 1 ? 'active' : '' }}"
                                        id="tabs-1" role="tabpanel">
                                        <div class="card-header">
                                            <ul class="nav nav-tabs" role="tablist">
                                                @php
                                                    $nestedNavItems1 = [
                                                        [
                                                            'id' => 'tabs-nest-11',
                                                            'icon' => 'fas fa-book-open',
                                                            'label' => 'Part 1',
                                                        ],
                                                        [
                                                            'id' => 'tabs-nest-12',
                                                            'icon' => 'fas fa-file-audio',
                                                            'label' => 'Part 2',
                                                        ],
                                                        [
                                                            'id' => 'tabs-nest-13',
                                                            'icon' => 'fas fa-pen',
                                                            'label' => 'Part 3',
                                                        ],
                                                        [
                                                            'id' => 'tabs-nest-14',
                                                            'icon' => 'fas fa-book',
                                                            'label' => 'Part 4',
                                                        ],
                                                        [
                                                            'id' => 'tabs-nest-15',
                                                            'icon' => 'fas fa-tag',
                                                            'label' => 'Add on',
                                                        ],
                                                    ];
                                                @endphp
                                                @foreach ($nestedNavItems1 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">
                                            @if (!empty($jsonData))
                                                @foreach ($jsonData as $partKey => $part)
                                                    @isset($part['bunch'])
                                                        <div class="card tab-pane border {{ $loop->iteration == 1 ? 'active' : '' }}"
                                                            id="tabs-nest-1{{ $loop->iteration }}" role="tabpanel">
                                                            <div class="card-header">
                                                                @php $range = '' @endphp
                                                                {{ ucwords($partKey) }} ({{ $range }} Question)
                                                            </div>
                                                            <div class="card-body row">
                                                                {{-- hidden input for js --}}
                                                                <input type="hidden" value="{{ $partKey }}"
                                                                    class="parent-part">
                                                                {{-- <div class="col-6">
                                                                    <div class="form-group">
                                                                        <label for="audio">Audio {{ $partKey }}</label>
                                                                        <p>Please attach audio below:</p>
                                                                        <div>
                                                                            @if (isset($part['paragraph']) && filter_var($part['paragraph'], FILTER_VALIDATE_URL))
                                                                                <input type="text"
                                                                                    value="{{ $part['paragraph'] }}"
                                                                                    name="reading[{{ $partKey }}][paragraph]"
                                                                                    class="form-control" readonly>
                                                                            @else
                                                                                <input type="file" id="audio"
                                                                                    name="reading[{{ $partKey }}][paragraph]"
                                                                                    accept="audio/mp3">
                                                                            @endif
                                                                        </div>
                                                                        @if (isset($part['paragraph']))
                                                                            <audio controls class="mt-3">
                                                                                <source src="{{ asset($part['paragraph']) }}"
                                                                                    type="audio/mp3">
                                                                                Your browser does not support the audio tag.
                                                                            </audio>
                                                                        @endif
                                                                    </div>
                                                                </div> --}}
                                                                <div class="form-group col-12">
                                                                    <label>Audio {{ $partKey }}</label>
                                                                    <div class="file-upload-section">
                                                                        <div class="preview-filemanger" id="preview{{$partKey}}">
                                                                            @if (isset($part['paragraph']))
                                                                             <audio controls class="mt-3">
                                                                                    <source src="{{ asset($part['paragraph']) }}"
                                                                                        type="audio/mp3">
                                                                                    Your browser does not support the audio tag.
                                                                                </audio>
                                                                            @else
                                                                            <img src="https://placehold.jp/152x68.png" alt="placeholder">
                                                                            @endif
                                                                        </div>
                                                                        <input type="hidden" value="{{ !empty($part['paragraph']) ? $part['paragraph'] : '' }}"
                                                                        name="reading[{{ $partKey }}][paragraph]" id="input{{$partKey}}">
                                                                        <div class="class d-flex mt-4">
                                                                            <a class="btn btn-sm btn-primary mr-2" onclick="uploadMedia('preview{{$partKey}}','input{{$partKey}}','mocktest/mocktest_audio/')">
                                                                                <i class="fa fa-folder"></i> Browse
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-12">
                                                                    <div class="form-group ml-5">
                                                                        <label for="questions">Question/Answers</label>
                                                                    </div>

                                                                    @foreach ($part['bunch'] as $key => $bunch)
                                                                        @if (isset($bunch['questions'][0]))
                                                                            @php
                                                                                if (isset($bunch['merge'])) {
                                                                                    $start = $bunch['questions'][0];
                                                                                    $end = $start;
                                                                                    $mergekey = 1;
                                                                                } else {
                                                                                    $start = $bunch['questions'][0];
                                                                                    $end = $bunch['questions'][1];
                                                                                    $mergekey = 0;
                                                                                }
                                                                                $visible_key =
                                                                                    $bunch['questions'][0] .
                                                                                    ' - ' .
                                                                                    $bunch['questions'][1];
                                                                                if (
                                                                                    $bunch['questions'][0] ==
                                                                                    $bunch['questions'][1]
                                                                                ) {
                                                                                    $visible_key =
                                                                                        $bunch['questions'][0];
                                                                                }
                                                                            @endphp
                                                                        @else
                                                                            @php
                                                                                $start = key($bunch['questions']);
                                                                                $end = array_key_last(
                                                                                    $bunch['questions'],
                                                                                );
                                                                            @endphp
                                                                        @endif

                                                                        <div class="ml-5 row ">
                                                                            <div class="form-group col-md-12">
                                                                                <label class="font-weight-bold">Heading for
                                                                                    Bunch:
                                                                                    <span class="text-muted">
                                                                                        {!! !empty($bunch['visible_key']) ? $bunch['visible_key'] : $visible_key !!}
                                                                                        Question</span></label>
                                                                                <textarea rows="3" name="reading[{{ $partKey }}][bunch][{{ $key }}][heading]"
                                                                                    class="bunchheading form-control">{{ $bunch['heading'] ?? '' }}</textarea>
                                                                                <input class="form-control" type="hidden"
                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][visible_key]"
                                                                                    value="{!! !empty($bunch['visible_key']) ? $bunch['visible_key'] : $visible_key !!}">

                                                                                <input class="form-control" type="hidden"
                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][mergekey]"
                                                                                    value="{{ isset($bunch['mergekey']) ? $bunch['mergekey'] : $mergekey }}">

                                                                            </div>
                                                                            @if (isset($bunch['textarea']))
                                                                                <div class="form-group col-md-12">
                                                                                    <label class="font-weight-bold">Textarea
                                                                                        Content:
                                                                                        <span
                                                                                            class="text-muted">({{ !empty($bunch['visible_key']) ? $bunch['visible_key'] : $visible_key }}
                                                                                            Question)</span></label>
                                                                                    <textarea rows="3" name="reading[{{ $partKey }}][bunch][{{ $key }}][textarea]"
                                                                                        class="bunchheading form-control">{{ $bunch['textarea'] ?? '' }}</textarea>
                                                                                </div>
                                                                            @endif
                                                                        </div>
                                                                        <div class="row">
                                                                            @for ($i = $start; $i <= $end; $i++)
                                                                                <div class="card mb-3 ml-5 col-5">
                                                                                    <div class="card-body">
                                                                                        <div class="form-row"
                                                                                            id="{{ $i }}">
                                                                                            @if (!isset($bunch['textarea']))
                                                                                                <div class="form-group col-4">
                                                                                                    <label>Question Type:
                                                                                                        {{ $i }}</label>
                                                                                                    <select
                                                                                                        class="form-control answer-type"
                                                                                                        name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][type]">
                                                                                                        <option value="">
                                                                                                            Choose
                                                                                                            One Type</option>
                                                                                                        <option value="radio"
                                                                                                            {{ isset($bunch['questions'][$i]['type']) && $bunch['questions'][$i]['type'] == 'radio' ? 'selected' : '' }}>
                                                                                                            Radio</option>
                                                                                                        <option
                                                                                                            value="dropdown"
                                                                                                            {{ isset($bunch['questions'][$i]['type']) && $bunch['questions'][$i]['type'] == 'dropdown' ? 'selected' : '' }}>
                                                                                                            Drop down</option>
                                                                                                        <option
                                                                                                            value="checkbox"
                                                                                                            {{ isset($bunch['questions'][$i]['type']) && $bunch['questions'][$i]['type'] == 'checkbox' ? 'selected' : '' }}>
                                                                                                            CheckBox</option>
                                                                                                        <option value="input"
                                                                                                            {{ isset($bunch['questions'][$i]['type']) && $bunch['questions'][$i]['type'] == 'input' ? 'selected' : '' }}>
                                                                                                            Fill in the Blank
                                                                                                        </option>
                                                                                                    </select>
                                                                                                </div>

                                                                                                <div class="form-group col-12">
                                                                                                    <label>
                                                                                                        Question:
                                                                                                        {{ $i }}
                                                                                                        <i class="fas fa-key key-icon"
                                                                                                            data-toggle="tooltip"
                                                                                                            title="Click to insert '{answers}'"></i>
                                                                                                    </label>
                                                                                                    <textarea rows="3" placeholder="Enter your question [answers]"
                                                                                                        name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][ques]"
                                                                                                        class="bunchheading form-control">
                                                                                                    {{ $bunch['questions'][$i]['ques'] ?? '' }}
                                                                                                </textarea>
                                                                                                    {{-- <input class="form-control"
                                                                                                    type="text"
                                                                                                    placeholder="Enter your question [answers]"
                                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][ques]"
                                                                                                    value="{{ $bunch['questions'][$i]['ques'] ?? '' }}" /> --}}
                                                                                                </div>
                                                                                            @endif
                                                                                            <div
                                                                                                class="form-group col-4 answers">
                                                                                                <label class="answers">Answer:
                                                                                                    {{ $i }}</label>
                                                                                                @php
                                                                                                    $answerValue = isset(
                                                                                                        $bunch[
                                                                                                            'questions'
                                                                                                        ][$i][
                                                                                                            'answers'
                                                                                                        ],
                                                                                                    )
                                                                                                        ? $bunch[
                                                                                                            'questions'
                                                                                                        ][$i]['answers']
                                                                                                        : '';
                                                                                                @endphp

                                                                                                <input
                                                                                                    class="form-control answers"
                                                                                                    type="text"
                                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][answers]"
                                                                                                    placeholder="Enter your Answer"
                                                                                                    value="{{ is_array($answerValue) ? '' : htmlspecialchars($answerValue) }}">
                                                                                            </div>

                                                                                            <div class="form-group col-2 option-inputs"
                                                                                                style="display: none;">
                                                                                                <label>Number of Inputs:</label>
                                                                                                <input type="number"
                                                                                                    class="form-control"
                                                                                                    data-bunch="{{ $key }}"
                                                                                                    placeholder="Enter number of inputs"
                                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][count]"
                                                                                                    value="{{ $bunch['questions'][$i]['count'] ?? '' }}">
                                                                                            </div>

                                                                                            <div class="form-group col-3">
                                                                                                <div class="options-container">
                                                                                                    @if (isset($bunch['questions'][$i]['count']) && !empty($bunch['questions'][$i]['count']))
                                                                                                        @php
                                                                                                            $answers = isset(
                                                                                                                $bunch[
                                                                                                                    'questions'
                                                                                                                ][$i][
                                                                                                                    'answers'
                                                                                                                ],
                                                                                                            )
                                                                                                                ? $bunch[
                                                                                                                    'questions'
                                                                                                                ][$i][
                                                                                                                    'answers'
                                                                                                                ]
                                                                                                                : [];
                                                                                                        @endphp

                                                                                                        @for ($j = 1; $j <= $bunch['questions'][$i]['count']; $j++)
                                                                                                            @php
                                                                                                                $type =
                                                                                                                    $bunch[
                                                                                                                        'questions'
                                                                                                                    ][
                                                                                                                        $i
                                                                                                                    ][
                                                                                                                        'type'
                                                                                                                    ];
                                                                                                                if (
                                                                                                                    $type ==
                                                                                                                    'dropdown'
                                                                                                                ) {
                                                                                                                    $type =
                                                                                                                        'radio';
                                                                                                                }
                                                                                                            @endphp

                                                                                                            <label>
                                                                                                                <input
                                                                                                                    type="{{ $type }}"
                                                                                                                    value="{{ $j }}"
                                                                                                                    @if (in_array($j, $answers)) checked @endif
                                                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][answers][{{ $type != 'radio' ? $j : 0 }}]">
                                                                                                                Option
                                                                                                                {{ $j }}
                                                                                                                <input
                                                                                                                    type="text"
                                                                                                                    class="form-control"
                                                                                                                    placeholder="Option {{ $j }}"
                                                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][option][{{ $j }}]"
                                                                                                                    value="{{ isset($bunch['questions'][$i]['option'][$j]) ? $bunch['questions'][$i]['option'][$j] : '' }}">
                                                                                                            </label>
                                                                                                        @endfor
                                                                                                    @endif
                                                                                                </div>

                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            @endfor
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endisset
                                                @endforeach
                                                <div class="card tab-pane border" id="tabs-nest-15" role="tabpanel">
                                                    <div class="card-header">
                                                        Addition information
                                                    </div>
                                                    <div class="card-body row">
                                                        <div class="row">
                                                            <div class="form-group col-4">
                                                                <label>Difficulty Type:</label>
                                                                <select class="form-control" name="reading[difficulty]">
                                                                    <option value="">Choose Type</option>
                                                                    <option value="Easy"
                                                                        {{ isset($jsonData['difficulty']) && $jsonData['difficulty'] == 'Easy' ? 'selected' : '' }}>
                                                                        Easy</option>
                                                                    <option value="Medium"
                                                                        {{ isset($jsonData['difficulty']) && $jsonData['difficulty'] == 'Medium' ? 'selected' : '' }}>
                                                                        Medium</option>
                                                                    <option value="Hard"
                                                                        {{ isset($jsonData['difficulty']) && $jsonData['difficulty'] == 'Hard' ? 'selected' : '' }}>
                                                                        Hard</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-4">
                                                                <label>Status:</label>
                                                                <select class="form-control" name="status">
                                                                    <option value="">Choose Status</option>
                                                                    <option value="0"
                                                                        {{ isset($mockTest->status) && $mockTest->status == '0' ? 'selected' : '' }}>
                                                                        De-Active</option>
                                                                    <option value="1"
                                                                        {{ isset($mockTest->status) && $mockTest->status == '1' ? 'selected' : '' }}>
                                                                        Active</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-12">
                                                                <label>Tags:</label>
                                                                <input data-role="tagsinput"
                                                                    class="form-control tagsclass" type="text"
                                                                    placeholder="Enter your question Paper Tag"
                                                                    name="reading[tag]"
                                                                    value="{{ isset($jsonData['tag']) ? $jsonData['tag'] : '' }}" />
                                                            </div>
                                                            <div class="form-group col-12">
                                                                <label>Soucre:</label>
                                                                <input class="form-control" type="text"
                                                                    placeholder="Enter Website Url" name="exam_url"
                                                                    value="{{ $mockTest->exam_url ?? '' }}" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @else
                                    <table class="table table-striped table-bordered">
                                        <thead class="thead-dark">
                                            <tr class="text-center">
                                                <th colspan="3">Paper Format for Reading</th>
                                            </tr>
                                            <tr>
                                                <th scope="col" class="w-25">Part</th>
                                                <th scope="col" class="w-25">Bunch</th>
                                                <th scope="col" class="w-25">Question</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $part = ['1', '2', '3', '4'];
                                            @endphp
                                            @foreach ($part as $value)
                                                <tr id="paperformat-part{{ $value }}">
                                                    <td>Part {{ $value }}</td>
                                                    <td>
                                                        <div class="form-check form-switch">
                                                            <input name="paperformat[part{{ $value }}][bunch]"
                                                                type="number" class="form-control bunch-input"
                                                                data-part="part{{ $value }}">
                                                        </div>
                                                    </td>
                                                    <td class="bunch-questions">

                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @endif
                            @endif
                            {{-- Speaking --}}
                            @if ($mockTest->category_id == 2)
                                @if (!empty($jsonData))
                                    <div class="card tab-pane border {{ $mockTest->category_id == 2 ? 'active' : '' }}"
                                        id="tabs-2" role="tabpanel">
                                        <div class="card-header">
                                            <ul class="nav nav-tabs" role="tablist">
                                                @php
                                                    $nestedNavItems1 = [
                                                        [
                                                            'id' => 'tabs-nest-21',
                                                            'icon' => 'fas fa-book-open',
                                                            'label' => 'Part 1',
                                                        ],
                                                        [
                                                            'id' => 'tabs-nest-22',
                                                            'icon' => 'fas fa-file-audio',
                                                            'label' => 'Part 2',
                                                        ],
                                                        [
                                                            'id' => 'tabs-nest-23',
                                                            'icon' => 'fas fa-pen',
                                                            'label' => 'Part 3',
                                                        ],
                                                        [
                                                            'id' => 'tabs-nest-24',
                                                            'icon' => 'fas fa-tag',
                                                            'label' => 'Add on',
                                                        ],
                                                    ];
                                                @endphp
                                                @foreach ($nestedNavItems1 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">
                                            @if (!empty($jsonData))
                                                @foreach ($jsonData as $partKey => $part)
                                                    @isset($part['bunch'])
                                                        <div class="card tab-pane border {{ $loop->iteration == 1 ? 'active' : '' }}"
                                                            id="tabs-nest-2{{ $loop->iteration }}" role="tabpanel">
                                                            <div class="card-header">
                                                                {{ ucwords($partKey) }} Question
                                                            </div>
                                                            <div class="card-body row">

                                                                <div class="card mb-3 ml-5 col-5">
                                                                    <div class="card-body">
                                                                        <div class="row">
                                                                            <div class="col-5">
                                                                                <div class="form-group">
                                                                                    <label for="paragraph">Part Heading
                                                                                        {{ $loop->iteration }}</label>
                                                                                    <input type="hidden"
                                                                                        value="{{ $partKey }}"
                                                                                        class="parent-part">
                                                                                    <input type="text"
                                                                                        name="reading[{{ $partKey }}][paragraph]"
                                                                                        class="form-control"
                                                                                        value="{{ isset($part['paragraph']) ? $part['paragraph'] : '' }}">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>


                                                                <div class="card mb-3 ml-5 col-5">
                                                                    <div class="card-body">
                                                                        <div class="row">
                                                                            <div class="col-12">
                                                                                <div class="form-group">
                                                                                    <label for="paragraph">Part Introduction
                                                                                        {{ $loop->iteration }}</label>
                                                                                    <input id="{{ $partKey }}"
                                                                                        type="text"
                                                                                        name="reading[{{ $partKey }}][intro]"
                                                                                        class="form-control"
                                                                                        value="{!! isset($part['intro']) ? $part['intro'] : '' !!}">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-12">
                                                                    <div class="form-group ml-5">
                                                                        <label for="questions">Question/Answers</label>
                                                                    </div>

                                                                    @foreach ($part['bunch'] as $key => $bunch)
                                                                        @if (isset($bunch['questions'][0]))
                                                                            @php
                                                                                $start = $bunch['questions'][0];
                                                                                $end = $bunch['questions'][1];
                                                                            @endphp
                                                                        @else
                                                                            @php
                                                                                $start = key($bunch['questions']);
                                                                                $end = array_key_last(
                                                                                    $bunch['questions'],
                                                                                );
                                                                            @endphp
                                                                        @endif


                                                                        <div class="row">
                                                                            @for ($i = $start; $i <= $end; $i++)
                                                                                <div class="card mb-3 ml-5 col-5">
                                                                                    <div class="card-body">
                                                                                        <div class="form-row"
                                                                                            id="{{ $i }}">

                                                                                            <div class="form-group col-12">
                                                                                                <label> Question:
                                                                                                    {{ $i }}
                                                                                                </label>
                                                                                                <textarea rows="3" placeholder="Enter your question"
                                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][ques]"
                                                                                                    class="bunchheading form-control">{{ $bunch['questions'][$i]['ques'] ?? '' }}</textarea>
                                                                                            </div>


                                                                                            {{-- @if (isset($bunch['questions'][$i]['video']) && !empty($bunch['questions'][$i]['video']))
                                                                                                <div class="form-group col-12">
                                                                                                    <label>Existing Video
                                                                                                        {{ $i }}</label>
                                                                                                    <video width="320"
                                                                                                        height="240"
                                                                                                        controls>
                                                                                                        <source
                                                                                                            src="{{ $bunch['questions'][$i]['video'] }}"
                                                                                                            type="video/mp4">
                                                                                                        Your browser does not
                                                                                                        support the video tag.
                                                                                                    </video>
                                                                                                </div>
                                                                                            @endif

                                                                                            <div class="form-group col-12">
                                                                                                <label>Add Video
                                                                                                    {{ $i }}</label>
                                                                                                <input type="file"
                                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][video]"
                                                                                                    class="form-control-file">
                                                                                                <input type="hidden"
                                                                                                    value="{{ !empty($bunch['questions'][$i]['video']) ? $bunch['questions'][$i]['video'] : '' }}"
                                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][video]"
                                                                                                    class="form-control-file">
                                                                                            </div> --}}
                                                                                            <div class="form-group col-12">
                                                                                            <label>Video{{ $i }}</label>
                                                                                                <div class="file-upload-section">
                                                                                                    <div class="preview-filemanger" id="preview{{$i}}">
                                                                                                        @if (isset($bunch['questions'][$i]['video']) && !empty($bunch['questions'][$i]['video']))
                                                                                                        <video controls><source src="{{ $bunch['questions'][$i]['video'] }}" type="video/mp4">Your browser does not support the video tag.</video>
                                                                                                        @else
                                                                                                        <img src="https://placehold.jp/152x68.png" alt="placeholder">
                                                                                                        @endif
                                                                                                    </div>
                                                                                                    <input type="hidden" value="{{ !empty($bunch['questions'][$i]['video']) ? $bunch['questions'][$i]['video'] : '' }}"
                                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][video]" id="input{{$i}}">
                                                                                                    <div class="class d-flex mt-4">
                                                                                                        <a class="btn btn-sm btn-primary mr-2" onclick="uploadMedia('preview{{$i}}','input{{$i}}','mocktest/mocktest_videos/')">
                                                                                                            <i class="fa fa-folder"></i> Browse
                                                                                                        </a>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            @endfor
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endisset
                                                @endforeach
                                                <div class="card tab-pane border" id="tabs-nest-24" role="tabpanel">
                                                    <div class="card-header">
                                                        Addition information
                                                    </div>
                                                    <div class="card-body row">
                                                        <div class="row">
                                                            <div class="form-group col-4">
                                                                <label>Difficulty Type:</label>
                                                                <select class="form-control" name="reading[difficulty]">
                                                                    <option value="">Choose Type</option>
                                                                    <option value="Easy"
                                                                        {{ isset($jsonData['difficulty']) && $jsonData['difficulty'] == 'Easy' ? 'selected' : '' }}>
                                                                        Easy</option>
                                                                    <option value="Medium"
                                                                        {{ isset($jsonData['difficulty']) && $jsonData['difficulty'] == 'Medium' ? 'selected' : '' }}>
                                                                        Medium</option>
                                                                    <option value="Hard"
                                                                        {{ isset($jsonData['difficulty']) && $jsonData['difficulty'] == 'Hard' ? 'selected' : '' }}>
                                                                        Hard</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-4">
                                                                <label>Status:</label>
                                                                <select class="form-control" name="status">
                                                                    <option value="">Choose Status</option>
                                                                    <option value="0"
                                                                        {{ isset($mockTest->status) && $mockTest->status == '0' ? 'selected' : '' }}>
                                                                        De-Active</option>
                                                                    <option value="1"
                                                                        {{ isset($mockTest->status) && $mockTest->status == '1' ? 'selected' : '' }}>
                                                                        Active</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-12">
                                                                <label>Tags:</label>
                                                                <input data-role="tagsinput"
                                                                    class="form-control tagsclass" type="text"
                                                                    placeholder="Enter your question Paper Tag"
                                                                    name="reading[tag]"
                                                                    value="{{ isset($jsonData['tag']) ? $jsonData['tag'] : '' }}" />
                                                            </div>
                                                            <div class="form-group col-12">
                                                                <label>Soucre:</label>
                                                                <input class="form-control" type="text"
                                                                    placeholder="Enter Website Url" name="exam_url"
                                                                    value="{{ $mockTest->exam_url ?? '' }}" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @else
                                    <table class="table table-striped table-bordered">
                                        <thead class="thead-dark">
                                            <tr class="text-center">
                                                <th colspan="3">Paper Format for Speaking</th>
                                            </tr>
                                            <tr>
                                                <th scope="col" class="w-25">Part</th>
                                                <th scope="col" class="w-25">Bunch</th>
                                                <th scope="col" class="w-25">Question</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $part = ['1', '2', '3'];
                                            @endphp
                                            @foreach ($part as $value)
                                                <tr id="paperformat-part{{ $value }}">
                                                    <td>Part {{ $value }}</td>
                                                    <td>
                                                        <div class="form-check form-switch">
                                                            <input name="paperformat[part{{ $value }}][bunch]"
                                                                type="number" class="form-control bunch-input"
                                                                data-part="part{{ $value }}">
                                                        </div>
                                                    </td>
                                                    <td class="bunch-questions">

                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @endif
                            @endif

                            {{-- Writing --}}
                            @if ($mockTest->category_id == 3)
                                <div class="card tab-pane border {{ $mockTest->category_id == 3 ? 'active' : '' }}"
                                    id="tabs-3" role="tabpanel">
                                    <div class="card-header">
                                        <ul class="nav nav-tabs" role="tablist">
                                            @php
                                                $nestedNavItems1 = [
                                                    [
                                                        'id' => 'tabs-nest-31',
                                                        'icon' => 'fas fa-book-open',
                                                        'label' => 'Part 1',
                                                    ],
                                                    [
                                                        'id' => 'tabs-nest-32',
                                                        'icon' => 'fas fa-file-audio',
                                                        'label' => 'Part 2',
                                                    ],
                                                    [
                                                        'id' => 'tabs-nest-33',
                                                        'icon' => 'fas fa-tag',
                                                        'label' => 'Add on',
                                                    ],
                                                ];
                                            @endphp
                                            @foreach ($nestedNavItems1 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-nest-31" role="tabpanel">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="paragraph">Paragraph</label>
                                                    <textarea id="part1" name="reading[part1][paragraph]" class="form-control">{{ isset($jsonData['part1']['paragraph']) ? $jsonData['part1']['paragraph'] : '' }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card tab-pane border" id="tabs-nest-32" role="tabpanel">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="paragraph">Paragraph</label>
                                                    <textarea id="part2" name="reading[part2][paragraph]" class="form-control">{{ isset($jsonData['part2']['paragraph']) ? $jsonData['part2']['paragraph'] : '' }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card tab-pane border" id="tabs-nest-33" role="tabpanel">
                                            <div class="card-header">
                                                Addition information
                                            </div>
                                            <div class="card-body row">
                                                <div class="row">
                                                    <div class="form-group col-4">
                                                        <label>Difficulty Type:</label>
                                                        <select class="form-control" name="reading[difficulty]">
                                                            <option value="">Choose Type</option>
                                                            <option value="Easy"
                                                                {{ isset($jsonData['difficulty']) && $jsonData['difficulty'] == 'Easy' ? 'selected' : '' }}>
                                                                Easy</option>
                                                            <option value="Medium"
                                                                {{ isset($jsonData['difficulty']) && $jsonData['difficulty'] == 'Medium' ? 'selected' : '' }}>
                                                                Medium</option>
                                                            <option value="Hard"
                                                                {{ isset($jsonData['difficulty']) && $jsonData['difficulty'] == 'Hard' ? 'selected' : '' }}>
                                                                Hard</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group col-4">
                                                        <label>Status:</label>
                                                        <select class="form-control" name="status">
                                                            <option value="">Choose Status</option>
                                                            <option value="0"
                                                                {{ isset($mockTest->status) && $mockTest->status == '0' ? 'selected' : '' }}>
                                                                De-Active</option>
                                                            <option value="1"
                                                                {{ isset($mockTest->status) && $mockTest->status == '1' ? 'selected' : '' }}>
                                                                Active</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group col-12">
                                                        <label>Tags:</label>
                                                        <input data-role="tagsinput" class="form-control tagsclass"
                                                            type="text" placeholder="Enter your question Paper Tag"
                                                            name="reading[tag]"
                                                            value="{{ isset($jsonData['tag']) ? $jsonData['tag'] : '' }}" />
                                                    </div>
                                                    <div class="form-group col-12">
                                                        <label>Soucre:</label>
                                                        <input class="form-control" type="text"
                                                            placeholder="Enter Website Url" name="exam_url"
                                                            value="{{ $mockTest->exam_url ?? '' }}" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            {{-- Reading --}}
                            @if ($mockTest->category_id == 4)
                                @if (!empty($jsonData))
                                    <div class="card tab-pane border {{ $mockTest->category_id == 4 ? 'active' : '' }}"
                                        id="tabs-4" role="tabpanel">
                                        <div class="card-header">
                                            <ul class="nav nav-tabs" role="tablist">
                                                @php
                                                    $nestedNavItems1 = [
                                                        [
                                                            'id' => 'tabs-nest-41',
                                                            'icon' => 'fas fa-book-open',
                                                            'label' => 'Part 1',
                                                        ],
                                                        [
                                                            'id' => 'tabs-nest-42',
                                                            'icon' => 'fas fa-file-audio',
                                                            'label' => 'Part 2',
                                                        ],
                                                        [
                                                            'id' => 'tabs-nest-43',
                                                            'icon' => 'fas fa-pen',
                                                            'label' => 'Part 3',
                                                        ],
                                                        [
                                                            'id' => 'tabs-nest-44',
                                                            'icon' => 'fas fa-tag',
                                                            'label' => 'Add on',
                                                        ],
                                                    ];
                                                @endphp
                                                @foreach ($nestedNavItems1 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">
                                            @if (!empty($jsonData))
                                                @foreach ($jsonData as $partKey => $part)
                                                    @isset($part['bunch'])
                                                        <div class="card tab-pane border {{ $loop->iteration == 1 ? 'active' : '' }}"
                                                            id="tabs-nest-4{{ $loop->iteration }}" role="tabpanel">
                                                            <div class="card-header">
                                                                @php $range = '' @endphp
                                                                {{ ucwords($partKey) }} ({{ $range }} Question)
                                                            </div>
                                                            <div class="card-body row">
                                                                <div class="col-12">
                                                                    <div class="form-group">
                                                                        <label for="paragraph">Paragraph</label>
                                                                        <p>Read the text below and answer questions
                                                                            {{ $range }}</p>
                                                                        <input type="hidden" value="{{ $partKey }}"
                                                                            class="parent-part">

                                                                        <textarea id="{{ $partKey }}" rows="3" name="reading[{{ $partKey }}][paragraph]"
                                                                            class="form-control">{{ $part['paragraph'] ?? '' }}</textarea>
                                                                    </div>
                                                                </div>
                                                                <div class="col-12">
                                                                    <div class="form-group ml-5">
                                                                        <label for="questions">Question/Answers</label>
                                                                    </div>

                                                                    @foreach ($part['bunch'] as $key => $bunch)
                                                                        @if (isset($bunch['questions'][0]))
                                                                            @php
                                                                                if (isset($bunch['merge'])) {
                                                                                    $start = $bunch['questions'][0];
                                                                                    $end = $start;
                                                                                    $mergekey = 1;
                                                                                } else {
                                                                                    $start = $bunch['questions'][0];
                                                                                    $end = $bunch['questions'][1];
                                                                                    $mergekey = 0;
                                                                                }
                                                                                $visible_key =
                                                                                    $bunch['questions'][0] .
                                                                                    ' - ' .
                                                                                    $bunch['questions'][1];
                                                                                if (
                                                                                    $bunch['questions'][0] ==
                                                                                    $bunch['questions'][1]
                                                                                ) {
                                                                                    $visible_key =
                                                                                        $bunch['questions'][0];
                                                                                }
                                                                            @endphp
                                                                        @else
                                                                            @php
                                                                                $start = key($bunch['questions']);
                                                                                $end = array_key_last(
                                                                                    $bunch['questions'],
                                                                                );
                                                                            @endphp
                                                                        @endif
                                                                        <div class="ml-5 row ">
                                                                            <div class="form-group col-md-6">
                                                                                <input class="form-control" type="hidden"
                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][visible_key]"
                                                                                    value="{{ !empty($bunch['visible_key']) ? $bunch['visible_key'] : $visible_key }}">
                                                                                <input class="form-control" type="hidden"
                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][mergekey]"
                                                                                    value="{{ isset($bunch['mergekey']) ? $bunch['mergekey'] : $mergekey }}">
                                                                                <label class="font-weight-bold">
                                                                                    Heading for Bunch:
                                                                                    <span
                                                                                        class="text-muted">({{ !empty($bunch['visible_key']) ? $bunch['visible_key'] : $visible_key }}
                                                                                        Question)</span>
                                                                                </label>
                                                                                <textarea rows="3" name="reading[{{ $partKey }}][bunch][{{ $key }}][heading]"
                                                                                    class="bunchheading form-control">{{ $bunch['heading'] ?? '' }}</textarea>
                                                                            </div>
                                                                        </div>
                                                                        @if (isset($bunch['textarea']))
                                                                            <div class="form-group col-md-12">
                                                                                <label class="font-weight-bold">Textarea
                                                                                    Content:
                                                                                    <span
                                                                                        class="text-muted">({{ !empty($bunch['visible_key']) ? $bunch['visible_key'] : $visible_key }}
                                                                                        Question)</span></label>
                                                                                <textarea rows="3" name="reading[{{ $partKey }}][bunch][{{ $key }}][textarea]"
                                                                                    class="bunchheading form-control">{{ $bunch['textarea'] ?? '' }}</textarea>
                                                                            </div>
                                                                        @endif
                                                                        <div class="row">
                                                                            @for ($i = $start; $i <= $end; $i++)
                                                                                <div class="card mb-3 ml-5 col-5">
                                                                                    <div class="card-body">
                                                                                        <div class="form-row"
                                                                                            id="{{ $i }}">
                                                                                            @if (!isset($bunch['textarea']))
                                                                                                <div class="form-group col-4">
                                                                                                    <label>Question Type:
                                                                                                        {{ $i }}</label>

                                                                                                    <select
                                                                                                        class="form-control answer-type"
                                                                                                        name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][type]">
                                                                                                        <option value="">
                                                                                                            Choose
                                                                                                            One Type</option>
                                                                                                        <option value="radio"
                                                                                                            {{ isset($bunch['questions'][$i]['type']) && $bunch['questions'][$i]['type'] == 'radio' ? 'selected' : '' }}>
                                                                                                            Radio</option>
                                                                                                        <option
                                                                                                            value="dropdown"
                                                                                                            {{ isset($bunch['questions'][$i]['type']) && $bunch['questions'][$i]['type'] == 'dropdown' ? 'selected' : '' }}>
                                                                                                            Drop down</option>
                                                                                                        <option
                                                                                                            value="checkbox"
                                                                                                            {{ isset($bunch['questions'][$i]['type']) && $bunch['questions'][$i]['type'] == 'checkbox' ? 'selected' : '' }}>
                                                                                                            CheckBox</option>
                                                                                                        <option value="input"
                                                                                                            {{ isset($bunch['questions'][$i]['type']) && $bunch['questions'][$i]['type'] == 'input' ? 'selected' : '' }}>
                                                                                                            Fill in the Blank
                                                                                                        </option>
                                                                                                    </select>
                                                                                                </div>
                                                                                                <div class="form-group col-12">
                                                                                                    <label>
                                                                                                        Question:
                                                                                                        {{ $i }}
                                                                                                        <i class="fas fa-key key-icon"
                                                                                                            data-toggle="tooltip"
                                                                                                            title="Click to insert '{answers}'"></i>
                                                                                                    </label>
                                                                                                    <textarea rows="3" placeholder="Enter your question [answers]"
                                                                                                        name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][ques]"
                                                                                                        class="bunchheading form-control">
                                                                                                    {{ $bunch['questions'][$i]['ques'] ?? '' }}
                                                                                                </textarea>
                                                                                                    {{-- <input class="form-control"
                                                                                                type="text"
                                                                                                placeholder="Enter your question [answers]"
                                                                                                name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][ques]"
                                                                                                value="{{ $bunch['questions'][$i]['ques'] ?? '' }}" /> --}}
                                                                                                </div>
                                                                                            @endif
                                                                                            <div
                                                                                                class="form-group col-4 answers">
                                                                                                <label class="answers">Answer:
                                                                                                    {{ $i }}</label>
                                                                                                @php
                                                                                                    $answerValue = isset(
                                                                                                        $bunch[
                                                                                                            'questions'
                                                                                                        ][$i][
                                                                                                            'answers'
                                                                                                        ],
                                                                                                    )
                                                                                                        ? $bunch[
                                                                                                            'questions'
                                                                                                        ][$i]['answers']
                                                                                                        : '';
                                                                                                @endphp

                                                                                                <input
                                                                                                    class="form-control answers"
                                                                                                    type="text"
                                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][answers]"
                                                                                                    placeholder="Enter your Answer"
                                                                                                    value="{{ is_array($answerValue) ? '' : htmlspecialchars($answerValue) }}">
                                                                                            </div>

                                                                                            <div class="form-group col-2 option-inputs"
                                                                                                style="display: none;">
                                                                                                <label>Number of Inputs:</label>
                                                                                                <input type="number"
                                                                                                    class="form-control"
                                                                                                    data-bunch="{{ $key }}"
                                                                                                    placeholder="Enter number of inputs"
                                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][count]"
                                                                                                    value="{{ $bunch['questions'][$i]['count'] ?? '' }}">
                                                                                            </div>

                                                                                            <div class="form-group col-3">
                                                                                                <div class="options-container">
                                                                                                    @if (isset($bunch['questions'][$i]['count']) && !empty($bunch['questions'][$i]['count']))
                                                                                                        @php
                                                                                                            $answers = isset(
                                                                                                                $bunch[
                                                                                                                    'questions'
                                                                                                                ][$i][
                                                                                                                    'answers'
                                                                                                                ],
                                                                                                            )
                                                                                                                ? $bunch[
                                                                                                                    'questions'
                                                                                                                ][$i][
                                                                                                                    'answers'
                                                                                                                ]
                                                                                                                : [];
                                                                                                        @endphp

                                                                                                        @for ($j = 1; $j <= $bunch['questions'][$i]['count']; $j++)
                                                                                                            @php
                                                                                                                $type =
                                                                                                                    $bunch[
                                                                                                                        'questions'
                                                                                                                    ][
                                                                                                                        $i
                                                                                                                    ][
                                                                                                                        'type'
                                                                                                                    ];
                                                                                                                if (
                                                                                                                    $type ==
                                                                                                                    'dropdown'
                                                                                                                ) {
                                                                                                                    $type =
                                                                                                                        'radio';
                                                                                                                }
                                                                                                            @endphp

                                                                                                            <label>
                                                                                                                <input
                                                                                                                    type="{{ $type }}"
                                                                                                                    value="{{ $j }}"
                                                                                                                    @if (in_array($j, $answers)) checked @endif
                                                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][answers][{{ $type != 'radio' ? $j : 0 }}]">
                                                                                                                Option
                                                                                                                {{ $j }}
                                                                                                                <input
                                                                                                                    type="text"
                                                                                                                    class="form-control"
                                                                                                                    placeholder="Option {{ $j }}"
                                                                                                                    name="reading[{{ $partKey }}][bunch][{{ $key }}][questions][{{ $i }}][option][{{ $j }}]"
                                                                                                                    value="{{ isset($bunch['questions'][$i]['option'][$j]) ? $bunch['questions'][$i]['option'][$j] : '' }}">
                                                                                                            </label>
                                                                                                        @endfor
                                                                                                    @endif
                                                                                                </div>

                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            @endfor
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endisset
                                                @endforeach
                                                <div class="card tab-pane border" id="tabs-nest-44" role="tabpanel">
                                                    <div class="card-header">
                                                        Addition information
                                                    </div>
                                                    <div class="card-body row">
                                                        <div class="row">
                                                            <div class="form-group col-4">
                                                                <label>Difficulty Type:</label>
                                                                <select class="form-control" name="reading[difficulty]">
                                                                    <option value="">Choose Type</option>
                                                                    <option value="Easy"
                                                                        {{ isset($jsonData['difficulty']) && $jsonData['difficulty'] == 'Easy' ? 'selected' : '' }}>
                                                                        Easy</option>
                                                                    <option value="Medium"
                                                                        {{ isset($jsonData['difficulty']) && $jsonData['difficulty'] == 'Medium' ? 'selected' : '' }}>
                                                                        Medium</option>
                                                                    <option value="Hard"
                                                                        {{ isset($jsonData['difficulty']) && $jsonData['difficulty'] == 'Hard' ? 'selected' : '' }}>
                                                                        Hard</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-4">
                                                                <label>Status:</label>
                                                                <select class="form-control" name="status">
                                                                    <option value="">Choose Status</option>
                                                                    <option value="0"
                                                                        {{ isset($mockTest->status) && $mockTest->status == '0' ? 'selected' : '' }}>
                                                                        De-Active</option>
                                                                    <option value="1"
                                                                        {{ isset($mockTest->status) && $mockTest->status == '1' ? 'selected' : '' }}>
                                                                        Active</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-12">
                                                                <label>Tags:</label>
                                                                <input data-role="tagsinput"
                                                                    class="form-control tagsclass" type="text"
                                                                    placeholder="Enter your question Paper Tag"
                                                                    name="reading[tag]"
                                                                    value="{{ isset($jsonData['tag']) ? $jsonData['tag'] : '' }}" />
                                                            </div>
                                                            <div class="form-group col-12">
                                                                <label>Soucre:</label>
                                                                <input class="form-control" type="text"
                                                                    placeholder="Enter Website Url" name="exam_url"
                                                                    value="{{ $mockTest->exam_url ?? '' }}" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @else
                                    <table class="table table-striped table-bordered">
                                        <thead class="thead-dark">
                                            <tr class="text-center">
                                                <th colspan="3">Paper Format for Reading</th>
                                            </tr>
                                            <tr>
                                                <th scope="col" class="w-25">Part</th>
                                                <th scope="col" class="w-25">Bunch</th>
                                                <th scope="col" class="w-25">Question</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $part = ['1', '2', '3'];
                                            @endphp
                                            @foreach ($part as $value)
                                                <tr id="paperformat-part{{ $value }}">
                                                    <td>Part {{ $value }}</td>
                                                    <td>
                                                        <div class="form-check form-switch">
                                                            <input name="paperformat[part{{ $value }}][bunch]"
                                                                type="number" class="form-control bunch-input"
                                                                data-part="part{{ $value }}">
                                                        </div>
                                                    </td>
                                                    <td class="bunch-questions">

                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @endif
                            @endif
                        </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">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css">
    <x-map.leaflet.map_links />
    <x-map.leaflet.autocomplete_links />
    <style>
        /* Ensure proper styling of tags */
        .bootstrap-tagsinput {
            width: 100%;
        }

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

        .label-danger {
            background-color: #d9534f;
        }

        /* Adjust other tag styles as needed */
    </style>
    @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="{{ asset('backend/css/filemanger/filemanager.js') }}"></script>
    <script src="{{ asset('tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.bunch-input').on('keyup', function() {
                var part = $(this).data('part');
                var bunch = parseInt($(this).val());

                $('#paperformat-' + part + ' .bunch-question-row').remove();

                for (var i = 0; i < bunch; i++) {
                    var formValue = 1;
                    if (part != 'part1') {
                        var prevPart = parseInt(part.substr(4)) - 1;
                        var prevToValue = parseInt($('#paperformat-part' + prevPart + ' .to-input:last')
                            .val());
                        formValue = prevToValue + 1;
                    }
                    var input1 =
                        `<label for="">Form</label><input name="paperformat[${part}][bunch][${i}][questions][]" type="text" id="ques-${part}-${i}-form" value="${formValue}" class="form-control bunch-question-input form-input" placeholder="Question form for Bunch ${(i + 1)}" readonly>`;
                    var input2 =
                        `<label for="">To</label><input name="paperformat[${part}][bunch][${i}][questions][]" type="text" id="ques-${part}-${i}-to" class="form-control bunch-question-input to-input" placeholder="Question to for Bunch ${(i + 1)}">`;

                    var mergeCheckbox =
                        `<label>Merge</label><br><input type="checkbox" value="1" name="paperformat[${part}][bunch][${i}][merge]">`;

                    var textarea =
                        `<label>Text area</label><br><input type="checkbox" value="1" name="paperformat[${part}][bunch][${i}][textarea]">`;

                    $('#paperformat-' + part + ' .bunch-questions').append(
                        '<tr class="bunch-question-row"><td>' + input1 + '</td><td>' + input2 +
                        '</td><td>' + mergeCheckbox + '</td><td>' + textarea + '</td></tr>');

                }
            });


            $('.bunch-questions').on('focusout', '.to-input', function() {
                var row = $(this).closest('.bunch-question-row');
                var toInput = parseInt($(this).val());
                var formInput = parseInt(row.find('.form-input').val());

                if (isNaN(toInput) || toInput <= 0) {
                    $(this).val('');
                    return;
                }

                if (!isNaN(formInput) && formInput > 40) {
                    alert("Form Input can't be greater than 40");
                    $(this).val(40);
                    formInput = 40;
                }

                if (!isNaN(toInput) && toInput > 40) {
                    alert("To Input can't be greater than 40");
                    $(this).val(40);
                    toInput = 39;
                }

                if (!isNaN(formInput) && toInput < formInput) {
                    alert("To Input Can't be less than or equal to Form Input");
                    $(this).val(formInput + 1);
                    toInput = formInput + 1;
                }

                var nextQuestion = toInput + 1;
                row.next().find('.form-input').val(nextQuestion);
            });

            $("#myForm").submit(function(event) {
                event.preventDefault();
                var errorMessages = [];

                // $("#myForm select").each(function() {
                //     var value = $(this).val().trim();
                //     var label = $(this).prev('label').text();
                //     var errorMessage = label + " is required";

                //     if (!value) {
                //         errorMessages.push(errorMessage);
                //         $(this).addClass('is-invalid');
                //     } else {
                //         $(this).removeClass(
                //             'is-invalid');
                //     }
                // });

                // $("#myForm input[type='text']:visible, #myForm input[type='number']:visible").each(function() {

                //     if ($(this).closest('.bootstrap-tagsinput').length > 0) {
                //             return; // Skip to the next iteration
                //     }
                //     console.log(this);
                //     console.log($(this).hasClass('tagsclass'));
                //     var value = $(this).val().trim();
                //     var label = $(this).prev('label').text().trim(); // Ensure label text is trimmed
                //     var errorMessage = label + " is required";

                //     if (value === "") {
                //         errorMessages.push(errorMessage);
                //         $(this).addClass('is-invalid');
                //     } else {
                //         $(this).removeClass('is-invalid');
                //     }
                // });

                // $(".invalid-feedback").remove();

                // if (errorMessages.length > 0) {

                //     $("#errorMessages").empty();

                //     errorMessages.forEach(function(message, index) {
                //         $("#errorMessages").append("<p>" + message + "</p>");
                //         var inputField = $(
                //             "#myForm input[type='text']:visible, #myForm input[type='number']:visible"
                //         ).eq(index);
                //         inputField.after("<div class='invalid-feedback'>" + message + "</div>");
                //     });

                //     var firstErrorInput = $("#myForm input.is-invalid").first();
                //     firstErrorInput.focus();
                // } else {
                //     $("#myForm")[0].submit();
                // }
                $("#myForm")[0].submit();
            })

            $('.key-icon').click(function() {
                var inputField = $(this).closest('.form-group').find('input[type="text"]');
                var currentValue = inputField.val();
                var appendedValue = "{answers}";
                inputField.val(currentValue + appendedValue);
            });

            function handleDynamicInputs() {
                function handleChange() {
                    let selectedType = $(this).val();
                    let optionInputs = $(this).closest('.form-row').find('.option-inputs');
                    let answerInput = $(this).closest('.form-row').find('.answers');
                    let keyIcon = $(this).closest('.form-row').find('.key-icon');
                    if (selectedType != 'input' && selectedType != '') {
                        optionInputs.show();
                        answerInput.hide();
                        keyIcon.hide();
                        if (selectedType == 'dropdown') keyIcon.show();
                        answerInput.prop('disabled', true);
                    } else {

                        optionInputs.find('input[type="number"]').val('');
                        optionInputs.hide();
                        $(this).closest('.form-row').find('.options-container').empty();
                        answerInput.show();
                        keyIcon.show();
                        answerInput.prop('disabled', false);
                    }
                }

                $('.answer-type').change(handleChange);

                function handleKeyup() {
                    let count = parseInt($(this).val());
                    let answerType = $(this).closest('.form-row').find('.answer-type').val();
                    if (answerType === 'dropdown') {
                        answerType = 'radio';
                    }
                    let inputType = answerType === 'radio' ? 'radio' : 'checkbox';
                    let part = $(this).closest('.tab-pane').find('.parent-part').val();
                    console.log(part);
                    let bunch = $(this).data('bunch');

                    if (count >= 2 && count <= 15) {
                        let optionInputsContainer = $(this).closest('.form-row').find('.options-container');
                        optionInputsContainer.empty();
                        optionInputsContainer.append(`<label class="mt-2">Create the Options</label>`);
                        for (let i = 1; i <= count; i++) {
                            optionInputsContainer.append(`
                                <label>
                                    <input type="${inputType}" name="reading[${part}][bunch][${bunch}][questions][${$(this).closest('.form-row').attr('id')}][answers][${inputType != 'radio' ? i : 0}]" value="${i}">
                                    Option ${i}
                                    <input type="text" class="form-control" name="reading[${part}][bunch][${bunch}][questions][${$(this).closest('.form-row').attr('id')}][option][${i}]" placeholder="Option ${i}">
                                </label>
                            `);
                        }
                    }
                }
                $('.option-inputs input[type="number"]').keyup(handleKeyup);

                $('.answer-type').trigger('change');
            }

            handleDynamicInputs();

            for (var i = 1; i < 10; i++) {
                tinymce.init({
                    selector: `#part${i}`,
                    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount code imagetools fontawesome',
                    toolbar: 'fontawesome | searchreplace | code |undo redo | blocks |bold italic underline strikethrough | align | link image media table | numlist bullist indent outdent',
                    image_advtab: true,
                    valid_elements: '*[*]',
                    valid_children: '*[*]',
                    extended_valid_elements: '*[*]',
                    images_upload_handler: function(blobInfo, success, failure) {
                        return new Promise(function(resolve, reject) {
                            var xhr = new XMLHttpRequest();
                            xhr.withCredentials = false;
                            xhr.open('POST', '{{ route('mocktest.upload') }}', true);
                            xhr.onload = function() {
                                var response = JSON.parse(xhr.responseText);
                                if (response.status === 200) {
                                    var serverURL = window.location.protocol + '//' + window
                                        .location.hostname + ':' + window.location.port;
                                    var imageURL = response.location;
                                    success(imageURL);
                                    resolve(imageURL);
                                } else if (response.status === 403) {
                                    reject(response.message);
                                }
                            };
                            xhr.onerror = function() {
                                reject('An error occurred during the image upload.');
                            };
                            var formData = new FormData();
                            formData.append('file', blobInfo.blob(), blobInfo.filename());
                            formData.append('_token', $('meta[name="csrf-token"]').attr(
                                'content'));
                            xhr.send(formData);
                        });
                    }
                });
            }


            tinymce.init({
                selector: `.bunchheading`,
                plugins: 'image link lists media searchreplace table visualblocks wordcount code imagetools fontawesome',
                toolbar: 'fontawesome | searchreplace | code |undo redo | blocks |bold italic underline strikethrough | align | link image media table | numlist bullist indent outdent',
                image_advtab: true,
                valid_elements: '*[*]',
                valid_children: '*[*]',
                extended_valid_elements: '*[*]',
                images_upload_handler: function(blobInfo, success, failure) {
                    return new Promise(function(resolve, reject) {
                        var xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST', '{{ route('mocktest.upload') }}', true);
                        xhr.onload = function() {
                            var response = JSON.parse(xhr.responseText);
                            if (response.status === 200) {
                                var serverURL = window.location.protocol + '//' + window
                                    .location.hostname + ':' + window.location.port;
                                var imageURL = response.location;
                                success(imageURL);
                                resolve(imageURL);
                            } else if (response.status === 403) {
                                reject(response.message);
                            }
                        };
                        xhr.onerror = function() {
                            reject('An error occurred during the image upload.');
                        };
                        var formData = new FormData();
                        formData.append('file', blobInfo.blob(), blobInfo.filename());
                        formData.append('_token', $('meta[name="csrf-token"]').attr(
                            'content'));
                        xhr.send(formData);
                    });
                }
            })
        });

        $(document).ready(function() {
            // Get the tags items as an array
            var tagsItems = "{{ $jsonData['tag'] ?? '' }}".split(',');

            // Loop through the tags items and add them to the Bootstrap Tags Input field
            $.each(tagsItems, function(index, tag) {
                $(".tagsclass").tagsinput('add', tag.trim());
            });

            var tagElements = document.querySelectorAll('.bootstrap-tagsinput .tag');

        });
    </script>
@endsection