@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' => 'Home'])
            <!-- <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>
    <!-- End Navbar -->
   
    <!-- <div class="card  my-1  mt-5 pt-1" style="margin-right:5%;margin-left:5%;" id="basic-info">
        <div class="card-header  mx-1 pt-1">
            <h2 class="mt-5 6 mx-1 pt-1">Exercise Videos</h2>
             <input type="hidden" id="UserId" name="UserId" value="{{auth()->user()->id}}">
        </div> -->

        
    
    <!-- <div class="container mt-4 pb-5"> Increased margin-top & added padding-bottom -->
<!-- Centering and adding spacing -->



<div class="card my-4 pt-1" style="margin: 0 5%;">
    <div class="card-header mx-1 pt-1">
        <h4 class="text-center">Select File Type</h4>
    </div>
    <div class="card-body text-center text-muted">
        <p>Please select a resource type to view exercises.</p>
        <form method="GET" action="{{ route('exerciseforstudent') }}">
            <div class="input-group justify-content-center">
                <select name="resource" onchange="this.form.submit()" class="select-resource">
                    <option value="">Select your resources</option>
                    <option value="1" {{ request('resource') == '1' ? 'selected' : '' }}>Audio</option>
                    <option value="2" {{ request('resource') == '2' ? 'selected' : '' }}>Video</option>
                    <option value="3" {{ request('resource') == '3' ? 'selected' : '' }}>Image</option>
                    <option value="4" {{ request('resource') == '4' ? 'selected' : '' }}>Document</option>
                </select>
            </div>
        </form>
    </div>
</div>

@if(request('resource'))
    <div class="card my-4 pt-1" style="margin: 0 5%;">
        <div class="card-body">
            @php $sno = 1; @endphp
            <div class="table-responsive">
                <table class="table table-bordered text-center w-100">
                    <thead>
                        <tr>
                            <th style="width: 5%;">S.No</th>
                            <th style="width: 25%;">Exercise Name</th>
                            <th style="width: 25%;">Action</th>
                            <th style="width: 20%;">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($exercises as $exercise)
                            @if($exercise->ex_path && file_exists(public_path($exercise->ex_path)))
                                <tr>
                                    <td>{{ $sno++ }}</td>
                                    <td>{{ $exercise->ex_name }}</td>
                                    <td>
                                        <button class="btn btn-primary view-btn" data-bs-toggle="modal" data-bs-target="#modal{{ $loop->index }}" data-id="{{ $exercise->id }}">
                                            @switch($exercise->ex_path_id)
                                                @case(1) View Audio @break
                                                @case(2) View Video @break
                                                @case(3) View Image @break
                                                @case(4) View Document @break
                                                @default View File
                                            @endswitch
                                        </button>
                                        @if(in_array($exercise->ex_path_id, [1, 2, 3, 4]))
                                            <a href="{{ asset($exercise->ex_path) }}" class="btn btn-success ms-1" download>Download</a>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="checkbox-wrapper">
                                            <img src="https://img.icons8.com/color/48/000000/checked.png"
                                                id="tick{{ $exercise->id }}"
                                                style="display: none; width: 20px;" alt="Viewed"/>
                                        </div>
                                    </td>
                                </tr>

                                <!-- Modal -->
                                <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 }}">{{ $exercise->ex_name }}</h5>
                                                <button type="button" class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close" style="background-color: red;"></button>
                                            </div>
                                            <div class="modal-body text-center">
                                                @switch($exercise->ex_path_id)
                                                    @case(1)
                                                        <audio controls style="width: 100%;" data-id="{{ $exercise->id }}">
                                                            <source src="{{ asset($exercise->ex_path) }}" type="audio/mpeg">
                                                            Your browser does not support the audio tag.
                                                        </audio>
                                                        @break
                                                    @case(2)
                                                        <video width="80%" height="400px" controls preload="metadata" class="watchable-video" data-id="{{ $exercise->id }}">
                                                            <source src="{{ asset($exercise->ex_path) }}" type="video/mp4">
                                                            Your browser does not support the video tag.
                                                        </video>
                                                        @break
                                                    @case(3)
                                                        <img src="{{ asset($exercise->ex_path) }}" class="img-fluid rounded" alt="Image" style="width: 80%; height: 400px;" />
                                                        @break
                                                    @case(4)
                                                        <iframe src="{{ asset($exercise->ex_path) }}" width="100%" height="500px"></iframe>
                                                        @break
                                                    @default
                                                        <p>No preview available for this file.</p>
                                                @endswitch
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @empty
                            <tr>
                                <td colspan="4">No exercises found for the selected resource.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endif

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

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const viewed = JSON.parse(localStorage.getItem('viewedExercises') || '[]');

    // Show previously viewed ticks
    viewed.forEach(id => {
        const tick = document.getElementById('tick' + id);
        if (tick) {
            tick.style.display = 'inline';
        }
    });

    // Video ended
    document.querySelectorAll('.watchable-video').forEach(video => {
        video.addEventListener('ended', function () {
            const id = this.dataset.id;
            markAsViewed(id);
        });
    });

    // Audio ended
    document.querySelectorAll('audio').forEach(audio => {
        audio.addEventListener('ended', function () {
            const id = this.dataset.id || this.closest('.modal').querySelector('button[data-id]')?.dataset.id;
            if (id) {
                markAsViewed(id);
            }
        });
    });

    // Image or document modal open
    document.querySelectorAll('.view-btn').forEach(button => {
        button.addEventListener('click', function () {
            const id = this.dataset.id;
            const type = this.textContent.toLowerCase();
            if (type.includes('image') || type.includes('document')) {
                markAsViewed(id);
            }
        });
    });

    function markAsViewed(id) {
        if (!viewed.includes(id)) {
            viewed.push(id);
            localStorage.setItem('viewedExercises', JSON.stringify(viewed));
        }
        const tick = document.getElementById('tick' + id);
        if (tick) {
            tick.style.display = 'inline';
        }
    }
});
</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;
    gap: 4px;
}
.select-resource {
    width: 200px;
    border-radius: 10px;
    height: 35px;
    margin-left: auto;
    margin-right: auto;
}
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>
@endpush