@extends('layouts.main')



@section('main-container')

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">

    <style>
        #exerciseOptions {
            max-height: 450px;
            overflow-y: auto;
        }

        .exercise_clear_btn {
            color: white !important;
        }

        .custom-checkbox {
            display: inline-block;
            width: 17px;
            height: 17px;
            background-color: white;
            border: 1px solid #8D99AE;
            border-radius: 3px;
        }

        .custom-checkbox:checked::after {
            content: "\2713";
            display: block;
            text-align: center;
            font-size: 12px;
            line-height: 17px;
            background: #8C3EFF;
        }

        .symbol-label.fs-3.bg-light-primary.text-primary {

            position: absolute;
            background-color: #E8D8FF !important;
            /* z-index: 9999; */

        }


        .line {

            position: relative;

            /*top: 95px;*/

            /* bottom: 79px; */

            z-index: 1px;
            left: 40px;

            transform: translateX(-50%);

            width: 2px;

            border-left: 2px dotted #8D99AE33;

            height: 100%;
        }



        /* CSS for the attachment icon */

        .attachment {

            position: relative;

            top: 50%;

            left: 39%;

            transform: translate(-80%, -50%);

            width: 30px;

            height: 30px;

            background: url(media/attachment.png) no-repeat center center;

            background-size: cover;

            /* z-index: 9999; */

        }



        tr {

            text-align: center;

        }



        .set_holder {

            width: 100%;

            border-collapse: collapse;

        }



        .set_holder th,

        .set_holder td {

            padding: 8px;

            text-align: center;

            border-radius: 4px;

        }



        .set_holder th {

            background-color: #F7F7F9;

        }



        .reps-input,

        .optional-input {

            padding: 5px;
            text-align: center;
            box-sizing: border-box;

        }



        .form-control-line-break {

            white-space: pre-line;

        }



        .text-muted {

            color: #262f4a !important;

            font-size: 30px;

            font-weight: 700;

        }



        textarea.form-control.form-control-lg.form-control-solid.mb-3.mb-lg-0.form-control-line-break {

            background: #ffffff;

            padding: 12px !important;

            border-radius: 0 0 4px 4px;

            margin-top: 0 !important;

            -webkit-box-sizing: border-box;

            box-sizing: border-box;

            border: 1px solid #8D99AE33 !important;

            line-height: 18px;

            border-radius: 5px;

        }



        button.btn.btn-sm {

            color: #8C3EFF;

        }



        .form-select.reps-dropdown {

            background-image: url('data:image/svg+xml;utf8,<svg fill="black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 10.172l-6.64-6.64a1.053 1.053 0 0 1 1.487-1.487L8 7.198l5.153-5.153a1.053 1.053 0 0 1 1.487 1.487L8 10.172z"/></svg>');

            background-repeat: no-repeat;

            background-position: right .75rem center;

            background-size: 1em;

        }



        button.btn.btn-sm.btn-primary {

            border-radius: 20px;

            background-color: white !important;

            color: black;

            border: 3px solid #8C3EFF !important;

        }



        .fc-day:hover {

            background-color: #ffffff;

            cursor: pointer;

        }



        .add-event-text {

            display: none;

            z-index: 999;

            background-color: #8C3EFF;

            padding: 7px;

            margin: 60px 20px 20px 20px;

            text-align: center;

            font-size: 1rem;

            color: #8C3EFF;

            border-radius: 8px;

        }



        .event-container {

            font-family: Arial, sans-serif;

            background-color: #f4f4f4;

            padding: 10px;

            border-radius: 5px;

            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        }



        .event-title {

            font-size: 16px;

            font-weight: bold;

            margin-bottom: 5px;

        }



        .event-info {

            font-size: 14px;

            margin-bottom: 5px;

        }



        .event-bold {

            font-weight: bold;

        }



        button.fc-agendaWeek-button.fc-button.fc-state-default {

            display: none;

        }



        button.fc-agendaDay-button.fc-button.fc-state-default.fc-corner-right {

            display: none;

        }



        #calendar {

            border: none;

            background-color: #ffff;

            /* Set your desired background color for days */

        }



        #calendar .fc-day {

            border: none;

            background-color: #ffff;

            border-radius: 22px !important;

        }



        th.fc-day-header.fc-widget-header {

            color: #8D99AE;

        }



        li.active {

            background: red;

        }



        .fc-toolbar.fc-header-toolbar {

            display: none;

        }



        .fc-scroller.fc-day-grid-container {

            height: 24rem !important;

            border-radius: 10px;

        }



        td.fc-event-container {

            display: none;

        }



        .calendar-container {

            overflow: hidden;

        }



        .fc-basic-view .fc-body .fc-row {

            min-height: 5em;

        }



        .symbol.symbol-50px .symbol-label {

            width: 40px;

            height: 40px;

            border-radius: 11px;

            top: 55px;
            z-index: 1000px;
            font-family: 'OxaniumSemibold';

        }

        /* .symbol {
                        top: 55px;
                        z-index: 1000px;
                    } */



        input.reps-input {

            border: 1px solid #8D99AE26;

            width: 100px;

            border-radius: 8px;

        }



        input.optional-input {

            border: 1px solid #8D99AE26;

            width: 100px;

            border-radius: 8px;

        }



        input[type="text\""] {

            border: 1px solid #8D99AE26;

            width: 100px;

            border-radius: 8px;

            height: 32px;

            text-align: center;

        }



        input[type="text"] {

            border: 1px solid #8D99AE26;

            width: 100px;

            border-radius: 8px;

            height: 32px;


        }



        select.form-select.form-select-sm.reps-dropdown {

            background: #f7f7f9;

            border: none;

            text-align: center;

        }



        select.form-select.form-select-sm.optional-dropdown {

            background: #f7f7f9;

            border: none;

            text-align: center;

        }



        td.fc-widget-content {

            border: 1px solid #8D99AE33;

        }



        td.fc-head-container.fc-widget-header {

            border: 1px solid #8D99AE33;

        }



        .fc-ltr .fc-basic-view .fc-day-top .fc-day-number {

            float: none;

        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            right: -40px;
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown-content a {
            color: black;
            padding: 5px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        .selected_timing {
            margin-left: 15px;
        }
    </style>


    <div class="modal fade" id="kt_modal_create_app" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered mw-900px">

            <div class="modal-content">

                <div class="modal-header">

                    <h2>Create Exercise</h2>

                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">

                        <span class="svg-icon svg-icon-1">

                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">

                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                    transform="rotate(-45 6 17.3137)" fill="black" />

                                <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                    transform="rotate(45 7.41422 6)" fill="black" />

                            </svg>

                        </span>

                    </div>

                </div>

                <div class="modal-body">

                    <form id="create_exercise_form" action="{{ route('exercises.store') }}" method="POST">

                        @csrf

                        <input type="hidden" name="is_ajax" value="1">

                        <div class="mb-3">

                            <label for="exerciseName" class="form-label">Exercise Title</label>

                            <input type="text" class="form-control exerciseName" name="exerciseName"
                                placeholder="Enter exercise name" style="width: 100%">

                        </div>

                        <div class="mb-3">

                            <label for="exerciseInfo" class="form-label">Exercise Instruction</label>

                            <textarea class="form-control adjust_textarea" name="exerciseInfo" rows="3"
                                placeholder="Enter exercise information"></textarea>

                        </div>

                        <div class="mb-3">

                            <label for="selectionBox1" class="form-label">Parameter 1</label>

                            <select class="form-select optional-dropdown" name="selectionBox1">
                                @foreach ($getParameters as $getParameterKey => $getParameter)
                                    <option value="{{ $getParameterKey }}">{{ $getParameter }}</option>
                                @endforeach

                            </select>

                        </div>

                        <div class="mb-3">

                            <label for="selectionBox2" class="form-label">Parameter 2</label>

                            <select class="form-select optional-dropdown" name="selectionBox2">

                                @foreach ($getParameters as $getParameterKey => $getParameter)
                                    <option value="{{ $getParameterKey }}">{{ $getParameter }}</option>
                                @endforeach
                            </select>

                        </div>
                        <div class="mb-3">
                            <label for="reference_max" class="form-label">Reference Max</label>
                            <select class="form-select optional-dropdown" name="reference_max">
                                @foreach ($getParameters as $getParameterKey => $getParameter)
                                    <option value="{{ $getParameterKey }}">{{ $getParameter }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <div class="row">
                                <div class="col-md-12">
                                    <label for="is_calculator" class="form-label">Calculator</label>
                                    <select class="form-select optional-dropdown" name="is_calculator">
                                        <option value="0">Off</option>
                                        <option value="1">On</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="video_section">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="videoTitle" class="form-label">Video Title</label>
                                        <input type="text" class="form-control" name="videoTitle[]"
                                            placeholder="Video Title" style="width: 100%">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="videoUrl" class="form-label">Video URL</label>
                                        <input type="text" class="form-control" name="videoUrl[]"
                                            placeholder="https://example.com/abc.mp4" style="width: 100%" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 text-end">
                                <button type="button" class="btn btn-primary add_video_section">+ Add</button>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <label for="save_to_library" class="form-label"><b>Save To Library</b></label>
                                <select class="form-select optional-dropdown" name="save_to_library">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                        </div>

                        <button type="button" class="mt-4 btn btn-primary create_exercise_btn">Submit</button>

                    </form>

                </div>

            </div>

        </div>

    </div>

    <div class="modal fade" id="kt_modal_create_video" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered mw-900px">

            <div class="modal-content">

                <div class="modal-header">

                    <h2>Create Video</h2>

                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">

                        <span class="svg-icon svg-icon-1">

                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">

                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                    transform="rotate(-45 6 17.3137)" fill="black" />

                                <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                    transform="rotate(45 7.41422 6)" fill="black" />

                            </svg>

                        </span>

                    </div>

                </div>

                <div class="modal-body">

                    <form id="create_video_form" action="{{ route('exercise_video.store') }}" method="POST">

                        @csrf

                        <input type="hidden" name="is_ajax" value="1">

                        <div class="mb-3">
                            <label for="videoTitle" class="form-label">Video Title</label>
                            <input type="text" class="form-control videoTitle" name="videoTitle"
                                placeholder="Enter video title" style="width: 100%">
                        </div>

                        <div class="mb-3">
                            <label for="videoUrl" class="form-label">Video URL</label>
                            <input type="text" class="form-control videoUrl" name="videoUrl"
                                placeholder="Enter video url" style="width: 100%">
                        </div>

                        <div class="mb-3">
                            <label for="saveToLibrary" class="form-label"><b>Save To Library</b></label>
                            <select class="form-select optional-dropdown saveToLibrary" name="saveToLibrary">
                                <option value="0">No</option>
                                <option value="1">Yes</option>
                            </select>
                        </div>

                        <button type="button" class="btn btn-primary create_video_btn">Submit</button>

                    </form>

                </div>

            </div>

        </div>

    </div>

    <div class="modal fade" id="exerciseModalpop" tabindex="-1" role="dialog" aria-labelledby="exerciseModalLabel"
        aria-hidden="true">

        <div class="modal-dialog" role="document">

            <div class="modal-content" style="width: 50rem;border-radius: 22px;">

                <div class="modal-header" style="border-bottom: none;">

                    <h5 class="modal-title" id="exerciseModalLabel"
                        style="font-size: 20px;font-family: 'OxaniumSemibold';margin-left: 7px;">
                        <button type="button" class="close close_modal" data-dismiss="modal" aria-label="Close"
                            style="border: none;background: transparent;">

                            <span aria-hidden="true"><svg width="20" height="20" viewBox="0 0 20 20"
                                    fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M15 5L5 15" stroke="#404155" stroke-width="1.66667" stroke-linecap="round"
                                        stroke-linejoin="round" />

                                    <path d="M5 5L15 15" stroke="#404155" stroke-width="1.66667" stroke-linecap="round"
                                        stroke-linejoin="round" />

                                </svg>

                            </span>

                        </button>
                        Choose Exercise
                    </h5>


                    <a href="#" class="btn btn-sm btn-primary text-uppercase filter" data-bs-toggle="modal"
                        data-bs-target="#kt_modal_create_app" id="kt_toolbar_primary_button"
                        style="border-radius: 10px;">Create Exercise</a>

                </div>

                <div class="modal-body">

                    <div class="row">

                        <!-- Left side for filters -->

                        {{-- <div class="col-md-4">

                            <!-- <input type="text" id="filterSearch" class="form-control mb-2" placeholder="Search Filters"> -->

                            <h1 style="font-size: 16px;margin-left: 12px;">Filters</h1>

                            <ul id="filterOptions" class="list-group" style="list-style: none; padding: 0;">

                                <!-- Example filter option with checkbox -->

                                <li class="list-group-item" style="border: none;">

                                    <input type="checkbox" id="filterBack" style="margin-right: 5px;"> Back

                                </li>

                                <li class="list-group-item" style="border: none;">

                                    <input type="checkbox" id="filterHamsGlutes" style="margin-right: 5px;"> Hams & glutes

                                </li>

                                <li class="list-group-item" style="border: none;">

                                    <input type="checkbox" id="filterChestArms" style="margin-right: 5px;"> Chest & arms

                                </li>

                                <li class="list-group-item" style="border: none;">

                                    <input type="checkbox" id="filterQuadsCalves" style="margin-right: 5px;"> Quads & calves

                                </li>

                                <li class="list-group-item" style="border: none;">

                                    <input type="checkbox" id="filterBackChest" style="margin-right: 5px;"> Back & chest

                                </li>

                                <li class="list-group-item" style="border: none;">

                                    <input type="checkbox" id="filterQuadsCalves2" style="margin-right: 5px;"> Quads &
                                    calves

                                </li>

                            </ul>

                        </div>  --}}



                        <!-- Right side for current data -->

                        <div class="col-md-12" style="border: 1px solid #8D99AE26;padding: 10px;border-radius: 22px;">

                            <input type="text" id="exerciseSearch" class="form-control mb-2"
                                placeholder="Search Exercise" style="width:100%" style="border-radius: 12px">

                            <ul id="exerciseOptions" class="list-group">

                                @foreach ($exercise as $exe)
                                    <li style="border-bottom: 1px solid #8D99AE26; border-left: none; border-right: none; border-top: none;margin-bottom: 10px;"
                                        class="list-group-item" data-exercise-id="{{ $exe->id }}"
                                        value="{{ $exe->id }}" onclick="pullInfoFromDb(this)">
                                        {{ $exe->exerciseName }}
                                    </li>
                                @endforeach

                            </ul>

                        </div>

                    </div>

                    <!-- <input type="text" id="exerciseSearch" class="form-control mb-2" placeholder="Search Exercise">

                                    <ul id="exerciseOptions" class="list-group">

                                        @foreach ($exercise as $exe)
    <li class="list-group-item" data-exercise-id="{{ $exe->id }}" value="{{ $exe->id }}" onclick="pullInfoFromDb(this)">{{ $exe->exerciseName }}</li>
    @endforeach

                                    </ul> -->

                </div>

            </div>

        </div>

    </div>

    <div class="modal fade" id="videoModalpop" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel"
        aria-hidden="true">

        <div class="modal-dialog" role="document">

            <div class="modal-content" style="width: 50rem;border-radius: 22px;">

                <div class="modal-header" style="border-bottom: none;">

                    <h5 class="modal-title" id="videoModalLabel"
                        style="font-size: 20px;font-family: 'OxaniumSemibold';margin-left: 7px;">
                        <button type="button" class="close close_modal" data-dismiss="modal" aria-label="Close"
                            style="border: none;background: transparent;">

                            <span aria-hidden="true"><svg width="20" height="20" viewBox="0 0 20 20"
                                    fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M15 5L5 15" stroke="#404155" stroke-width="1.66667" stroke-linecap="round"
                                        stroke-linejoin="round" />

                                    <path d="M5 5L15 15" stroke="#404155" stroke-width="1.66667" stroke-linecap="round"
                                        stroke-linejoin="round" />

                                </svg>

                            </span>

                        </button>
                        Choose Video
                    </h5>


                    <a href="#" class="btn btn-sm btn-primary text-uppercase filter" data-bs-toggle="modal"
                        data-bs-target="#kt_modal_create_video" id="kt_toolbar_primary_button"
                        style="border-radius: 10px;">Custom Video</a>

                </div>

                <div class="modal-body">

                    <div class="row">

                        <div class="col-md-12" style="border: 1px solid #8D99AE26;padding: 10px;border-radius: 22px;">

                            <input type="text" id="videoSearch" class="form-control mb-2" placeholder="Search VIdeo"
                                style="width:100%" style="border-radius: 12px">

                            <ul id="videoOptions" class="list-group">

                                @foreach ($exercise_videos as $exercise_video)
                                    <li style="border-bottom: 1px solid #8D99AE26; border-left: none; border-right: none; border-top: none;margin-bottom: 10px;"
                                        class="list-group-item" data-video-id="{{ $exercise_video->id }}"
                                        value="{{ $exercise_video->id }}">
                                        <p class="videoTitle">{{ $exercise_video->videoTitle }}</p>
                                        <p class="videoUrl">{{ $exercise_video->videoUrl }}</p>
                                    </li>
                                @endforeach

                            </ul>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="" id="" style="margin-top: -90px;">

        <a href="{{ route('full-calender', $team_id) }}" class="btn btn-light btn-sm me-2"
            style="font-size: 20px;color:#200F31;margin-left: 21px;">

            <i class="fa-solid fa-arrow-left"></i> Create Session<br />

        </a>

    </div>

    <div class="container d-flex">

        <div class="post d-flex" id="kt_post">

            <div id="" class="container d-flex">

                <div class="row" style="display:contents">

                    <div class="col-md-3">

                        <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse"
                            data-bs-target="#kt_account_profile_details" aria-expanded="true"
                            aria-controls="kt_account_profile_details">

                        </div>

                        <div class="card mb-5 mt-20 mb-xl-10 p-3" style="border-radius: 22px;box-shadow: none;">

                            <div id="calendar"></div>

                        </div>

                    </div>

                    <div class="col-md-9">

                        <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse"
                            data-bs-target="#kt_account_profile_details" aria-expanded="true"
                            aria-controls="kt_account_profile_details">

                            <input type="hidden" id="created_for" value="{{ $created_for }}">

                            <input type="hidden" id="team_id" value="{{ $team_id }}">

                        </div>

                        <div class="card mb-5 mt-20 mb-xl-10" style="border-radius: 22px;box-shadow: none;height: auto;">

                            <div id="kt_account_profile_details" class="">

                                <div class="row">

                                    <div class="col-lg-12">

                                        <div data-kt-swapper="true" data-kt-swapper-mode="prepend"
                                            data-kt-swapper-parent=""
                                            class="page-title d-flex align-items-center flex-wrap justify-content-between me-3 mb-5 mb-lg-0"
                                            style="margin-left: 20px; margin-top: 20px;">

                                            <div class="d-flex align-items-center">

                                                <a data-url="{{ route('full-calender', $team_id) }}" class="btn back_btn"
                                                    data-btn="back">

                                                    <svg style="margin-top: -3px;" width="24" height="25"
                                                        viewBox="0 0 24 25" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">

                                                        <path d="M19 12.5H5" stroke="#200F31" stroke-width="2"
                                                            stroke-linecap="round" stroke-linejoin="round" />

                                                        <path d="M12 19.5L5 12.5L12 5.5" stroke="#200F31" stroke-width="2"
                                                            stroke-linecap="round" stroke-linejoin="round" />

                                                    </svg>



                                                    <!-- <span class="ms-2 fs-1hx h2" style="color:#200F31;font-size:18px;margin-left:40px">Create Team</span> -->

                                                    <!-- <h2>Edit Exercise</h2> -->

                                                </a>

                                                <div class="symbol symbol-40px me-4">

                                                    <div class="symbol-label fs-2 fw-semibold bg-primary text-inverse-danger"
                                                        style="font-size: 16px !important;border-radius: 11px;">
                                                        {{ $short_program_name }}</div>

                                                </div>

                                                <div class="d-flex flex-column">

                                                    @php
                                                        $show_status = 'Unpublished';
                                                        $show_status_color = 'red';
                                                        if (!empty($ProgramMaster) && $ProgramMaster->status == '1') {
                                                            $show_status = 'Published';
                                                            $show_status_color = 'green';
                                                        }
                                                    @endphp
                                                    <span id="selectedDate" class="ms-2"
                                                        style="font-size: 20px;color: #200F31 !important;"></span>
                                                    <span class="ms-2"
                                                        style="color: {{ $show_status_color }} !important;">{{ $show_status }}</span>
                                                </div>

                                            </div>



                                            <div class="d-flex align-items-center" style="margin-right: 15px;">


                                                @php
                                                    $status = 'Publish';
                                                    if (!empty($ProgramMaster) && $ProgramMaster->status == '1') {
                                                        $status = 'Unpublish';
                                                    }
                                                @endphp

                                                <a href="javascript:void(0)" onclick="delete_data()" class=""
                                                    style="margin-right: 15px;">

                                                    <svg width="18" height="19" viewBox="0 0 18 19"
                                                        fill="none" xmlns="http://www.w3.org/2000/svg">

                                                        <path d="M2 5H3.5H15.5" stroke="#FF0101" stroke-width="1.5"
                                                            stroke-linecap="round" stroke-linejoin="round" />

                                                        <path
                                                            d="M14 5V15.5C14 15.8978 13.842 16.2794 13.5607 16.5607C13.2794 16.842 12.8978 17 12.5 17H5C4.60218 17 4.22064 16.842 3.93934 16.5607C3.65804 16.2794 3.5 15.8978 3.5 15.5V5M5.75 5V3.5C5.75 3.10218 5.90804 2.72064 6.18934 2.43934C6.47064 2.15804 6.85218 2 7.25 2H10.25C10.6478 2 11.0294 2.15804 11.3107 2.43934C11.592 2.72064 11.75 3.10218 11.75 3.5V5"
                                                            stroke="#FF0101" stroke-width="1.5" stroke-linecap="round"
                                                            stroke-linejoin="round" />

                                                        <path d="M7.25 8.75V13.25" stroke="#FF0101" stroke-width="1.5"
                                                            stroke-linecap="round" stroke-linejoin="round" />

                                                        <path d="M10.25 8.75V13.25" stroke="#FF0101" stroke-width="1.5"
                                                            stroke-linecap="round" stroke-linejoin="round" />

                                                    </svg>

                                                </a>

                                                @if ($status == 'Publish')
                                                    <button type="button" class="btn btn-primary" id="save_session"
                                                        data-btn="save"
                                                        style="border-radius: 9px;padding:11px 15px 11px 15px;width: 126px;height: 42px;font-size: 14px;">SAVE</button>
                                                @endif
                                                <input type="hidden" id="status">
                                                <button type="button" class="btn btn-primary" id="save_publish_session"
                                                    data-btn="{{ $status }}"
                                                    style="margin-left:10px;border-radius: 9px;padding:11px 15px 11px 15px;width: 126px;height: 42px;font-size: 14px;">{{ $status }}</button>

                                            </div>

                                        </div>

                                        <hr
                                            style="background: #e1e3ec;width: 95%;margin-left: 1.8rem;border: 1px solid #e1e3ec;">

                                        <div class="row">

                                            <!-- <div class="col-lg-2"></div> -->

                                            <div class="col-lg-12 fv-row mt-5 mb-7" style="padding: 0px 30px;">

                                                <textarea type="text" id="coachInstructions" name="instructions"
                                                    class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 form-control-line-break adjust_textarea"
                                                    placeholder="Coach Instructions" value="" style="line-height: 2.5rem;border-radius: 12px;">{{ !empty($ProgramMaster) ? $ProgramMaster->coach_instructions : '' }}</textarea>

                                                @error('pname')
                                                    <div class="alert alert-danger mt-2">{{ $message }}</div>
                                                @enderror

                                            </div>

                                            <div class="col-lg-12 fv-row mt-5 mb-7" style="padding: 0px 30px;">

                                                <input type="text" id="video_url" name="video_url"
                                                    class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 form-control-line-break"
                                                    placeholder="Video URL (Optional)"
                                                    value="{{ !empty($ProgramMaster) ? $ProgramMaster->video_url : '' }}"
                                                    style="line-height: 2.5rem;border-radius: 12px;width:100%">

                                                @error('video_url')
                                                    <div class="alert alert-danger mt-2">{{ $message }}</div>
                                                @enderror

                                            </div>
                                            <!-- <div class="col-lg-2"></div> -->

                                        </div>

                                    </div>



                                    <div id="exercise_element" style='display:none'>

                                        <input type='hidden' class='exercise_ele' />

                                        <!-- <button type="button" class="btn btn-primary mb-7" onfocus="javascript:openModal(this)">

                                                            <span id="selectedExercise">Select Exercise</span>

                                                        </button> -->

                                        <select class="form-select form-select-xl mb-3"
                                            onfocus="javascript:openModal(this)" id="selectedExercise">

                                            <option value="">Select Exercise</option>

                                        </select>



                                        <div class="col-10">



                                        </div>

                                    </div>

                                    <div style="padding-left: 20px;padding-right: 50px;">

                                        <div class="row p-4 mb-4" style="margin: 0px -20px 20px 0px;">

                                            <div class="pb-2" style="float: right;">



                                            </div>



                                            <div class="col-1">

                                                <div class="symbol symbol-50px me-5" style="top:-40px">

                                                    <div class="symbol-label fs-3 bg-light-primary text-primary">

                                                        <img src="{{ url('/media/vector.png') }}">

                                                    </div>

                                                </div>



                                            </div>



                                            <div class="col-11 p-4 mb-4"
                                                style="border: 1px solid #8D99AE33;border-radius: 12px;">

                                                <div class="row">



                                                    <div class="col-6">

                                                        <input type="hidden" id="is_course_exercise_id">

                                                        <select class="form-select form-select-xl mb-3 course_exercise_id"
                                                            onfocus="javascript:openModal(this)" id="course_exercise_id"
                                                            name="course_exercise_id">

                                                            <option value="">Select Exercise</option>
                                                            @if(!empty($ProgramMaster->exercise) && $ProgramMaster->exercise->save_to_library != "1")
                                                                    @php
                                                                        $tempExercise = \App\Models\Exercise::where("save_to_library", 1)
                                                                        ->orWhere(function ($query) use ($ProgramMaster) {
                                                                            $query->where("id", $ProgramMaster->exercise_id);
                                                                        })
                                                                        ->orderBy("exerciseName", "asc")
                                                                        ->get();
                                                                    @endphp
                                                                    
                                                                    @php
                                                                        $exercise_main_video_url = '';
                                                                    @endphp

                                                                    
                                                                    @foreach ($tempExercise as $item)
                                                                        @if (!empty($ProgramMaster) && $ProgramMaster->course_exercise_id == $item->id)
                                                                            @php
                                                                                $exercise_main_video_url = $item->videoUrl;
                                                                            @endphp
                                                                            <option value="{{ $item->id }}"
                                                                                {{ !empty($ProgramMaster) && $ProgramMaster->course_exercise_id == $item->id ? 'selected' : '' }}>
                                                                                {{ $item->exerciseName }}</option>
                                                                        @endif
                                                                    @endforeach
                                                                @else
                                                                    @php
                                                                        $exercise_main_video_url = '';
                                                                    @endphp
                                                                    @foreach ($exercise as $item)
                                                                        @if (!empty($ProgramMaster) && $ProgramMaster->course_exercise_id == $item->id)
                                                                            @php
                                                                                $exercise_main_video_url = $item->videoUrl;
                                                                            @endphp
                                                                            <option value="{{ $item->id }}"
                                                                                {{ !empty($ProgramMaster) && $ProgramMaster->course_exercise_id == $item->id ? 'selected' : '' }}>
                                                                                {{ $item->exerciseName }}</option>
                                                                        @endif
                                                                    @endforeach
                                                                @endif

                                                        </select>

                                                        {{-- <select class="form-select form-select-xl mb-3 course_exercise_id" name="course_exercise_id">
            
                                                        <option value="" data-videoUrl="" data-exerciseInfo="">Select Exercise</option>

                                                        @foreach ($exercise as $item)
                                                            <option value="{{ $item->id }}" data-videoUrl="{{ $item->videoUrl }}" data-exerciseInfo="{{ $item->exerciseInfo }}" {{ !empty($ProgramMaster) && $ProgramMaster->course_exercise_id == $item->id ? 'selected' : '' }}>{{ $item->exerciseName }}</option>
                                                        @endforeach
            
                                                    </select> --}}
                                                    </div>

                                                    <div class="col-6 text-end">
                                                        <button type="button"
                                                            class="btn btn-sm btn-danger exercise_clear_btn">Clear</button>
                                                    </div>

                                                </div>

                                                <div class="row">



                                                    <div class="col-6 pt-3">

                                                        <div class='card main_course_video' style='border:none;'>

                                                            <div class='card-body' style='padding:6px;'>
                                                                @if (!empty($ProgramMaster) && !empty($ProgramMaster->program_videos))
                                                                    @foreach ($ProgramMaster->program_videos as $exercise_video)
                                                                        @if (!empty($exercise_video->exercise_video))
                                                                            @if (str_contains($exercise_video->exercise_video->videoUrl, 'youtube.com'))
                                                                                @php
                                                                                    $videoId = \App\Models\ExerciseVideo::getYouTubeVideoId($exercise_video->exercise_video->videoUrl);
                                                                                    $thumbnailUrl = $videoId ? "https://img.youtube.com/vi/{$videoId}/hqdefault.jpg" : '';
                                                                                @endphp     
                                                                                <div class="mb-3 row video-block"
                                                                                    data-video_id="{{ $exercise_video->exercise_video->id }}"
                                                                                    data-key="{{ $exercise_video->exercise_video->id }}">
                                                                                    <div class="col-md-3">
                                                                                        <a href="{{ $exercise_video->exercise_video->videoUrl }}" target="_blank"><img src="{{ $thumbnailUrl }}" 
                                                                                            alt="Video Thumbnail" 
                                                                                            width="100%" 
                                                                                            height="50px"
                                                                                            style="cursor: pointer;"
                                                                                            class="video-thumbnail"></a>
                                                                                        {{-- <iframe width="100%"
                                                                                            height="50px"
                                                                                            src="{{ $exercise_video->exercise_video->videoUrl }}">
                                                                                        </iframe> --}}
                                                                                    </div>
                                                                                    <div class="col-md-7">
                                                                                        <p>{{ $exercise_video->exercise_video->videoTitle }}
                                                                                        </p>
                                                                                    </div>
                                                                                    <div class="col-md-2">
                                                                                        <button
                                                                                            class="btn remove-video"
                                                                                            type="button"><svg
                                                                                            width="18"
                                                                                            height="18"
                                                                                            viewBox="0 0 18 18"
                                                                                            fill="none"
                                                                                            xmlns="http://www.w3.org/2000/svg">

                                                                                            <path d="M2 4.5H3.5H15.5"
                                                                                                stroke="#404155"
                                                                                                stroke-width="1.5"
                                                                                                stroke-linecap="round"
                                                                                                stroke-linejoin="round">
                                                                                            </path>

                                                                                            <path
                                                                                                d="M14 4.5V15C14 15.3978 13.842 15.7794 13.5607 16.0607C13.2794 16.342 12.8978 16.5 12.5 16.5H5C4.60218 16.5 4.22064 16.342 3.93934 16.0607C3.65804 15.7794 3.5 15.3978 3.5 15V4.5M5.75 4.5V3C5.75 2.60218 5.90804 2.22064 6.18934 1.93934C6.47064 1.65804 6.85218 1.5 7.25 1.5H10.25C10.6478 1.5 11.0294 1.65804 11.3107 1.93934C11.592 2.22064 11.75 2.60218 11.75 3V4.5"
                                                                                                stroke="#404155"
                                                                                                stroke-width="1.5"
                                                                                                stroke-linecap="round"
                                                                                                stroke-linejoin="round">
                                                                                            </path>

                                                                                            <path d="M7.25 8.25V12.75"
                                                                                                stroke="#404155"
                                                                                                stroke-width="1.5"
                                                                                                stroke-linecap="round"
                                                                                                stroke-linejoin="round">
                                                                                            </path>

                                                                                            <path d="M10.25 8.25V12.75"
                                                                                                stroke="#404155"
                                                                                                stroke-width="1.5"
                                                                                                stroke-linecap="round"
                                                                                                stroke-linejoin="round">
                                                                                            </path>

                                                                                        </svg></button>
                                                                                    </div>
                                                                                </div>
                                                                            @else
                                                                                <div class="mb-3 row video-block"
                                                                                    data-video_id="{{ $exercise_video->exercise_video->id }}"
                                                                                    data-key="{{ $exercise_video->exercise_video->id }}">
                                                                                    <div class="col-md-3">
                                                                                        <video controls loop width='100%'
                                                                                            height='50px'
                                                                                            src="{{ $exercise_video->exercise_video->videoUrl }}"></video>
                                                                                    </div>
                                                                                    <div class="col-md-7">
                                                                                        <p>{{ $exercise_video->exercise_video->videoTitle }}
                                                                                        </p>
                                                                                    </div>
                                                                                    <div class="col-md-2">
                                                                                        <button
                                                                                            class="btn remove-video"
                                                                                            type="button"><svg
                                                                                                width="18"
                                                                                                height="18"
                                                                                                viewBox="0 0 18 18"
                                                                                                fill="none"
                                                                                                xmlns="http://www.w3.org/2000/svg">

                                                                                                <path d="M2 4.5H3.5H15.5"
                                                                                                    stroke="#404155"
                                                                                                    stroke-width="1.5"
                                                                                                    stroke-linecap="round"
                                                                                                    stroke-linejoin="round">
                                                                                                </path>

                                                                                                <path
                                                                                                    d="M14 4.5V15C14 15.3978 13.842 15.7794 13.5607 16.0607C13.2794 16.342 12.8978 16.5 12.5 16.5H5C4.60218 16.5 4.22064 16.342 3.93934 16.0607C3.65804 15.7794 3.5 15.3978 3.5 15V4.5M5.75 4.5V3C5.75 2.60218 5.90804 2.22064 6.18934 1.93934C6.47064 1.65804 6.85218 1.5 7.25 1.5H10.25C10.6478 1.5 11.0294 1.65804 11.3107 1.93934C11.592 2.22064 11.75 2.60218 11.75 3V4.5"
                                                                                                    stroke="#404155"
                                                                                                    stroke-width="1.5"
                                                                                                    stroke-linecap="round"
                                                                                                    stroke-linejoin="round">
                                                                                                </path>

                                                                                                <path d="M7.25 8.25V12.75"
                                                                                                    stroke="#404155"
                                                                                                    stroke-width="1.5"
                                                                                                    stroke-linecap="round"
                                                                                                    stroke-linejoin="round">
                                                                                                </path>

                                                                                                <path d="M10.25 8.25V12.75"
                                                                                                    stroke="#404155"
                                                                                                    stroke-width="1.5"
                                                                                                    stroke-linecap="round"
                                                                                                    stroke-linejoin="round">
                                                                                                </path>

                                                                                            </svg></button>
                                                                                    </div>
                                                                                </div>
                                                                            @endif
                                                                        @endif
                                                                    @endforeach
                                                                @endif

                                                            </div>

                                                            <div class="mb-3 row">
                                                                <div class="col-md-12">
                                                                    <button class="col-md-12 btn btn-primary add-video"
                                                                        type="button"
                                                                        onfocus="javascript:openVideoChooseModal(this)">+
                                                                        Add Video</button>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>

                                                    <div class="col-6">



                                                        <label class="col-lg-4 col-form-label fw-bold fs-6"
                                                            style="display:inline"> Exercise Instructions </label>

                                                        <textarea name="course_exercise_instructions" id="course_exercise_instructions"
                                                            class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 line-break-input adjust_textarea"
                                                            placeholder="Exercise Instructions">{{ !empty($ProgramMaster) ? $ProgramMaster->course_exercise_instructions : '' }}</textarea>

                                                        <div class="ex_data_holder" style="float:left"
                                                            id="ex_data_holder"></div>

                                                    </div>



                                                </div>

                                            </div>



                                        </div>

                                    </div>



                                </div>

                                <div id="getParameters" style="display: none">
                                    @foreach ($getParameters as $getParameterKey => $getParameter)
                                        <option value="{{ $getParameterKey }}">{{ $getParameter }}</option>
                                    @endforeach
                                </div>

                                <div class="exercise" style="padding-left: 20px;padding-right: 50px;">

                                    @if ($sessionInfo)
                                        @php
                                            $total_sessionInfo = count($sessionInfo) - 1;
                                        @endphp
                                        @foreach ($sessionInfo as $key => $session)
                                            <div class="row exercise_block p-4"
                                                styleŹ="border: 1px solid #8D99AE33;margin: 0px -20px 20px 15px;border-radius: 12px;">

                                                <div class="col-2 d-flex p-0 row justify-content-center">

                                                    <div class="symbol symbol-50px d-flex col-12">
                                                        <div class="d-flex flex-column col-5 align-items-center">
                                                            <i class="fa-solid fa-caret-up move_up" onclick="moveBlock({{ $key }}, 'up')"></i>
                                                            <i class="fa-solid fa-caret-down move_down" onclick="moveBlock({{ $key }}, 'down')"></i>
                                                        </div>
                                                        <div
                                                            class="symbol-label fs-3 bg-light-primary text-primary alpha-symbol position-relative top-0 ms-3 col-7">
                                                            {{ trim($session->card_name) }}</div>

                                                    </div>

                                                    <div class="line"
                                                        style="display: {{ $key != $total_sessionInfo ? '' : 'none' }}">

                                                        <div class="attachment"
                                                            onclick="attachBlock({{ $key + 1 }})" link="0">

                                                        </div>
                                                    </div>


                                                </div>

                                                <div class="col-10 p-4 mb-4"
                                                    style="border: 1px solid #8D99AE33;border-radius: 12px;">

                                                    <div class="row">

                                                        <div class="pb-2"
                                                            style="float: right;display: flex;align-items: center;justify-content: flex-end;">
                                                            <a href="#" class="mr-3" style="margin-right: 10px;">
                                                                <svg width="25" height="24" viewBox="0 0 25 24"
                                                                    fill="none" xmlns="http://www.w3.org/2000/svg"
                                                                    xmlns:xlink="http://www.w3.org/1999/xlink">
                                                                    <mask id="mask0_3781_13948" style="mask-type:alpha"
                                                                        maskUnits="userSpaceOnUse" x="0" y="0"
                                                                        width="25" height="24">
                                                                        <rect x="0.572266" width="24" height="24"
                                                                            fill="url(#pattern0)" />
                                                                    </mask>
                                                                    <g mask="url(#mask0_3781_13948)">
                                                                        <rect x="0.572266" width="24" height="24"
                                                                            fill="#404155" />
                                                                    </g>
                                                                    <defs>
                                                                        <pattern id="pattern0"
                                                                            patternContentUnits="objectBoundingBox"
                                                                            width="1" height="1">
                                                                            <use xlink:href="#image0_3781_13948"
                                                                                transform="scale(0.00390625)" />
                                                                        </pattern>
                                                                        <image id="image0_3781_13948" width="256"
                                                                            height="256"
                                                                            xlink:href="data:image/png;base64,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" />
                                                                    </defs>
                                                                </svg>
                                                            </a>

                                                            <select
                                                                class="form-select form-select-sm reps-dropdown w-auto mr-3 leaderboard"
                                                                id="leaderboard" style="margin-right: 10px;">


                                                                @foreach ($getParameters as $getParameterKey => $getParameter)
                                                                    <option value="{{ $getParameterKey }}"
                                                                        @if ($session->leaderboard_unit == $getParameterKey) selected @endif>
                                                                        {{ $getParameter }}</option>
                                                                @endforeach

                                                            </select>


                                                            <div class="dropdown">
                                                                <input type="hidden" class="timer_type"
                                                                    value="{{ $session->timer_type }}">
                                                                <a href="javascript:void(0)" class="dropbtn"><svg
                                                                        width="16" height="18" viewBox="0 0 16 18"
                                                                        fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                        <g clip-path="url(#clip0_3784_24055)">
                                                                            <path d="M8.18408 1.06921L8.19141 3.25684"
                                                                                stroke="#404155" stroke-width="1.6"
                                                                                stroke-linecap="round"
                                                                                stroke-linejoin="round" />
                                                                            <path
                                                                                d="M14.287 4.28551L13.1359 5.43665M13.1359 5.43665C11.8499 4.15065 10.1057 3.42819 8.28701 3.42819C6.46833 3.42819 4.72415 4.15065 3.43815 5.43665C2.15215 6.72265 1.42969 8.46683 1.42969 10.2855C1.42969 12.1042 2.15215 13.8484 3.43815 15.1344C4.72415 16.4204 6.46833 17.1428 8.28701 17.1428C10.1057 17.1428 11.8499 16.4204 13.1359 15.1344C14.4219 13.8484 15.1443 12.1042 15.1443 10.2855C15.1443 8.46683 14.4219 6.72265 13.1359 5.43665ZM5.71558 0.856934H10.8584"
                                                                                stroke="#404155" stroke-width="1.6"
                                                                                stroke-linecap="round"
                                                                                stroke-linejoin="round" />
                                                                            <path
                                                                                d="M11.9701 8.67506C12.0879 8.9593 12.172 9.25554 12.2214 9.55776H8.92997V6.26632C9.23219 6.3157 9.52842 6.39986 9.81266 6.5176C10.2963 6.71794 10.7358 7.01158 11.106 7.38176C11.4761 7.75193 11.7698 8.1914 11.9701 8.67506L12.564 8.42905L11.9701 8.67506Z"
                                                                                stroke="#404155" stroke-width="1.28571"
                                                                                stroke-linecap="round"
                                                                                stroke-linejoin="round" />
                                                                        </g>
                                                                        <defs>
                                                                            <clipPath id="clip0_3784_24055">
                                                                                <rect width="15.4286" height="18"
                                                                                    fill="white"
                                                                                    transform="translate(0.572266)" />
                                                                            </clipPath>
                                                                        </defs>
                                                                    </svg></a>
                                                                <div class="dropdown-content">
                                                                    <a href="javascript:void(0)" class="timing_item">-</a>
                                                                    <a href="javascript:void(0)" class="timing_item">FOR
                                                                        TIME</a>
                                                                    <a href="javascript:void(0)"
                                                                        class="timing_item">AMRAP</a>
                                                                    <a href="javascript:void(0)"
                                                                        class="timing_item">EMOM</a>
                                                                    {{-- <a href="javascript:void(0)" class="timing_item">TABATA</a> --}}
                                                                    <a href="javascript:void(0)"
                                                                        class="timing_item">STOPWATCH</a>
                                                                    {{-- <a href="javascript:void(0)" class="timing_item">REST TIMER</a> --}}
                                                                    <a href="javascript:void(0)"
                                                                        class="timing_item">CUSTOM INTERVAL</a>
                                                                </div>
                                                                <span
                                                                    class="selected_timing">{{ $session->timer_type }}</span>
                                                            </div>

                                                            {{-- <label for="is_calculator" style="margin-left: 10px">Calculator : </label>
                                                            <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                                <input class="form-check-input custom-checkbox rowCheckbox is_calculator {{ $session->is_calculator == 1 ? "checked_checkbox" : "" }}" type="checkbox" style="background: white;border: 1px solid #8D99AE;border-radius: 3px;height: 17px;width: 17px;" value="1">
                                                            </div> --}}

                                                            <a href="javascript:void(0)"
                                                                style="background: transparent;float: right;"
                                                                class="btn btn-light btn-sm remove_block"
                                                                onclick="removeBlock({{ $key }}, this)">

                                                                <svg width="18" height="18" viewBox="0 0 18 18"
                                                                    fill="none" xmlns="http://www.w3.org/2000/svg">

                                                                    <path d="M2 4.5H3.5H15.5" stroke="#404155"
                                                                        stroke-width="1.5" stroke-linecap="round"
                                                                        stroke-linejoin="round"></path>

                                                                    <path
                                                                        d="M14 4.5V15C14 15.3978 13.842 15.7794 13.5607 16.0607C13.2794 16.342 12.8978 16.5 12.5 16.5H5C4.60218 16.5 4.22064 16.342 3.93934 16.0607C3.65804 15.7794 3.5 15.3978 3.5 15V4.5M5.75 4.5V3C5.75 2.60218 5.90804 2.22064 6.18934 1.93934C6.47064 1.65804 6.85218 1.5 7.25 1.5H10.25C10.6478 1.5 11.0294 1.65804 11.3107 1.93934C11.592 2.22064 11.75 2.60218 11.75 3V4.5"
                                                                        stroke="#404155" stroke-width="1.5"
                                                                        stroke-linecap="round" stroke-linejoin="round">
                                                                    </path>

                                                                    <path d="M7.25 8.25V12.75" stroke="#404155"
                                                                        stroke-width="1.5" stroke-linecap="round"
                                                                        stroke-linejoin="round"></path>

                                                                    <path d="M10.25 8.25V12.75" stroke="#404155"
                                                                        stroke-width="1.5" stroke-linecap="round"
                                                                        stroke-linejoin="round"></path>

                                                                </svg>

                                                            </a>

                                                        </div>

                                                    </div>

                                                    <div class="row">

                                                        <div class="col-5">

                                                            <input type='hidden' class='exercise_ele'
                                                                value='{{ $session->exercise_id }}' />

                                                            <!-- <button type="button" class="btn btn-primary mb-7" onfocus="javascript:openModal(this)">

                                                                                <span id="selectedExercise">Select Exercise</span>

                                                                            </button> -->

                                                            <select class="form-select form-select-xl mb-3"
                                                                onfocus="javascript:openModal(this)"
                                                                id="selectedExercise">

                                                                @if(!empty($session->exercise) && $session->exercise->save_to_library != "1")
                                                                    @php
                                                                        $tempExercise = \App\Models\Exercise::where("save_to_library", 1)
                                                                        ->orWhere(function ($query) use ($session) {
                                                                            $query->where("id", $session->exercise_id);
                                                                        })
                                                                        ->orderBy("exerciseName", "asc")
                                                                        ->get();
                                                                    @endphp
                                                                    @foreach ($tempExercise as $exe)
                                                                        @if ($exe->id == $session->exercise_id)
                                                                            <option value="{{ $exe->id }}">
                                                                                {{ $exe->exerciseName }}</option>
                                                                        @endif
                                                                    @endforeach
                                                                @else
                                                                    @foreach ($exercise as $exe)
                                                                        @if ($exe->id == $session->exercise_id)
                                                                            <option value="{{ $exe->id }}">
                                                                                {{ $exe->exerciseName }}</option>
                                                                        @endif
                                                                    @endforeach
                                                                @endif

                                                            </select>

                                                            <textarea name="instructions"
                                                                class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 line-break-input adjust_textarea"
                                                                placeholder="Exercise Instructions">{{ $session->coach_instructions }}
                                                            </textarea>

                                                            <div class="ex_data_holder" style="float:left"
                                                                id="ex_data_holder">
                                                                <br />
                                                                <div class='card' style='border:none;'>
                                                                    <div class='card-body' style='padding:0px;'>

                                                                        @foreach ($session->program_videos as $program_video)
                                                                            @if ($program_video->exercise_video && str_contains($program_video->exercise_video->videoUrl, 'youtube.com'))
                                                                                <div class="mb-3 row video-block"
                                                                                    data-video_id="{{ $program_video->exercise_video->id }}">
                                                                                    <div class="col-md-3">
                                                                                        @php
                                                                                            $videoId = \App\Models\ExerciseVideo::getYouTubeVideoId($program_video->exercise_video->videoUrl);
                                                                                            $thumbnailUrl = $videoId ? "https://img.youtube.com/vi/{$videoId}/hqdefault.jpg" : '';
                                                                                        @endphp
                                                                                        <a href="{{ $program_video->exercise_video->videoUrl }}" target="_blank">
                                                                                            <img src="{{ $thumbnailUrl }}" 
                                                                                            alt="Video Thumbnail" 
                                                                                            width="100%" 
                                                                                            height="50px"
                                                                                            style="cursor: pointer;"
                                                                                            class="video-thumbnail"></a>
                                                                                        {{-- <iframe width="100%"
                                                                                            height="50px"
                                                                                            src="{{ $program_video->exercise_video->videoUrl }}">
                                                                                        </iframe> --}}
                                                                                    </div>
                                                                                    <div class="col-md-7">
                                                                                        <p>{{ $program_video->exercise_video->videoTitle }}
                                                                                        </p>
                                                                                    </div>
                                                                                    <div class="col-md-2">
                                                                                        <button
                                                                                            class="btn remove-video"
                                                                                            type="button"><svg
                                                                                                width="18"
                                                                                                height="18"
                                                                                                viewBox="0 0 18 18"
                                                                                                fill="none"
                                                                                                xmlns="http://www.w3.org/2000/svg">

                                                                                                <path d="M2 4.5H3.5H15.5"
                                                                                                    stroke="#404155"
                                                                                                    stroke-width="1.5"
                                                                                                    stroke-linecap="round"
                                                                                                    stroke-linejoin="round">
                                                                                                </path>

                                                                                                <path
                                                                                                    d="M14 4.5V15C14 15.3978 13.842 15.7794 13.5607 16.0607C13.2794 16.342 12.8978 16.5 12.5 16.5H5C4.60218 16.5 4.22064 16.342 3.93934 16.0607C3.65804 15.7794 3.5 15.3978 3.5 15V4.5M5.75 4.5V3C5.75 2.60218 5.90804 2.22064 6.18934 1.93934C6.47064 1.65804 6.85218 1.5 7.25 1.5H10.25C10.6478 1.5 11.0294 1.65804 11.3107 1.93934C11.592 2.22064 11.75 2.60218 11.75 3V4.5"
                                                                                                    stroke="#404155"
                                                                                                    stroke-width="1.5"
                                                                                                    stroke-linecap="round"
                                                                                                    stroke-linejoin="round">
                                                                                                </path>

                                                                                                <path d="M7.25 8.25V12.75"
                                                                                                    stroke="#404155"
                                                                                                    stroke-width="1.5"
                                                                                                    stroke-linecap="round"
                                                                                                    stroke-linejoin="round">
                                                                                                </path>

                                                                                                <path d="M10.25 8.25V12.75"
                                                                                                    stroke="#404155"
                                                                                                    stroke-width="1.5"
                                                                                                    stroke-linecap="round"
                                                                                                    stroke-linejoin="round">
                                                                                                </path>

                                                                                            </svg></button>
                                                                                    </div>
                                                                                </div>
                                                                            @else
                                                                                <div class="mb-3 row video-block"
                                                                                    data-video_id="{{ $program_video->exercise_video->id }}">
                                                                                    <div class="col-md-3">
                                                                                        <video controls loop width='100%'
                                                                                            height='50px'
                                                                                            src="{{ $program_video->exercise_video->videoUrl }}"></video>
                                                                                    </div>
                                                                                    <div class="col-md-7">
                                                                                        <p>{{ $program_video->exercise_video->videoTitle }}
                                                                                        </p>
                                                                                    </div>
                                                                                    <div class="col-md-2">
                                                                                        <button
                                                                                            class="btn remove-video"
                                                                                            type="button"><svg
                                                                                                width="18"
                                                                                                height="18"
                                                                                                viewBox="0 0 18 18"
                                                                                                fill="none"
                                                                                                xmlns="http://www.w3.org/2000/svg">

                                                                                                <path d="M2 4.5H3.5H15.5"
                                                                                                    stroke="#404155"
                                                                                                    stroke-width="1.5"
                                                                                                    stroke-linecap="round"
                                                                                                    stroke-linejoin="round">
                                                                                                </path>

                                                                                                <path
                                                                                                    d="M14 4.5V15C14 15.3978 13.842 15.7794 13.5607 16.0607C13.2794 16.342 12.8978 16.5 12.5 16.5H5C4.60218 16.5 4.22064 16.342 3.93934 16.0607C3.65804 15.7794 3.5 15.3978 3.5 15V4.5M5.75 4.5V3C5.75 2.60218 5.90804 2.22064 6.18934 1.93934C6.47064 1.65804 6.85218 1.5 7.25 1.5H10.25C10.6478 1.5 11.0294 1.65804 11.3107 1.93934C11.592 2.22064 11.75 2.60218 11.75 3V4.5"
                                                                                                    stroke="#404155"
                                                                                                    stroke-width="1.5"
                                                                                                    stroke-linecap="round"
                                                                                                    stroke-linejoin="round">
                                                                                                </path>

                                                                                                <path d="M7.25 8.25V12.75"
                                                                                                    stroke="#404155"
                                                                                                    stroke-width="1.5"
                                                                                                    stroke-linecap="round"
                                                                                                    stroke-linejoin="round">
                                                                                                </path>

                                                                                                <path d="M10.25 8.25V12.75"
                                                                                                    stroke="#404155"
                                                                                                    stroke-width="1.5"
                                                                                                    stroke-linecap="round"
                                                                                                    stroke-linejoin="round">
                                                                                                </path>

                                                                                            </svg></button>
                                                                                    </div>
                                                                                </div>
                                                                            @endif
                                                                        @endforeach

                                                                    </div>
                                                                </div>

                                                                <div class="mb-3 row">
                                                                    <div class="col-md-12">
                                                                        <button class="col-md-12 btn btn-primary add-video"
                                                                            type="button"
                                                                            onfocus="javascript:openVideoChooseModal(this)">+
                                                                            Add Video</button>
                                                                    </div>
                                                                </div>

                                                            </div>

                                                        </div>

                                                        <div class="col-7">

                                                            <table class="set_holder">

                                                                <thead>

                                                                    <tr>

                                                                        <th
                                                                            style="width: 70px;font-family: OxaniumSemibold;border-top-left-radius: 8px;border-bottom-left-radius: 8px;">
                                                                            Set</th>

                                                                        <th>

                                                                            <select
                                                                                class="form-select form-select-sm reps-dropdown parameter_1">

                                                                                @foreach ($getParameters as $getParameterKey => $getParameter)
                                                                                    <option value="{{ $getParameterKey }}"
                                                                                        @if ($session->parameter_1 == $getParameterKey) selected @endif>
                                                                                        {{ $getParameter }}</option>
                                                                                @endforeach

                                                                            </select>

                                                                        </th>

                                                                        <th
                                                                            style="border-bottom-right-radius: 8px;border-top-right-radius: 8px;">

                                                                            <select
                                                                                class="form-select form-select-sm optional-dropdown parameter_2">

                                                                                @foreach ($getParameters as $getParameterKey => $getParameter)
                                                                                    <option value="{{ $getParameterKey }}"
                                                                                        @if ($session->parameter_2 == $getParameterKey) selected @endif>
                                                                                        {{ $getParameter }}</option>
                                                                                @endforeach


                                                                            </select>

                                                                        </th>

                                                                    </tr>

                                                                </thead>

                                                                <tbody>

                                                                    @php $i=1; @endphp

                                                                    @foreach ($sets as $set)
                                                                        @if ($set->program_details_id == $session->id)
                                                                            <tr>

                                                                                <td>{{ $i }}</td>

                                                                                <td>

                                                                                    <input type="text"
                                                                                        class="reps-input"
                                                                                        value="{{ $set->duration }}">

                                                                                </td>

                                                                                <td>

                                                                                    <input type="text"
                                                                                        class="optional-input"
                                                                                        value="{{ $set->optional }}">

                                                                                </td>

                                                                            </tr>

                                                                            @php $i++; @endphp
                                                                        @endif
                                                                    @endforeach

                                                                </tbody>

                                                            </table>

                                                            <div class="mt-4"
                                                                style="text-align: center;text-align: center;height: 3.4rem;width: 101%;;border-radius: 8px;background: rgba(247, 247, 249, 1);">

                                                                <button class="btn btn-sm set_btn"
                                                                    style="margin-right: 45px;"
                                                                    onclick="setButtonAction(this,-1)">

                                                                    <svg width="16" height="2" viewBox="0 0 16 2"
                                                                        fill="none" xmlns="http://www.w3.org/2000/svg">

                                                                        <path d="M1 1H15" stroke="#8C3EFF"
                                                                            stroke-width="2" stroke-linecap="round"
                                                                            stroke-linejoin="round"></path>

                                                                    </svg>

                                                                </button>Set

                                                                <button class="btn btn-sm set_btn"
                                                                    style="margin-left: 45px;"
                                                                    onclick="setButtonAction(this,1)">

                                                                    <svg width="24" height="24"
                                                                        viewBox="0 0 24 24" fill="none"
                                                                        xmlns="http://www.w3.org/2000/svg">

                                                                        <path d="M12 5V19" stroke="#8C3EFF"
                                                                            stroke-width="2" stroke-linecap="round"
                                                                            stroke-linejoin="round"></path>

                                                                        <path d="M5 12H19" stroke="#8C3EFF"
                                                                            stroke-width="2" stroke-linecap="round"
                                                                            stroke-linejoin="round"></path>

                                                                    </svg>

                                                                </button>

                                                            </div>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                            <div class="col-12"></div>
                                        @endforeach
                                    @endif

                                </div>

                            </div>

                            <div class="d-flex justify-content-left pb-6 px-7" style="padding-left: 2rem !important;">

                                <button type="button" class="btn btn-primary me-2 position-relative"
                                    id="kt_account_profile_details_submit" onclick="addBlock()"
                                    style="padding: 12px 18px 12px 18px;font-size: 14px;width: 250px;height: 42px;border-radius: 10px;">

                                    ADD BLOCK

                                    <!-- <span class="position-absolute end-0 bottom-0" style="padding: 15px 7px 14px 18px;"><i class="fa-solid fa-circle-info"></i></span> -->

                                </button>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    </div>


    @if ($sessionInfo)
        <input type="hidden" name="activeBlocks" id="activeBlocks" value="{{ $count }}">
    @else
        <input type="hidden" name="activeBlocks" id="activeBlocks" value="0">
    @endif

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
    <script>
        var activeBlock = parseInt(document.getElementById('activeBlocks').value);

        var objectReference;
        var videoObjectReference;


        // $(".course_exercise_id").change(function (e) { 
        //     var course_exercise_id = $(".course_exercise_id").find(":selected").val();
        //     var videoUrl = $(".course_exercise_id").find(":selected").attr("data-videoUrl");
        //     var exerciseInfo = $(".course_exercise_id").find(":selected").attr("data-exerciseInfo");
        //     $("#videoUrl").attr("src", videoUrl);
        //     $("#course_exercise_instructions").val(exerciseInfo);
        // });

        function delete_data() {

            var save_publish_session = $("#save_publish_session").data("btn");
            if (save_publish_session == "Unpublish") {
                return false;
            }

            var baseUrl = @json(url('/'));
            var team_id = $('#team_id').val();
            var created_for = $('#created_for').val();
            $.confirm({
                title: 'Confirm!',
                content: 'Are you sure you want to remove it?',
                buttons: {
                    confirm: {
                        btnClass: 'btn-danger',
                        keys: ['enter', 'shift'],
                        action: function() {
                            $.ajax({
                                url: baseUrl + "/full-calender/delete_session",
                                type: "POST",
                                data: {
                                    _token: "{{ csrf_token() }}",
                                    team_id: team_id,
                                    created_for: created_for,
                                    type: "delete"
                                },
                                success: function(response) {
                                    window.location.reload();
                                }
                            })
                        }
                    },
                    cancel: {}
                }
            });

        }

        function wordExistsInString(str, word) {
            if (str != null && str != "") {
                str = str.toLowerCase();
                word = word.toLowerCase();

                return str.indexOf(word) !== -1;
            }
        }

        function getYouTubeVideoId(url) {
            const regex = /\/embed\/([a-zA-Z0-9_-]+)/; // Regular expression to match YouTube video ID
            const match = url.match(regex); // Match the URL against the regex
            return match ? match[1] : null; // Return the ID if found, otherwise return null
        }

        function pullInfoFromDb(object, id = "", exercise_Name = "") {

            var exercise_id = id != "" ? id : jQuery(object).val();
            var exercise_Name = exercise_Name != "" ? exercise_Name : jQuery(object).val();
            $.ajax({

                url: "{{ url('get_ex_data') }}",

                type: "GET",

                data: {

                    id: exercise_id,

                    _token: "{{ csrf_token() }}",

                },

                success: function(response) {



                    response = JSON.parse(response);


                    var respBody = '';

                    if (response) {

                        var is_course_exercise_id = $("#is_course_exercise_id").val();

                        if (is_course_exercise_id == "1") {
                            if (!$.isEmptyObject(response.exercise_videos)) {
                                var respBody = "";
                                $.each(response.exercise_videos, function(key, value) {
                                    if ((value.videoUrl != "" && value.videoUrl != null)) {
                                        respBody += "<div class='row video-block' data-video_id='" +
                                            value.id + "' data-key='" + key +
                                            "'>"; // Add a unique identifier using `data-key`
                                        respBody += "<div class='col-md-3'>";
                                        if (wordExistsInString(value.videoUrl, "youtube.com")) {
                                            var videoId = getYouTubeVideoId(value.videoUrl);
                                            var thumbnailUrl = videoId ? `https://img.youtube.com/vi/${videoId}/hqdefault.jpg` : '';
                                            
                                            respBody +=
                                                "<a href='"+ value.videoUrl +"' target='_blank'><img src='"+ thumbnailUrl +"' alt='Video Thumbnail' width='100%' height='50px' style='cursor: pointer;'' class='video-thumbnail'></a>";
                                            // respBody +=
                                            //     "<iframe controls loop width='100%' height='50px' src='" +
                                            //     value.videoUrl + "'></iframe>";
                                        } else {
                                            respBody +=
                                                "<video controls loop width='100%' height='50px' src='" +
                                                value.videoUrl + "'></video>";
                                        }
                                        respBody += "</div>";
                                        respBody += "<div class='col-md-7'>";
                                        respBody += "<p>" + value.videoTitle + "</p>";
                                        respBody += "</div>";
                                        respBody += "<div class='col-md-2'>";
                                        respBody +=
                                            `<button class='btn remove-video' data-key='` +
                                            key + `'><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4.5H3.5H15.5" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

                                            <path d="M14 4.5V15C14 15.3978 13.842 15.7794 13.5607 16.0607C13.2794 16.342 12.8978 16.5 12.5 16.5H5C4.60218 16.5 4.22064 16.342 3.93934 16.0607C3.65804 15.7794 3.5 15.3978 3.5 15V4.5M5.75 4.5V3C5.75 2.60218 5.90804 2.22064 6.18934 1.93934C6.47064 1.65804 6.85218 1.5 7.25 1.5H10.25C10.6478 1.5 11.0294 1.65804 11.3107 1.93934C11.592 2.22064 11.75 2.60218 11.75 3V4.5" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                            </path>

                                            <path d="M7.25 8.25V12.75" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

                                            <path d="M10.25 8.25V12.75" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

                                            </svg></button>`;
                                        respBody += "</div>";
                                        respBody += "</div>";
                                    }
                                });
                                $(".main_course_video").find(".card-body").html(respBody);
                            } else {
                                $(".main_course_video").find(".card-body").empty();
                            }

                            $("#course_exercise_instructions").val(response.exerciseInfo);

                            let exercise_ele = jQuery(objectReference).parent().find('#course_exercise_id');
                            exercise_ele.empty();

                            let exerciseName = '<option value="' + response.id + '">' + response.exerciseName +
                                '</option>';

                            exercise_ele.append(exerciseName);
                        } else {
                            respBody =
                                "<br/><div class='card' style='border:none;'><div class='card-body' style='padding:0px;'>";

                            if (!$.isEmptyObject(response.exercise_videos)) {
                                $.each(response.exercise_videos, function(key, value) {
                                    if ((value.videoUrl != "" && value.videoUrl != null)) {
                                        respBody +=
                                            "<div class='mb-3 row video-block' data-video_id='" + value
                                            .id + "' data-key='" + key + "'>"; // Add unique identifier
                                        respBody += "<div class='col-md-3'>";
                                        if (wordExistsInString(value.videoUrl, "youtube.com")) {
                                            var videoId = getYouTubeVideoId(value.videoUrl);
                                            var thumbnailUrl = videoId ? `https://img.youtube.com/vi/${videoId}/hqdefault.jpg` : '';
                                            
                                            respBody +=
                                                "<a href='"+ value.videoUrl +"' target='_blank'><img src='"+ thumbnailUrl +"' alt='Video Thumbnail' width='100%' height='50px' style='cursor: pointer;'' class='video-thumbnail' ></a>";
                                            // respBody +=
                                            //     "<iframe controls loop width='100%' height='50px' src='" +
                                            //     value.videoUrl + "'></iframe>";
                                        } else {
                                            respBody +=
                                                "<video controls loop width='100%' height='50px' src='" +
                                                value.videoUrl + "'></video>";
                                        }
                                        respBody += "</div>";
                                        respBody += "<div class='col-md-7'>";
                                        respBody += "<p>" + value.videoTitle + "</p>";
                                        respBody += "</div>";
                                        respBody += "<div class='col-md-2'>";
                                        respBody +=
                                            `<button class='btn remove-video' data-key='` +
                                            key + `'><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4.5H3.5H15.5" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

                                            <path d="M14 4.5V15C14 15.3978 13.842 15.7794 13.5607 16.0607C13.2794 16.342 12.8978 16.5 12.5 16.5H5C4.60218 16.5 4.22064 16.342 3.93934 16.0607C3.65804 15.7794 3.5 15.3978 3.5 15V4.5M5.75 4.5V3C5.75 2.60218 5.90804 2.22064 6.18934 1.93934C6.47064 1.65804 6.85218 1.5 7.25 1.5H10.25C10.6478 1.5 11.0294 1.65804 11.3107 1.93934C11.592 2.22064 11.75 2.60218 11.75 3V4.5" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                            </path>

                                            <path d="M7.25 8.25V12.75" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

                                            <path d="M10.25 8.25V12.75" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

                                            </svg></button>`;
                                        respBody += "</div>";
                                        respBody += "</div>";
                                    }
                                });
                            }

                            // respBody += "<h3 style='text-align: center;'>" + response.exerciseName + "</h3>";

                            // respBody += "<p style='text-align: center;'>" + response.exerciseInfo + "</p>";

                            respBody += "</div></div>";
                            respBody += `<div class="mb-3 row">
                                            <div class="col-md-12">
                                                <button class="col-md-12 btn btn-primary add-video" type="button" onfocus="javascript:openVideoChooseModal(this)">+ Add Video</button>
                                            </div>
                                        </div>`;

                            jQuery(objectReference).parent().find("textarea[name='instructions']").val(response
                                .exerciseInfo);
                            jQuery(objectReference).parent().parent().find(".parameter_1").val(response
                                .selectionBox1);
                            jQuery(objectReference).parent().parent().find(".parameter_2").val(response
                                .selectionBox2);

                        }

                        jQuery(objectReference).parent().parent().find(".ex_data_holder").html(respBody);

                        jQuery(objectReference).parent().find('.exercise_ele').val(exercise_id);

                        let exercise_ele = jQuery(objectReference).parent().find('#selectedExercise');

                        exercise_ele.empty();

                        let exerciseName = '<option value="' + response.id + '">' + response.exerciseName +
                            '</option>';

                        exercise_ele.append(exerciseName);

                        $(".adjust_textarea").each(function() {
                            var $adjust_textarea = $(this);
                            
                            $adjust_textarea.css("height", "auto");
                            $adjust_textarea.css("height", $adjust_textarea[0].scrollHeight + "px");
                            // var scrollHeight = 526 + $adjust_textarea[0].scrollHeight;
                            // $(".line").css("top", scrollHeight + "px !important");
                        });
                        // jQuery(objectReference).hide();

                        // jQuery(object).find('#ex_data_holder').html(respBody);

                        // $('#ex_data_holder').html(respBody);


                        disabled_enabled_reps_optional();
                    }

                    $('#kt_modal_create_app').modal('hide');
                    $('#exerciseModalpop').modal('hide');
                },

                error: function(xhr) {
                }

            });

        }



        function getAlphabetLetterAtIndex(index) {


            if (index <= 0 || index >= 26) {

                // return null;

                String.fromCharCode(65 + 1);

            }


            return String.fromCharCode(65 + index);

        }

        let isNewDivAdded = false;



        function addBlock() {

            // Show the previous attachment div

            var attachments = document.querySelectorAll('.attachment');
            var lines = document.querySelectorAll('.line');

            var previousAttachment = attachments[attachments.length - 1];
            var previousLine = lines[lines.length - 1];

            // if (previousAttachment) {

            //     previousAttachment.style.display = 'block';

            // }

            if (previousLine) {

                previousLine.style.display = 'block';

            }

            // if (!isNewDivAdded) {

            // let newDiv = '<div class="row overflow-auto p-4 mb-4" style="border: 1px solid #8D99AE33;margin: 0px -20px 20px 15px;border-radius: 12px;">';

            // newDiv += '<div class="pb-2" style="float: right;">';

            // newDiv += '<a href="#" style="background: transparent;float: right;" class="btn btn-light btn-sm" onclick="removeBlock(this)" >';

            // newDiv += '<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">';

            // newDiv += '<path d="M2 4.5H3.5H15.5" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>';

            // newDiv += '<path d="M14 4.5V15C14 15.3978 13.842 15.7794 13.5607 16.0607C13.2794 16.342 12.8978 16.5 12.5 16.5H5C4.60218 16.5 4.22064 16.342 3.93934 16.0607C3.65804 15.7794 3.5 15.3978 3.5 15V4.5M5.75 4.5V3C5.75 2.60218 5.90804 2.22064 6.18934 1.93934C6.47064 1.65804 6.85218 1.5 7.25 1.5H10.25C10.6478 1.5 11.0294 1.65804 11.3107 1.93934C11.592 2.22064 11.75 2.60218 11.75 3V4.5" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>';

            // newDiv += '<path d="M7.25 8.25V12.75" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>';

            // newDiv += '<path d="M10.25 8.25V12.75" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>';

            // newDiv += '</svg>';

            // newDiv += '</a>';

            // newDiv += '</div>';

            // newDiv += '<div class="col-4">';

            // var selectBox = jQuery("#exercise_element").html();

            // newDiv += selectBox;

            // newDiv += '<textarea name="instructions" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 line-break-input adjust_textarea" placeholder="Exercise Instructions"></textarea>';

            // newDiv += '<div class="ex_data_holder" style="float:left" id="ex_data_holder"></div>';

            // newDiv += '</div>';

            // newDiv += '</div>';



            // jQuery(".exercise").append(newDiv);

            // isNewDivAdded = true;

            // }





            // let blockTemplate = '<div style="float: right;position: relative;top: -28px;"> <a href="#" class="btn btn-light btn-sm" onclick="removeBlock(this)" ><img src="{{ url('/media/logos/trash-2.png') }}" alt="" class="h-15px" /></a></div>';

            // let blockTemplate = '<div class="row overflow-auto p-4" styleŹ="border: 1px solid #8D99AE33;margin: 0px -20px 20px 15px;border-radius: 12px;"><div class="pb-2" style="float: right;"> <a href="#" style="background: transparent;float: right;" class="btn btn-light btn-sm" onclick="removeBlock(this)" ><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4.5H3.5H15.5" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 4.5V15C14 15.3978 13.842 15.7794 13.5607 16.0607C13.2794 16.342 12.8978 16.5 12.5 16.5H5C4.60218 16.5 4.22064 16.342 3.93934 16.0607C3.65804 15.7794 3.5 15.3978 3.5 15V4.5M5.75 4.5V3C5.75 2.60218 5.90804 2.22064 6.18934 1.93934C6.47064 1.65804 6.85218 1.5 7.25 1.5H10.25C10.6478 1.5 11.0294 1.65804 11.3107 1.93934C11.592 2.22064 11.75 2.60218 11.75 3V4.5" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.25 8.25V12.75" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.25 8.25V12.75" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a></div>';

            // blockTemplate += '<div class="col-1">';

            // blockTemplate += '<div class="symbol symbol-50px me-5">';

            // blockTemplate += '<div class="symbol-label fs-3 bg-light-primary text-primary alpha-symbol">' + getAlphabetLetterAtIndex(activeBlock) + '</div>';

            // blockTemplate += "</div><div class='line'></div><div class='attachment' onclick='attachBlock()' style='display:none'></div>";

            // blockTemplate += '</div>';

            // blockTemplate += '<div class="col-4">';

            // var selectBox = jQuery("#exercise_element").html();

            // blockTemplate += selectBox;



            // // blockTemplate += '<label class="col-lg-4 col-form-label required fw-bold fs-6" style="display:inline"> Exercise Instructions </label>';

            // blockTemplate += '<textarea name="instructions" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 line-break-input adjust_textarea" placeholder="Exercise Instructions"></textarea>';

            // blockTemplate += '<div class="ex_data_holder" style="float:left" id="ex_data_holder"></div>';

            // blockTemplate += '</div>';

            //new code

            var getParameters = $("#getParameters").html();
            let blockTemplate =
                '<div class="row exercise_block p-4" styleZ="border: 1px solid #8D99AE33;margin: 0px -20px 20px 15px;border-radius: 12px;">';

            blockTemplate += '<div class="col-2 d-flex p-0 row justify-content-center">';

            blockTemplate += '<div class="symbol symbol-50px d-flex col-12">';
            blockTemplate += `
                            <div class="d-flex flex-column col-5 align-items-center">
                            <i class="fa-solid fa-caret-up move_up" onclick="moveBlock(`+ activeBlock +`, 'up')"></i>
                            <i class="fa-solid fa-caret-down move_down mt-3" onclick="moveBlock(`+ activeBlock +`, 'down')"></i>
                            </div>
                            `;

            blockTemplate += '<div class="symbol-label fs-3 bg-light-primary text-primary alpha-symbol position-relative top-0 ms-3 col-7">' +
                getAlphabetLetterAtIndex(activeBlock) + '</div> </div>';

            var symbol = document.querySelectorAll('.alpha-symbol');
            blockTemplate += ' <div class="line" style="display:none"><div class="attachment" onclick="attachBlock(' + (
                symbol.length +
                1) + ')" link="0"></div></div></div>';

            blockTemplate += '<div class="col-10 p-4 mb-4" style="border: 1px solid #8D99AE33;border-radius: 12px;">';

            blockTemplate +=
                '<div class="row"><div class="pb-2" style="float: right;display: flex;align-items: center;justify-content: flex-end;">' +

                '<a href="#" class="mr-3" style="margin-right:10px;"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><mask id="mask0_3781_13948" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="24"><rect x="0.572266" width="24" height="24" fill="url(#pattern0)"></rect></mask><g mask="url(#mask0_3781_13948)"><rect x="0.572266" width="24" height="24" fill="#404155"></rect></g><defs><pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1"><use xlink:href="#image0_3781_13948" transform="scale(0.00390625)"></use></pattern>                                                            <image id="image0_3781_13948" width="256" height="256" xlink:href="data:image/png;base64,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"></image></defs></svg></a>' +

                '<select class="form-select form-select-sm reps-dropdown w-auto mr-3 leaderboard" id="leaderboard" style="margin-right: 10px;">' +
                getParameters + '</select>' +

                '<div class="dropdown">' +
                '<input type="hidden" class="timer_type" >' +
                '<a href="javascript:void(0)" class="dropbtn"><svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_3784_24055)"><path d="M8.18408 1.06921L8.19141 3.25684" stroke="#404155" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.287 4.28551L13.1359 5.43665M13.1359 5.43665C11.8499 4.15065 10.1057 3.42819 8.28701 3.42819C6.46833 3.42819 4.72415 4.15065 3.43815 5.43665C2.15215 6.72265 1.42969 8.46683 1.42969 10.2855C1.42969 12.1042 2.15215 13.8484 3.43815 15.1344C4.72415 16.4204 6.46833 17.1428 8.28701 17.1428C10.1057 17.1428 11.8499 16.4204 13.1359 15.1344C14.4219 13.8484 15.1443 12.1042 15.1443 10.2855C15.1443 8.46683 14.4219 6.72265 13.1359 5.43665ZM5.71558 0.856934H10.8584" stroke="#404155" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.9701 8.67506C12.0879 8.9593 12.172 9.25554 12.2214 9.55776H8.92997V6.26632C9.23219 6.3157 9.52842 6.39986 9.81266 6.5176C10.2963 6.71794 10.7358 7.01158 11.106 7.38176C11.4761 7.75193 11.7698 8.1914 11.9701 8.67506L12.564 8.42905L11.9701 8.67506Z" stroke="#404155" stroke-width="1.28571" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3784_24055"><rect width="15.4286" height="18" fill="white" transform="translate(0.572266)"/></clipPath></defs></svg></a>' +
                '<div class="dropdown-content">' +
                '<a href="javascript:void(0)" class="timing_item">-</a>' +
                '<a href="javascript:void(0)" class="timing_item">FOR TIME</a>' +
                '<a href="javascript:void(0)" class="timing_item">AMRAP</a>' +
                '<a href="javascript:void(0)" class="timing_item">EMOM</a>' +
                // '<a href="javascript:void(0)" class="timing_item">TABATA</a>'+
                '<a href="javascript:void(0)" class="timing_item">STOPWATCH</a>' +
                // '<a href="javascript:void(0)" class="timing_item">REST TIMER</a>'+
                '<a href="javascript:void(0)" class="timing_item">CUSTOM INTERVAL</a>' +
                '</div>' +
                '<span class="selected_timing"></span>' +
                '</div>' +

                // '<label for="is_calculator" style="margin-left: 10px">Calculator : </label>'+
                // '<div class="form-check form-check-sm form-check-custom form-check-solid">'+
                //     '<input class="form-check-input custom-checkbox rowCheckbox is_calculator" type="checkbox" style="background: white;border: 1px solid #8D99AE;border-radius: 3px;height: 17px;width: 17px;" value="1">'+
                // '</div>'+

                '<a href="javascript:void(0)" style="background: transparent;float: right;" class="btn btn-light btn-sm remove_block" onclick="removeBlock(' +
                activeBlock +
                ', this)"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4.5H3.5H15.5" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /><path d="M14 4.5V15C14 15.3978 13.842 15.7794 13.5607 16.0607C13.2794 16.342 12.8978 16.5 12.5 16.5H5C4.60218 16.5 4.22064 16.342 3.93934 16.0607C3.65804 15.7794 3.5 15.3978 3.5 15V4.5M5.75 4.5V3C5.75 2.60218 5.90804 2.22064 6.18934 1.93934C6.47064 1.65804 6.85218 1.5 7.25 1.5H10.25C10.6478 1.5 11.0294 1.65804 11.3107 1.93934C11.592 2.22064 11.75 2.60218 11.75 3V4.5" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /><path d="M7.25 8.25V12.75" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /><path d="M10.25 8.25V12.75" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg></a></div></div>';

            blockTemplate += '<div class="row"><div class="col-5">';

            var selectBox = jQuery("#exercise_element").html();

            blockTemplate += selectBox;

            // blockTemplate += '<label class="col-lg-4 col-form-label required fw-bold fs-6" style="display:inline"> Exercise Instructions </label>';

            blockTemplate +=
                '<textarea name="instructions" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 line-break-input adjust_textarea" placeholder="Exercise Instructions"></textarea>';

            blockTemplate += '<div class="ex_data_holder" style="float:left" id="ex_data_holder"></div>';

            blockTemplate += '</div>';



            // blockTemplate += '</div>';

            blockTemplate += '<div class="col-7">';

            blockTemplate += '<table class="set_holder">';

            blockTemplate += '<thead>';

            // blockTemplate += '<tr>';

            // blockTemplate += '<th colspan="3" style="text-align: center;">Sets</th>';

            // blockTemplate += '</tr>';

            blockTemplate += '<tr>';

            blockTemplate +=
                '<th style="width: 70px;font-family: OxaniumSemibold;border-top-left-radius: 8px;border-bottom-left-radius: 8px;">Set</th>';

            blockTemplate += '<th>';

            blockTemplate += '<select class="form-select form-select-sm reps-dropdown parameter_1">';

            blockTemplate += getParameters;

            blockTemplate += '</select>';

            blockTemplate += '</th>';

            blockTemplate += '<th style="border-bottom-right-radius: 8px;border-top-right-radius: 8px;">';

            blockTemplate += '<select class="form-select form-select-sm optional-dropdown parameter_2">';

            blockTemplate += getParameters;

            blockTemplate += '</select>';

            blockTemplate += '</th>';

            blockTemplate += '</tr></thead>';

            blockTemplate += '<tbody><tr>';

            blockTemplate += '<td>1</td>';

            blockTemplate += '<td><input type="text" class="reps-input"></td>';

            blockTemplate += '<td><input type="text" class="optional-input"></td>';

            blockTemplate += '</tr></tbody>';

            blockTemplate += '</table>';

            blockTemplate +=
                '<div class="mt-4" style="text-align: center;text-align: center;height: 3.4rem;width: 101%;;border-radius: 8px;background: rgba(247, 247, 249, 1);"><button class="btn btn-sm" style="margin-right: 45px;" onclick="setButtonAction(this,-1)"><svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1H15" stroke="#8C3EFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>Set<button class="btn btn-sm" style="margin-left: 45px;" onclick="setButtonAction(this,1)"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5V19" stroke="#8C3EFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 12H19" stroke="#8C3EFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button></div>';

            blockTemplate += '</div>';

            blockTemplate += '<div class="col-12">';

            // blockTemplate += '<div class="" style="float:right"><button class="btn btn-primary" onclick="removeBlock(this)" data-toggle="tooltip" data-placement="top" title="Remove Block">Delete Block</button></div>';

            // blockTemplate += '<div class="ex_data_holder" style="float:left" id="ex_data_holder"></div>';

            blockTemplate += '</div>';

            blockTemplate += '</div>';

            jQuery(".exercise").append(blockTemplate);

            activeBlock++;

            disabled_enabled_reps_optional();
            $(".move_up").show();
            $(".move_down").show();
            $('.exercise_block:first').find('.move_up').hide();
            $('.exercise_block:last').find('.move_down').hide();
        }

        function attachBlock(index) {

            var save_publish_session = $("#save_publish_session").data("btn");
            if (save_publish_session == "Unpublish") {
                return false;
            }

            index = index - 1;

            var links = document.querySelectorAll('.attachment');
            links[index].setAttribute("link", links[index].getAttribute("link") == 1 ? 0 : 1);

            updateBlock();

            // return false;
            // var nextElement = symbol[index];

            // var previousElement = symbol[index - 1];

            // // Get the current innerHTML

            // var currentInnerHTML = previousElement.innerHTML; // Assuming "A1" is the current innerHTML
            // var currentNumber = 1;

            // if (currentInnerHTML.length > 1) {

            //     currentNumber = parseInt(currentInnerHTML.slice(1)); // Extract the numeric part and convert it to a number

            // }

            // // Increment the number

            // var nextNumber = currentNumber + 1;

            // // Construct the next innerHTML

            // var nextInnerHTML = previousElement.innerHTML[0] + nextNumber;

            // var previousInnerHTML = previousElement.innerHTML[0] + currentNumber;

            // nextElement.innerHTML = nextInnerHTML;

            // previousElement.innerHTML = previousInnerHTML;

            // if(activeBlock != 1){
            //     activeBlock--;
            // }


        }


 
        
        function moveBlock(index, direction) {
            
            var save_publish_session = $("#save_publish_session").data("btn");
            if (save_publish_session == "Unpublish") {
                return false;
            }

            var blocks = document.querySelectorAll('.exercise_block');
            var links = document.querySelectorAll('.attachment');
            var attachments = document.querySelectorAll('.attachment');
            var currentBlock = blocks[index];
            var startIndex1 = 0;
            var startIndex2 = 0;
            var endIndex2 = 0;
            
            if(direction == "up"){
                var upperObj = links[index - 1];
                var targetIndex = index - 1;
                if(upperObj.getAttribute("link") == "1"){
                    startIndex1 = targetIndex;
                    startIndex2 = index;
                    endIndex2 = index;
                } else {
                    startIndex1 = 0;
                    for(i = (index - 2); i >= 0; i--){
                        var upperObj = links[i];
                        if(upperObj.getAttribute("link") == "0"){
                            startIndex1 = i + 1;
                            break;
                        }
                    }
                    
                    startIndex2 = index;
                    endIndex2 = blocks.length - 1;
                    for(i = index; i < blocks.length; i++){
                        var lowerObj = links[i];
                        if(lowerObj.getAttribute("link") == "0"){
                            endIndex2 = i;
                            break;
                        }
                    }
                }
            } else {
                var lowerObj = links[index];
                var targetIndex = index + 1;
                if(lowerObj.getAttribute("link") == "1"){
                    startIndex1 = index;
                    startIndex2 = targetIndex;
                    endIndex2 = targetIndex;
                } else {
                    startIndex1 = 0;
                    for(i = (index - 1); i >= 0; i--){
                        var upperObj = links[i];
                        if(upperObj.getAttribute("link") == "0"){
                            startIndex1 = i + 1;
                            break;
                        }
                    }
                    
                    startIndex2 = index + 1;
                    endIndex2 = blocks.length - 1;
                    for(i = (index + 1); i < blocks.length; i++){
                        var lowerObj = links[i];
                        if(lowerObj.getAttribute("link") == "0"){
                            endIndex2 = i;
                            break;
                        }
                    }
                
                }
            }

            // var blocks = document.querySelectorAll('.exercise_block');
            // // var symbols = document.querySelectorAll('.alpha-symbol');
            // // var attachments = document.querySelectorAll('.attachment');
            // var lines = document.querySelectorAll('.line');

            // Boundary check: First block can't move up, last block can't move down
            // if ((direction === "up" && index === 0) || (direction === "down" && index === blocks.length - 1)) {
            //     return;
            // }

            // // Identify the blocks to swap
            // var currentBlock = blocks[index];
            // var currentSymbol = symbols[index];
            // var currentAttachment = attachments[index];
            // var currentLine = lines[index];

            // var targetIndex = direction === "up" ? index - 1 : index + 1;
            // var targetBlock = blocks[targetIndex];
            // var targetSymbol = symbols[targetIndex];
            // var targetAttachment = attachments[targetIndex];
            // var targetLine = lines[targetIndex];

            // // Swap blocks in the DOM
            // let parent = currentBlock.parentNode;
            // let referenceNode = direction === "up" ? targetBlock : targetBlock.nextSibling;
            
            // Move current block to the target position and vice versa
            // parent.insertBefore(currentBlock, referenceNode);

            // // Swap lines
            // if (direction === "up") {
            //     parent.insertBefore(currentLine, targetLine);
            // } else {
            //     parent.insertBefore(targetLine, currentLine);
            // }

            // // Swap attachments
            // if (direction === "up") {
            //     parent.insertBefore(currentAttachment, targetAttachment);
            // } else {
            //     parent.insertBefore(targetAttachment, currentAttachment);
            // }

            swapAdjacentDivs(startIndex1, startIndex2, endIndex2);
            updateBlock();
            
        }

        function swapAdjacentDivs(startIndex1, startIndex2, endIndex2) {

            var childDivs = Array.from(document.getElementsByClassName('exercise_block'));
            // var links = document.querySelectorAll('.attachment');
            // var attachments = document.querySelectorAll('.attachment');
            
            // Get the parent container
            const parentContainer = childDivs[0].parentNode;
            // const parentContainer = document.getElementById('parentContainer'); 

            const divsToSwap2 = childDivs.slice(startIndex2, endIndex2 + 1);
            
            divsToSwap2.forEach((div, index) => {
                parentContainer.insertBefore(div, childDivs[startIndex1 ]);
            });
            
            var attachments = Array.from(parentContainer.getElementsByClassName('attachment'));
            var lines = Array.from(parentContainer.getElementsByClassName('line'));

            var link = attachments[endIndex2].getAttribute("link");
            var newIndex = startIndex1 + endIndex2 - startIndex2;

            attachments[endIndex2].setAttribute("link", attachments[newIndex].getAttribute("link"));
            attachments[newIndex].setAttribute("link", link);

            lines.forEach((line, index) => {
                line.setAttribute("style", "display: block;");
            });
            lines[lines.length - 1].setAttribute("style", "display: none;");
            
        }
        
        function updateBlockIndexes() {
            var links = document.querySelectorAll('.attachment');
            var remove_blocks = document.querySelectorAll('.remove_block');
            var lines = document.querySelectorAll('.line');
            var move_ups = document.querySelectorAll('.move_up');
            var move_downs = document.querySelectorAll('.move_down');
            
            for (var i = 0; i < links.length; i++) {
                links[i].setAttribute("onclick", "attachBlock(" + (i + 1) + ")")
                remove_blocks[i].setAttribute("onclick", "removeBlock(" + (i) + ",this)")
                move_ups[i].setAttribute("onclick", "moveBlock(" + (i) + ",'up')")
                move_downs[i].setAttribute("onclick", "moveBlock(" + (i) + ",'down')")
            }
        }


        function updateBlock() {

            var symbol = document.querySelectorAll('.alpha-symbol');
            var links = document.querySelectorAll('.attachment');
            var remove_blocks = document.querySelectorAll('.remove_block');
            var move_ups = document.querySelectorAll('.move_up');
            var move_downs = document.querySelectorAll('.move_down');
            var lines = document.querySelectorAll('.line');
            var char = 65;
            var series = 0;
            for (var i = 0; i < symbol.length; i++) {
                if (series == 0) {
                    if (links[i].getAttribute("link") == "1") {
                        series = series + 1;
                        symbol[i].innerHTML = String.fromCharCode(char) + series;
                        links[i].style.background = "url('media/attachment_selected.svg')  no-repeat center center";
                        lines[i].style.borderLeft = "2px solid #8C3EFF";
                    } else {
                        links[i].style.background = "url('media/attachment.png')  no-repeat center center";
                        lines[i].style.borderLeft = "2px dotted #8D99AE33";
                        symbol[i].innerHTML = String.fromCharCode(char);
                        series = 0;
                        char = char + 1;
                    }
                } else {
                    series = series + 1;
                    symbol[i].innerHTML = String.fromCharCode(char) + series;
                    if (links[i].getAttribute("link") == "1") {
                        links[i].style.background = "url('media/attachment_selected.svg')  no-repeat center center";
                        lines[i].style.borderLeft = "2px solid #8C3EFF";
                        // series = series + 1;
                        // symbol[i].innerHTML = String.fromCharCode(char) + series;
                    } else {
                        links[i].style.background = "url('media/attachment.png')  no-repeat center center";
                        lines[i].style.borderLeft = "2px dotted #8D99AE33";
                        series = 0;
                        char = char + 1;
                    }
                }
            }
            activeBlock = char - 65;
            for (var i = 0; i < links.length; i++) {
                links[i].setAttribute("onclick", "attachBlock(" + (i + 1) + ")")
                remove_blocks[i].setAttribute("onclick", "removeBlock(" + (i) + ",this)")
                move_ups[i].setAttribute("onclick", "moveBlock(" + (i) + ",'up')")
                move_downs[i].setAttribute("onclick", "moveBlock(" + (i) + ",'down')")
            }
            
            $(".move_up").show();
            $(".move_down").show();
            $('.exercise_block:first').find('.move_up').hide();
            $('.exercise_block:last').find('.move_down').hide();
        }

        function initialAssignLink() {
            var symbol = document.querySelectorAll('.alpha-symbol');
            var links = document.querySelectorAll('.attachment');
            var lines = document.querySelectorAll('.line');
            for (var i = 0; i < symbol.length; i++) {
                var s1 = symbol[i].innerHTML.slice(1);
                if ((i + 1) <= symbol.length) {
                    var s2 = symbol[i + 1].innerHTML.slice(1);
                    if (s1 != "" && s2 != "" && parseInt(s1) < parseInt(s2)) {
                        links[i].setAttribute("link", 1);
                        links[i].style.background = "url('media/attachment_selected.svg')  no-repeat center center";
                        lines[i].style.borderLeft = "2px solid #8C3EFF";
                    }
                }
            }
        }

        function removeBlock(index, object) {

            var save_publish_session = $("#save_publish_session").data("btn");
            if (save_publish_session == "Unpublish") {
                return false;
            }

            var attachments = document.querySelectorAll('.attachment');
            var lines = document.querySelectorAll('.line');

            var currentAttachment = attachments[index];
            var previousAttachment = attachments[index - 1];

            let hasNumber = 0;

            let j = 0;

            if (index != 0 && lines.length == index + 1) {
                lines[index - 1].style.display = 'none';
            }
            if (previousAttachment && currentAttachment) {
                previousAttachment.setAttribute("link", currentAttachment.getAttribute("link"));
            }


            jQuery(object).closest('.exercise_block').remove();
            updateBlock();

            // var activeBlocks = jQuery(".exercise").find(".overflow-auto");

            // var symbolLabelValue = jQuery(".exercise").find(".row").find(".symbol-label").html();

            // activeBlock1 = activeBlocks.length;



            // for (var i = 0; i < activeBlock1; i++) {

            //     // jQuery(activeBlocks[i]).find(".symbol-label").html(getAlphabetLetterAtIndex(i));

            //     var element = jQuery(activeBlocks[i]).find(".symbol-label").html();

            //     var element1 = jQuery(activeBlocks[i + 1]).find(".symbol-label").html();

            //     if(i === 0 && element[0] !== 'A'){ //if first block is removed

            //         for (var k = 0; k < activeBlock1; k++) {

            //             var kelement = jQuery(activeBlocks[k]).find(".symbol-label").html();

            //             var kelement1 = jQuery(activeBlocks[k + 1]).find(".symbol-label").html();

            //             if(kelement1){

            //                 if (kelement[0] == kelement1[0]) {

            //                     currentNumber = parseInt(kelement.slice(1));

            //                     newNumber = currentNumber + 1;

            //                     newLabel = getAlphabetLetterAtIndex(j) + currentNumber;

            //                     newLabel1 = getAlphabetLetterAtIndex(j) + newNumber;

            //                     jQuery(activeBlocks[k]).find(".symbol-label").html(newLabel);

            //                     jQuery(activeBlocks[k + 1]).find(".symbol-label").html(newLabel1);

            //                 }else{

            //                     if(kelement.length>1){

            //                         hasNumber = parseInt(kelement.slice(1));

            //                     }

            //                     if(hasNumber>0){

            //                         newLabel = getAlphabetLetterAtIndex(j) + hasNumber;

            //                         jQuery(activeBlocks[k]).find(".symbol-label").html(newLabel);

            //                         hasNumber = 0;

            //                     }else{

            //                         jQuery(activeBlocks[k]).find(".symbol-label").html(getAlphabetLetterAtIndex(j));

            //                     }

            //                     j++;

            //                 }

            //             }else{

            //                 if(kelement.length>1){

            //                     hasNumber = parseInt(kelement.slice(1));

            //                 }

            //                 if(hasNumber>0){

            //                     newLabel = getAlphabetLetterAtIndex(j) + hasNumber;

            //                     jQuery(activeBlocks[k]).find(".symbol-label").html(newLabel);

            //                     hasNumber = 0;

            //                 }else{

            //                     jQuery(activeBlocks[k]).find(".symbol-label").html(getAlphabetLetterAtIndex(j));

            //                     j++;

            //                 }

            //             }

            //             if(k<activeBlocks.length-1){

            //                 jQuery(activeBlocks[k]).find(".attachment").show();

            //             }

            //         }

            //         return;

            //     }else{  //if other block is removed

            //         if (element1) {

            //             if (element[0] == element1[0]) {

            //                 currentNumber = parseInt(element.slice(1));

            //                 newNumber = currentNumber + 1;

            //                 newLabel = element[0] + currentNumber;

            //                 newLabel1 = element[0] + newNumber;

            //                 jQuery(activeBlocks[i]).find(".symbol-label").html(newLabel);

            //                 jQuery(activeBlocks[i + 1]).find(".symbol-label").html(newLabel1);

            //             } else {

            //                 if(element.length>1){

            //                     hasNumber = parseInt(element.slice(1));

            //                 }else{

            //                     hasNumber = 0;

            //                 }

            //                 if(hasNumber>0){

            //                     if(hasNumber==1) {

            //                         jQuery(activeBlocks[i]).find(".symbol-label").html(getAlphabetLetterAtIndex(i));

            //                     }

            //                     hasNumber = 0;

            //                 }else{

            //                     jQuery(activeBlocks[i]).find(".symbol-label").html(getAlphabetLetterAtIndex(j));

            //                 }

            //                 j++;

            //             }

            //         }else {                

            //             if(element.length>1){

            //                 hasNumber = parseInt(element.slice(1));

            //             }

            //             if(hasNumber>0){

            //                 if(hasNumber==1) {

            //                     jQuery(activeBlocks[i]).find(".symbol-label").html(getAlphabetLetterAtIndex(j));

            //                 }

            //                 hasNumber = 0;

            //             }else{

            //                 jQuery(activeBlocks[i]).find(".symbol-label").html(getAlphabetLetterAtIndex(j));

            //             }

            //         }

            //     }

            //     if(i<activeBlocks.length-1){

            //         jQuery(activeBlocks[i]).find(".attachment").show();

            //     }

            // }







            // var created_for = $('#created_for').val();

            // var team_id = $('#team_id').val();


            // $.ajax({

            //     url: "{{ url('remove_block') }}",

            //     type: "POST",

            //     data: {

            //         created_for: created_for,

            //         team_id: team_id,

            //         symbolLabelValue: symbolLabelValue,

            //         _token: "{{ csrf_token() }}",

            //         key: 'value'

            //     },

            //     success: function(response) {


            //         // window.location = "{{ url('/full-calender/' . $team_id) }}";

            //     },

            //     error: function(xhr) {


            //     }

            // });

        }





        function setButtonAction(obj, act) {



            var element = jQuery(obj).parent().parent().find("table tbody");

            var numSets = element.find("tr").length;



            if (act == 1) {
                if (numSets == 10) {
                    alert("You can create maximum 10 sets.");
                    return false;
                }
                var rowData = '<tr><td>' + (numSets + 1) +
                    '</td><td><input type=text" class="reps-input"></td><td><input type="text" class="optional-input"></td></tr>';



                jQuery(element).append(rowData);

            } else {

                jQuery(element).find('tr:last').remove();

            }
            setTimeout(function() {
                disabled_enabled_reps_optional();
            }, 300);
        }







        function show_ex() {

            document.getElementById('exercise').style.display = 'block';

        }

        $(document).on("change", ".parameter_1, .parameter_2", function() {
            disabled_enabled_reps_optional();
        });

        function disabled_enabled_reps_optional() {

            $(".parameter_1").each(function() {
                var parameter = $(this).val();

                if (parameter == "-") {
                    $(this).parent().parent().parent().parent().find(".reps-input").attr("disabled", true);
                } else {
                    $(this).parent().parent().parent().parent().find(".reps-input").removeAttr("disabled");
                }

                if (parameter == "min::sec") {
                    $(this).parent().parent().parent().parent().find(".reps-input").mask('00:00');
                } else {
                    $(this).parent().parent().parent().parent().find(".reps-input").unmask('00:00');
                }
            });

            $(".parameter_2").each(function() {
                var parameter = $(this).val();

                if (parameter == "-") {
                    $(this).parent().parent().parent().parent().find(".optional-input").attr("disabled", true);
                } else {
                    $(this).parent().parent().parent().parent().find(".optional-input").removeAttr("disabled");
                }

                if (parameter == "min::sec") {
                    $(this).parent().parent().parent().parent().find(".optional-input").mask('00:00');
                } else {
                    $(this).parent().parent().parent().parent().find(".optional-input").unmask('00:00');
                }
            });
        }

        disabled_enabled_reps_optional();

        $('.back_btn, #save_session, #save_publish_session').click(function() {
            var back_validation = "";
            var current_btn = $(this).data("btn");
            var back_url = "";
            if (current_btn == "back") {
                back_validation = 2;
                back_url = $(this).data("url");
            }
            var status = 0;
            if (current_btn == "Publish") {
                status = 1;
            }

            var save_publish_session = $("#save_publish_session").data("btn");
            if (save_publish_session == "Unpublish" && current_btn == "Unpublish") {
                if (!confirm('Are you sure you want to unpublish?')) {
                    return false;
                }
            }

            if (current_btn == "save") {
                if (save_publish_session == "Unpublish") {
                    status = 1;
                }
            }
            var coachInstructions = jQuery("#coachInstructions").val();
            var video_url = jQuery("#video_url").val();

            if (coachInstructions == "") {
                if (current_btn == "back") {
                    back_validation = 1;
                } else {
                    alert("Please enter coach instructions");
                    return false;
                }
            }


            var data = Array();

            var allRows = jQuery(".exercise").find(".exercise_block");

            // if (allRows.length < 1) {
            //     if (current_btn == "back") {
            //         back_validation = 1;
            //     } else {
            //         alert("Please add atleast one block");
            //         return false;
            //     }
            // }


            function getParameterByName(name, url) {

                if (!url) url = window.location.href;

                name = name.replace(/[\[\]]/g, '\\$&');

                var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),

                    results = regex.exec(url);

                if (!results) return null;

                if (!results[2]) return '';

                return decodeURIComponent(results[2].replace(/\+/g, ' '));

            }



            for (var i = 0; i < allRows.length; i++) {

                var row = Array();



                var setsData = Array();

                var sets = jQuery(allRows[i]).find(".set_holder tbody tr");

                for (var j = 0; j < sets.length; j++) {

                    var input1 = jQuery(sets[j]).find("input")[0];

                    var input2 = jQuery(sets[j]).find("input")[1];

                    // if (!input1.hasAttribute("disabled") && input1.value == "") {
                    //     if (current_btn == "back") {
                    //         back_validation = 1;
                    //     } else {
                    //         alert("Please enter set details");
                    //         return false;
                    //     }
                    // }

                    // var input2 = jQuery(sets[j]).find("input")[1];
                    // if (!input2.hasAttribute("disabled") && input2.value == "") {
                    //     if (current_btn == "back") {
                    //         back_validation = 1;
                    //     } else {
                    //         alert("Please enter set details");
                    //         return false;
                    //     }
                    // }


                    setsData.push({

                        "duration": input1.value,

                        "optional": input2.value

                    });

                }

                var exerciseVideoData = Array();

                var exerciseVideos = jQuery(allRows[i]).find(".video-block");

                for (var j = 0; j < exerciseVideos.length; j++) {

                    var exerciseVideoId = jQuery(exerciseVideos[j]).data("video_id");

                    exerciseVideoData.push({
                        "video_id": exerciseVideoId,
                    });

                }


                var execrise_ele = jQuery(allRows[i]).find(".exercise_ele").val();
                if (execrise_ele == "") {
                    if (current_btn == "back") {
                        back_validation = 1;
                    } else {
                        alert("Please select a exercise");
                        return false;
                    }
                }
                var instruction = jQuery(allRows[i]).find("textarea[name='instructions']").val();
                // if (instruction == "") {
                //     if (current_btn == "back") {
                //         back_validation = 1;
                //     } else {
                //         alert("Please enter exercise instructions");
                //         return false;
                //     }
                // }

                var card = jQuery(allRows[i]).find(".symbol-label").html();

                var leaderboard = jQuery(allRows[i]).find(".leaderboard").val();
                var timer_type = jQuery(allRows[i]).find(".timer_type").val();
                // var is_calculator = 0;
                // if (jQuery(allRows[i]).find(".is_calculator").prop('checked')) {
                //     is_calculator = 1;
                // }
                var parameter_1 = jQuery(allRows[i]).find(".parameter_1").val();
                var parameter_2 = jQuery(allRows[i]).find(".parameter_2").val();
                // var leaderboard = 1;

                data.push({

                    "set": setsData,
                    "exercise_videos": exerciseVideoData,

                    "exercise": execrise_ele,

                    "instruction": instruction,

                    // 'card': getAlphabetLetterAtIndex(i),

                    'card': card,

                    'leaderboard': leaderboard,
                    'timer_type': timer_type,
                    // 'is_calculator': is_calculator,
                    'parameter_1': parameter_1,
                    'parameter_2': parameter_2

                });

            }


            if (back_validation == 1) {
                $.confirm({
                    title: 'Confirm!',
                    content: 'Are you sure you want to leave it without save?',
                    buttons: {
                        confirm: {
                            btnClass: 'btn-danger',
                            keys: ['enter', 'shift'],
                            action: function() {
                                window.location.href = back_url;
                            }
                        },
                        cancel: {}
                    }
                });

                return false;
            }
            if (back_validation == 2) {
                window.location.href = back_url;
                return false;
            }

            var url = window.location.href;



            var dateParam = getParameterByName('date', url);

            var dateParts = dateParam.split("-");

            var year = dateParts[0];

            var month = dateParts[1];

            var day = dateParts[2];

            var created_for = $('#created_for').val();

            var team_id = $('#team_id').val();
            var course_exercise_id = $('.course_exercise_id').find(":selected").val();
            var course_exercise_instructions = $('#course_exercise_instructions').val();


            var exerciseMasterVideoData = [];

            var exerciseMasterVideos = jQuery(".main_course_video").find(".video-block");

            exerciseMasterVideos.each(function(index, videoBlock) {
                var exerciseMasterVideoId = jQuery(videoBlock).data("video_id");

                exerciseMasterVideoData.push({
                    "video_id": exerciseMasterVideoId,
                });
            });



            $.ajax({

                url: "{{ url('save_session') }}",

                type: "POST",

                data: {

                    created_for: created_for,
                    team_id: team_id,
                    data: data,
                    exercise_master_videos: exerciseMasterVideoData,
                    year: year,
                    month: month,
                    day: day,
                    status: status,
                    coachInstructions: coachInstructions,
                    video_url: video_url,
                    course_exercise_id: course_exercise_id,
                    course_exercise_instructions: course_exercise_instructions,

                    _token: "{{ csrf_token() }}",

                    key: 'value'

                },

                success: function(response) {
                },
                error: function(xhr) {
                }

            });

            setTimeout(after_save_session, 1500);

            function after_save_session() {
                // if(current_btn == "save"){
                //     window.location.href = "{{ url('/full-calender/' . $team_id) }}";
                // } else {
                window.location.reload();
                // }
            }
        });

        initialAssignLink();
    </script>



    <script>
        const urlParams = new URLSearchParams(window.location.search);

        const selectedDate = urlParams.get('date');



        if (selectedDate) {

            const formattedDate = new Date(selectedDate).toLocaleDateString('en-US', {

                weekday: 'long',

                month: 'long',

                day: 'numeric'

            });



            document.getElementById('selectedDate').innerText = formattedDate;

        }
    </script>

    <!-- FullCalendar JS -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>



    <!-- Your other scripts -->

    <script>
        // Your existing script



        // $(document).ready(function() {

        //     // Initialize FullCalendar

        //     $('#calendar').fullCalendar({

        //         // Add your FullCalendar options here

        //         // For example:

        //         // header: {

        //         //     //     left: 'prev,next today',

        //         //     center: 'title',

        //         //     right: 'month,agendaWeek,agendaDay'

        //         // },

        //         // events: [

        //         //     // Add your events here

        //         //     // Example: { title: 'Event 1', start: '2024-02-03' },

        //         // ]

        //     });

        // });





        $(document).ready(function() {


            $(document).on('click', '.remove-video', function() {
                var key = $(this).data('key'); // Get the key of the video
                $(this).closest('.video-block').remove(); // Remove the corresponding video block
            });

            const maxVideoSection = 5;

            function checkVideoSectionLimit() {
                if ($('input[name="videoTitle[]"]').length >= maxVideoSection) {
                    $('.add_video_section').hide(); // Hide the "Add Input" button
                } else {
                    $('.add_video_section').show(); // Show the button if less than 5 inputs
                }
            }

            $(document).on('click', '.add_video_section', function() {
                $(this).attr("disabled", true);
                var html_field = `<div class="row">
                    <div class="col-md-5">
                        <div class="mb-3">
                            <label for="videoTitle" class="form-label">Video Title</label>
                            <input type="text" class="form-control" name="videoTitle[]"
                                placeholder="Video Title" style="width: 100%">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="mb-3">
                            <label for="videoUrl" class="form-label">Video URL</label>
                            <input type="text" class="form-control" name="videoUrl[]"
                                placeholder="https://example.com/abc.mp4" style="width: 100%" required>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-3">
                            <br>
                            <button type="button" class="mt-2 btn btn-danger remove_video_section">Remove</button>
                        </div>
                    </div>
                </div>`;

                $('.video_section').append(html_field);
                $(this).attr("disabled", false);
                checkVideoSectionLimit();
            });

            $(document).on('click', '.remove_video_section', function() {
                $(this).parent().parent().parent().remove();
                checkVideoSectionLimit();
            });
            checkVideoSectionLimit();

            $(".exercise_clear_btn").click(function(e) {
                e.preventDefault();
                $("#course_exercise_id").empty();
                $("#course_exercise_id").append('<option value="">Select Exercise</option>');
                $("#course_exercise_instructions").val("");
            });

            $(".create_exercise_btn").click(function(e) {
                e.preventDefault();

                var exerciseName = $("#create_exercise_form").find(".exerciseName").val();
                if (exerciseName == "") {
                    alert("Please enter exercise title.");
                    return false;
                }


                var formData = $("#create_exercise_form").serialize(); // Serialize form data

                $.ajax({
                    type: 'POST',
                    url: $("#create_exercise_form").attr('action'),
                    data: formData,
                    success: function(response) {
                        pullInfoFromDb("", response, exerciseName);

                        var exerciseOptions = `<li style="border-bottom: 1px solid #8D99AE26; border-left: none; border-right: none; border-top: none;margin-bottom: 10px;"
                                        class="list-group-item" data-exercise-id="` + response + `"
                                        value="` + response + `" onclick="pullInfoFromDb(this)">` + exerciseName + `
                                    </li>`;

                        $("#exerciseOptions").append(exerciseOptions);
                        $('#create_exercise_form').trigger('reset');
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', status, error);
                        // Optionally alert the user or handle the error gracefully
                    }
                });
            });

            $(".create_video_btn").click(function(e) {
                e.preventDefault();

                var videoUrl = $("#create_video_form").find(".videoUrl").val();
                if (videoUrl == "") {
                    alert("Please enter video url.");
                    return false;
                }


                var formData = $("#create_video_form").serialize(); // Serialize form data

                $.ajax({
                    type: 'POST',
                    url: $("#create_video_form").attr('action'),
                    data: formData,
                    success: function(response) {

                        var video_id = response.id;
                        var videoTitle = response.videoTitle;
                        var videoUrl = response.videoUrl;

                        var respBody = "<div class='mb-3 row video-block' data-video_id='" +
                            video_id + "' data-key=''>"; // Add unique identifier
                        respBody += "<div class='col-md-3'>";
                        if (wordExistsInString(videoUrl, "youtube.com")) {
                            var videoId = getYouTubeVideoId(videoUrl);
                            var thumbnailUrl = videoId ? `https://img.youtube.com/vi/${videoId}/hqdefault.jpg` : '';
                            
                            respBody +=
                                "<a href='"+ videoUrl +"' target='_blank'><img src='"+ thumbnailUrl +"' alt='Video Thumbnail' width='100%' height='50px' style='cursor: pointer;'' class='video-thumbnail'></a>";
                            // respBody +=
                            //     "<iframe controls loop width='100%' height='50px' src='" +
                            //     videoUrl + "'></iframe>";
                        } else {
                            respBody +=
                                "<video controls loop width='100%' height='50px' src='" +
                                videoUrl + "'></video>";
                        }
                        respBody += "</div>";
                        respBody += "<div class='col-md-7'>";
                        respBody += "<p>" + videoTitle + "</p>";
                        respBody += "</div>";
                        respBody += "<div class='col-md-2'>";
                                        respBody +=
                                            `<button class='btn remove-video' data-key=''><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4.5H3.5H15.5" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

                                            <path d="M14 4.5V15C14 15.3978 13.842 15.7794 13.5607 16.0607C13.2794 16.342 12.8978 16.5 12.5 16.5H5C4.60218 16.5 4.22064 16.342 3.93934 16.0607C3.65804 15.7794 3.5 15.3978 3.5 15V4.5M5.75 4.5V3C5.75 2.60218 5.90804 2.22064 6.18934 1.93934C6.47064 1.65804 6.85218 1.5 7.25 1.5H10.25C10.6478 1.5 11.0294 1.65804 11.3107 1.93934C11.592 2.22064 11.75 2.60218 11.75 3V4.5" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                            </path>

                                            <path d="M7.25 8.25V12.75" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

                                            <path d="M10.25 8.25V12.75" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

                                            </svg></button>`;
                        respBody += "</div>";
                        respBody += "</div>";

                        jQuery(videoObjectReference).parent().parent().parent().find(
                            ".card-body").append(respBody);

                        var videoOption =
                            `<li style="border-bottom: 1px solid #8D99AE26; border-left: none; border-right: none; border-top: none;margin-bottom: 10px;" class="list-group-item" data-video-id="` +
                            video_id + `"
                                        value="` + video_id + `">
                                        <p class="videoTitle">` + videoTitle + `</p>
                                        <p class="videoUrl">` + videoUrl + `</p>
                                    </li>`;
                        $("#videoOptions").append(videoOption);

                        $("#videoModalpop").modal("hide");
                        $("#kt_modal_create_video").modal("hide");
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', status, error);
                        // Optionally alert the user or handle the error gracefully
                    }
                });
            });

            $('#exerciseSearch').on('keyup', function() {
                var searchText = $(this).val().toLowerCase();
                $('#exerciseOptions li').filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(searchText) > -1);
                });
            });

            $('#videoSearch').on('keyup', function() {
                var searchText = $(this).val().toLowerCase();
                $('#videoOptions li').filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(searchText) > -1);
                });
            });


            $.ajaxSetup({

                headers: {

                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

                }

            });

            var baseUrl = @json(url('/'));



            var calendar = jQuery('#calendar').fullCalendar({

                editable: true,

                header: {

                    left: 'prev,next today',

                    center: 'title',

                    right: 'month,agendaWeek,agendaDay'

                },

                events: baseUrl + '/full-calender',

                selectable: true,

                selectHelper: true,

                select: function(start, end, allDay) {

                    var dateStr = moment(start).format('YYYY-MM-DD');

                    window.location.href = '{{ url('create_session') }}?date=' + dateStr +
                        '&team_id=' + jQuery('#team_id').val();

                    calendar.fullCalendar('unselect');

                }

            });

        });



        $(document).ready(function() {

            $('#calendar').fullCalendar({

                events: '/calendar/events',

                eventRender: function(event, element) {

                    element.css('border', '0');

                }

            });

            $('#exerciseOptions li').on('click', function() {

                var selectedId = $(this).data('exercise-id');

                var selectedName = $(this).text();

                // Your logic to handle the selection

                updateSelectedExercise(selectedId, selectedName);

                jQuery('#exerciseOptions li.active').removeClass('active');

                jQuery(this).addClass('active');

            });

            $('#videoOptions li').on('click', function() {

                var video_id = $(this).data('video-id');

                var videoTitle = $(this).find(".videoTitle").text();
                var videoUrl = $(this).find(".videoUrl").text();

                var respBody = "";
                respBody = "<div class='mb-3 row video-block' data-video_id='" + video_id +
                "' data-key=''>"; // Add unique identifier
                respBody += "<div class='col-md-3'>";
                if (wordExistsInString(videoUrl, "youtube.com")) {
                    var videoId = getYouTubeVideoId(videoUrl);
                    var thumbnailUrl = videoId ? `https://img.youtube.com/vi/${videoId}/hqdefault.jpg` : '';
                    
                    respBody +=
                        "<a href='"+ videoUrl +"' target='_blank'><img src='"+ thumbnailUrl +"' alt='Video Thumbnail' width='100%' height='50px' style='cursor: pointer;'' class='video-thumbnail'></a>";
                    // respBody +=
                    //     "<iframe controls loop width='100%' height='50px' src='" +
                    //     videoUrl + "'></iframe>";
                } else {
                    respBody +=
                        "<video controls loop width='100%' height='50px' src='" +
                        videoUrl + "'></video>";
                }
                respBody += "</div>";
                respBody += "<div class='col-md-7'>";
                respBody += "<p>" + videoTitle + "</p>";
                respBody += "</div>";
                respBody += "<div class='col-md-2'>";
                                        respBody +=
                                            `<button class='btn remove-video' data-key=''><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4.5H3.5H15.5" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

                                            <path d="M14 4.5V15C14 15.3978 13.842 15.7794 13.5607 16.0607C13.2794 16.342 12.8978 16.5 12.5 16.5H5C4.60218 16.5 4.22064 16.342 3.93934 16.0607C3.65804 15.7794 3.5 15.3978 3.5 15V4.5M5.75 4.5V3C5.75 2.60218 5.90804 2.22064 6.18934 1.93934C6.47064 1.65804 6.85218 1.5 7.25 1.5H10.25C10.6478 1.5 11.0294 1.65804 11.3107 1.93934C11.592 2.22064 11.75 2.60218 11.75 3V4.5" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                            </path>

                                            <path d="M7.25 8.25V12.75" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

                                            <path d="M10.25 8.25V12.75" stroke="#404155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

                                            </svg></button>`;
                respBody += "</div>";
                respBody += "</div>";

                jQuery(videoObjectReference).parent().parent().parent().find(".card-body").append(respBody);

                $("#videoModalpop").modal("hide");
            });

        });



        function openModal(object) {
            objectReference = object;

            if ($(object).attr("id") == "course_exercise_id") {
                $("#is_course_exercise_id").val("1");
            } else {
                $("#is_course_exercise_id").val("");
            }
            $("#exerciseSearch").val("");
            var searchText = $("#exerciseSearch").val().toLowerCase();
            $('#exerciseOptions li').filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(searchText) > -1);
            });
            jQuery('#exerciseOptions li.active').removeClass('active');
            $('#exerciseModalpop').modal('show');

        }

        function openVideoChooseModal(object) {
            videoObjectReference = object;

            $("#videoSearch").val("");
            var searchText = $("#videoSearch").val().toLowerCase();
            $('#videoOptions li').filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(searchText) > -1);
            });
            jQuery('#videoOptions li.active').removeClass('active');
            $('#videoModalpop').modal('show');

        }



        function updateSelectedExercise(selectedId, selectedName) {

            // Your logic to update selected exercise


            jQuery(objectReference).find(".exercise_ele").val(selectedName);





        }
    </script>

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

            var save_publish_session = $("#save_publish_session").data("btn");
            if (save_publish_session == "Unpublish") {
                $("textarea, input, select, .set_btn, .dropbtn, #kt_account_profile_details_submit, .exercise_clear_btn, .add-video")
                    .prop('disabled', true);
            }

            
            $(".move_up").show();
            $(".move_down").show();
            $('.exercise_block:first').find('.move_up').hide();
            $('.exercise_block:last').find('.move_down').hide();
            
            // Wait for the calendar to be rendered

            setTimeout(function() {

                // Apply border-radius using jQuery

                $('#calendar-card').css('border-radius', '22px');

            }, 100); // Adjust the timeout as needed

            $(".close_modal").click(function(e) {
                e.preventDefault();
                $("#exerciseModalpop").modal("hide");
                $("#videoModalpop").modal("hide");
            });

            $(document).on("focus", ".reps-input, .optional-input", function() {
                $(this).select();
            });

            $(document).on("click", ".dropbtn", function() {
                $(".dropdown-content").hide();
                $(this).parent().find(".dropdown-content").show();
            });

            $(document).on("click", ".timing_item", function() {
                var timing_item = $(this).text().trim();
                if (timing_item == "-") {
                    timing_item = "";
                }
                $(this).parent().parent().find(".selected_timing").text(timing_item);
                $(this).parent().parent().find(".timer_type").val(timing_item);
                $(".dropdown-content").hide();
            });

            $(document).click(function(event) {
                var target = $(event.target);
                if (!target.closest('.dropbtn').length && !target.closest('.dropdown-menu').length) {
                    $('.dropdown-content').hide();
                }
            });
        });
        
    </script>



@endsection