@php
    @$democlass_create = userCan('DemoClass.create');
    @$democlass_edit = userCan('DemoClass.update');
    @$democlass_delete = userCan('DemoClass.delete');
@endphp
@if (userCan('DemoClass.view'))
    <style>
        #click_button {
            background: #066AC9;
            padding: 9px;
            border-radius: 8px;
            color: white;
            cursor: pointer;
        }

        .lable_show {
            opacity: 1 !important;
            position: absolute;
            top: -11px !important
        }

        .form-switch {
            position: relative;
            display: inline-block;
            width: 30px;
            height: 15px;
            margin-top: 4px;
        }

        .form-switch input {
            display: none;
        }

        .toggle-label {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            border-radius: 34px;
            transition: background-color 0.3s;
        }

        .toggle-label::before {
            position: absolute;
            content: "";
            height: 10px;
            width: 10px;
            left: 4px;
            bottom: 3px;
            background-color: white;
            border-radius: 50%;
            transition: transform 0.3s;
        }

        .form-switch input:checked+.toggle-label {
            background-color: #2196F3;
        }

        .form-switch input:checked+.toggle-label::before {
            transform: translateX(13px);
        }.badge-success {
            background: green;
        }
        .badge-danger{
            background: red;
        }
    </style>
    <p class="panel-top">
        <span class="p-head">Demo Class History</span>
        @if (@$democlass_create)
            <span class="p-head" id="click_button" onclick="open_class_add_popup()">Create Class + </span>
        @endif

    </p>
    @if (count(@$democlasses) > 0)
        <table class="table">
            <thead>
                <tr>
                    <th class="t-head">Class Id</th>
                    <th class="t-head">User</th>
                    <th class="t-head">Tutor</th>
                    <th class="t-head">Test Type</th>
                    <th class="t-head">Attend</th>
                    <th class="t-head">Class Date Time Mode</th>
                    <th class="t-head">Cancel Class</th>
                    <th class="t-head">Attendence</th>
                    @if (@$democlass_edit)
                        <th class="t-head">Action</th>
                    @endif
                </tr>
            </thead>
            <tbody>

                @foreach (@$democlasses as $democlass)
                    <tr>
                        <td class="t-col">{{ @$democlass->id }}</td>
                        <td class="t-col">{{ @$democlass->name }}</td>
                        <td class="t-col">{{ @$democlass->tutor_name }}</td>
                        <td class="t-col">{{ @$democlass->test_type }}</td>
                        <td class="t-col">
                            {{ dateMonthFormat(@$democlass->date) }}
                            {{ TimeShowHourseMiniteAmPm(@$democlass->time_to) }} to
                            {{ TimeShowHourseMiniteAmPm(@$democlass->time_from) }}
                        </td>

                        <td class="t-col">
                            {{ $democlass->mode }}
                            @if ($democlass->mode == 'Offline' && $democlass->location !== null)
                                ({{ $democlass->location }})
                            @endif
                        </td>
                        <td class="t-col">
                            {{-- @if (@$democlass->active_class == 1)
                                <span class="badge badge-success">Active</span>
                            @else
                                <span class="badge badge-danger">Inactive</span>
                            @endif --}}

                            <div class="single-input select-list" >
                                @php
                                    $currentDateTime = time();
                                    $date_time = $democlass['date'] . '' . $democlass['time_to'];

                                    $date_time_unix = strtotime($date_time);

                                @endphp

                                @if ($date_time_unix > $currentDateTime)
                                    @if (@$democlass->attend != 1)
                                    <div class="form-switch">
                                        <input class="form-check-input" type="checkbox" id="active_class{{ $democlass['id'] }}" name="active_class" {{ @$democlass->active_class ? 'checked' : '' }} onchange="change_class_status({{ $democlass['id'] }})">
                                        <label for="active_class{{ $democlass['id'] }}" class="toggle-label"></label>
                                    </div>
                                    @else
                                        @if(@$democlass->active_class == 1)
                                            Cancel Class
                                        @endif
                                    @endif
                           
                                @endif
                            </div>
                        </td class="t-col">
                        <td class="t-col">
                            
                            @if (@$democlass->attend == 1)
                                <span class="badge badge-success">Attend</span>
                            @else
                                <span class="badge badge-danger">Not Attend</span>
                            @endif
                        </td>
                        <td class="t-col">
                            @if (@$democlass_edit && $democlass->active_class != 1)
                                @if ($date_time_unix > $currentDateTime)
                                    <a onclick="open_class_add_popup({{ $democlass->id }})" class="badge"
                                        style="background: #fff;">
                                        <i class="fas fa-edit" style="color: green;"></i>
                                    </a>
                                @endif
                            @endif

                        </td>
                    </tr>
                @endforeach


            </tbody>
        </table>
    @else
        <center style="margin-top:20px;">No Data Found</center>
    @endif
@endif

<script>
    $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        });
        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
    csrfToken = "{{ csrf_token() }}";
    function open_class_add_popup(class_id = null) {

        $(".overlay").show();
        $(".upload-loader").show();
        
        var user_id = {{ @$user_id }};
        $.ajax({
                type: "post",
                url: "{{ route('lead-management.demo_class_pop_up') }}",
                data: {
                    'user_id': user_id,
                    'class_id': class_id,
                },
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },

                success: function(res) {
                    $(".overlay").show();
                    $('#demo_class_popup').html(res);
                    $(".upload-loader").hide();
                }
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                // Function to execute when the request fails
                $(".upload-loader").hide();
                $(".overlay").hide();
                var message = "Failed";
                type = "failed";
                code = textStatus + ' ' + errorThrown;
                header = "";
                show_success_pop_up(code, type, message, header);
            });
    }

    function change_class_status(class_id) {
        $(".overlay").show();
        $(".upload-loader").show();
        
        var user_id = {{ @$user_id }};
        $.ajax({
                type: "post",
                url: "{{ route('DemoClass.change_class_status') }}",
                data: {
                    'user_id': user_id,
                    'class_id': class_id,
                    
                },
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },

                success: function(res) {
                    $(".overlay").show();
                    $('#demo_class_popup').html(res);
                    $(".upload-loader").hide();
                    if (res.status == 1) {
                        var message = "Success";
                        type = "success";
                        code = res.message;
                        header = "";
                        show_success_pop_up(code, type, message, header);
                        $('#pop-up-demo-class-create').hide();
                        get_demo_classes();
                    } else if (res.status == 2) {
                        var message = "Failed";
                        type = "failed";
                        code = res.message;
                        header = "";
                        show_success_pop_up(code, type, message, header);
                        $('#pop-up-demo-class-create').show();
                        get_demo_classes();
                    } 
                    
                }
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                // Function to execute when the request fails
                $(".upload-loader").hide();
                $(".overlay").hide();
                var message = "Failed";
                type = "failed";
                code = textStatus + ' ' + errorThrown;
                header = "";
                show_success_pop_up(code, type, message, header);
            });
    }
</script>