@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="card-header">
        <h4 class="text-center">Select Uploaded Files</h4>

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

                <div class="row mb-3 justify-content-center">
                    <label class="col-sm-3 col-form-label text-end">Select Resource Type:</label>
                    <div class="col-sm-4">
                        <select class="form-select select1" name="resource_type[]" multiple onchange="this.form.submit()">
                            <option value="1" {{ in_array('1', (array)request('resource_type')) ? 'selected' : '' }}>Audio</option>
                            <option value="2" {{ in_array('2', (array)request('resource_type')) ? 'selected' : '' }}>Video</option>
                            <option value="3" {{ in_array('3', (array)request('resource_type')) ? 'selected' : '' }}>Image</option>
                            <option value="4" {{ in_array('4', (array)request('resource_type')) ? 'selected' : '' }}>Document</option>
                        </select>
                    </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>
    </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>

                  <div class="card">
    <div class="card-header">
        <h5 class="text-center mb-0">Select Students</h5>
    </div>
    <div class="card-body">
        <input type="hidden" name="group_id" value="{{ $groupId }}">
        <select id="studentSelect" class="form-select select2" name="student_id[]" multiple="multiple" data-placeholder="Select Students" disabled>
            @foreach($allStudents as $student)
                <option value="{{ $student->id }}">{{ $student->firstname }}</option>
            @endforeach
        </select>
    </div>
</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>
           <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>

            <!-- Assign Button -->
            <div class="text-center">
                <button id="assignBtn" type="submit" class="btn btn-primary ">Assign Selected Exercises</button>
            </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.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') {

            // 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>
    @include('layouts.footers.auth.footer')

    @endsection