@extends('layout.master')
@section('css')
    <link href="{{ asset('css/scroll-custom-style.css') }}" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.17/dist/css/bootstrap-select.min.css">

    <style>
        .dropdown.bootstrap-select>.btn,
        .dropdown.bootstrap-select>.btn:hover,
        .dropdown.bootstrap-select>.btn:active,
        .dropdown.bootstrap-select>.btn:visited,
        .dropdown.bootstrap-select>.btn:focus {
            background-color: transparent;
            color: #495057;

            text-transform: none;
            /* border-color: white; */
            font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        }

    </style>
@stop
@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <form id="storeprogramme" action="{{ route('programs.store') }}" method="POST">
                        @csrf
                        <div class="card">
                            <div class="card-header card-header-warning">
                                <h4 class="card-title">
                                    @if (request()->get('schedule_status'))
                                        {{ Request::get('schedule_status') }}
                                        <input type="hidden" name="schedule_status"
                                            value="{{ Request::get('schedule_status') }}">
                                    @endif
                                    &#58; Day
                                    @if (request()->get('program_id'))
                                        {{ $program->program_for_day }}
                                        <input type="hidden" name="program_id" value="{{ Request::get('program_id') }}">
                                    @endif
                                    &#44;
                                    @if (request()->get('activity_types_id'))
                                        {{ $activity_type->name }}
                                        <input type="hidden" name="activity_types_id"
                                            value="{{ Request::get('activity_types_id') }}">
                                    @endif
                                </h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <div class="row">
                                            <label class="col-sm-2 col-form-label">Activity <span class="text-danger"> *
                                                </span></label>
                                            <div class="col-sm-10">
                                                <div class="form-group bmd-form-group">
                                                    <select name="activity_id[]" id="activity"
                                                        class=" form-control selectpicker p-1 required"
                                                        data-actions-box="true" data-live-search="true"
                                                        title="Select Activity" data-selected multiple
                                                        data-selected-text-format="count > 2" data-size="5">
                                                        @foreach ($activity as $key => $value)
                                                            @php
                                                                $title_en = strlen($value->title_en) > 50 ? substr($value->title_en, 0, 50) . '...' : $value->title_en;
                                                            @endphp
                                                            <option value="{{ $value->id }}"
                                                                data-activity-of="{{ $value->activity_of }}"
                                                                data-activity-title="{{ $value->title_en }}"
                                                                data-media-type="{{ $value->media_type }}"
                                                                {{ in_array($value->id, $programme_activities) ? 'selected' : '' }}>
                                                                {{ $value->activity_of }} : {{ $title_en }} (
                                                                {{ $value->media_type }} )
                                                            </option>
                                                        @endforeach


                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <div class="row">
                                            <label class="col-sm-2 col-form-label mt-3">Normal</label>
                                            <div class="col-sm-10">
                                                <div class="form-group bmd-form-group">
                                                    <div class="table-responsive">
                                                        <table class="table" id="NormalDragTable" width="100%"
                                                            cellspacing="0" cellpadding="2">
                                                            <thead>
                                                                <tr>
                                                                    <th width="10%">Order</th>
                                                                    <th width="50%">Activity Name</th>
                                                                    <th width="10%">Media Type</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="NormalTBody">

                                                                @if (!empty($normal_prog_activities) && isset($normal_prog_activities))
                                                                    @foreach ($normal_prog_activities as $key => $normal_prog_activity)

                                                                        <tr id="rowNormal{{ $normal_prog_activity->activities_id }}"
                                                                            data-id="rowNormal"
                                                                            data-activityid='{{ $normal_prog_activity->activities_id }}'>
                                                                            <td><input type="hidden"
                                                                                    name="{{ $normal_prog_activity->activity_of }}[{{ $normal_prog_activity->activities_id }}]"
                                                                                    id="{{ $normal_prog_activity->activities_id }}"
                                                                                    data-order="{{ $normal_prog_activity->activity_order }}"
                                                                                    value="{{ $normal_prog_activity->activity_order }}">{{ $key+1 }}
                                                                            </td>
                                                                            <td>{{ $normal_prog_activity->title_en }}</td>
                                                                            <td>{{ ucfirst($normal_prog_activity->media_type) }}
                                                                            </td>
                                                                        </tr>
                                                                    @endforeach
                                                                @else
                                                                    <tr class="no-record-normal">
                                                                        <td colspan="3" style="text-align: center;">No
                                                                            Record Found</td>
                                                                    </tr>
                                                                @endif
                                                            </tbody>

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

                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <div class="row">
                                            <label class="col-sm-2 col-form-label mt-3">Yoga</label>
                                            <div class="col-sm-10">
                                                <div class="form-group bmd-form-group">
                                                    <div class="table-responsive">
                                                        <table class="table" id="YogaDragTable" width="100%"
                                                            cellspacing="0" cellpadding="2">
                                                            <thead>
                                                                <tr>
                                                                    <th width="10%">Order</th>
                                                                    <th width="50%">Activity Name</th>
                                                                    <th width="10%">Media Type</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="YogaTBody">
                                                                @if (!empty($yoga_prog_activities) && isset($yoga_prog_activities))
                                                                    @foreach ($yoga_prog_activities as $key => $yoga_prog_activity)

                                                                        <tr id="rowYoga{{ $yoga_prog_activity->activities_id }}"
                                                                            data-id="rowYoga"
                                                                            data-activityid='{{ $yoga_prog_activity->activities_id }}'>
                                                                            <td><input type="hidden"
                                                                                    name="{{ $yoga_prog_activity->activity_of }}[{{ $yoga_prog_activity->activities_id }}]"
                                                                                    id="{{ $yoga_prog_activity->activities_id }}"
                                                                                    data-order="{{ $yoga_prog_activity->activity_order }}"
                                                                                    value="{{ $yoga_prog_activity->activity_order }}">{{ $key+1 }}
                                                                            </td>
                                                                            <td>{{ $yoga_prog_activity->title_en }}</td>
                                                                            <td>{{ ucfirst($yoga_prog_activity->media_type) }}
                                                                            </td>
                                                                        </tr>


                                                                    @endforeach
                                                                @else
                                                                    <tr class="no-record-yoga">
                                                                        <td colspan="3" style="text-align: center;">No
                                                                            Record Found</td>
                                                                    </tr>
                                                                @endif
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <div class="row">
                                            <label class="col-sm-2 col-form-label mt-3">Diet</label>
                                            <div class="col-sm-10">
                                                <div class="form-group bmd-form-group">
                                                    <div class="table-responsive">
                                                        <table class="table" id="DietDragTable" width="100%"
                                                            cellspacing="0" cellpadding="2">
                                                            <thead>
                                                                <tr>
                                                                    <th width="10%">Order</th>
                                                                    <th width="50%">Activity Name</th>
                                                                    <th width="10%">Media Type</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="DietTBody">
                                                                @if (!empty($diet_prog_activities) && isset($diet_prog_activities))
                                                                    @foreach ($diet_prog_activities as $key => $diet_prog_activity)

                                                                        <tr id="rowDiet{{ $diet_prog_activity->activities_id }}"
                                                                            data-id="rowDiet"
                                                                            data-activityid='{{ $diet_prog_activity->activities_id }}'>
                                                                            <td><input type="hidden"
                                                                                    name="{{ $diet_prog_activity->activity_of }}[{{ $diet_prog_activity->activities_id }}]"
                                                                                    id="{{ $diet_prog_activity->activities_id }}"
                                                                                    data-order="{{ $diet_prog_activity->activity_order }}"
                                                                                    value="{{ $diet_prog_activity->activity_order }}">{{ $key+1 }}
                                                                            </td>
                                                                            <td>{{ $diet_prog_activity->title_en }}</td>
                                                                            <td>{{ ucfirst($diet_prog_activity->media_type) }}
                                                                            </td>
                                                                        </tr>
                                                                    @endforeach
                                                                @else
                                                                    <tr class="no-record-diet">
                                                                        <td colspan="3" style="text-align: center;">No
                                                                            Record Found</td>
                                                                    </tr>
                                                                @endif
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <div class="row">
                                            <label class="col-sm-2 col-form-label">Extra</label>
                                            <div class="col-sm-10">
                                                <div class="form-group bmd-form-group">
                                                    <div class="table-responsive">
                                                        <table class="table" id="ExtraDragTable" width="100%" cellspacing="0" cellpadding="2">
                                                            <thead>
                                                                <tr>
                                                                    <th width="10%">Order</th>
                                                                    <th width="50%">Activity Name</th>
                                                                    <th width="10%">Media Type</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="ExtraTBody">
                                                                @if (!empty($extra_prog_activities) && isset($extra_prog_activities))
                                                                @foreach ($extra_prog_activities as $key => $extra_prog_activity)

                                                                <tr id="rowExtra{{ $extra_prog_activity->activities_id }}" data-id="rowExtra" data-activityid='{{ $extra_prog_activity->activities_id }}'>
                                                                    <td><input type="hidden" name="{{ $extra_prog_activity->activity_of }}[{{ $extra_prog_activity->activities_id }}]" id="{{ $extra_prog_activity->activities_id }}" data-order="{{ $extra_prog_activity->activity_order }}" value="{{ $extra_prog_activity->activity_order }}">{{ $extra_prog_activity->activity_order }}</td>
                                                                    <td>{{ $extra_prog_activity->title_en }}</td>
                                                                    <td>{{ ucfirst($extra_prog_activity->media_type) }}</td>
                                                                </tr>
                                                                @endforeach
                                                            @else
                                                                <tr class="no-record-extra">
                                                                    <td colspan="3" style="text-align: center;">No Record Found</td>
                                                                </tr>
                                                                @endif
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div> -->



                                <div class="text-center pt-2">
                                    <a href="{{ route('programs') }}" class="btn btn-danger w-25">Cancel</a>
                                    <input type="submit" class="btn btn-info w-25" name="submit" value="SAVE">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop
@section('script')
    <style>
        .table-responsive {
            overflow-x: hidden !important;
            overflow-y: auto !important;
        }

        .bmd-form-group .form-control,
        .bmd-form-group label,
        .bmd-form-group input::placeholder {
            line-height: 3.5;
        }

        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="url"],
        input[type="time"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="tel"],
        input[type="number"],
        input[type="search"],
        textarea.materialize-textarea {
            margin: 0 auto;
            padding: 0;
        }

        .form-control {
            background: none;
        }
        input.file-path::placeholder {
            line-height: 2;
        }

        textarea.form-control {
            border-bottom: 1px solid #9e9e9e;
        }

        .bootstrap-select {
            background-image: none !important;
            padding: 0 !important;
        }

        .capital-media-type {
            text-transform: capitalize;
        }

        .bootstrap-select .dropdown-menu {
            max-width: 100% !important;
        }

        .row-drag-class {
            background-color: #9abe2a;
        }

    </style>
    <script>
        var controller_url = "{{ route('programs') }}";
    </script>
    <script src="{{ asset('js/program/add.js') }}" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.17/dist/js/bootstrap-select.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/TableDnD/0.9.1/jquery.tablednd.js"
        integrity="sha256-d3rtug+Hg1GZPB7Y/yTcRixO/wlI78+2m08tosoRn7A=" crossorigin="anonymous"></script>


    <script type="text/javascript">
        $(document).ready(function() {
            // Initialise the table
            $("#NormalDragTable").tableDnD({
                onDragClass: "row-drag-class",
                onDrop: function(table, row) {
                    var rows = table.tBodies[0].rows;
                    for (var i = 0; i < rows.length; i++) {

                        var currentRow = rows[i];
                        var activity_id = $('#' + currentRow.id).data('activityid');
                        var rowID = currentRow.id;
                        var reorderNumber = parseInt(i + 1);

                        var orderColumnHTML = '<input type="hidden" name="Normal[' + activity_id +
                            ']" id="' + activity_id + '"  value="' + reorderNumber + '">' +
                            reorderNumber;

                        $(table).parent().find('#' + rowID + ' td:first').html(orderColumnHTML);
                    }
                }
            });
            $("#YogaDragTable").tableDnD({
                onDragClass: "row-drag-class",
                onDrop: function(table, row) {
                    var rows = table.tBodies[0].rows;
                    for (var i = 0; i < rows.length; i++) {

                        var currentRow = rows[i];
                        var activity_id = $('#' + currentRow.id).data('activityid');
                        var rowID = currentRow.id;
                        var reorderNumber = parseInt(i + 1);

                        var orderColumnHTML = '<input type="hidden" name="Yoga[' + activity_id +
                            ']" id="' + activity_id + '"  value="' + reorderNumber + '">' +
                            reorderNumber;

                        $(table).parent().find('#' + rowID + ' td:first').html(orderColumnHTML);
                    }
                }
            });
            $("#DietDragTable").tableDnD({
                onDragClass: "row-drag-class",
                onDrop: function(table, row) {
                    var rows = table.tBodies[0].rows;
                    for (var i = 0; i < rows.length; i++) {

                        var currentRow = rows[i];
                        var activity_id = $('#' + currentRow.id).data('activityid');
                        var rowID = currentRow.id;
                        var reorderNumber = parseInt(i + 1);

                        var orderColumnHTML = '<input type="hidden" name="Diet[' + activity_id +
                            ']" id="' + activity_id + '"  value="' + reorderNumber + '">' +
                            reorderNumber;

                        $(table).parent().find('#' + rowID + ' td:first').html(orderColumnHTML);
                    }
                }
            });
            $("#ExtraDragTable").tableDnD({
                onDragClass: "row-drag-class",
                onDrop: function(table, row) {
                    var rows = table.tBodies[0].rows;
                    for (var i = 0; i < rows.length; i++) {

                        var currentRow = rows[i];
                        var activity_id = $('#' + currentRow.id).data('activityid');
                        var rowID = currentRow.id;
                        var reorderNumber = parseInt(i + 1);

                        var orderColumnHTML = '<input type="hidden" name="Extra[' + activity_id +
                            ']" id="' + activity_id + '"  value="' + reorderNumber + '">' +
                            reorderNumber;

                        $(table).parent().find('#' + rowID + ' td:first').html(orderColumnHTML);
                    }
                }
            });

            $("select#activity").change(function(event) {
                var i = 1;
                const selectedActivities = {
                    normal: [],
                    yoga: [],
                    diet: [],
                    extra: []
                };
                $('#activity :selected').each(function() {
                    var activity_id = $(this).val();
                    var activity_of = $(this).data("activity-of");
                    var activity_title = $(this).data("activity-title");
                    var media_type = $(this).data("media-type");
                    if (activity_of === 'Normal') {
                        $("tr.no-record-normal").css("display", "none");
                        const $NormalTBody = $("#NormalTBody");
                        const normalRowLength = $NormalTBody.find('[data-id="rowNormal"]').length;
                        const $existRow = $NormalTBody.find('#rowNormal' + activity_id + '');
                        selectedActivities.normal.push('#rowNormal' + activity_id);
                        if ($existRow.length === 0) {
                            const orderNumber = normalRowLength + 1;

                            $NormalTBody.append('<tr id="rowNormal' + activity_id +
                                '" data-activityid=' + activity_id +
                                ' data-id="rowNormal"><td><input type="hidden" name="' +
                                activity_of + '[' + activity_id + ']" id="' + activity_id +
                                '"  value="' + orderNumber + '">' + orderNumber + '</td><td>' +
                                activity_title + '</td><td class="capital-media-type">' +
                                media_type + '</td></tr>');
                            $("#NormalDragTable").tableDnDUpdate();
                        }
                    }
                    if (activity_of === 'Yoga') {
                        $("tr.no-record-yoga").css("display", "none");
                        const $YogaTBody = $("#YogaTBody");
                        const yogaRowLength = $YogaTBody.find('[data-id="rowYoga"]').length;
                        selectedActivities.yoga.push('#rowYoga' + activity_id);
                        if ($YogaTBody.find('#rowYoga' + activity_id + '').length === 0) {
                            const orderNumber = yogaRowLength + 1;
                            $YogaTBody.append('<tr id="rowYoga' + activity_id +
                                '" data-activityid=' + activity_id +
                                ' data-id="rowYoga"><td><input type="hidden" name="' +
                                activity_of + '[' + activity_id + ']" id="' + activity_id +
                                '"  value="' + orderNumber + '">' + orderNumber + '</td><td>' +
                                activity_title + '</td><td class="capital-media-type">' +
                                media_type + '</td></tr>');
                            $("#YogaDragTable").tableDnDUpdate();
                        }
                    }
                    if (activity_of === 'Diet') {
                        $("tr.no-record-diet").css("display", "none");
                        const $DietTBody = $("#DietTBody");
                        const dietRowLength = $DietTBody.find('[data-id="rowDiet"]').length;
                        selectedActivities.diet.push('#rowDiet' + activity_id);
                        if ($DietTBody.find('#rowDiet' + activity_id + '').length === 0) {
                            const orderNumber = dietRowLength + 1;
                            $DietTBody.append('<tr id="rowDiet' + activity_id +
                                '" data-activityid=' + activity_id +
                                ' data-id="rowDiet"><td><input type="hidden" name="' +
                                activity_of + '[' + activity_id + ']" id="' + activity_id +
                                '"  value="' + orderNumber + '">' + orderNumber + '</td><td>' +
                                activity_title + '</td><td class="capital-media-type">' +
                                media_type + '</td></tr>');
                            $("#DietDragTable").tableDnDUpdate();
                        }
                    }
                    if (activity_of === 'Extra') {
                        $("tr.no-record-extra").css("display", "none");
                        const $ExtraTBody = $("#ExtraTBody");
                        const extraRowLength = $ExtraTBody.find('[data-id="rowExtra"]').length;
                        selectedActivities.extra.push('#rowExtra' + activity_id);
                        if ($ExtraTBody.find('#rowExtra' + activity_id + '').length === 0) {
                            const orderNumber = extraRowLength + 1;
                            $ExtraTBody.append('<tr id="rowExtra' + activity_id +
                                '" data-activityid=' + activity_id +
                                ' data-id="rowExtra"><td><input type="hidden" name="' +
                                activity_of + '[' + activity_id + ']" id="' + activity_id +
                                '"  value="' + orderNumber + '">' + orderNumber + '</td><td>' +
                                activity_title + '</td><td class="capital-media-type">' +
                                media_type + '</td></tr>');
                            $("#ExtraDragTable").tableDnDUpdate();
                        }
                    }

                    i++;
                });

                // normal
                const $NormalTBody = $("#NormalTBody");
                const $normalRows = $NormalTBody.find('[data-id="rowNormal"]');
                let unselectedNormalRows = [];
                $normalRows.each((index, row) => {
                    // if loop for remove last element
                    if (!selectedActivities.normal.length) {
                        $(row).remove();
                        return true;
                    }
                    if (selectedActivities.normal.length && !selectedActivities.normal.includes(
                            '#' + row.id)) {
                        unselectedNormalRows.push(row)
                    }
                });
                unselectedNormalRows.forEach(row => {
                    $(row).remove();
                });
                // for normal - re-order if any activity option un-selected
                var reorderNormalNumber = 1;
                const $NormalTBody1 = $("#NormalTBody");
                const $normalRows1 = $NormalTBody1.find('[data-id="rowNormal"]');
                $normalRows1.each((index, row) => {
                    var currentNormalRow = row;
                    var activity_id = $('#' + currentNormalRow.id).data('activityid');
                    var normalRowID = currentNormalRow.id;
                    var orderNormalColumnHTML = '<input type="hidden" name="Normal[' + activity_id +
                        ']" id="' + activity_id + '" value="' + reorderNormalNumber + '">' +
                        reorderNormalNumber;
                    $("#NormalTBody").find('#' + normalRowID + ' td:first').html(
                        orderNormalColumnHTML);
                    reorderNormalNumber++;
                });

                // yoga
                const $YogaTBody = $("#YogaTBody");
                const $yogaRows = $YogaTBody.find('[data-id="rowYoga"]');
                let unselectedYogaRows = [];
                $yogaRows.each((index, row) => {
                    // if loop for remove last element  
                    if (!selectedActivities.yoga.length) {
                        $(row).remove();
                        return true;
                    }
                    if (selectedActivities.yoga.length && !selectedActivities.yoga.includes('#' +
                            row.id)) {
                        unselectedYogaRows.push(row)
                    }
                });
                unselectedYogaRows.forEach(row => {
                    $(row).remove();
                });
                // for yoga - re-order if any activity option un-selected
                var reorderYogaNumber = 1;
                const $YogaTBody1 = $("#YogaTBody");
                const $yogaRows1 = $YogaTBody1.find('[data-id="rowYoga"]');
                $yogaRows1.each((index, row) => {
                    var currentYogaRow = row;
                    var activity_id = $('#' + currentYogaRow.id).data('activityid');
                    var yogaRowID = currentYogaRow.id;
                    var orderYogaColumnHTML = '<input type="hidden" name="Yoga[' + activity_id +
                        ']" id="' + activity_id + '" value="' + reorderYogaNumber + '">' +
                        reorderYogaNumber;
                    $("#YogaTBody").find('#' + yogaRowID + ' td:first').html(orderYogaColumnHTML);
                    reorderYogaNumber++;
                });
                // diet
                const $DietTBody = $("#DietTBody");
                const $dietRows = $DietTBody.find('[data-id="rowDiet"]');
                let unselectedDietRows = [];
                $dietRows.each((index, row) => {
                    // if loop for remove last element
                    if (!selectedActivities.diet.length) {
                        $(row).remove();
                        return true;
                    }
                    if (selectedActivities.diet.length && !selectedActivities.diet.includes('#' +
                            row.id)) {
                        unselectedDietRows.push(row)
                    }
                });
                unselectedDietRows.forEach(row => {
                    $(row).remove();
                });
                // for diet - re-order if any activity option un-selected
                var reorderDietNumber = 1;
                const $DietTBody1 = $("#DietTBody");
                const $dietRows1 = $DietTBody1.find('[data-id="rowDiet"]');
                $dietRows1.each((index, row) => {
                    var currentDietRow = row;
                    var activity_id = $('#' + currentDietRow.id).data('activityid');
                    var dietRowID = currentDietRow.id;
                    var orderDietColumnHTML = '<input type="hidden" name="Diet[' + activity_id +
                        ']" id="' + activity_id + '" value="' + reorderDietNumber + '">' +
                        reorderDietNumber;
                    $("#DietTBody").find('#' + dietRowID + ' td:first').html(orderDietColumnHTML);
                    reorderDietNumber++;
                });

                // extra
                const $ExtraTBody = $("#ExtraTBody");
                const $extraRows = $ExtraTBody.find('[data-id="rowExtra"]');
                let unselectedExtraRows = [];
                $extraRows.each((index, row) => {
                    // if loop for remove last element
                    if (!selectedActivities.extra.length) {
                        $(row).remove();
                        return true;
                    }
                    if (selectedActivities.extra.length && !selectedActivities.extra.includes('#' +
                            row.id)) {
                        unselectedExtraRows.push(row)
                    }
                });
                unselectedExtraRows.forEach(row => {
                    $(row).remove();
                });
                // for extra - re-order if any activity option un-selected
                var reorderExtraNumber = 1;
                const $ExtraTBody1 = $("#ExtraTBody");
                const $extraRows1 = $ExtraTBody1.find('[data-id="rowExtra"]');
                $extraRows1.each((index, row) => {
                    var currentExtraRow = row;
                    var activity_id = $('#' + currentExtraRow.id).data('activityid');
                    var extraRowID = currentExtraRow.id;
                    var orderExtraColumnHTML = '<input type="hidden" name="Extra[' + activity_id +
                        ']" id="' + activity_id + '" value="' + reorderExtraNumber + '">' +
                        reorderExtraNumber;
                    $("#ExtraTBody").find('#' + extraRowID + ' td:first').html(
                    orderExtraColumnHTML);
                    reorderExtraNumber++;
                });

            });

        });
    </script>
@stop