@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' => 'Resources Assign'])
            <!-- <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>
<!-- jQuery (MUST be before Select2 JS) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Select2 CSS & JS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<div class="card my-4" style="margin: 0 5%;">
      <div class="text-left mt-3">
                        <a href="/default_home" class="btn btn-secondary mx-3">← Back to Dashboard</a>
                    </div>
    <div class="card-header">
        <h4 class="text-center">Exercise Library</h4>

    </div>
    
    <div class="card-body">
        <div class="container">
       <form method="GET" action="{{ route('exercise_students', ['id' => $groupId ?? 0]) }}">
    <input type="hidden" name="group_id" value="{{ $groupId }}">

    <div class="row mb-3 justify-content-center align-items-center">
        <label class="col-sm-3 col-form-label text-end">Select Resource Type:</label>
        <div class="col-sm-4 d-flex gap-2 flex-wrap">
            @php
                $resources = [
                    1 => 'Audio',
                    2 => 'Video',
                    3 => 'Image',
                    4 => 'Document',
                ];
                $selectedResources = (array) request('resource_type', []);
            @endphp

            @foreach($resources as $key => $label)
                <button type="submit"
                        name="resource_type[]"
                        value="{{ $key }}"
                        class="btn btn-outline-primary {{ in_array((string)$key, $selectedResources) ? 'active' : '' }}">
                    {{ $label }}
                </button>
            @endforeach
        </div>
    </div>
</form>

            <!-- {{-- <div class="row justify-content-center">
                <label class="col-sm-3 col-form-label text-end">Select Students:</label>
                <div class="col-sm-4">
                    <select class="form-select select2" name="student_id[]" multiple>
                        @foreach ($students as $student)
                            <option value="{{ $student->id }}"
                                @if(in_array($student->id, old('student_id', [])))
                                    selected
                                @endif>
                                {{ $student->firstname }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div> --}} -->
            <div class="col-sm-4">
    {{-- Hidden field for the authenticated user --}}
    <input type="hidden" name="student_id[]" value="{{ auth()->user()->id }}">
</div>

        </div>
    </div>

</div>


@if(isset($exercises) && count($exercises) > 0 && request()->has('resource_type'))
<div class="card my-4" style="margin: 0 5%;">
    <div class="card-body">
        <form method="POST" id="assignForm" action="{{ route('exerciseassignss') }}">

            @csrf

            <!-- Students Checkboxes -->
            <div class="row justify-content-center mb-4">
                {{-- <label class="col-sm-3 col-form-label text-end">Select Students:</label> --}}
                <div class="col-sm-6">
                       

                     <div class="card">
    <div class="card-header">
        <h5 class="text-center mb-0">Select Week</h5>
    </div>
    <div class="card-body">
        <input type="hidden" name="group_id" value="{{ $groupId }}">
        <select id="weekSelect"                      {{-- ← id added --}}
                class="form-select select2"
                name="session_id[]" multiple="multiple"
                data-placeholder="Select Week">
            @foreach($sessionOptions as $opt)
                <option value="{{ $opt['id'] }}">{{ $opt['label'] }}</option>
            @endforeach
        </select>
    </div>
    <div class="text-center mt-3">
        <button type="button" id="loadAssignedBtn" class="btn btn-secondary">
            Load Assigned Exercises
        </button>
    </div>
    <div class="text-center mt-3">
    <button type="button" id="DocsloadAssignedBtn" class="btn btn-secondary"
            data-group="{{ $groupId }}">
        Load exercises from Docs
    </button>
</div>
</div>

                   <div class="col-sm-4">
    {{-- Hidden field for the authenticated user --}}
    <input type="hidden" name="student_id[]" value="{{ auth()->user()->id }}">
</div>
                </div>
            {{-- </div> --}}
      <div class="modal fade" id="warningModal" tabindex="-1" aria-labelledby="warningModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-warning">
        <h5 class="modal-title" id="warningModalLabel">Action Required</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Please click "Load Assigned Exercises" button before selecting students.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

            <!-- Exercises Table -->
            {{-- <div class="card mb-4"> --}}

                <div class="card-body">
               <div class="px-4" id="alert">
                        @include('components.alert')
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered table-hover text-center">
                            <thead class="table-dark" id="exerciseList">
                                <tr>
                                    <th>#</th>
                                    <th>File Name</th>
                                    <th>Thumbnail</th>
                                    <th>Resource Type</th>
                                    <th>Weekwise Count</th>
                                     <th>Sub Head</th>
                                    <th>Select</th>
                                </tr>
                            </thead>
                            <!-- <tbody>
                                @foreach($exercises as $index => $exercise)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $exercise->ex_name ?? 'N/A' }}</td>
                                        <td>
    @if(!empty($exercise->thumbnail_path))
        <img src="{{ asset($exercise->thumbnail_path) }}" 
             alt="Thumbnail" 
             style="width:80px; height:auto;">
    @else
        N/A
    @endif
</td>
                                        <td>
                                            @php
                                                $types = ['1' => 'Audio', '2' => 'Video', '3' => 'Image', '4' => 'Document'];
                                            @endphp
                                            {{ $types[$exercise->ex_path_id] ?? 'Unknown' }}
                                        </td>
                                        <td>
                    <input type="number"
                           name="weekwise_count[{{ $exercise->id }}]"
                           class="form-control text-center"
                           value="0"          {{-- default value --}}
                           min="0"            {{-- no negatives --}}
                           step="1">          {{-- increment by 1 --}}
                </td>
                <td>
    <select name="sub_head[{{ $exercise->id }}]"
            class="form-select text-center">
               <option value="">general</option>
        <option value="Relaxation">Relaxation</option>
        <option value="Seated">Seated</option>
        <option value="Standing">Standing</option>
        <option value="4 Point Kneeling">4 Point Kneeling</option>
        <option value="Prone">Prone</option>
        <option value="Side Lying">Side Lying</option>
    </select>
</td>

                                        <td>
                                            <input type="checkbox" name="selected_exercises[]" value="{{ $exercise->id }}" />
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody> -->
                            <tbody id="exerciseListBody">
    @foreach($exercises as $index => $exercise)
        <tr>
            <td>{{ $index + 1 }}</td>
            <td>{{ $exercise->ex_name ?? 'N/A' }}</td>
            <td>
                @if(!empty($exercise->thumbnail_path))
                    <img src="{{ asset($exercise->thumbnail_path) }}" 
                         alt="Thumbnail" 
                         style="width:80px; height:auto;">
                @else
                    N/A
                @endif
            </td>
            <td>
                @php
                    $types = ['1' => 'Audio', '2' => 'Video', '3' => 'Image', '4' => 'Document'];
                @endphp
                {{ $types[$exercise->ex_path_id] ?? 'Unknown' }}
            </td>
            <td>
                <input type="number" name="weekwise_count[{{ $exercise->id }}]"
                       class="form-control text-center" value="0" min="0" step="1">
            </td>
            <td>
                <select name="sub_head[{{ $exercise->id }}]" class="form-select text-center">
                    <option value="">General</option>
                    <option value="Relaxation">Relaxation</option>
                    <option value="Seated">Seated</option>
                    <option value="Standing">Standing</option>
                    <option value="4 Point Kneeling">4 Point Kneeling</option>
                    <option value="Prone">Prone</option>
                    <option value="Side Lying">Side Lying</option>
                     <option value="Side Lying">Knee Rolls</option>
                </select>
            </td>
            <td>
                <input type="checkbox" name="selected_exercises[]" value="{{ $exercise->id }}" />
            </td>
        </tr>
    @endforeach
</tbody>

                        </table>
                    </div>
                </div>
            </div>

            <div class="text-center">
                <button id="assignBtn" type="submit" class="btn btn-primary ">Assign Selected Exercises</button>
                   <a href="{{ url()->current() . '?group_id=' . request('group_id') }}" 
       class="btn btn-secondary fw-bold">
        Back
    </a>
 
</div>

            </div>
        </form>
    </div>
</div>
@endif


<script>
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: "Select students"
        });
    });
    $(document).ready(function() {
        $('.select1').select2({
            placeholder: "Select resources"
        });
    });
    
</script>

<script>
document.getElementById("searchInput").addEventListener("keyup", function() {
    let value = this.value.toLowerCase();
    let rows = document.querySelectorAll("#exerciseTable tbody tr");

    rows.forEach(row => {
        let text = row.textContent.toLowerCase();
        row.style.display = text.includes(value) ? "" : "none";
    });
});

</script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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>
<!-- <script>
document.getElementById('loadAssignedBtn').addEventListener('click', function () {
    const weekIds = $('#weekSelect').val();     
    const groupId = '{{ $groupId }}';

    if (!weekIds || weekIds.length === 0) {
        Swal.fire('Select Week', 'Please choose at least one week first.', 'warning');
        return;
    }

    fetch('{{ route('exercises.assigned') }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ group_id: groupId, week_ids: weekIds })
    })
    .then(resp => resp.json())
    .then(data => {
        if (data.status === 'success') {
          
            document.querySelectorAll('input[name="selected_exercises[]"]').forEach(cb => cb.checked = false);

           
            data.exercise_ids.forEach(id => {
                const checkbox = document.querySelector(`input[name="selected_exercises[]"][value="${id}"]`);
                if (checkbox) checkbox.checked = true;
            });

            Swal.fire('Loaded', 'Assigned exercises have been marked.', 'success');
        } else {
            Swal.fire('Error', 'Unable to load assigned exercises.', 'error');
        }
    })
    .catch(err => {
        console.error(err);
        Swal.fire('Error', 'Server error occurred.', 'error');
    });
});
</script> -->
<script>
    $(document).ready(function() {
        // Initialize select2
        $('#studentSelect').select2();

        // Track if button is clicked
        let loadClicked = false;

        $('#loadAssignedBtn').on('click', function() {
            loadClicked = true;
            $('#studentSelect').prop('disabled', false);
            $('#studentSelect').select2(); // reinitialize
            $('#studentSelect').select2('open'); // optional: auto-open dropdown
        });

        // Prevent clicking select before button is clicked
        $('#studentSelect').on('select2:opening', function(e) {
            if (!loadClicked) {
                e.preventDefault(); // prevent opening
                var myModal = new bootstrap.Modal(document.getElementById('warningModal'));
                myModal.show();
            }
        });
    });
</script>
<script>
document.getElementById('loadAssignedBtn').addEventListener('click', function () {
    const weekIds = $('#weekSelect').val();     
    const groupId = '{{ $groupId }}';

    if (!weekIds || weekIds.length === 0) {
        Swal.fire('Select Week', 'Please choose at least one week first.', 'warning');
        return;
    }

    fetch('{{ route('exercises.assigning') }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ group_id: groupId, week_ids: weekIds })
    })
    .then(resp => resp.json())
    .then(data => {
        if (data.status === 'success') {

            // Reset all checkboxes
            document.querySelectorAll('input[name="selected_exercises[]"]').forEach(cb => cb.checked = false);

            // Reset weekwise_count and sub_head
            document.querySelectorAll('input[name^="weekwise_count"]').forEach(input => input.value = 0);
            document.querySelectorAll('select[name^="sub_head"]').forEach(sel => sel.value = '');

            // Mark assigned exercises & fill values
            data.exercises.forEach(item => {
                const checkbox = document.querySelector(`input[name="selected_exercises[]"][value="${item.exercise_id}"]`);
                if (checkbox) {
                    checkbox.checked = true;

                    // Set weekwise_count
                    const countInput = document.querySelector(`input[name="weekwise_count[${item.exercise_id}]"]`);
                    if (countInput) countInput.value = item.weekwise_count ?? 0;

                    // Set sub_head
                    const subHeadSelect = document.querySelector(`select[name="sub_head[${item.exercise_id}]"]`);
                    if (subHeadSelect) subHeadSelect.value = item.sub_head ?? '';
                }
            });

            Swal.fire('Loaded', 'Assigned exercises have been marked.', 'success');
        } else {
            Swal.fire('Error', 'Unable to load assigned exercises.', 'error');
        }
    })
    .catch(err => {
        console.error(err);
        Swal.fire('Error', 'Server error occurred.', 'error');
    });
});
</script>
<script>
document.getElementById('DocsloadAssignedBtn').addEventListener('click', function () {
    const groupId = "{{ $groupId }}";
    const weekIds = $('#weekSelect').val();     

    if (!weekIds || weekIds.length === 0) {
        Swal.fire('Select Week', 'Please choose at least one week first.', 'warning');
        return;
    }

    fetch(`/load-week-exercises`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ group_id: groupId, week_ids: weekIds })
    })
    .then(res => res.json())
    .then(data => {
        if (data.error) {
            Swal.fire('Error', data.error, 'error');
            return;
        }

        const tbody = document.getElementById('exerciseListBody');
        tbody.innerHTML = ''; 

        // 🧩 Create a map for DB exercises to quickly lookup by exercise_id
        const exerciseMap = {};
        if (Array.isArray(data.exercises)) {
            data.exercises.forEach(ex => {
                exerciseMap[ex.exercise_id] = ex;
            });
        }

        data.videos.forEach((video, index) => {
            const match = exerciseMap[video.id] || {}; // matching record if assigned before

            const subHead = match.sub_head || video.sub_head || 'General';
            const weekwiseCount = match.weekwise_count || 0;

            const row = `
                <tr>
                    <td>${index + 1}</td>
                    <td>${video.ex_name}</td>
                    <td>
                        ${video.thumbnail_path 
                            ? `<img src="/${video.thumbnail_path}" style="width:80px; height:auto;">`
                            : 'N/A'}
                    </td>
                    <td>Video</td>
                    <td>
                        <input type="number" 
                               name="weekwise_count[${video.id}]"
                               class="form-control text-center"
                               value="${weekwiseCount}" 
                               min="0" step="1">
                    </td>
                    <td>
                        <select name="sub_head[${video.id}]" class="form-select text-center">
                            <option value="General" ${subHead === 'General' ? 'selected' : ''}>General</option>
                            <option value="Relaxation" ${subHead === 'Relaxation' ? 'selected' : ''}>Relaxation</option>
                            <option value="Seated" ${subHead === 'Seated' ? 'selected' : ''}>Seated</option>
                            <option value="Standing" ${subHead === 'Standing' ? 'selected' : ''}>Standing</option>
                            <option value="4 Point Kneeling" ${subHead === '4 Point Kneeling' ? 'selected' : ''}>4 Point Kneeling</option>
                            <option value="Prone" ${subHead === 'Prone' ? 'selected' : ''}>Prone</option>
                            <option value="Side Lying" ${subHead === 'Side Lying' ? 'selected' : ''}>Side Lying</option>
                        </select>
                    </td>
                    <td>
                        <input type="checkbox" 
                               name="selected_exercises[]" 
                               value="${video.id}" 
                               ${match.exercise_id ? 'checked' : ''} />
                    </td>
                </tr>
            `;
            tbody.insertAdjacentHTML('beforeend', row);
        });

        Swal.fire('Loaded', 'Exercises loaded from DOCX successfully.', 'success');
    })
    .catch(err => {
        console.error(err);
        Swal.fire('Error', 'Something went wrong while loading exercises.', 'error');
    });
});
</script>


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

    @endsection