@extends('admin.layouts.leadManagement')
@section('title')
    {{ __('edit') }}
@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 href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css?v={{ env('CRM_VERSION') }}"
        rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('backend') }}/lead-management/css/lead.css?v={{ env('CRM_VERSION') }}">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css?v={{ env('CRM_VERSION') }}">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css?v={{ env('CRM_VERSION') }}">
@endsection
@section('content')
    @php
        $task_description = json_decode(@$class->task_description, true);
        $des_serial = 1;
        @$detail['id'] = 1;

        $meetingId = @$batch->meeting_id ?? null;
        $meetingPassword = @$batch->meeting_password ?? null;

        $start_date = \Carbon\Carbon::parse($class->start_date)
            ->tz(env('APP_TIMEZONE', 'UTC'))
            ->subMinutes(10);

        $end_date = \Carbon\Carbon::parse($start_date)
            ->tz(env('APP_TIMEZONE', 'UTC'))
            ->addMinutes($class->class_duration + 40);

        $current_date = \Carbon\Carbon::now()->tz(env('APP_TIMEZONE', 'UTC'));

        $is_current_date_within_range = $current_date->gte($start_date) && $current_date->lte($end_date);

        $study_material = json_decode(@$class->study_material, true);

    @endphp

    <style>
        .loader {
            z-index: 1000;
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }

        .hide_data {
            display: inline;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* background:white; */
            height: 100vh;
            width: 100%;
            z-index: 1000;

        }

        #followps_show:hover {
            display: inline;
        }

        .comment:hover>.followps_show {
            display: inline;
        }

        #formSubmit {
            display: none;
        }

        #calendar {
            max-width: 1100px;
            margin: 0 auto;
        }

        .card-header-left h3 {
            font-size: 24px;
        }

        .card-header-left p {
            font-size: 18px;
        }

        .card-header-right {
            background: #F5F7F9;
            align-items: center;
        }

        button {
            width: 20%;
            padding: 8px 5px;
            /* display: none; */
            /* visibility: hidden; */
            background: #0D6EFD;
            /* border-radius: 5px; */
            font-size: 1rem;
            line-height: 20px;
            font-family: "Roboto Regular";
        }

        thead {
            background: #F5F7F9;
            /* border-bottom-left-radius: 5px; */
            /* border-bottom-right-radius: 5px;   */
        }

        .t-head {
            color: #24292D;
            font-family: "roboto_med";
        }

        .panel-top {
            background: #F5F7F9;

        }

        .p-head {
            color: #066AC9;
        }

        .table-box-left,
        .table-box-right {
            border: 1px solid 1px solid rgba(116, 117, 121, 0.2509803922);
            border-radius: 10px;
        }


        /* on of button */
        .switch {
            position: relative;
            display: inline-block;
            width: 35px;
            height: 19px;
        }

        /* Hide default HTML checkbox */
        .switch input {
            display: none;
        }

        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 15px;
            width: 15px;
            left: 3px;
            bottom: 2px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input.success:checked+.slider {
            background-color: #28a745;
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(15px);
            -ms-transform: translateX(15px);
            transform: translateX(15px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        .card_box:hover {
            background: #bed5ebc2;
            cursor: pointer;
        }
    </style>



    <div class="main">
        <div class="top">
            {{-- <div class="head-detail">
            <p class="head">Class</p>
        </div> --}}

      
            {{-- @if (userCan('followup.view'))
        <p class="t-right">
            
            <a href="javascript::void()" class="follow-up">Host Class</a>
        </p>
        @endif --}}
        </div>

        <div class="top">
            <div class="head-detail">
                <p class="head">Show</p>
            </div>

            <p class="t-right">
                @if(userCan('class.view'))
                <a href="{{ route('admin.class.index')}}" class="follow-up">Back</a>
                @endif
            </p>

        </div>


        <div class="tab-list">
        </div>

        <div class="detail-list">
            <div class="card">
                <div class="card-header">
                    <div class="row  p-2">
                        <div class="col-7 card-header-left">

                            <h3>(#{{ @$class->class_code }}) {{ ucwords(@$class->class_name) }}

                            </h3>

                            <p>Mode: {{ @$class->class_mode == 1 ? 'Online' : 'Offline' }} |Status:
                                {{ @$class->status == 1 ? 'Active' : 'Inactive' }}
                                |Tutor Name: @if ($class->tutor_id)
                                    {{ ucwords(adminIdToNameGet($class->tutor_id)) }}
                                @endif
                            </p>


                        </div>
                        <div class="col-5 card-header-right d-flex justify-content-end align-items-center">
                            <p class="me-2">Date :{{ dateMonthTimeFormat(@$class->start_date) }} </p>
                            {{-- <button class="card-header-btn rounded-2">Hidden</button> --}}
                            {{-- @if (userCan('class.hostClass') && $meetingId && $meetingPassword)
                                    <!-- Host Class Button -->
                                    <a href="{{ route('admin.class.hostZoomMeeting', ['meeting_id' => $meetingId, 'password' => $meetingPassword]) }}" 
                                    class="btn bg-primary d-inline-block ms-2 text-white">
                                        Host Class
                                    </a>
                                @endif --}}
                            @if (userCan('class.hostClass') && !empty($meetingId) && !empty($meetingPassword) && $is_current_date_within_range)
                                <form action="{{ route('admin.class.hostZoomMeeting') }}" class="" method="POST"
                                    target="_blank">
                                    @csrf
                                    @method('POST')
                                    <input type="hidden" name="meeting_id" value="{{ $meetingId }}" />
                                    <input type="hidden" name="password" value="{{ $meetingPassword }}" />
                                    <button class="btn bg-primary d-inline-block ms-2 text-white w-100">
                                        Host Class
                                    </button>
                                </form>
                            @endif
                            {{-- @if (userCan('class.hostClass') && $meetingId && $meetingPassword && $is_current_date_within_range)
                                    <!-- Host Class Button -->
                                    <button id="hostClassButton" class="btn bg-primary d-inline-block ms-2 text-white">
                                        Host Class
                                    </button>
                                @endif --}}

                        </div>

                    </div>
                    {{-- <div class="card">
                    <div class="card-header"></div>
                    <div class="card-body">
                      <h5 class="card-title">Warning card title</h5>
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                  </div> --}}

                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                {{-- <div class="card-header">Attendees</div> --}}
                                <div class="card-body">
                                    <p class="fs-6 panel-top p-2 ">
                                        <span class="p-head">Attendees</span>
                                    </p>
                                    <table class="table table-borderless bg-color">
                                        <thead>
                                            <tr>
                                                <th class="t-head">User</th>
                                                {{-- <th class="t-head">Class</th> --}}
                                                <th class="t-head">Attend</th>
                                            </tr>
                                        </thead>
                                        <tbody id="attendees_table">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-body">
                                    {{-- <div class="card-header">Task & Home Work</div> --}}
                                    <p class="fs-6 panel-top p-2 ">
                                        <span class="p-head">Task & Home Work</span>
                                    </p>
                                    <table class="table table-borderless bg-color">
                                        <thead>
                                            <tr>

                                                <th class="t-head">Type</th>
                                                <th class="t-head"> Task Name</th>
                                                <th class="t-head"> Mock Test</th>
                                                <th class="t-head"> Mock Test Type</th>
                                                <th class="t-head">Duration</th>
                                                <th class="t-head">link</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if (@$task_description === null)
                                            @else
                                                @foreach (@$task_description as $description)
                                                    <tr>
                                                        <td class="t-col">
                                                            <select class="form-control"
                                                                name="task_des{{ @$detail['id'] }}[{{ $des_serial }}][type]"
                                                                id="type_task_des{{ @$detail['id'] }}_{{ @$des_serial }}"
                                                                onchange="select_mock_test(
                                                    'task_des{{ $detail['id'] }}[{{ $des_serial }}]',
                                                    'type_task_des{{ $detail['id'] }}_{{ $des_serial }}',
                                                    'task_des{{ $detail['id'] }}_{{ $des_serial }}')
                                                    ">
                                                                <option value="Simple task"
                                                                    {{ @$description['type'] == 'Simple task' ? 'selected' : '' }}>
                                                                    Simple task</option>
                                                                <option value="Mock test"
                                                                    {{ @$description['type'] == 'Mock test' ? 'selected' : '' }}>
                                                                    MockTest Task</option>
                                                                <option value="Link task"
                                                                    {{ @$description['type'] == 'Link task' ? 'selected' : '' }}>
                                                                    Link Task</option>
                                                            </select>
                                                        </td>
                                                        <td class="t-col"
                                                            id="name_tdtask_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                            <input type="text" class="form-control"
                                                                placeholder="Write Text"
                                                                name="task_des{{ $detail['id'] }}[{{ $des_serial }}][name]"
                                                                value="{{ @$description['name'] }}">
                                                        </td>



                                                        <td class="t-col"
                                                            id="mock_tdtask_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                            @if (@$description['type'] == 'Mock test')
                                                                <select class="form-control"
                                                                    name="task_des{{ @$detail['id'] }}[{{ $des_serial }}][mock_test]">
                                                                    @foreach ($mock_test_list as $item)
                                                                        <option value="{{ $item['id'] }}"
                                                                            {{ @$description['mock_test'] == $item['id'] ? 'selected' : '' }}>
                                                                            Mock Test{{ $item['id'] }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            @endif
                                                        </td>

                                                        <td class="t-col"
                                                            id="mock_type_tdtask_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                            @if (@$description['type'] == 'Mock test')
                                                                <select class="form-control"
                                                                    name="task_des{{ @$detail['id'] }}[{{ $des_serial }}][mock_test_type]">
                                                                    <option value="">All</option>
                                                                    @foreach ($mock_test_list_category as $item)
                                                                        <option value="{{ $item['id'] }}"
                                                                            {{ @$description['mock_test_type'] == $item['id'] ? 'selected' : '' }}>
                                                                            {{ $item['name'] }}</option>
                                                                    @endforeach
                                                                </select>
                                                            @endif
                                                        </td>

                                                        <td class="t-col"
                                                            id="duration_tdtask_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                            <input type="text" class="form-control"
                                                                placeholder="Enter duration"
                                                                name="task_des{{ $detail['id'] }}[{{ $des_serial }}][duration]"
                                                                value="{{ @$description['duration'] }}">
                                                        </td>

                                                        <td class="t-col"
                                                            id="link_tdtask_des{{ $detail['id'] }}_{{ $des_serial }}">
                                                            <input type="text" class="form-control"
                                                                placeholder="Enter link"
                                                                name="task_des{{ $detail['id'] }}[{{ $des_serial }}][link]"
                                                                value="{{ @$description['link'] }}">
                                                        </td>


                                                    </tr>
                                                    @php $des_serial++; @endphp
                                                @endforeach
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="row p-3">

                        <div class="card ">
                            <div class="card-body row d-flex">
                                <div class="col-12 col-md-12 col-lg-12 col-xl-12">
                                    <p class="fs-6 panel-top p-2 ">
                                        <span class="p-head">Study Material</span>
                                    </p>
                                </div>
                                <div class="col-12 col-md-12 col-lg-12 col-xl-12 row"
                                    >
                                    @if (@$study_material === null)
                                    <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3  "
                                    style="  margin-top:5px; margin-bottom:5px;">No Study Material Available.</div>
                                    @else
                                        @php  $serial = 1; @endphp
                                        @foreach (@$study_material as $study)
                                            <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3  "
                                                style="  margin-top:5px; margin-bottom:5px;">
                                                <div class=" d-flex row card_box"
                                                    style="border:1px solid rgb(207, 198, 198); border-radius:5px;     padding: 10px; margin: -2px;"
                                                    onclick="submitForm({{ $serial }})">
                                                    <div
                                                        class="card-image-wrapper d-flex justify-content-center align-items-center p-3 col-4 col-md-4 col-lg-4 col-xl-4">
                                                        {{-- <img src="https://via.placeholder.com/450x150/FFFFFF" class="card-img-top img-fluid" alt="..."> --}}
                                                        <img src="https://placehold.jp/300x175.png" alt="Placeholder">                                                    </div>

                                                    <div class="col-8 col-md-8 col-lg-8 col-xl-8">
                                                        <p class="card-title"
                                                            style="font-size: 18px; font-weight:600; margin:0px;">
                                                            {{ ucwords(@$study['file_name']) ?? '--' }} </p>
                                                        {{-- <p class="card-title" style="font-size: 16px; font-weight:500;  margin:0px;">{{ @$study['file_name'] ?? '--' }} lkjweqoifweuoifu ihWIUFYIuwhq fbugiuwqhdgiuoFJBEWJHG IUWQGHFIUG WEQFGGIU </p> --}}
                                                        <form action="{{ route('commonController.s3FileShow') }}"
                                                            method="post" id="file_form_submit{{ $serial }}" target="_blank">
                                                            @csrf
                                                            <input type="hidden" name="url"
                                                                value="{{ encrypt_urls($study['file_path']) }}">
                                                            {{-- <button type="submit" class="btn btn-primary  badge "
                                                                style="width: fit-content;">View</button> --}}
                                                                <button type="submit" class="btn btn-primary badge" style="width: fit-content;"  id="submitBtn{{ $serial }}">View</button>

                                                            {{-- <button type="submit" class="btn btn-primary  badge" style="width: fit-content;">Download</button> --}}
                                                        </form>

                                                    </div>
                                                </div>
                                            </div>
                                            @php  $serial++; @endphp
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>

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


        </div>
    </div>

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

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


@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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js?v={{ env('CRM_VERSION') }}">
    </script>

    <script>
     
        function submitForm(serial) {
        // Disable the button to prevent multiple submissions
        $('#submitBtn' + serial).prop('disabled', true);

        // Submit the form
        $('#file_form_submit' + serial).submit();
    }
        $(document).ready(function() {


            reloadTable();

            $(document).on('change', '.status-switch', function() {

                var status = $(this).prop('checked') ? 1 : 0;
                var id = $(this).data('id');
                var type = $(this).data('class');
                var attendance_id = $(this).data('attendance_id');
                var class_id = $(this).data('classid');
                // Check the old type before making the AJAX request
                if (type == 'attend_status') {
                    $(`#attend_status_${id}`).text(status == 1 ? "YES" : "No");
                }

                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: '{{ route('admin.class.change_attendees_status') }}',
                    data: {
                        'status': status,
                        'type': type,
                        'user_id': id,
                        'class_id': class_id,
                        'attendance_id': attendance_id,

                    },
                    success: function(response) {
                        toastr.success(response.message, 'Success');
                        reloadTable();
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // Roll back the change by reverting the checkbox state
                        $(this).prop('checked', !status);
                        $('#active_class' + id).prop('checked', !status);
                        if (type == 'attend_status') {
                            $(`#attend_status_${id}`).text(status == 1 ? "No" : "YES");
                        }
                        toastr.error(textStatus + ' ' + errorThrown);
                        reloadTable();
                    }
                });
            });

        });

        function reloadTable() {

            $.ajax({
                type: "GET",
                url: '{{ route('admin.class.attendeesTable', ['id' => $class->id]) }}',
                success: function(response) {
                    $('#attendees_table').empty(); // Clear previous content
                    $('#attendees_table').html(response.html); // Append new data
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error('Error loading attendees table:', textStatus, errorThrown);
                }
            });
        }
    </script>

    <script>
        $(document).ready(function() {
            $('#hostClassButton').click(function() {
                // Get the meeting ID and password
                var meetingId = "{{ $meetingId }}";
                var password = "{{ $meetingPassword }}";

                // Create a form element
                var form = $('<form target="_blank">', {
                    'method': 'POST',
                    'action': "{{ route('admin.class.hostZoomMeeting') }}"
                });

                // Append the CSRF token as a hidden field
                $('<input>').attr({
                    'type': 'hidden',
                    'name': '_token',
                    'value': '{{ csrf_token() }}'
                }).appendTo(form);

                // Append the meeting ID and password as hidden fields
                $('<input>').attr({
                    'type': 'hidden',
                    'name': 'meeting_id',
                    'value': meetingId
                }).appendTo(form);

                $('<input>').attr({
                    'type': 'hidden',
                    'name': 'password',
                    'value': password
                }).appendTo(form);

                // Append the form to the body and submit it
                form.appendTo('body').submit();
            });
        });
    </script>
@endsection