@extends('admin.layouts.app')
@section('title')
    {{ __('create') }}
@endsection
@section('content')
    <style>
        /* body {
                    font-family: Arial;
                } */

        /* Style the tab */
        .tab {
            overflow: hidden;
            /* border: 1px solid #ccc; */
            background-color: #f1f1f1;
        }

        /* Style the buttons inside the tab */
        .tab p {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
            margin: 0px;
        }

        /* Change background color of buttons on hover */
        .tab p:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab p.active {
            background-color: #ccc;
        }

        /* Style the tab content */
        .tabcontent {
            display: none;
            /* padding: 6px 12px; */
            border: 0px solid #ccc;
            border-top: none;
            border-radius: 0px 0px 10px 10px;
        }

        .tabcontent_new {
            display: none;
            padding: 0px 0px;
            border: 0px solid #ccc;
            border-top: none;
            border-radius: 0px 0px 10px 10px;
        }

        .show_div_test {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .tablinks {
            display: inline;
            width: 200px;
        }

        .scroll-container {
            overflow-x: auto;
            /* Enable horizontal scrolling */
            white-space: nowrap;
            /* Prevent content from wrapping */
            width: 100%;
            /* Set width to 100% of parent container */
            cursor: grab;
            /* Set cursor to grab when hovering over container */
        }

        .scroll-container:active {
            cursor: grabbing;
            /* Change cursor to grabbing when container is clicked */
        }

        .scroll-container::-webkit-scrollbar {
            width: 8px;
            /* Set the width of the scrollbar */
        }

        .scroll-container::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.5);
            /* Color of the thumb */
            border-radius: 4px;
            /* Rounded corners */
        }

        .scroll-container::-webkit-scrollbar-track {
            background-color: rgba(0, 0, 0, 0.1);
            /* Color of the track */
        }

        /* For Firefox */
        .scroll-container {
            scrollbar-width: thin;
            /* Thin scrollbar */
        }

        .scroll-container::-webkit-scrollbar {
            width: 8px;
            /* Set the width of the scrollbar */
            height: 2px;
            /* Set the height of the scrollbar */
        }

        .scroll-container::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.5);
            /* Color of the thumb */
            border-radius: 4px;
            /* Rounded corners */
        }

        .scroll-container::-webkit-scrollbar-track {
            background-color: rgba(0, 0, 0, 0.1);
            /* Color of the track */
        }

        hr {
            margin: 0px !important;
            padding: 0px;
            height: 2px;
            background: black;
        }
    </style>
    @php $start_with = 1; @endphp
    @if (userCan('test_preparation_course.update'))
        <div class="">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">

                        <div class="card-body">
                            <div class="row justify-content-center">
                                <div class="col-md-12">
                                    <form action="{{ route('test_preparation_courses_detail.update', @$course['id']) }}"
                                        method="POST">
                                        @csrf
                                        @method('PUT')
                                        <div class="scroll-container">
                                            <div class="tab row " style="display: flex;  width: max-content;">
                                                @foreach ($course_detail as $detail)
                                                    <p class="tablinks

                                                        @if (old('day_id') !== null) @if (old('day_id') == $detail['id'])
                                                            active @endif
@else
@if ($loop->iteration == 1) active @endif
                                                        @endif
                                                        "
                                                        onclick="openCity(event, 'show{{ $detail['id'] }}')"
                                                        style="text-align: center;">
                                                        {{ $detail['day'] }} Day</p>
                                                @endforeach
                                            </div>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @foreach ($course_detail as $detail)
            @php
                $detail_description = json_decode(@$detail['description'], true);
                $des_serial = 1;
                $task_description = json_decode(@$detail['task_description'], true);
                @$study_material = json_decode(@$detail['study_material'], true);

                if ($detail_description != null) {
                    $start_with = $start_with + count($detail_description);
                }
                if ($task_description != null) {
                    $start_with = $start_with + count($task_description);
                }
                if (@$study_material != null) {
                    // dd(count($study_material));
                    $start_with = $start_with + count(@$study_material);
                }

            @endphp

            <form action="{{ route('test_preparation_courses_detail.update', @$course['id']) }}" method="POST"
                class="submit_form">
                @csrf
                @method('PUT')
                <input type="text" name="day_id" value="{{ $detail['id'] }}" hidden>
                <div id="show{{ $detail['id'] }}" class="tabcontent"
                    @if (old('day_id') !== null) @if (old('day_id') == $detail['id'])
                        
                            style="display:block;" @endif
                @else @if ($loop->iteration == 1) style="display:block;" @endif @endif

                    >
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-body">
                                    <div>
                                        <div class="form-row">
                                            <h6> Class{{ $detail['day'] }} Work</h6>
                                        </div>
                                        <hr>
                                        <div class="form-row mt-2">
                                            <div class="form-group col-12 col-md-6 col-lg-4">
                                                <label for="module_name{{ $detail['id'] }}">Module Name</label>
                                                <input type="text" class="form-control"
                                                    id="module_name{{ $detail['id'] }}" name="module_name"
                                                    @if (old('day_id') == $detail['id']) value="{{ old('module_name') }}" @else value="{{ $detail['module_name'] }}" @endif
                                                    placeholder="Module Name">
                                            </div>

                                            <div class="form-group col-12 col-md-6 col-lg-4">
                                                <label for="topic{{ $detail['id'] }}">Class Name</label>
                                                <input type="text" class="form-control" id="topic{{ $detail['id'] }}"
                                                    name="topic"
                                                    @if (old('day_id') == $detail['id']) value="{{ old('topic') }}" @else value="{{ $detail['topic'] }}" @endif
                                                    placeholder="Class Name">
                                            </div>
                                            <div class="form-group col-12 col-md-6 col-lg-4">
                                                <label for="duration{{ $detail['id'] }}">Duration</label>
                                                <input type="text" class="form-control" id="duration{{ $detail['id'] }}"
                                                    name="duration"
                                                    @if (old('day_id') == $detail['id']) value="{{ old('duration') }}" @else value="{{ $detail['duration'] }}" @endif
                                                    placeholder="Duration Name">
                                            </div>
                                            <div class="form-group col-12 col-md-6 col-lg-4">
                                                <label for="recording_status{{ $detail['recording_status'] }}">Recording
                                                    Status</label>
                                                <select class="form-control"
                                                    id="recording_status{{ $detail['recording_status'] }}"
                                                    name="recording_status">
                                                    <option value=""
                                                        @if (old('day_id') == $detail['id']) {{ old('recording_status') == '' ? 'selected' : '' }} @else {{ $detail['recording_status'] == '' ? 'selected' : '' }} @endif>
                                                        Select Recording Status</option>
                                                    <option value="1"
                                                        @if (old('day_id') == $detail['id']) {{ old('recording_status') == 1 ? 'selected' : '' }} @else {{ $detail['recording_status'] == 1 ? 'selected' : '' }} @endif>
                                                        Yes</option>
                                                    <option value="0"
                                                        @if (old('day_id') == $detail['id']) {{ old('recording_status') == 0 ? 'selected' : '' }} @else {{ $detail['recording_status'] == 0 ? 'selected' : '' }} @endif>
                                                        No</option>
                                                </select>
                                            </div>
                                            <div class="form-group col-12 col-md-12 col-lg-12 col-xl-12">
                                                <label for="class_des{{ $detail['id'] }}">class Description</label>
                                                <div class=""
                                                    style="border: 1px solid rgb(218, 207, 207); border-radius:10px;">

                                                    <table id="class_des{{ $detail['id'] }}" class="table">
                                                        <thead>
                                                            <tr>
                                                                <th scope="col">Type</th>
                                                                <th scope="col"> Task Name</th>
                                                                <th scope="col">Duration</th>
                                                                <th scope="col">link</th>
                                                                <th scope="col">Action</th>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="5">
                                                                    <p class="btn btn-primary add-row p-1"
                                                                        data-table="class_des{{ $detail['id'] }}">Add Row
                                                                    </p>
                                                                </td>

                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @if ($detail_description === null)
                                                            @else
                                                                @foreach ($detail_description as $description)
                                                                    <tr>
                                                                        <td>
                                                                            <select class="form-control"
                                                                                name="class_des{{ @$detail['id'] }}[{{ $des_serial }}][type]"
                                                                                id="type_class_des{{ @$detail['id'] }}_{{ @$des_serial }}"
                                                                                onchange="select_mock_test(
                                                                                'class_des{{ $detail['id'] }}[{{ $des_serial }}]',
                                                                                'type_class_des{{ $detail['id'] }}_{{ $des_serial }}',
                                                                                'class_des{{ $detail['id'] }}_{{ $des_serial }}')
                                                                                ">
                                                                                <option value="Simple task"
                                                                                    {{ @$description['type'] == 'Simple task' ? 'selected' : '' }}>
                                                                                    Simple task</option>

                                                                            </select>

                                                                        </td>

                                                                        @if (@$description['type'] == 'Simple task')
                                                                            <td
                                                                                id="name_tdclass_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                                <input type="text" class="form-control"
                                                                                    placeholder="Write Text"
                                                                                    name="class_des{{ $detail['id'] }}[{{ $des_serial }}][name]"
                                                                                    value="{{ @$description['name'] }}">
                                                                            </td>

                                                                            <td
                                                                                id="duration_tdclass_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                                <input type="text" class="form-control"
                                                                                    placeholder="Enter duration"
                                                                                    name="class_des{{ $detail['id'] }}[{{ $des_serial }}][duration]"
                                                                                    value="{{ @$description['duration'] }}">
                                                                            </td>

                                                                            <td
                                                                                id="link_tdclass_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                                <input type="text" class="form-control"
                                                                                    placeholder="Enter link"
                                                                                    name="class_des{{ $detail['id'] }}[{{ $des_serial }}][link]"
                                                                                    value="{{ @$description['link'] }}">
                                                                            </td>

                                                                            <td>
                                                                                <p class='btn btn-danger delete-row'>Delete
                                                                                </p>
                                                                            </td>
                                                                        @elseif(@$description['type'] == 'Mock test')
                                                                            <td
                                                                                id="name_tdclass_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                                <select class="form-control"
                                                                                    name="${prefix_name}[name]"
                                                                                    id="${first_td_id}">
                                                                                    @foreach ($mock_test_list as $item)
                                                                                        <option
                                                                                            value="{{ $item['id'] }}"
                                                                                            {{ @$description['name'] == $item['id'] ? 'selected' : '' }}>
                                                                                            Mock Test{{ $item['id'] }}
                                                                                        </option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </td>

                                                                            <td
                                                                                id="duration_tdclass_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                                <select class="form-control"
                                                                                    name="${prefix_name}[duration]"
                                                                                    id="${second_td_id}">
                                                                                    <option value="">All</option>
                                                                                    @foreach ($mock_test_list_category as $item)
                                                                                        <option
                                                                                            value="{{ $item['id'] }}"
                                                                                            {{ @$description['duration'] == $item['id'] ? 'selected' : '' }}>
                                                                                            {{ $item['name'] }}</option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </td>
                                                                            <td
                                                                                id="link_tdclass_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                                <input type="text" class="form-control"
                                                                                    placeholder="Enter link"
                                                                                    name="class_des{{ $detail['id'] }}[{{ $des_serial }}][link]"
                                                                                    value="{{ @$description['link'] }}">
                                                                            </td>

                                                                            <td>
                                                                                <p class='btn btn-danger delete-row'>Delete
                                                                                </p>
                                                                            </td>
                                                                        @elseif(@$description['type'] == 'Link task')
                                                                            <td
                                                                                id="name_tdclass_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                                <input type="text" class="form-control"
                                                                                    placeholder="Write Text"
                                                                                    name="class_des{{ $detail['id'] }}[{{ $des_serial }}][name]"
                                                                                    value="{{ @$description['name'] }}">
                                                                            </td>

                                                                            <td
                                                                                id="duration_tdclass_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                                <input type="text" class="form-control"
                                                                                    placeholder="Enter duration"
                                                                                    name="class_des{{ $detail['id'] }}[{{ $des_serial }}][duration]"
                                                                                    value="{{ @$description['duration'] }}">
                                                                            </td>

                                                                            <td
                                                                                id="link_tdclass_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                                <input type="text" class="form-control"
                                                                                    placeholder="Enter link"
                                                                                    name="class_des{{ $detail['id'] }}[{{ $des_serial }}][link]"
                                                                                    value="{{ @$description['link'] }}">
                                                                            </td>

                                                                            <td>
                                                                                <p class='btn btn-danger delete-row'>Delete
                                                                                </p>
                                                                            </td>
                                                                        @endif
                                                                    </tr>
                                                                    @php $des_serial++; @endphp
                                                                @endforeach
                                                            @endif


                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <div class="form-row">
                                        <h6> Home Work</h6>
                                    </div>
                                    <hr>

                                    <div class="form-row mt-2">
                                        <div class="form-group col-12 col-md-6 col-lg-4">
                                            <label for="task_module{{ $detail['id'] }}">Task Module Name</label>
                                            <input type="text" class="form-control"
                                                id="task_module{{ $detail['id'] }}" name="task_module"
                                                value="{{ old('task_module' . $detail['id'], $detail['task_module']) }}"
                                                placeholder="Write Text">
                                        </div>
                                        {{-- <div class="form-group col-12 col-md-6 col-lg-4">
                                            <label for="task_name{{ $detail['id'] }}">Task </label>
                                            <input type="text" class="form-control" id="task_name{{ $detail['id'] }}" name="task_name" value="{{ old('task_name' . $detail['id'], $detail['task_name']) }}" placeholder="Task Name">
                                        </div> --}}

                                        <div class="form-group col-12 col-md-12 col-lg-12 col-xl-12">
                                            <label for="task_name{{ $detail['id'] }}">Task Description</label>
                                            <div class=""
                                                style="border: 1px solid rgb(218, 207, 207); border-radius:10px;">

                                                <table id="task_des{{ $detail['id'] }}" class="table">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">Type</th>
                                                            <th scope="col"> Task Name</th>
                                                            <th scope="col"> Test Type</th>
                                                            <th scope="col"> Mock Test / Practice Test</th>
                                                            <th scope="col"> Practice Test Type</th>
                                                            <th scope="col">Duration</th>
                                                            <th scope="col">link</th>
                                                            <th scope="col">Action</th>
                                                        </tr>
                                                        <tr>
                                                            <td colspan="20">
                                                                <p class="btn btn-primary add-row p-1"
                                                                    data-table="task_des{{ $detail['id'] }}">Add Row</p>
                                                            </td>

                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @if ($task_description === null)
                                                        @else
                                                            @foreach ($task_description as $description)
                                                                <tr>
                                                                    <td>
                                                                        <select class="form-control"
                                                                            name="task_des{{ @$detail['id'] }}[{{ $des_serial }}][type]"
                                                                            id="type_task_des{{ @$detail['id'] }}_{{ @$des_serial }}"
                                                                            onchange="select_mock_test(
                                                                                'task_des{{ $detail['id'] }}[{{ $des_serial }}]',
                                                                                'type_task_des{{ $detail['id'] }}_{{ $des_serial }}',
                                                                                'task_des{{ $detail['id'] }}_{{ $des_serial }}')
                                                                                ">
                                                                            <option value="Simple task"
                                                                                {{ @$description['type'] == 'Simple task' ? 'selected' : '' }}>
                                                                                Simple task</option>
                                                                            <option value="Mock test"
                                                                                {{ @$description['type'] == 'Mock test' ? 'selected' : '' }}>
                                                                                Mock Test</option>
                                                                            <option value="Practice test"
                                                                                {{ @$description['type'] == 'Practice test' ? 'selected' : '' }}>
                                                                                Practice test</option>
                                                                            <option value="Link task"
                                                                                {{ @$description['type'] == 'Link task' ? 'selected' : '' }}>
                                                                                Link Task</option>
                                                                        </select>
                                                                    </td>
                                                                    <td
                                                                        id="name_tdtask_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                        <input type="text" class="form-control"
                                                                            placeholder="Write Text"
                                                                            name="task_des{{ $detail['id'] }}[{{ $des_serial }}][name]"
                                                                            value="{{ @$description['name'] }}">
                                                                    </td>


                                                                    <td
                                                                        id="test_tdtask_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                        @if (@$description['type'] == 'Mock test' || @$description['type'] == 'Practice test')
                                                                            <select class="form-control"
                                                                                @if (@$description['type'] == 'Mock test') onchange="get_test_by_category('mock',this.value,'task_des{{ $detail['id'] }}_{{ $des_serial }}','task_des{{ $detail['id'] }}[{{ $des_serial }}]')"
                                                                            @elseif(@$description['type'] == 'Practice test')
                                                                            onchange="get_test_by_category('mock',this.value,'task_des{{ $detail['id'] }}_{{ $des_serial }}','task_des{{ $detail['id'] }}[{{ $des_serial }}]')"
                                                                            @else @endif
                                                                                name="task_des{{ @$detail['id'] }}[{{ $des_serial }}][test_type]">
                                                                                <option value=""
                                                                                    {{ @$description['test_type'] == '' ? 'selected' : '' }}>
                                                                                    Select Test
                                                                                </option>
                                                                                <option value="1"
                                                                                    {{ @$description['test_type'] == 1 ? 'selected' : '' }}>
                                                                                    Accademic Test
                                                                                </option>
                                                                                <option value="2"
                                                                                    {{ @$description['test_type'] == 2 ? 'selected' : '' }}>
                                                                                    General Test
                                                                                </option>
                                                                            </select>
                                                                        @endif
                                                                    </td>

                                                                    <td
                                                                        id="mock_tdtask_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                        @if (@$description['type'] == 'Mock test' || @$description['type'] == 'Practice test')
                                                                            <select class="form-control"
                                                                                name="task_des{{ @$detail['id'] }}[{{ $des_serial }}][mock_test]">
                                                                                <option value=""> Select Test
                                                                                </option>

                                                                                @foreach ($mock_test_list as $item)
                                                                                    @if (intval(@$item['test_type']) == intval(@$description['test_type']))
                                                                                        <option
                                                                                            value="{{ $item['id'] }}"
                                                                                            {{ @$description['mock_test'] == $item['id'] ? 'selected' : '' }}>
                                                                                            @if (@$description['type'] == 'Mock test')
                                                                                                Mock Test{{ $item['id'] }}
                                                                                                @elseif(@$description['type'] == 'Practice test')
                                                                                                Practice
                                                                                                Test{{ $item['id'] }}
                                                                                            @endif
                                                                                        </option>
                                                                                    @endif
                                                                                @endforeach
                                                                            </select>
                                                                        @endif
                                                                    </td>

                                                                    <td
                                                                        id="mock_type_tdtask_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                        @if (@$description['type'] == 'Practice test')
                                                                            <select class="form-control"
                                                                                name="task_des{{ @$detail['id'] }}[{{ $des_serial }}][mock_test_type]">
                                                                                <option value="">All</option>
                                                                                @foreach ($mock_test_list_category as $item)
                                                                                    <option value="{{ $item['id'] }}"
                                                                                        {{ @$description['mock_test_type'] == $item['id'] ? 'selected' : '' }}>
                                                                                        {{ $item['name'] }}</option>
                                                                                @endforeach
                                                                            </select>
                                                                        @endif
                                                                    </td>

                                                                    <td
                                                                        id="duration_tdtask_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                        <input type="text" class="form-control"
                                                                            placeholder="Enter duration"
                                                                            name="task_des{{ $detail['id'] }}[{{ $des_serial }}][duration]"
                                                                            value="{{ @$description['duration'] }}">
                                                                    </td>

                                                                    <td
                                                                        id="link_tdtask_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                        <input type="text" class="form-control"
                                                                            placeholder="Enter link"
                                                                            name="task_des{{ $detail['id'] }}[{{ $des_serial }}][link]"
                                                                            value="{{ @$description['link'] }}">
                                                                    </td>
                                                                    </td>
                                                                    
                                                                    <td>
                                                                        <p class='btn btn-danger delete-row'>Delete</p>
                                                                    </td>
                                                                </tr>
                                                                @php $des_serial++; @endphp
                                                            @endforeach
                                                        @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>


                                        <div class="form-group col-12 col-md-12 col-lg-12 col-xl-12">
                                            <label for="study_material{{ $detail['id'] }}">Study Material</label>
                                            <div class=""
                                                style="border: 1px solid rgb(218, 207, 207); border-radius:10px;">

                                                <table id="study_material{{ $detail['id'] }}" class="table">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">File Name </th>
                                                            <th scope="col">File Path</th>
                                                            <th scope="col">Action</th>
                                                        </tr>
                                                        <tr>
                                                            <td colspan="20">
                                                                <p class="btn btn-primary add-row p-1"
                                                                    data-table="study_material{{ @$detail['id'] }}">Add
                                                                    Row</p>
                                                            </td>

                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @if (@$study_material === null)
                                                        @else
                                                            @foreach ($study_material as $study)
                                                                <tr>

                                                                    <td
                                                                        id="name_tdstudy_material{{ @$detail['id'] }}_{{ @$des_serial }}">
                                                                        <input type="text" class="form-control"
                                                                            placeholder="File Name "
                                                                            name="study_material{{ @$detail['id'] }}[{{ @$des_serial }}][file_name]"
                                                                            value="{{ @$study['file_name'] }}">
                                                                    </td>

                                                                    {{-- {{dd($study['file_path'])}} --}}
                                                                    <td
                                                                        id="mock_tdstudy_material{{ @$detail['id'] }}_{{ @$des_serial }}">
                                                                        <div class="file-upload-section">
                                                                            <div class="preview-filemanger"
                                                                                id="preview{{ $des_serial }}">
                                                                                <img src="https://placehold.jp/300x175.png" alt="Placeholder">                                                                            </div>
                                                                            <input type="hidden"
                                                                                value="{{ @$study['file_path'] }}"
                                                                                name="study_material{{ $detail['id'] }}[{{ $des_serial }}][file_path]"
                                                                                id="input{{ $des_serial }}">
                                                                            <div class="class d-flex mt-4">
                                                                                <a class="btn btn-sm btn-primary mr-2"
                                                                                    onclick="uploadMedia('preview{{ $des_serial }}','input{{ $des_serial }}','study-material/','ppt,pdf')">
                                                                                    <i class="fa fa-folder"></i> Browse
                                                                                </a>
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td>
                                                                        <p class='btn btn-danger delete-row'>Delete</p>
                                                                    </td>


                                                                </tr>
                                                                @php @$des_serial++; @endphp
                                                            @endforeach
                                                        @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>



                                    </div>
                                    <div class="row float-right">
                                        <button type="submit" class="btn btn-success">Save Data</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        @endforeach

    @endif
@endsection
@section('script')
    <script src="{{ asset('backend') }}/plugins/select2/js/select2.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js?v={{ env('CRM_VERSION') }}"
        integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        });
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        const forms = document.getElementsByClassName("submit_form");

        // Loop through the HTMLCollection
        for (let i = 0; i < forms.length; i++) {
            // Add a keypress event listener to each form
            forms[i].addEventListener("keypress", function(event) {
                if (event.key === "Enter") {
                    event.preventDefault();
                    // You can add your custom logic here, if needed
                    console.log("Enter key pressed, but default action prevented.");
                }
            });
        }
        // document.addEventListener('keydown', function(event) {
        //     if (event.ctrlKey && event.key === 's') {
        //         event.preventDefault();
        //         $('button').click();
        //     }
        // });

        $(document).ready(function() {
            $(".add-row").click(function() {
                var tableId = $(this).data("table");
                addRow(tableId);
            });

            $(document).on("click", ".delete-row", function() {
                $(this).closest("tr").remove();
                var tableId = $(this).closest("table").attr("id");
                updateRowNumbers(tableId);
            });
            var serial = 1;

            function addRow(tableId) {
                var start_with = {{ @$start_with }};
                serial = serial + start_with;

                var table = $("#" + tableId);
                var rowCount = table.find("tbody tr").length + 1;
                if (tableId.includes("task_des") || tableId.includes("class_des")) {
                    var newRow = `<tr>
                                <td>
                                    <select class="form-control" name="${tableId}[${serial}][type]" id="type_${tableId}${serial}" onchange="select_mock_test('${tableId}[${serial}]','type_${tableId}${serial}','${tableId}_${serial}')">
                                        <option value="Simple task">Simple task</option>`;

                    // Concatenate additional options if tableId includes "class_des"
                    if (tableId.includes("task_des")) {
                        newRow += `
                    
                                         <option value="Mock test">Mock Test</option>
                                        <option value="Practice test">Practice test</option>
                                        <option value="Link task">Link Task</option>`;
                    }

                    newRow +=
                        `
                                    </select>
                                </td>
                                <td id="name_td${tableId}_${serial}"><input type="text" class="form-control" placeholder="Write Text" name="${tableId}[${serial}][name]"></td>`;
                    if (tableId.includes("task_des")) {
                        newRow += `
                                <td id="test_td${tableId}_${serial}"></td>
                                <td id="mock_td${tableId}_${serial}"></td>
                                <td id="mock_type_td${tableId}_${serial}"></td>`;
                    }

                    newRow += `<td id="duration_td${tableId}_${serial}"><input type="text" class="form-control" placeholder="Enter duration" name="${tableId}[${serial}][duration]"></td>
                                <td id="link_td${tableId}_${serial}"><input type="text" class="form-control" placeholder="Enter link" name="${tableId}[${serial}][link]"></td>
                                <td><p class='btn btn-danger delete-row'>Delete</p></td>
                            </tr>`;

                    serial++
                }
                if (tableId.includes("study_material")) {
                    var newRow = `<tr>
                                   
                                    <td id="name_td${tableId}_${serial}"><input type="text" class="form-control" placeholder="File Name" name="${tableId}[${serial}][file_name]"></td>
                                    <td id="mock_td${tableId}_${serial}"> 
                                        <div class="file-upload-section">
                                            <div class="preview-filemanger" id="preview${serial}">
                                                @if (isset($data['image']))
                                                    <img src="{{ $data['image'] }}">
                                                @else
                                                <img src="https://placehold.jp/300x175.png" alt="placeholder">
                                                @endif
                                            </div>
                                            <input type="hidden" value="" name="${tableId}[${serial}][file_path]" id="input${serial}">
                                            <div class="class d-flex mt-4">
                                                <a class="btn btn-sm btn-primary mr-2" onclick="uploadMedia('preview${serial}','input${serial}','study-material/','ppt,pdf')">
                                                    <i class="fa fa-folder"></i> Browse
                                                </a>
                                            </div>
                                        </div>
                                        </td>`;

                    newRow += `
                                    <td><p class='btn btn-danger delete-row'>Delete</p></td>
                                </tr>`;
                    serial++
                }
                table.find("tbody").append(newRow);
            }

            function updateRowNumbers(tableId) {
                var table = $("#" + tableId);
                table.find("tbody tr").each(function(index) {
                    $(this).find("td:first").text(index + 1);
                });
            }
        });






        function select_mock_test(prefix_name, type_id, table_id) {
            if ($('#' + type_id).val() === "Mock test") {


                var html = `<select class="form-control" name="${prefix_name}[test_type]" id="${prefix_name}[test_type]" onchange="get_test_by_category('mock',this.value,'${table_id}','${prefix_name}')">
                            
                                <option value="">
                                    Select Test Type
                                </option>
                                <option value="1">
                                    Accademic Test
                                </option>
                                <option value="2">
                                    General Test
                                </option>
                            </select>`;

                $('#test_td' + table_id).html(html);


                $('#mock_td' + table_id).html("");
                $('#mock_type_td' + table_id).html("");

                // var html = `<select class="form-control" name="${prefix_name}[mock_test_type]">
            //                 <option value="">All</option>
            //                 @foreach ($mock_test_list_category as $item)
            //                     <option value="{{ $item['id'] }}">{{ $item['name'] }}</option>
            //                 @endforeach
            //             </select>`;
                // $('#mock_type_td' + table_id).html(html);
            } else if ($('#' + type_id).val() === "Practice test") {

                var html = `<select class="form-control" name="${prefix_name}[test_type]" id="${prefix_name}[test_type]" onchange="get_test_by_category('practice',this.value,'${table_id}','${prefix_name}')">
                            
                            <option value="">
                                Select Test Type
                            </option>
                            <option value="1">
                                Accademic Test
                            </option>
                            <option value="2">
                                General Test
                            </option>
                        </select>`;

                $('#test_td' + table_id).html(html);

                $('#mock_td' + table_id).html("");
                $('#mock_type_td' + table_id).html("");
                
            } else if ($('#' + type_id).val() === "Link task") {
                $('#mock_td' + table_id).html("");
                $('#mock_type_td' + table_id).html("");
                $('#test_td' + table_id).html("");               
            } else {
                $('#test_td' + table_id).html("");
                $('#mock_td' + table_id).html("");
                $('#mock_type_td' + table_id).html("");
            }
        }


        function get_test_by_category(type, test_type, table_id, prefix_name) {
            $(".overlay").show();
            $(".upload-loader").show();


            $.ajax({
                type: "post",
                url: "{{ route('test_preparation_courses_detail.get_test_by_category') }}",
                data: {

                    'test_type': test_type,
                    'type': type,
                },
                success: function(res) {
                    $(".overlay").hide();
                    $(".upload-loader").hide();
                    $('#test_id').empty();
                    $('#test_id_practice').empty();


                    var res = Object.values(
                    res); // This is just a placeholder; you need to populate it with actual data

                    // Create a select element
                    var selectElement = $('<select>', {
                        class: 'form-control',
                        name: `${prefix_name}[mock_test]`,
                        id: `${prefix_name}_mock_test`
                    });

                    // Append options to the select element based on the content of `res`
                    if (res.length > 0) {
                        selectElement.append($('<option>').val('').text('Select Test'));
                        res.forEach(function(test) {
                            var optionText = (test_type == 1) ? 'Academic Test ' : 'General Test ';
                            var option = $('<option>').val(test.id).text(optionText + test.id);
                            selectElement.append(option);
                        });
                    } else {
                        selectElement.append($('<option>').val('').text('No Test Available'));
                    }

                    // Set the HTML content of the target element
                    $('#mock_td' + table_id).html(selectElement);
                    if (type == "practice" || type == "mock") {
                        var html = `<select class="form-control" name="${prefix_name}[mock_test_type]">
                        <option value="">All</option>
                        @foreach ($mock_test_list_category as $item)
                            <option value="{{ $item['id'] }}">{{ $item['name'] }}</option>
                        @endforeach
                    </select>`;
                        $('#mock_type_td' + table_id).html(html);
                    }


                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $(".upload-loader").hide();
                    $(".overlay").hide();
                    var message = "Failed";
                    type = "failed";
                    code = textStatus + ' ' + errorThrown;
                    header = "";
                    show_success_pop_up(code, type, message, header);
                }
            });
        }


        function get_test_by_type(type, id) {
            $(".overlay").show();
            $(".upload-loader").show();
            var user_id = null; // Enclose in quotes
            var test_type = (type === "mock") ? $('#test_category_id').val() : $('#test_category_id_practice').val();
            var test_id = (type === "mock") ? $('#test_id').val() : $('#test_id_practice').val();

            $.ajax({
                type: "post",
                url: "{{ route('test_preparation_courses_detail.get_test_by_type') }}",
                data: {
                    'user_id': user_id,
                    'test_type': test_type,
                    'test_id': test_id,

                    'type': type,
                },
                success: function(res) {
                    $(".overlay").hide();
                    $(".upload-loader").hide();
                    $('#test_category').empty();
                    $('#test_category_practice').empty();

                    if (res.status == 1) {
                        // if(res.type == "mock"){
                        //     $('#test_category_mock_test').show();
                        //     $('#test_category_practice_test').hide();
                        // }else if(res.type == "practice"){
                        //     $('#test_category_mock_test').hide();
                        //     $('#test_category_practice_test').show();
                        // }
                        // if(res.type == "mock"){
                        //     $('#available_at_div').show();

                        //     $('#available_at_practice_div').hide();
                        // }
                        // if(res.type == "practice"){
                        //     $('#test_category_mock_test').hide();
                        //     $('#test_category_practice_test').show();
                        //     $('#available_at_div').hide();
                        //     $('#available_at_practice_div').show();
                        // }
                        const data = Object.keys(res['data']).map((key) => res['data'][key]);

                        // $('#test_category').empty();
                        // $('#test_category_practice').empty();

                        // var testDropdown = (res.type === "mock") ? $("#test_category") : $("#test_category_practice");

                        testDropdown = $("#" + id);
                        data.forEach(function(test) {
                            var option = $("<option>").val(test['id']).text(test['name']);
                            testDropdown.append(option);
                        });



                    } else if (res.status == 2) {
                        var message = res.message;
                        var type = "failed";
                        var code = "";
                        var header = "";
                        show_success_pop_up(code, type, message, header);
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $(".upload-loader").hide();
                    $(".overlay").hide();
                    var message = "Failed";
                    var type = "failed";
                    var code = textStatus + ' ' + errorThrown;
                    var header = "";
                    show_success_pop_up(code, type, message, header);
                }
            });
        }
    </script>

    <script>
        $('#filterForm').on('change', function() {
            $(this).submit();
        })

        $('#plan_category').on('change', function() {
            $('.priceToggle').hide();
            var plan_category_id = $(this).find('option:selected').val();
            if (plan_category_id != '' && plan_category_id != undefined) {
                $.ajax({
                    url: "{{ route('order.plan-details', ['plan_category_id' => ':plan_category_id']) }}",
                    type: 'GET',
                    data: {
                        plan_category_id: plan_category_id
                    },
                    success: function(res) {
                        $('#price').val(res)
                        $('.priceToggle').show();
                    }
                });
            }
        });

        $(document).ready(function() {



            var plan_category_id = $(this).find('option:selected').val();
            if (plan_category_id != '' && plan_category_id != undefined) {
                $.ajax({
                    url: "{{ route('order.plan-details', ['plan_category_id' => ':plan_category_id']) }}",
                    type: 'GET',
                    data: {
                        plan_category_id: plan_category_id
                    },
                    success: function(res) {
                        $('#price').val(res)
                        $('.priceToggle').show();
                    }
                });
            }


        });
    </script>
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <style>
        .select2-results__option[aria-selected=true] {
            display: none;
        }

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

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }
    </style>
    <script>
        // $('#automatic_active').click();


        function openCity(evt, cityName) {
            $('.submit_form').css('opacity', '0.3');
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(cityName).style.display = "block";
            evt.currentTarget.className += " active";
            setTimeout(function() {
                $('.submit_form').css('opacity', '1');
            }, 400); // 1000 milliseconds = 1 second
        }

        document.addEventListener('DOMContentLoaded', function() {
            let isDown = false;
            let startX;
            let scrollLeft;

            const scrollContainer = document.querySelector('.scroll-container');

            if (scrollContainer) {
                scrollContainer.addEventListener('mousedown', function(e) {
                    isDown = true;
                    startX = e.pageX - this.offsetLeft;
                    scrollLeft = this.scrollLeft;
                });

                scrollContainer.addEventListener('mouseleave', function() {
                    isDown = false;
                });

                scrollContainer.addEventListener('mouseup', function() {
                    isDown = false;
                });

                scrollContainer.addEventListener('mousemove', function(e) {
                    if (!isDown) return;
                    e.preventDefault();
                    const x = e.pageX - this.offsetLeft;
                    const walk = (x - startX) * 2; // Adjust the multiplier for faster or slower scrolling
                    this.scrollLeft = scrollLeft - walk;
                });
            }
        });

        function scrollToActiveTab() {
            const tabsContainer = document.querySelector('.scroll-container');
            const activeTab = document.querySelector('.tablinks.active');

            if (activeTab && tabsContainer) {
                const containerRect = tabsContainer.getBoundingClientRect();
                const activeRect = activeTab.getBoundingClientRect();

                // Check if active tab is fully visible
                if (activeRect.left < containerRect.left || activeRect.right > containerRect.right) {
                    // Scroll to the active tab
                    tabsContainer.scrollLeft = activeTab.offsetLeft - tabsContainer.offsetLeft;
                }
            }
        }

        // Scroll to active tab on page load
        window.onload = scrollToActiveTab;
    </script>
@endsection