@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>

    @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);
                $start_with = 1;
                if ($detail_description != null) {
                    $start_with = $start_with + count($detail_description);
                }
                if ($task_description != null) {
                    $start_with = $start_with + count($task_description);
                }

            @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="Topic 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>
                                                                                {{-- <option value="Mock test task" {{ @$description["type"] == "Mock test task" ? 'selected' : '' }}>MockTest Task</option>
                                                                                <option value="Link task" {{ @$description["type"] == "Link task" ? 'selected' : '' }}>Link 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 task')
                                                                            <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"> Mock Test</th>
                                                            <th scope="col"> Mock 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 task"
                                                                                {{ @$description['type'] == 'Mock test task' ? 'selected' : '' }}>
                                                                                MockTest Task</option>
                                                                            <option value="Link task"
                                                                                {{ @$description['type'] == 'Link task' ? 'selected' : '' }}>
                                                                                Link Task</option>
                                                                        </select>
                                                                    <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="mock_tdtask_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                        @if (@$description['type'] == 'Mock test task')
                                                                            <select class="form-control"
                                                                                name="task_des{{ @$detail['id'] }}[{{ $des_serial }}][mock_test]">
                                                                                @foreach ($mock_test_list as $item)
                                                                                    <option value="{{ $item['id'] }}"
                                                                                        {{ @$description['mock_test'] == $item['id'] ? 'selected' : '' }}>
                                                                                        Mock Test{{ $item['id'] }}
                                                                                    </option>
                                                                                @endforeach
                                                                            </select>
                                                                        @endif
                                                                    </td>

                                                                    <td
                                                                        id="mock_type_tdtask_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                                        @if (@$description['type'] == 'Mock test task')
                                                                            <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>
                                    <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>
        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;
                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 task">MockTest Task</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="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++

                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 task") {
                var html = `<select class="form-control" name="${prefix_name}[mock_test]">
                                
                                @foreach ($mock_test_list as $item)
                                    <option value="{{ $item['id'] }}">Mock Test{{ $item['id'] }}</option>
                                @endforeach
                            </select>`;
                $('#mock_td' + table_id).html(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() === "link_test") {
                $('#mock_td' + table_id).html("");
                $('#mock_type_td' + table_id).html("");
            } else {
                $('#mock_td' + table_id).html("");
                $('#mock_type_td' + table_id).html("");
            }
        }
    </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