@php
    use App\Models\EnrollmentModule\Enrollment;
    use Carbon\Carbon;
@endphp
<x-student-layout>
    <div class="pagetitle" style="padding-bottom: 10px">
        {{-- <h1>Home</h1> --}}
    </div>
    <section class="section dashboard">
        {{-- <div class="row">
            <div class="col-lg-3 col-lg-3">
                <div class="card info-card customers-card">
                    <div class="filter">
                        <a class="icon" href="#" data-bs-toggle="dropdown"></a>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Pending Projects</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                <i class="bi bi-people"></i>
                            </div>
                            <div class="ps-3">
                                <h6><a href="#">{{ $projects->count() }}</a></h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-lg-3">
                <div class="card info-card customers-card">
                    <div class="filter">
                        <a class="icon" href="#" data-bs-toggle="dropdown"></a>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Pending Quizzes</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                <i class="bi bi-people"></i>
                            </div>
                            <div class="ps-3">
                                <h6><a href="#">{{ $quizs->count() }}</a></h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
        <div class="row">
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
                <div class="card card-stats statistic-box mb-4">
                    <div class="card-body card-header-success border-0 p-3">
                        <h4 class="card-category text-muted ">
                            <strong>My Dreamers ID:</strong> {{ auth()->user()?->student?->student_id }}
                        </h4>
                    </div>
                </div>
            </div>
        </div>
        @if(count($announcedLevelCompletions) > 0)
            <div class="row">
                <div class="col-md-6 offset-lg-3">
                    <div class="card text-bg-warning">
                        <div class="card-body">
                            <div class="d-flex justify-content-center">
                                <h2 class="fs-7 mb-0 text-dark">
                                    <strong>PTM Announcement:</strong>
                                    @foreach($announcedLevelCompletions as $announcedLevelCompletion)
                                        {{ Carbon::parse($announcedLevelCompletion?->estimated_ptm_date)->format('d F, Y') }}
                                        <strong>at</strong> {{ Carbon::parse($announcedLevelCompletion?->class?->class_time)->format('h:i A') }} @if(!$loop->last)
                                            <span style="color: #fff;">&</span>
                                        @endif
                                    @endforeach
                                </h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        {{--<div class="row">
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
                <div class="card card-stats statistic-box mb-4">
                    <div class="card-header card-header-success card-header-icon position-relative border-0 text-right px-3 py-0">
                        <div class="card-icon d-flex align-items-center justify-content-center">
                            <img src="{{ URL::to('/assets/img/coin-1.png') }}" class="mt-3 img-fluid">
                        </div>
                        <p class="card-category text-uppercase fs-10 font-weight-bold text-muted ">
                            Total Points </p>
                        <h3 class="card-title fs-21 font-weight-bold text-muted ">{{ $totalPoint }}</h3>
                    </div>
                </div>
            </div>
        </div>--}}

        <div class="row">
            @if(count($todaysSchedules) > 0)
                <div class="pagetitle" style="padding-bottom: 10px">
                    <h1>Todays Schedule</h1>
                </div>
            @endif
            @foreach($todaysSchedules as $schedule)
                @php
                    $status = $badge = '';
                    if ($schedule->status == 'Active' || $schedule->class_status == 1) {
                        $status = 'Running';
                        $badge = 'primary';
                    } elseif ($schedule->status == 'Completed' || $schedule->class_status == 1) {
                        $status = 'Completed';
                        $badge = 'success';
                    }
                @endphp
                <div class="col-4 mb-3">
                    <div class="card card-outline w-100 position-relative overflow-hidden mb-0">
                        <div class="card-body">
                            <div class="nav nav-pills rounded align-items-center flex-row">
                                @if($schedule->class?->enrollment_classes[0]?->enrollment?->due_installment > 1)
                                    <div class="col-md-12">
                                        <div class="alert alert-danger bg-danger text-white border-0 fade show text-center" role="alert">
                                            Kindly clear your payment dues to join the class
                                        </div>
                                    </div>
                                @endif
                                <div class="col-10">
                                    <h5>{{ (!empty($schedule->sessionClass->name) ? $schedule->sessionClass->name : '') }}</h5>
                                    <h6>{{ (!empty($schedule->sessionClass->course->name) ? $schedule->sessionClass->course->name : '') }}</h6>
                                    <h5>Date: {{ (!empty($schedule->session_date) ? $schedule->session_date : '') }}</h5>
                                    <h5>Time: {{ (!empty($schedule->session_started) ? date('h:i a', strtotime($schedule->session_started)) : '') }}</h5>
                                    <span class="badge bg-{{ $badge }}">{{ $status }}</span>
                                </div>
                                <div class="col-2">
                                    @if($schedule->class_status == 1)
                                        @if($schedule->class?->enrollment_classes[0]?->enrollment?->due_installment <= 1)
                                            <a href="{{ route('join-class-details', $schedule->id) }}" data-joinurl="{{ $schedule->join_url }}" class="btn btn-info btn-sm" onclick="joinLiveClassParticipant(this, {{ $student->id }}, {{ $schedule->id }}, '{{ !empty($schedule->join_url) ? $schedule->join_url : '' }}')">
                                                <i class="ti ti-camera"></i>
                                                Join
                                            </a>
                                        @endif
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="row">
            <div class="pagetitle" style="padding-bottom: 10px">
                <h1>My Class</h1>
            </div>
            @php
                $status = $badge = '';
            @endphp

            @foreach($getStudentEnrollmentClasses as $class)
                @php
                    if ($class->enrollement_class->class->status == 1) {
                        $status = 'Active';
                        $badge = 'primary';
                    } elseif ($class->enrollement_class->class->status == 4) {
                        $status = 'Completed';
                        $badge = 'success';
                    }
                @endphp
                <div class="col-4 mb-3">
                    <div class="card card-outline w-100 position-relative overflow-hidden mb-0">
                        <div class="card-body">
                            <div class="nav nav-pills rounded align-items-center flex-row">
                                <div class="col-10">
                                    <h5>{{ (!empty($class->name) ? $class->name : '') }}</h5>
                                    <h6>{{ (!empty($class->enrollement_class->class->course->name) ? $class->enrollement_class->class->course->name : '') }}</h6>
                                    <h5>Track#{{ (!empty($class->enrollement_class->class->track->track_num) ? $class->enrollement_class->class->track->track_num : '') }}  {{ (!empty($class->enrollement_class->class->track->title) ? $class->enrollement_class->class->track->title : '') }}</h5>
                                    <h5>Level#{{ (!empty($class->enrollement_class->class->level->level_num) ? $class->enrollement_class->class->level->level_num : '') }} {{ (!empty($class->enrollement_class->class->level->title) ? $class->enrollement_class->class->level->title : '') }}</h5>
                                    <h6>Instructor: {{ (!empty($class->enrollement_class->class->teacher->name) ? $class->enrollement_class->class->teacher->name : '') }}</h6>
                                    <h6>Coordinator: {{ (!empty($class->enrollement_class->class->coordinator->name) ? $class->enrollement_class->class->coordinator->name : '') }}</h6>
                                    <a href="/my-session-list/{{ encrypt($class->class_id) }}" class="btn btn-info btn-sm">All Schedules</a>
                                </div>
                                <div class="col-2">
                                    <span class="badge bg-{{ $badge }}">{{ $status }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

            {{-- @foreach($class_schedules as $schedule)
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">
                                <a @if(auth('web')->user()->can('codingforkids.list')) href="/my-session-list/{{ $student->class->id }}" @endif>{{ $student->class->name }} (T{{ $schedule->class?->track?->track_num }}L{{ $schedule->class?->level?->level_num }})</a>
                            </h5>
                            <p>Class Day: <strong>{{ $schedule->day }}</strong> <span
                                        class="badge badge-success">{{ $todays_session_status}}</span></p>
                            <p>
                                Track#{{ $student->class->track->track_num }},
                                Level#{{ $student->class->level->level_num }}<br>
                                <!-- Class No: 7 -->
                            </p>
                            <a href="{{ route('session-student', ['id' => $schedule->class?->id]) }}" class="btn btn-outline-success {{$todays_session_status == 'Completed' ? 'd-none' : ''}}">See Class Details</a>
                                                            <button type="button" href="{{ route('join-class-details', $todays_session->id) }}"
                               class="btn btn-sm btn-outline-success float-end" data-joinurl= "{{ $todays_session->join_url }}"
                               onclick="joinLiveClassParticipant(this, {{ $student->id }}, {{ $todays_session->id }}, '{{ !empty($todays_session->join_url) ? $todays_session->join_url : '' }}')"
                               >
                                Join Class
                            </button>
                                                        </div>
                        <input type="hidden" id="class_id" value="{{$schedule->class->id}}">
                    </div>
                </div>
            @endforeach --}}
        </div>

        <div class="row">
            <div class="col-md-6 col-lg-4 d-flex align-items-stretch">
                <div class="card w-100">
                    <div class="card-body">
                        <div class="row" style="align-items: center;">
                            <div class="col-12">
                                <h5 class="card-title fw-semibold text-center">Attendance Overview</h5>
                            </div>
                        </div>
                        <div id="attendance-data" class="mb-4" style="display: flex; justify-content: center;"></div>
                        <div class="d-flex align-items-center justify-content-center">
                            <a href="{{ route('student.attendance.index', ['student_id' => encrypt($student->id)]) }}"
                               class="btn btn-outline-success">See Attendance Report</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if(count($completedLevelCompletions) > 0)
            <div class="row">
                <div class="col-md-12">
                    <div class="">
                        <h2 class="fw-bolder fs-10 text-center">Level Completion</h2>
                        <div class="row">
                            @foreach($completedLevelCompletions as $completedLevelCompletion)
                                <div class="col-md-6 col-lg-3">
                                    <div class="card">
                                        <div class="card-body pt-6">
                                            <div class="text-end">
                                                <span class="badge fw-bolder py-1 bg-warning-subtle text-warning text-uppercase fs-2 rounded-3">Track# {{ $completedLevelCompletion->track?->track_num }}, Level# {{ $completedLevelCompletion->level?->level_num }}</span>
                                            </div>
                                            <div class="my-4">
                                                <img src="{{ asset('assets/modernize/images/backgrounds/gold.png') }}"
                                                     alt="modernize-img" class="img-fluid" width="80" height="80">
                                            </div>
                                            <div class="feeds ps-0 my-6">
                                                <div class="feed-item mb-2 py-2 pe-3 ps-4">
                                                    <div class="border-start border-2 border-success d-md-flex align-items-center">
                                                        <div class="d-flex align-items-center gap-6 ms-2">
                                                            <a href="javascript:void(0)"
                                                               class=" round-40 bg-success-subtle text-success rounded-circle d-flex align-items-center justify-content-center flex-shrink-0">
                                                                <i class="ti ti-chart-treemap fs-6"></i>
                                                            </a>
                                                            <div>
                                                                <span class="text-dark fw-medium"><strong>Course Name</strong></span>
                                                                <p class="m-0">{{ $completedLevelCompletion->course?->name }}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="feed-item mb-2 py-2 pe-3 ps-4">
                                                    <div class="border-start border-2 border-dark d-md-flex align-items-center">
                                                        <div class="d-flex align-items-center gap-6 ms-2">
                                                            <a href="javascript:void(0)"
                                                               class=" round-40 bg-light text-dark rounded-circle d-flex align-items-center justify-content-center flex-shrink-0">
                                                                <i class="ti ti-stack-3 fs-6"></i>
                                                            </a>
                                                            <div>
                                                                <span class="text-dark fw-medium"><strong>Level Name</strong></span>
                                                                <p class="m-0">{{ $completedLevelCompletion->level?->title }}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="feed-item mb-2 py-2 pe-3 ps-4">
                                                    <div class="border-start border-2 border-primary d-md-flex align-items-center">
                                                        <div class="d-flex align-items-center gap-6 ms-2">
                                                            <a href="javascript:void(0)"
                                                               class=" round-40 bg-primary-subtle text-primary rounded-circle d-flex align-items-center justify-content-center flex-shrink-0">
                                                                <i class="ti ti-calendar fs-6"></i>
                                                            </a>
                                                            <div>
                                                                <span class="text-dark fw-medium"
                                                                      style="display: grid;"><strong>Completed Date</strong></span>
                                                                <p class="m-0">{{ Carbon::parse($completedLevelCompletion?->level_completion_date)->format('d F, Y') }}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="feed-item mb-2 py-2 pe-3 ps-4">
                                                    <div class="border-start border-2 border-success d-md-flex align-items-center">
                                                        <div class="d-flex align-items-center gap-6 ms-2">
                                                            <a href="javascript:void(0)"
                                                               class=" round-40 bg-success-subtle text-success rounded-circle d-flex align-items-center justify-content-center flex-shrink-0">
                                                                <i class="ti ti-arrows-random fs-6"></i>
                                                            </a>
                                                            <div>
                                                                <span class="text-dark fw-medium"><strong>Final Outcome</strong></span>
                                                                <p class="m-0">{{ $completedLevelCompletion->level?->final_outcome }}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="feed-item mb-2 py-2 pe-3 ps-4">
                                                    <div class="border-start border-2 border-warning d-md-flex align-items-center">
                                                        <div class="d-flex align-items-center gap-6 ms-2">
                                                            <a href="javascript:void(0)"
                                                               class=" round-40 bg-warning-subtle text-warning rounded-circle d-flex align-items-center justify-content-center flex-shrink-0">
                                                                <i class="ti ti-notebook fs-6"></i>
                                                            </a>
                                                            <div>
                                                                <span class="text-dark fw-medium"><strong>Learning Outcome</strong></span>
                                                                <p class="m-0">{{ $completedLevelCompletion->level?->learning_outcomes }}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {{--<div class="feed-item mb-2 py-2 pe-3 ps-4">
                                                    <div class="border-start border-2 border-danger d-md-flex align-items-center">
                                                        <div class="d-flex align-items-center gap-6 ms-2">
                                                            <a href="javascript:void(0)" class=" round-40 bg-danger-subtle text-danger rounded-circle d-flex align-items-center justify-content-center flex-shrink-0">
                                                                <i class="ti ti-layout-cards fs-6"></i>
                                                            </a>
                                                            <div>
                                                                <span class="text-dark fw-medium"><strong>Total Project</strong></span>
                                                                <p class="m-0"></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>--}}
                                                @php
                                                    $attendanceRate = $completedLevelCompletion->class->attendances_count > 0 ? round(($completedLevelCompletion->class->present_attendances_count / $completedLevelCompletion->class->attendances_count) * 100, 2) : 0;
                                                @endphp
                                                <div class="feed-item mb-2 py-2 pe-3 ps-4">
                                                    <div class="border-start border-2 border-primary d-md-flex align-items-center">
                                                        <div class="d-flex align-items-center gap-6 ms-2">
                                                            <a href="javascript:void(0)"
                                                               class=" round-40 bg-primary-subtle text-primary rounded-circle d-flex align-items-center justify-content-center flex-shrink-0">
                                                                <i class="ti ti-chart-infographic fs-6"></i>
                                                            </a>
                                                            <div>
                                                                <span class="text-dark fw-medium"><strong>Attendance Rate</strong></span>
                                                                <p class="m-0">{{ $attendanceRate .'%' }}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {{--<div class="feed-item mb-2 py-2 pe-3 ps-4">
                                                    <div class="border-start border-2 border-success d-md-flex align-items-center">
                                                        <div class="d-flex align-items-center gap-6 ms-2">
                                                            <a href="javascript:void(0)" class=" round-40 bg-success-subtle text-success rounded-circle d-flex align-items-center justify-content-center flex-shrink-0">
                                                                <i class="ti ti-chart-arrows-vertical fs-6"></i>
                                                            </a>
                                                            <div>
                                                                <span class="text-dark fw-medium"><strong>Performance</strong></span>
                                                                <p class="m-0">Excellent</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>--}}
                                            </div>
                                            @if($completedLevelCompletion->level_completion_details[0]?->enrollment?->payment_status == Enrollment::PAYMENT_STATUS_PAID)
                                                <a href="{{ route('certificate.export.pdf', ['id' => encrypt(auth()->user()->student->id), 'level_id' => encrypt($completedLevelCompletion->level->id), 'action' => 'download']) }}"
                                                   class="btn btn-success fw-bolder py-6 w-100 text-capitalize"
                                                >
                                                    Download Certificate
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </section>

    <x-slot name="script">
        <script>
            function joinLiveClassParticipant(that, studentId, classSessionId, joinUrl) {
                // window.open($(that).attr("href"), '_self');
                window.open($(that).attr("data-joinurl"), '_blank');

                setTimeout(function () {
                    window.open($(that).attr("href"), '_self');
                }, 100);

                $.ajax({
                    url: "/class-session-participant-store",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    type: "POST",
                    data: {
                        student_id: studentId,
                        class_session_id: classSessionId,
                        joinUrl: joinUrl,
                    },
                    beforeSend: function () {
                        $(".loader-populate").html("<div id='loader-main'><div id='loader2'></div></div>");
                    },
                    success: function (r) {
                        // window.open(joinUrl, '_blank');
                        $(".loader-populate").html("");
                    },
                });
            }
        </script>

        <script>
            $(document).ready(function () {
                var options = {
                    color: "#adb5bd",
                    series: [{{ $presentAttendancePercentage }}, {{ $absentAttendancePercentage }}],
                    labels: ["Present", "Absent"],
                    chart: {
                        type: "pie",
                        fontFamily: "Plus Jakarta Sans', sans-serif",
                        foreColor: "#adb0bb",
                        height: 235,
                    },
                    plotOptions: {
                        pie: {
                            donut: {
                                size: '70%',
                                background: 'transparent',
                                labels: {
                                    show: true,
                                    name: {
                                        show: true,
                                        offsetY: 7,
                                    },
                                    value: {
                                        show: true,
                                    },
                                },
                            },
                        },
                    },
                    stroke: {
                        show: false,
                    },
                    dataLabels: {
                        enabled: true,
                    },

                    legend: {
                        show: true,
                    },
                    colors: ["var(--bs-primary)", "#EAEFF4", "var(--bs-secondary)"],

                    tooltip: {
                        theme: "dark",
                        fillSeriesColor: false,
                    },
                    responsive: [{
                        breakpoint: 480,
                        options: {
                            chart: {
                                width: 200
                            },
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }]
                };

                var chart = new ApexCharts(document.querySelector("#attendance-data"), options);
                chart.render();
            });
        </script>
    </x-slot>
</x-student-layout>