@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">
                {{-- <span class="label active">Pending: ({{ @$pendingFollowUpCount }})</span> --}}
                {{-- <a href="{{ route('admin.leadManagement')}}" class="my-lead">My Leads</a> --}}
            </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">
                
                @if((request('values') != "hot" && request('values') != "cold") || (request('lead_type') != "Hot" && request('lead_type') != "Cold"))
                <div class="single-input">
                    <select name="batch_id" id="batch_id" class="select-list select2-with-search">
                        <option value="" disabled selected>Plans</option>
                        @foreach ($batches as $item)
                     
                        <option value="{{ $item['id'] }}" 
                        {{ $item['id'] == request('batch_id') ? 'selected' : '' }}>{{ $item['batch_name'] }}</option>
                        @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">
            <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">Name</th>
                        <th class="table-head">Batch</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">{{ @$data->class_name }}</span>
                                    </td>
                                    <td class="table-col">
                                        <span class="sub-stage">{{ @$data->batch_id }}</span>
                                    </td>
                                    <td class="table-col">
                                        <p class="user-action">
                                           
                                            <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>
                                        </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>

     <div class="followup-body">
         <div class="top">
           
         </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>

     <div class="followup-footer">
         <button type="button" class="close-btn followup-close" data-bs-dismiss="modal">Close</button>
     </div>
 </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-2') {
                setViewType('Fviewtype-2');
            } else {
                setViewType(selectedViewType);
            }

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

        });


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

                $("#datetimedHide").hide();
                initializeFullCalendar();
            }


            $("#" + viewType).show();
            // location.reload();
            Cookies.set('selectedViewType', viewType, {
                expires: 7
            }); // Cookie expires in 7 days
        }
    </script>

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

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

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

                   
                 
                    $("#className, #classCode, #classMode, #class_status, #classDate,#batchName,#batchCode,#classTutorName").text('');
                    
                   
                   
                    if(eventId){
                        var classNameLink = $('<a>').attr('href', '{{ route('admin.class.edit', ':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);
                    $("#classTutorName").html(classTutorName);
                    

                

                    // 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: "GET",
                        data: {
                            batch_id: batch_id,
                            keyword: keyword,
                            start: fetchInfo.startStr,
                            end: fetchInfo.endStr,
                        },
                        success: function(data) {
                            successCallback(data);
                        },
                        error: function(error) {
                            failureCallback(error);
                        }
                    });
                },
                eventContent: function(arg) {
                    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>

@endsection