@extends('layouts.app')

@section('content')
   <nav class="navbar navbar-main navbar-expand-lg  px-0 mx-4 shadow-none border-radius-xl z-index-sticky " id="navbarBlur"
        data-scroll="false">
        <div class="container-fluid py-1 px-3">
            @include('layouts.navbars.auth.topnav', ['title' => 'Things To Do'])
            <!-- <div class="sidenav-toggler sidenav-toggler-inner d-xl-block d-none ">
                <a href="javascript:;" class="nav-link p-0">
                    <div class="sidenav-toggler-inner">
                        <i class="sidenav-toggler-line bg-white"></i>
                        <i class="sidenav-toggler-line bg-white"></i>
                        <i class="sidenav-toggler-line bg-white"></i>
                    </div>
                </a>
            </div> -->
            <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                   
                </div>
                <ul class="navbar-nav  justify-content-end">
                    <li class="nav-item d-flex align-items-center">
                        @include('auth.logout')
                    </li>
                    <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-white p-0" id="iconNavbarSidenav">
                            <div class="sidenav-toggler-inner">
                                <i class="sidenav-toggler-line bg-white"></i>
                                <i class="sidenav-toggler-line bg-white"></i>
                                <i class="sidenav-toggler-line bg-white"></i>
                            </div>
                        </a>
                    </li>
            
                    <li class="nav-item">
                        <a class="nav-link {{ Route::currentRouteName() == 'user-profile' ? 'active' : '' }}" href="{{ route('user-profile') }}">
                            <span class="sidenav-mini-icon"> <i class="fa fa-cog" style="color:white;"></i> </span>
                            <span class="sidenav-normal text-bold" style="color:black;"> </span>
                        </a>
                    </li>


                </ul>
            </div>
        </div>
    </nav>
<!-- Main Resource Table Section -->
<div class="container mt-5 d-flex justify-content-center">
     
    <div class="card p-4 shadow w-100" style="max-width: 90%; background-color: #f8f5f5; border-radius: 8px;">
          <div class="text-left mt-3">
                        <a href="/default_home" class="btn btn-secondary">← Back to Dashboard</a>
                    </div>
        <h3 class="text-center mb-4" style="color: #5c2018;">Things To Do Weekwise</h3>
@php
    // ensure $homeworks exists and is a collection
    $homeworks = isset($homeworks) ? $homeworks : collect();
@endphp

@if($homeworks->count())
    <div class="table-responsive mt-4">
        <table class="table table-bordered table-striped text-center">
            <thead>
                <tr>
                    <th>Week</th>
                    <!-- <th>Class</th> -->
                    <th>Exercise Count</th>
                    <!-- <th>Completed Exercise</th> -->
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($homeworks as $homework)
                    <tr>
                        <td>{{ $homework->week_name }}</td>
                        <!-- <td>{{ $homework->class_name }}</td> -->
                        <td><span class="badge bg-warning">{{ $homework->pending_count }}</span></td>
                        <!-- <td><span class="badge bg-success">{{ $homework->completed_count }}</span></td> -->
                        <td>
                            <a href="{{ route('homeworks.view', ['week_id' => $homework->week_id, 'group_id' => $homework->group_id]) }}" 
                               class="btn btn-primary btn-sm">
                                View
                            </a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@else
    <p class="text-center text-muted">No Homework available.</p>
@endif


          
    </div>

</div>

{{-- Dynamic Document Modal --}}
<div class="modal fade" id="documentModal" tabindex="-1" aria-labelledby="documentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="documentModalLabel">Document Preview</h5>
                <button type="button" class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <iframe id="documentViewer" width="100%" height="500px" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>

@include('layouts.footers.auth.footer')
@endsection

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<script>
document.addEventListener('DOMContentLoaded', function () {
    const setViewed = (type, id) => {
        let viewed = JSON.parse(localStorage.getItem(type) || '[]');
        if (!viewed.includes(id)) {
            viewed.push(id);
            localStorage.setItem(type, JSON.stringify(viewed));
        }
        
        // Get CSRF token dynamically from the meta tag
        // let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        console.log("hello");

        // Send AJAX request to mark the homework as complete
        $.ajax({
            url: '{{ route("homework.markComplete") }}',  // URL to your controller route
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'  // Correctly send CSRF token in the headers
            },
            data: { id: id },  // Sending ID to mark as complete
            success: function (data) {
                console.log('Marked complete:', data);
                // After marking as complete, display the tick symbol
                const tick = document.getElementById('tick' + id);
                if (tick) tick.style.display = 'inline';
            },
            error: function (err) {
                console.error('Error:', err);
            }
        });
    };

    // Image click event for marking as viewed
    document.querySelectorAll('.view-image-btn').forEach(button => {
    button.addEventListener('click', function () {
        const id = this.dataset.id;
        setViewed('viewedImages', id);
    });
});

    // Video ended event for marking as viewed
    document.querySelectorAll('.watchable-video').forEach(video => {
        video.addEventListener('ended', function () {
            setViewed('viewedVideo', this.dataset.id);
        });
    });

    // Audio ended event for marking as viewed
    document.querySelectorAll('.watchable-audios').forEach(audio => {
        audio.addEventListener('ended', function () {
            setViewed('viewedAudios', this.dataset.id);
        });
    });

    // Document view event for marking as viewed
    document.querySelectorAll('.view-doc-btn').forEach(button => {
        button.addEventListener('click', function () {
            const id = this.dataset.id;
            const name = this.dataset.name;
            const path = this.dataset.path;

            // Set document modal label and iframe source
            document.getElementById('documentModalLabel').textContent = name;
            document.getElementById('documentViewer').src = path;

            setViewed('viewedDocuments', id);  // Mark the document as viewed
        });
    });
});


</script>

<style>
.table th, .table td {
    padding: 0.4rem !important;
    vertical-align: middle;
}
.btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.875rem;
}
.checkbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
body {
    background-color: #121212;
    color: #ffffff;
    font-family: Arial, sans-serif;
    text-align: center;
}
table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
    color: #ffffff;
}
th, td {
    padding: 10px;
    border: 1px solid #ffffff;
}
th {
    background-color: #333333;
}
td {
    background-color: #222222;
}
.btn-close {
    filter: invert(23%) sepia(89%) saturate(750%) hue-rotate(330deg);
    opacity: 1 !important;
}
.btn-close:hover {
    filter: invert(40%) sepia(100%) saturate(1000%) hue-rotate(320deg);
}
</style>