@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>

    <div class="card p-4 shadow " style="width: 100%; background-color: #f8f5f5; border-radius: 8px;">
          <div class="text-left mt-3">
            <a href="/homework" class="btn btn-secondary">← Back to Dashboard</a>
        </div>
        <h3 class="text-center mb-4" style="color: #5c2018;">Things To Do</h3>

 <p style="font-size: 25px; font-weight: bold; text-align: center;color:red;">
Week: {{ $weekName }}
</p>
@if($subHeads->count())
<div class="mb-3 d-flex justify-content-center">
    <div class="text-center">
        <label for="subHeadFilter"
               class="form-label fw-bold mb-2 d-block"
               style="font-size:1rem;">
            Filter by Sub-Head:
        </label>

        <select id="subHeadFilter"
                name="sub_head[]"
                class="form-select select2 mx-auto text-center"
                multiple
                data-placeholder="Select Sub-Head"
                style="width:220px;">
            @foreach ($subHeads as $subHead)
                <option value="{{ $subHead ?? 'General' }}">
                    {{ $subHead ?? 'General' }}
                </option>
            @endforeach
        </select>
    </div>
</div>

@endif


        @if($homeworks->count())
    <div class="table-responsive mt-4">
       <form id="weekForm" action="{{ route('weekwise.saveAll') }}" method="POST">

    @csrf
        <table class="table table-bordered table text-center">
            <thead>
                 <tr>
            <th style="background-color: rgb(224, 219, 233); text-align:left;">Exercise</th>
             <th style="background-color: rgb(224, 219, 233); text-align:left;">Thumbnail</th>
                <th style="background-color: rgb(224, 219, 233);">How Many Can I Do</th>
            <th style="background-color: rgb(224, 219, 233);">Status</th>
            <!-- Weekday headers -->
            <th style="background-color: rgb(224, 219, 233);">Sunday</th>
            <th style="background-color: rgb(224, 219, 233);">Monday</th>
            <th style="background-color: rgb(224, 219, 233);">Tuesday</th>
            <th style="background-color: rgb(224, 219, 233);">Wednesday</th>
            <th style="background-color: rgb(224, 219, 233);">Thursday</th>
            <th style="background-color: rgb(224, 219, 233);">Friday</th>
            <th style="background-color: rgb(224, 219, 233);">Saturday</th>
        
               <th style="background-color: rgb(224, 219, 233);">How Many Did I Do</th>
                <th style="background-color: rgb(224, 219, 233);">Remarks</th>
        </tr>
            </thead>
             <tbody>
                @php
                    $uniqueHomeworks = $homeworks->unique('ex_name');
                @endphp

                @foreach($uniqueHomeworks as $index => $homework)
                    @php
        $detail = $details[$homework->homework_id] ?? null;
    @endphp
                <tr data-sub-head="{{ $homework->sub_head }}">
                    
                    <td style="text-align:left;">{{ $homework->ex_name }}</td>
                      <td>
    @if(!empty($homework->ex_path))
        <img src="{{ asset($homework->thumbnail_path) }}" 
             alt="Thumbnail" 
             style="width:80px; height:auto;">
    @else
        N/A
    @endif
</td>
                   <td>
    <input type="number"
           class="form-control form-control-sm weekwise-input"
           value="{{ $homework->weekwise_count }}"
           data-id="{{ $homework->homework_id }}"   {{-- primary key of home_work table --}}
           min="0">
</td>

                    @php
    $assigned = $homework->weekwise_count ?? 0;

    // Sum achieved counts for this homework across all students or details
    $achieved = $details
        ->where('homework_id', $homework->homework_id)
        ->sum('achieved_count');

    $percent = $assigned > 0 ? ($achieved / $assigned) * 100 : 0;
@endphp
                   <td>
    <div class="progress" style="height: 20px;">
        <div class="progress-bar 
            @if($percent < 50) bg-danger
            @elseif($percent < 80) bg-warning
            @else bg-success
            @endif" 
            role="progressbar" 
            style="width: {{ $percent }}%;" 
            aria-valuenow="{{ $percent }}" 
            aria-valuemin="0" 
            aria-valuemax="100">
            {{ round($percent) }}%
        </div>
    </div>
</td>
                     <input type="hidden" name="row[{{ $index }}][homework_id]" value="{{ $homework->homework_id }}">

        @foreach(['sunday','monday','tuesday','wednesday','thursday','friday','saturday'] as $day)
            <td>
                <input type="number"
                       name="row[{{ $index }}][{{ $day }}]"
                       value="{{ $detail->$day ?? 0 }}"
                       class="form-control text-center week-day">
            </td>
        @endforeach

        <td>
            <input type="number"
                   name="row[{{ $index }}][achieved]"
                   value="{{ $detail->achieved_count ?? 0 }}"
                   class="form-control text-center achieved-count"
                   readonly>
        </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

                        <div class="checkbox-wrapper mt-2">
                            @if($homework->status == 1)
                                <img src="https://img.icons8.com/color/48/000000/checked.png"
                                     id="tick{{ $homework->homework_id }}"
                                     style="width: 20px;" alt="Viewed"/>
                            @else
                                <img src="https://img.icons8.com/color/48/000000/checked.png"
                                     id="tick{{ $homework->homework_id }}"
                                     style="display: none; width: 20px;" alt="Viewed"/>
                            @endif
                        </div>
                    </td>
                </tr>

                {{-- Modal (skip if doc type) --}}
                @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->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->homework_id }}">
                                            <source src="{{ asset($homework->ex_path) }}" type="video/mp4">
                                        </video>
                                        @break
                                    @case(3)
                                        <img src="{{ asset($homework->ex_path) }}"
                                             data-id="{{ $homework->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 class="text-right mt-3">
            <button type="submit" class="btn btn-primary mt-3">Save All</button>
        </div>
      
    </form>
</div>
@else
    <p class="text-center text-muted">No {{ $title }} 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('input', function (e) {
    if (e.target.classList.contains('weekwise-input')) {
        const id    = e.target.dataset.id;
        const value = e.target.value;

        fetch(`/homework/${id}/weekwise-count`, {
            method: 'PATCH',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ weekwise_count: value })
        })
        .then(res => res.json())
        .then(data => console.log(data))
        .catch(err => console.error(err));
    }
});
</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>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Delegate to the table for efficiency
    document.querySelector('table').addEventListener('input', function (e) {
        if (!e.target.classList.contains('week-day')) return;

        // Find the closest row to the changed input
        const row = e.target.closest('tr');

        // All day inputs in THIS row only
        const dayInputs = row.querySelectorAll('.week-day');

        // The achieved_count field in THIS row
        const achievedField = row.querySelector('.achieved-count');

        // Sum values
        let total = 0;
        dayInputs.forEach(input => {
            total += parseFloat(input.value) || 0;
        });

        achievedField.value = total;
    });

    // Initial calculation for all rows (optional)
    document.querySelectorAll('tbody tr').forEach(row => {
        let total = 0;
        row.querySelectorAll('.week-day').forEach(input => {
            total += parseFloat(input.value) || 0;
        });
        row.querySelector('.achieved-count').value = total;
    });
});
</script>
<script>
document.addEventListener('input', function (e) {
    if (!e.target.classList.contains('week-day')) return;

    const row = e.target.closest('tr');
    let total = 0;
    row.querySelectorAll('.week-day').forEach(inp => {
        total += parseFloat(inp.value) || 0;
    });
    row.querySelector('.achieved-count').value = total;
});

</script><script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('weekForm');

    form.addEventListener('submit', function (e) {
        e.preventDefault(); // prevent normal page reload

        fetch('{{ route('weekwise.saveAll') }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: new FormData(form)
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success') {
                Swal.fire({
                    title: 'Success!',
                    text: 'All rows saved successfully.',
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then(() => {
                    location.reload(); // refresh the page after closing the alert
                });
            } else {
                Swal.fire('Error!', 'Something went wrong.', 'error');
            }
            console.log(data);
        })
        .catch(err => {
            console.error(err);
            Swal.fire('Error!', 'Something went wrong.', 'error');
        });
    });
});
</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>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const filter = document.getElementById('subHeadFilter');
    const rows = document.querySelectorAll('tbody tr');

    filter.addEventListener('change', function() {
        const selected = Array.from(this.selectedOptions).map(opt => opt.value);

        rows.forEach(row => {
            const subHead = row.dataset.subHead; // we'll add this next
            if(selected.length === 0 || selected.includes(subHead)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    });
});
</script>


<script>
$(function () {
    $('#subHeadFilter').select2({
        placeholder: 'Select Sub-Head',
        width: 'resolve',
        closeOnSelect: false   // allows selecting multiple without closing
        // remove this line if you prefer it to close after each click
    });
});



</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>

<script>
$(function () {
    $('.select1').select2({
        placeholder: 'Select Resource Type',
        width: '100%'
    }).on('change', function () {
        this.form.submit(); // still submits automatically
    });
});
</script>

<script>
document.getElementById('assignForm').addEventListener('submit', function (e) {
    e.preventDefault(); // stop normal submit

    let formData = new FormData(this);

    fetch(this.action, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: formData
    })
    .then(resp => resp.json())
    .then(data => {
        if (data.status === 'success') {
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: data.message,
                confirmButtonText: 'OK'
            }).then(() => {
                // Optional: refresh the current page or clear form
                window.location.reload();
            });
        } else if (data.status === 'error') {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: data.message || 'Something went wrong.'
            });
        }
    })
    .catch(err => {
        console.error(err);
        Swal.fire('Error', 'Server error occurred', 'error');
    });
});
</script>