@extends('admin.layouts.leadManagement')
@section('title')
    Class List
@endsection

@section('content')
    <div class="main container-fluid">
        <div class="top">
            <p class="head">Classes <span class="fl-no">({{ @$totalCount }})
                </span>

            <p class="t-right">
                @if (userCan('class.create'))
                    <a href="{{ route('admin.class.create') }}" class="my-lead">Create</a>
                @endif
            </p>
        </div>
        <form id="formSubmit" action="{{ route('admin.class.index') }}" method="GET">
            <div class="list-wrpr">
                <div class="tab-list">
                </div>

                <p class="select-view">View By :
                    <span class="types">
                        <a class="tab-link" href="javascript:;" onclick="setViewType('Fviewtype-1')">
                            <img src="{{ asset('backend') }}/lead-management/images/view-type-1.svg"
                                class="view-type active" alt="view-type" width="100%" height="100%">
                        </a>
                        <a class="tab-link" href="javascript:;" onclick="setViewType('Fviewtype-2')">
                            <img src="{{ asset('backend') }}/lead-management/images/view-type-2.svg" class="view-type"
                                alt="view-type" width="100%" height="100%">
                        </a>

                    </span>
                </p>
            </div>


            <div class="dropdown-list" style="justify-content: end;">
                <div class="single-input datetimedHide defaultHideView" id="datetimedHide">
                    <input type="text" id="datetimeD" name="datetimeD" value="{{ request('datetimeD') }}"
                        class="input-field" autocomplete="off" placeholder="Start Date & Time" readonly />
                </div>

                <div class="single-input">
                    <select name="batch_id" id="batch_id" class="select-list select2-with-search">
                        <option value="" selected>Selected Batches</option>
                        @foreach ($batches as $item)
                            <option value="{{ $item['id'] }}" {{ $item['id'] == request('batch_id') ? 'selected' : '' }}>
                                {{ $item['batch_name'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="single-input">
                    <select name="list_by" id="list_by" class="select-list select2-with-search">
                        <option value="incomplete" selected>UpComing</option>
                        <option value="all" {{ 'all' == request('list_by') ? 'selected' : '' }}>All</option>
                        <option value="complete" {{ 'complete' == request('list_by') ? 'selected' : '' }}>Complete</option>


                    </select>
                </div>
                @if (userCan('candidate.assignedTutor'))
                    <div class="single-input">
                        <select name="tutor_id" id="tutor_id" class="select-list select2-with-search">
                            <option value="">Select Tutor</option>
                            @foreach (array_filter($admin_list_tutor, function ($item) {
            return $item['status'] == 1;
        }) as $option)
                                @if (!empty($option))
                                    <option value="{{ $option['id'] }}"
                                        {{ old('tutor_id', @$batch->tutor_id) == $option['id'] ? 'selected' : '' }}>
                                        {{ $option['name'] }}
                                    </option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                @endif


                <div class="single-input search">

                    <input type="search" name="keyword" class="input-field" value="{{ request('keyword') }}"
                        id="" placeholder="Search by keyword" aria-label="date">
                    <button class="search-btn" type="submit" aria-label="Search">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M17.7043 16.2848L14.3054 12.8958C15.402 11.4988 15.9971 9.77351 15.9948 7.99743C15.9948 6.41569 15.5258 4.86947 14.647 3.5543C13.7683 2.23913 12.5192 1.21408 11.0579 0.608771C9.59657 0.00346512 7.98855 -0.15491 6.43721 0.153672C4.88586 0.462254 3.46085 1.22393 2.34239 2.34239C1.22393 3.46085 0.462254 4.88586 0.153672 6.43721C-0.15491 7.98855 0.00346512 9.59657 0.608771 11.0579C1.21408 12.5192 2.23913 13.7683 3.5543 14.647C4.86947 15.5258 6.41569 15.9948 7.99743 15.9948C9.77351 15.9971 11.4988 15.402 12.8958 14.3054L16.2848 17.7043C16.3777 17.798 16.4883 17.8724 16.6101 17.9231C16.7319 17.9739 16.8626 18 16.9945 18C17.1265 18 17.2572 17.9739 17.379 17.9231C17.5008 17.8724 17.6114 17.798 17.7043 17.7043C17.798 17.6114 17.8724 17.5008 17.9231 17.379C17.9739 17.2572 18 17.1265 18 16.9945C18 16.8626 17.9739 16.7319 17.9231 16.6101C17.8724 16.4883 17.798 16.3777 17.7043 16.2848ZM1.99936 7.99743C1.99936 6.81112 2.35114 5.65146 3.01022 4.66508C3.66929 3.6787 4.60606 2.90991 5.70206 2.45593C6.79807 2.00196 8.00408 1.88317 9.16759 2.11461C10.3311 2.34605 11.3999 2.91731 12.2387 3.75615C13.0775 4.595 13.6488 5.66375 13.8802 6.82726C14.1117 7.99077 13.9929 9.19678 13.5389 10.2928C13.0849 11.3888 12.3162 12.3256 11.3298 12.9846C10.3434 13.6437 9.18373 13.9955 7.99743 13.9955C6.40664 13.9955 4.88101 13.3636 3.75615 12.2387C2.6313 11.1138 1.99936 9.58821 1.99936 7.99743Z"
                                fill="white" />
                        </svg>

                    </button>

                </div>
            </div>
            <div class="btns">
                @if (count(request()->all()) > 0)
                    <a href="{{ route('admin.class.index') }}" class="clear-btn">Clear All</a>
                @endif
                {{-- <button type="submit" class="clear-btn">Clear</button> --}}
            </div>
        </form>

        <div id="Fviewtype-1" style="display: none;">
            <div class="detail-list">
                <div id="calendar"></div>
            </div>
        </div>
        <div id="Fviewtype-2" style="display: none;">
            <div class="detail-list">
                <!--Desktop-->
                <table class="d-table hoverTable" id="myFollowupTable">
                    <thead>
                        <th class="table-head">ID</th>
                        <th class="table-head">Time/Slot</th>
                        <th class="table-head">Tutor</th>
                        <th class="table-head">Batch</th>
                        <th class="table-head">Name</th>
                        <th class="table-head">Start Date</th>
                        <th class="table-head">Plan</th>
                        <th class="table-head">Type</th>
                        <th class="table-head">Action</th>
                    </thead>

                    <tbody>


                        @if ($datas->count() > 0)
                            @foreach ($datas as $data)
                                <tr>
                                    <td class="table-col">
                                        <span class="sub-stage">{{ @$data->id }}</span>
                                    </td>
                                    <td class="table-col">
                                        <span class="sub-stage">
                                            @if (!empty($data->start_date))
                                                {{ TimeShowHourseMiniteAmPm(@$data->start_date) }} To  {{ TimeShowHourseMiniteAmPm(\Carbon\Carbon::parse($data->start_date)->addMinutes($data->class_duration)) }}
                                            @else
                                                --
                                            @endif
                                        </span>
                                    </td>
                                    <td class="table-col">
                                        <span class="sub-stage">{{ @$data->tutor->name }}</span>
                                    </td>
                                    <td class="table-col">
                                        <span class="sub-stage">{{ @$data->batch->batch_name }}</span>
                                        
                                    </td>
                                    <td class="table-col">
                                        <span class="sub-stage">{{ @$data->class_name }} (#{{ $data->class_code }})</span>
                                    </td>
                                    <td class="table-col">
                                        <span class="sub-stage">
                                            @if (!empty($data->start_date))
                                                {{ dateMonthFormat(@$data->start_date) }}
                                            @else
                                                --
                                            @endif
                                        </span>
                                    </td>
                                    <td class="table-col">
                                        <span class="sub-stage">{{ @$data->batch->plans->title ?? '--' }}</span>
                                    </td>
                                    <td class="table-col">
                                        <span class="sub-stage">{{ @$data->batch->plans->planCategory->name ?? '--' }}
                                        </span>
                                    </td>
                                    <td class="table-col">
                                        <p class="user-action">
                                            @if (userCan('class.view'))
                                                <a href="{{ route('admin.class.show', $data->id) }}" class="create-link"
                                                    aria-label="view-icon"><img
                                                        src="{{ asset('backend') }}/lead-management/images/eye.svg"
                                                        alt="view-icon" width="100%" height="100%"></a>
                                            @endif
                                            @if (userCan('class.update'))
                                                <a href="{{ route('admin.class.edit', $data->id) }}" class="create-link"
                                                    aria-label="edit-icon"><img
                                                        src="{{ asset('backend') }}/lead-management/images/edit.svg"
                                                        alt="edit" width="100%" height="100%"></a>
                                            @endif

                                            @if (userCan('class.schedule'))
                                            <a href="javascript:;" class="wp-link btn btn-primary" aria-label="whatsapp-icon"

                                                onclick="customWhatsApp(event,'{{ $data->id }}', '{{ $data->class_name }}', '{{ $data->class_code }}', 'close', '{{ $data->tutor_id }}')">
                                                {{-- <img
                                                    src="{{ asset('backend') }}/lead-management/images/whatsapp.svg"
                                                    alt="whatsapp" width="100%" height="100%"> --}}Reschedule Class
                                                </a>
                                        @endif

                                            {{-- <a href="javascript:;" class="user-link delete-doc" aria-label="delete"><img
                                                src="{{ asset('backend') }}/lead-management/images/delete.svg" alt="delete" style="width: 16px; height: 100%"></a> --}}
                                        </p>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td class="table-col" colspan="9">
                                    {{ __('no_data_found') }}
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
                <!--Mobile-->
                <div class="mt-3 d-flex justify-content-center">
                    {{ $datas->links() }}
                </div>

            </div>
        </div>

    </div>

    <!--Followup Modal-->
    <div class="followup-modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-body">
            <div class="followup-header">
                <h1 class="followup-title" id="exampleModalLabel">Class</h1>
                {{-- <svg Class="followup-close" width="24" height="24" viewBox="0 0 24 24" fill="none"
             xmlns="http://www.w3.org/2000/svg">
             <path
                 d="M13.2329 11.9993L18.7414 6.4989C18.906 6.33424 18.9985 6.11091 18.9985 5.87804C18.9985 5.64517 18.906 5.42184 18.7414 5.25717C18.5767 5.09251 18.3534 5 18.1206 5C17.8877 5 17.6644 5.09251 17.4998 5.25717L12 10.7663L6.50024 5.25717C6.33559 5.09251 6.11228 5 5.87944 5C5.64659 5 5.42328 5.09251 5.25864 5.25717C5.09399 5.42184 5.00149 5.64517 5.00149 5.87804C5.00149 6.11091 5.09399 6.33424 5.25864 6.4989L10.7671 11.9993L5.25864 17.4996C5.17668 17.5809 5.11164 17.6776 5.06725 17.7842C5.02285 17.8907 5 18.005 5 18.1205C5 18.2359 5.02285 18.3502 5.06725 18.4568C5.11164 18.5633 5.17668 18.66 5.25864 18.7413C5.33992 18.8233 5.43663 18.8884 5.54318 18.9327C5.64972 18.9771 5.76401 19 5.87944 19C5.99486 19 6.10915 18.9771 6.2157 18.9327C6.32225 18.8884 6.41895 18.8233 6.50024 18.7413L12 13.2322L17.4998 18.7413C17.581 18.8233 17.6778 18.8884 17.7843 18.9327C17.8909 18.9771 18.0051 19 18.1206 19C18.236 19 18.3503 18.9771 18.4568 18.9327C18.5634 18.8884 18.6601 18.8233 18.7414 18.7413C18.8233 18.66 18.8884 18.5633 18.9328 18.4568C18.9771 18.3502 19 18.2359 19 18.1205C19 18.005 18.9771 17.8907 18.9328 17.7842C18.8884 17.6776 18.8233 17.5809 18.7414 17.4996L13.2329 11.9993Z"
                 fill="#24292D" />
         </svg> --}}
                <div class="followup-icons">

                    {{-- <a href="javascript:;" class="create-link followup-links" aria-label="add-icon"
                onclick="customFollowupModelCalenda(event,)">Schedule  Class
                <img
                src="{{ asset('backend') }}/lead-management/images/add.svg"
                alt="add" width="100%" height="100%">  
            </a> --}}
            @if(userCan('class.schedule'))
                    <a href="javascript:;" class="btn btn-primary" aria-label="whatsapp-icon"
                    onclick="customWhatsAppCalendar(event,'followup')">
                    {{-- <img
                        src="{{ asset('backend') }}/lead-management/images/whatsapp.svg" alt="whatsapp"
                        width="100%" height="100%"> --}}
                        Reschedule Class</a>
            @endif
                   
                </div>

            </div>

            <div class="followup-body">
                <div class="top">
                    <input type="hidden" id="calendar-classID">
                    <input type="hidden" id="calendar-classTutorID">

                </div>

                <div class="single-detail">
                    <p class="label">Class Name:<span class="label-value" id="className"></span> </p>
                </div>
                <div class="single-detail">
                    <p class="label">Class Code:<span class="label-value" id="classCode"></span> </p>
                </div>
                <div class="single-detail">
                    <p class="label">Class Code:<span class="label-value" id="class_status"></span> </p>
                </div>
                <div class="single-detail">
                    <p class="label">Class Mode:<span class="label-value" id="classMode"></span> </p>
                </div>

                <div class="single-detail">
                    <p class="label">Start Date:<span class="label-value" id="classDate"></span></p>
                </div>

                <div class="single-detail">
                    <p class="label">Batch Name:<span class="label-value" id="batchName"></span></p>
                </div>
                <div class="single-detail">
                    <p class="label">Batch Code:<span class="label-value" id="batchCode"></span></p>
                </div>
                <div class="single-detail">
                    <p class="label">Tutor Name:<span class="label-value" id="classTutorName"></span></p>
                </div>
                <div class="single-detail">
                    <p class="label">Studenets:<span class="label-value" id="classStudenetName"></span></p>
                </div>

            </div>

            <div class="followup-footer">
                <button type="button" class="close-btn followup-close" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>




    <input type="hidden" value="close" id="manage_whatsapp_popup">
    <div class="whatsapp-popup">
        <div class="popup-head">
            <svg class="close-popup" width="24" height="24" viewBox="0 0 24 24" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M13.2329 11.9993L18.7414 6.4989C18.906 6.33424 18.9985 6.11091 18.9985 5.87804C18.9985 5.64517 18.906 5.42184 18.7414 5.25717C18.5767 5.09251 18.3534 5 18.1206 5C17.8877 5 17.6644 5.09251 17.4998 5.25717L12 10.7663L6.50024 5.25717C6.33559 5.09251 6.11228 5 5.87944 5C5.64659 5 5.42328 5.09251 5.25864 5.25717C5.09399 5.42184 5.00149 5.64517 5.00149 5.87804C5.00149 6.11091 5.09399 6.33424 5.25864 6.4989L10.7671 11.9993L5.25864 17.4996C5.17668 17.5809 5.11164 17.6776 5.06725 17.7842C5.02285 17.8907 5 18.005 5 18.1205C5 18.2359 5.02285 18.3502 5.06725 18.4568C5.11164 18.5633 5.17668 18.66 5.25864 18.7413C5.33992 18.8233 5.43663 18.8884 5.54318 18.9327C5.64972 18.9771 5.76401 19 5.87944 19C5.99486 19 6.10915 18.9771 6.2157 18.9327C6.32225 18.8884 6.41895 18.8233 6.50024 18.7413L12 13.2322L17.4998 18.7413C17.581 18.8233 17.6778 18.8884 17.7843 18.9327C17.8909 18.9771 18.0051 19 18.1206 19C18.236 19 18.3503 18.9771 18.4568 18.9327C18.5634 18.8884 18.6601 18.8233 18.7414 18.7413C18.8233 18.66 18.8884 18.5633 18.9328 18.4568C18.9771 18.3502 19 18.2359 19 18.1205C19 18.005 18.9771 17.8907 18.9328 17.7842C18.8884 17.6776 18.8233 17.5809 18.7414 17.4996L13.2329 11.9993Z"
                    fill="#24292D" />
            </svg>
            <p class="name">Schedule This Class (<span class="class_schedule_name">User</span>)</p>
            <svg class="back-btn back_btn_whatsapp" onclick="backBtnWhatsapp()" id="back_btn_whatsapp" width="25"
                height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M10.2915 7C10.2915 7.3 10.1886 7.5 9.98274 7.7L4.83696 12.7C4.4253 13.1 3.80781 13.1 3.39615 12.7C2.98449 12.3 2.98449 11.7 3.39615 11.3L8.54192 6.3C8.95358 5.9 9.57108 5.9 9.98274 6.3C10.1886 6.5 10.2915 6.7 10.2915 7Z"
                    fill="#747579" />
                <path
                    d="M10.2915 17C10.2915 17.3 10.1886 17.5 9.98274 17.7C9.57108 18.1 8.95358 18.1 8.54192 17.7L3.39615 12.7C2.98449 12.3 2.98449 11.7 3.39615 11.3C3.80781 10.9 4.4253 10.9 4.83696 11.3L9.98274 16.3C10.1886 16.5 10.2915 16.7 10.2915 17Z"
                    fill="#747579" />
                <path
                    d="M21.6122 12C21.6122 12.6 21.2005 13 20.583 13H4.11656C3.49906 13 3.0874 12.6 3.0874 12C3.0874 11.4 3.49906 11 4.11656 11H20.583C21.2005 11 21.6122 11.4 21.6122 12Z"
                    fill="#747579" />
            </svg>
        </div>

        <div class="popup-body">
            <form class="form whatsapp_form" id="whatsappForm">
                <input type="hidden" id="templates_id">
                <input type="hidden" id="classTutorID">
                <div class="single-row">

                    <div class="single-input date-select">
                        <label for="date" class="field-label">Date</label>
                        <input class="form-control @error('class_schedule_start_date') is-invalid @enderror"
                            type="datetime-local" id="class_schedule_start_date" name="class_schedule_start_date"
                            value="{{ !empty(old('class_schedule_start_date')) ? date('Y-m-d\TH:i', strtotime(old('class_schedule_start_date'))) : '' }}"
                            min="{{ now()->toDateTimeLocalString() }}"
                            placeholder="{{ __('Select a Start Date and Time') }}">
                    </div>
                </div>

                <div class="btns"><button class="common-btn" onclick="classScheduleCgangeDate(event)">Save <i
                            class="proceed_spin" id="loader2" style="display: none;"></i></button> </div>


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

    <div class="overlay"></div>
    <div class="sidebar-overlay"></div>

    <div class="loader"></div>

@endsection

@section('style')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ asset('backend') }}/lead-management/css/follow-up.css?v={{ env('CRM_VERSION') }}">
    <script src="{{ asset('backend') }}/js/fullCalendar.min.js"></script>

    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css?v={{ env('CRM_VERSION') }}" />
    <style>
        .my-lead {
            display: inline-block;
            font-size: 0.9375rem;
            line-height: 18px;
            color: #F3601E;
            text-align: center;
            font-family: "Roboto Medium";
            border: 1px solid #F3601E;
            padding: 6px;
            border-radius: 5px;
            -webkit-transition: 0.3s all ease-in-out;
            transition: 0.3s all ease-in-out;
        }

        .my-lead:hover {
            background: #F3601E;
            color: #FFFFFF;
        }

        .pendingLabel {
            border: 1px solid #3DC31C;
            color: #31891B;
            background: #EBFFE7;
            margin-right: 15px;
            font-size: 0.75rem;
            line-height: 13px;
            padding: 5px 6px;
            font-family: "Roboto Medium";
            display: inline-block;
            border-radius: 3px;
            line-height: 18px;
        }


        .notfollowLabel {
            border: 1px solid #747579;
            color: #747579;
            background: #FFFFFF;
            margin-right: 15px;
            font-size: 0.75rem;
            line-height: 13px;
            padding: 5px 6px;
            font-family: "Roboto Medium";
            display: inline-block;
            border-radius: 3px;
            line-height: 18px;
        }



        /* Define the hover highlight color for the table row */
        .hoverTable tr:hover {
            background-color: #ece8fe;
        }
    </style>
@endsection



@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js?v={{ env('CRM_VERSION') }}"
        integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('backend') }}/lead-management/js/common.js?v={{ env('CRM_VERSION') }}"></script>
    <script src="{{ asset('backend') }}/lead-management/js/lead.js?v={{ env('CRM_VERSION') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js?v={{ env('CRM_VERSION') }}">
    </script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js?v={{ env('CRM_VERSION') }}">
    </script>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js?v={{ env('CRM_VERSION') }}"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css?v={{ env('CRM_VERSION') }}" />

    {{-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css?v={{env('CRM_VERSION')}}" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js?v={{env('CRM_VERSION')}}"></script> --}}
    {{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css?v={{env('CRM_VERSION')}}" /> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js?v={{ env('CRM_VERSION') }}">
    </script>
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js?v={{env('CRM_VERSION')}}"></script> --}}

    <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js?v={{ env('CRM_VERSION') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js?v={{ env('CRM_VERSION') }}">
    </script>
    <script src="{{ asset('tinymce/tinymce.min.js?v=' . env('CRM_VERSION')) }}" referrerpolicy="origin"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>

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

            $("#Fviewtype-1, #Fviewtype-2").hide();
            var selectedViewType = Cookies.get('selectedViewType');

            if (!selectedViewType || selectedViewType === 'Fviewtype-1') {
                setViewType('Fviewtype-1');
            } else {
                setViewType(selectedViewType);
            }

            setTimeout(function() {
                $(".loader").hide();
            }, 1000);

        });

        $('input[name="datetimeD"]').daterangepicker({
            autoUpdateInput: false,
            // maxDate: new Date(),
            locale: {
                cancelLabel: 'Clear'
            }
        });
        $('input[name="datetimeD"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
                'MM/DD/YYYY'));
        });

        $('input[name="datetimeD"]').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });


        function setViewType(viewType) {
            $("#Fviewtype-1, #Fviewtype-2").hide();
            console.log(viewType);
            $(".defaultHideView").show();
            if (viewType == "Fviewtype-1") {
                var element = $("#Fviewtype-1");
                element.removeAttr("style");

                $(".defaultHideView").hide();
                initializeFullCalendar();
            }


            $("#" + viewType).show();
            // location.reload();

            var expirationDate = new Date();
            expirationDate.setFullYear(expirationDate.getFullYear() + 10);

            // Set the cookie with a 10-year expiration
            Cookies.set('selectedViewType', viewType, {
                expires: expirationDate
            });
        }
    </script>

    <script>
        function initializeFullCalendar() {

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

            var batch_id = "{{ request('batch_id') }}";
            var tutor_id = "{{ request('tutor_id') }}";
            var datetimeD = "{{ request('datetimeD') }}";
            var keyword = "{{ request('keyword') }}";
            var list_by = "{{ request('list_by') }}";
            

            @php
                $currentMonth = now()->format('Y-m-d');
            @endphp
            var currentMonth = "{{ $currentMonth }}";
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prev,next,today',
                    center: 'title',
                    right: 'timeGridDay,timeGridWeek,dayGridMonth'
                },
                initialDate: currentMonth,
                navLinks: true,
                selectable: true,
                selectMirror: true,
                // select: function (arg) {
                //     var title = prompt('Event Title:');
                //     if (title) {
                //         calendar.addEvent({
                //             title: title,
                //             start: arg.start,
                //             end: arg.end,
                //             allDay: arg.allDay
                //         });
                //     }
                //     calendar.unselect();
                // },
                eventClick: function(arg) {
                    // Get event details
                    var className = arg.event.title; // Assuming it's the event title
                    var eventId = arg.event.id; // Event ID or any other relevant data

                    var batchId = arg.event.extendedProps.batch_id;
                    var classCode = arg.event.extendedProps.class_code;
                    var classMode = arg.event.extendedProps.class_mode;

                    var class_status = arg.event.extendedProps.class_status;
                    var batchName = arg.event.extendedProps.batch_name;
                    var batchCode = arg.event.extendedProps.batch_code;
                    var batchMode = arg.event.extendedProps.batch_mode;
                    var classDate = arg.event.extendedProps.class_date;
                    var classTutorName = arg.event.extendedProps.tutor_name;
                    var classTutorID = arg.event.extendedProps.tutor_id;
                    var classID = arg.event.id;
                    var classStudenetName = arg.event.extendedProps.classStudenetName;
                    

                    $("#className, #classCode, #classMode, #class_status, #classDate,#batchName,#batchCode,#classTutorName","classStudenetName")
                        .text('');
                    $("#calendar-classID").val();
                    $("#calendar-classTutorID").val();
                    if (eventId) {
                        var classNameLink = $('<a>').attr('href', '{{ route('admin.class.show', ':eventId') }}'
                                .replace(':eventId', eventId))
                            .attr('target', '_blank')
                            .addClass('link')
                            .text(className)
                            .css({
                                'color': '#066AC9',
                                'text-decoration': 'underline'
                            });

                    } else {
                        var classNameLink = className;
                    }

                    $("#className").html(classNameLink);
                    $("#classCode").html(classCode);

                    $("#classMode").html(classMode);
                    $("#class_status").html(class_status);
                    $("#classDate").html(classDate);
                    $("#batchName").html(batchName);
                    $("#batchCode").html(batchCode);


                    $("#calendar-classID").val(classID);
                    $("#calendar-classTutorID").val(classTutorID);

                    $("#calendar-className").html(className);
                    $("#calendar-classCode").html(classCode);
                    $("#classTutorName").html(classTutorName);
                    $("#classStudenetName").html(classStudenetName);
                    
                    // Show the modal
                    $("#exampleModal").show();
                    $("body").addClass("no-scroll");
                    $(".overlay").show();

                    // Handle the delete event button click
                    $("#deleteEvent").on("click", function() {
                        if (confirm('Are you sure you want to delete this event?')) {
                            // Perform event deletion logic here, you can use the eventId to identify and delete the event.
                            // After deletion, you may want to refresh the calendar or update the event data.
                            arg.event.remove();
                        }

                        // Close the modal
                        $("#exampleModal").hide();
                        $(".overlay").hide();
                        // $("#exampleModal").modal("hide");
                    });
                    // if (confirm('Are you sure you want to delete this event?')) {
                    //     arg.event.remove();
                    // }
                },
                editable: false,
                dayMaxEvents: true,
                // Update events to use AJAX
                events: function(fetchInfo, successCallback, failureCallback) {
                    $.ajax({
                        url: "{{ route('admin.class.calendarEvent') }}",
                        type: "POST",
                        data: {
                            batch_id: batch_id,
                            tutor_id: tutor_id,
                            datetimeD: datetimeD,
                            keyword: keyword,
                            start: fetchInfo.startStr,
                            end: fetchInfo.endStr,
                            list_by: list_by,
                        },
                        success: function(data) {
                            successCallback(data);
                        },
                        error: function(error) {
                            failureCallback(error);
                        }
                    });
                },
                eventContent: function(arg) {

                    if (arg.view.type === 'timeGridDay' || arg.view.type === 'timeGridWeek') {
                        return {
                            html: '<div class="fc-daygrid-event-dot"></div><div class="fc-event-title">' + arg.event.title +' (' + arg.event.extendedProps.tutor_name +')'+ '</div><div class="fc-event-time">' + arg.timeText + '</div>'
                        };
                    } else {
                        // For other views, use default event rendering
                        return {
                            html: '<div class="fc-daygrid-event-dot"></div><div class="fc-event-title">' + arg.event.title + '</div><div class="fc-event-time">' + arg.timeText + '</div>'
                        };
                    }
                    // return {
                    //     html: '<div class="fc-daygrid-event-dot"></div><div class="fc-event-title">' + arg.event
                    //         .title + '</div><div class="fc-event-time">' + arg.timeText + '</div>'
                    // };
                },
            });

            calendar.render();
        }

        $(".followup-close").on('click', function() {
            $("#exampleModal").hide();
            $("#className,#classCode").text();
            $(".overlay").hide();
            $("body").removeClass("no-scroll");
        });
    </script>

    <script>
        function customWhatsAppCalendar(event, type) {


            var classID = document.getElementById('calendar-classID').value;
            var classTutorID = document.getElementById('calendar-classTutorID').value;

            var className = document.getElementById('className').textContent;
            var classCode = document.getElementById('classCode').textContent;
            $(".followup-modal").hide();
            customWhatsApp(event, classID, className, classCode, 'secClose', classTutorID);

        }




        function customWhatsApp(event, candidateId, candidateName, classCode, close, classTutorID) {

          
            $('#manage_whatsapp_popup').attr('value', close);
            form = document.getElementById('whatsappForm');
            var warningElements = form.getElementsByClassName('warning');
            for (var i = 0; i < warningElements.length; i++) {
                warningElements[i].style.display = "none";
            }

            event.preventDefault();
            $('.whatsapp-popup').hide();
            // Clear and initialize form input fields
            $('#whatsappForm')[0].reset();
            $('#whatsappForm').find('select').val('').trigger('change');



            $(".class_schedule_name").val();

            $("#templates_id").val(candidateId);
            $("#classTutorID").val(classTutorID);
            $(".class_schedule_name").text(candidateName + " (#" + classCode + ")");



            $(".whatsapp-popup").show();


        }

        function backBtnWhatsapp() {
            var value = $('#manage_whatsapp_popup').val();

            console.log("dataIdValue " + value);
            if (value == "close") {
                $('.whatsapp-popup').hide();
                $('.overlay').hide();
                $("body").removeClass("no-scroll");
                $('#manage_whatsapp_popup').attr('value', 'close');
            } else if (value == "yes") {
                $(".customWhatsAppSendShow").hide();
                $(".customWhatsAppSendHIDE").show();
                $('#manage_whatsapp_popup').attr('value', 'close');

            } else if (value == "secClose") {
                $('.whatsapp-popup').hide();
                //    $('.overlay').hide();
                //    $("body").removeClass("no-scroll");
                $('#manage_whatsapp_popup').attr('value', 'close');
                $(".followup-modal").show();
            } else if (value == "secYes") {
                $(".customWhatsAppSendShow").hide();
                $(".customWhatsAppSendHIDE").show();
                $('#manage_whatsapp_popup').attr('value', 'secClose');
            } else {
                $('.close-popup').trigger('click');
                $("body").removeClass("no-scroll");
                $('#manage_whatsapp_popup').attr('value', 'close');
            }


        }



        function classScheduleCgangeDate(event) {
            event.preventDefault();
            var id = $('#templates_id').val();
            var date = $('#class_schedule_start_date').val();
            var classTutorID = $('#classTutorID').val();



            if (!id) {
                toastr.error("ID is required.");
                return;
            }

            if (!classTutorID) {
                toastr.error("Tutor ID is required.");
                return;
            }

            if (!date) {
                toastr.error("Date is required.");
                return;
            }





            const button = event.target;
            button.disabled = true;
            button.style.backgroundColor = 'gray';
            const loader = document.getElementById('loader2');
        loader.style.display = 'inline-block';

            formData = new FormData();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            formData.append('id', id);
            formData.append('start_date', date);
            formData.append('tutor_id', classTutorID);
            formData.append('_token', '{{ csrf_token() }}');

            $.ajax({
                url: "{{ route('class.classSchedule', ['id' => ':id']) }}".replace(':id', id),
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function(response) {
                    toastr.success("Class schedule updated successfully!");
                    console.log(response.data); // Log the validated data

                    $('#class_schedule_start_date').val('');
                    loader.style.display = 'none';
                    button.disabled = false;
                    button.style.backgroundColor = '#25bb00';
                    $("body").removeClass("no-scroll");
                    $('.close-popup').trigger('click');
                    $(loader).hide();
                    $('#loader2').hide();
                    console.log("111");
                },
                error: function(xhr, status, error) {
                    if (xhr.responseJSON && xhr.responseJSON.errors) {
                        var errors = xhr.responseJSON.errors;
                        for (var key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                toastr.error(errors[key][0]);
                            }
                        }
                    } else {
                        toastr.error("Error updating class schedule. Please try again later.");
                    }
                   
                    toastr.error("Error updating class schedule. Please try again later.");
                    loader.style.display = 'none';
                    button.disabled = false;
                    button.style.backgroundColor = '#25bb00';
                    $('#loader2').hide();
                    console.log("222");
                },
                complete: function() {
                  
                    loader.style.display = 'none';
                    button.disabled = false;
                    button.style.backgroundColor = '#25bb00';
                    $("body").removeClass("no-scroll");
                    $('.close-popup').trigger('click');
                    $('#loader2').hide();
                    console.log("333");
                }
            });

        };
    </script>
@endsection