@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' => 'HomeWork'])
            <!-- <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;">
        <h3 class="text-center mb-4" style="color: #5c2018;">{{ $title }}</h3>

        <!-- @if($homeworks->count())
        <div class="table-responsive mt-4">
            <table class="table table-bordered table-striped text-center">
                <thead>
                    <tr>
                        <th>{{ $title }} Name</th>
                        <th>Type</th>
                        <th>Date</th>
                        <th>Uploaded By</th>
                        <th>Action</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $uniqueHomeworks = $homeworks->unique('ex_name');
                    @endphp

                    @foreach($uniqueHomeworks as $homework)
                    <tr>
                        <td>{{ $homework->ex_name }}</td>
                        <td>{{ $homework->type }}</td>
                        <td>{{ \Carbon\Carbon::parse($homework->date)->format('d M Y') }}</td>
                        <td>{{ $homework->teacher }}</td>
                        <td>
                            @switch($homework->ex_path_id)
                                @case(1)
                                    <button class="btn btn-primary view-btn" data-bs-toggle="modal" data-bs-target="#modal{{ $loop->index }}">View Audio</button>
                                    @break
                                @case(2)
                                    <button class="btn btn-primary view-btn" data-bs-toggle="modal" data-bs-target="#modal{{ $loop->index }}">View Video</button>
                                    @break
                                @case(3)
                                    <button class="btn btn-primary view-image-btn"
                                        data-id="{{ $homework->id }}"
                                        data-name="{{ $homework->ex_name }}"
                                        data-path="{{ asset($homework->ex_path) }}"
                                        data-bs-toggle="modal"
                                        data-bs-target="#modal{{ $loop->index }}">
                                        View Image
                                    </button>
                                    @break
                                @case(4)
                                    <button class="btn btn-primary view-doc-btn"
                                        data-id="{{ $homework->id }}"
                                        data-name="{{ $homework->ex_name }}"
                                        data-path="{{ asset($homework->ex_path) }}"
                                        data-bs-toggle="modal"
                                        data-bs-target="#documentModal">
                                        View
                                    </button>
                                    @break
                            @endswitch
                            @if(in_array($homework->ex_path_id, [1, 2, 3, 4]))
                                <a href="{{ asset($homework->ex_path) }}" class="btn btn-success ms-1" download>Download</a>
                            @endif
                        </td>
                        <td>
                            <div class="checkbox-wrapper">
                                @if($homework->status == 1)
                                    <!-- Show tick symbol when status is 1 (Completed) -->
                                    <img src="https://img.icons8.com/color/48/000000/checked.png"
                                         id="tick{{ $homework->id }}"
                                         style="width: 20px;" alt="Viewed"/>
                                @else
                                    <!-- Do not show tick symbol if status is not 1 -->
                                    <img src="https://img.icons8.com/color/48/000000/checked.png"
                                         id="tick{{ $homework->id }}"
                                         style="display: none; width: 20px;" alt="Viewed"/>
                                @endif
                            </div>
                        </td>
                    </tr>

                    @if(!in_array($homework->ex_path_id, [4]))
                    <div class="modal fade" id="modal{{ $loop->index }}" tabindex="-1" aria-labelledby="modalLabel{{ $loop->index }}" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="modalLabel{{ $loop->index }}">{{ $homework->ex_name }}</h5>
                                    <button type="button" class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body text-center">
                                    @switch($homework->ex_path_id)
                                        @case(1)
                                            <audio controls class="watchable-audios" data-id="{{ $homework->id }}" style="width: 100%;">
                                                <source src="{{ asset($homework->ex_path) }}" type="audio/mpeg">
                                            </audio>
                                            @break
                                        @case(2)
                                            <video width="80%" height="400px" controls preload="metadata" class="watchable-video" data-id="{{ $homework->id }}">
                                                <source src="{{ asset($homework->ex_path) }}" type="video/mp4">
                                            </video>
                                            @break
                                        @case(3)
                                            <img src="{{ asset($homework->ex_path) }} "
                                                 data-id="{{ $homework->id }}"
                                                 class="img-fluid rounded watchable-Image"
                                                 alt="Image"
                                                 style="width: 80%; height: 400px;" />
                                            @break
                                    @endswitch
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
            <p class="text-center text-muted">No {{ $title }} available.</p>
        @endif -->
             <div class="text-left mt-3">
                        <a href="/automotive" class="btn btn-secondary">← Back to Dashboard</a>
                    </div>
    </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>