@extends('layouts.master')

@section('content')
<div class="min-h-screen bg-gray-50 p-6 sm:p-8 md:p-10">
  <!-- Top Section -->
  <div class="flex justify-between items-center mb-6">
    <div class="space-x-6 sm:space-x-8 max-md:flex max-md:flex-wrap max-md:justify-between max-md:gap-4">
      <!-- TUTOR TYPE Dropdown -->
      <select id="tutorType" class="bg-gray-200 py-2 px-4 rounded-full text-sm cursor-pointer transition duration-300 ease-in-out transform hover:scale-105 focus:ring-2 focus:ring-green-500 focus:outline-none max-md:px-8">
        <option value="" disabled selected class="text-gray-400">SELECT TUTOR TYPE</option>
        @foreach ($tutor as $item)
        <option value="{{$item->id}}">{{$item->name}}</option>
        @endforeach
      </select>

      <!-- LEVEL Dropdown -->
      <select id="level" class="bg-gray-200 py-2 px-8 rounded-full text-sm cursor-pointer transition duration-300 ease-in-out transform hover:scale-105 focus:ring-2 focus:ring-green-500 focus:outline-none max-md:px-8">
        <option value="" disabled selected class="text-gray-400">SELECT LEVEL</option>
        @foreach ($grade as $item)
        <option value="{{$item->id}}">{{$item->name}}</option>
        @endforeach
      </select>

      <!-- GENDER Dropdown -->
      <select id="gender" class="bg-gray-200 py-2 px-8 rounded-full text-sm cursor-pointer transition duration-300 ease-in-out transform hover:scale-105 focus:ring-2 focus:ring-green-500 focus:outline-none max-md:px-8">
        <option value="" disabled selected class="text-gray-400">SELECT GENDER</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option value="all">No preference</option>
      </select>
      <button id="applyFilters" class="bg-green-500 text-white py-2 px-6 rounded-full text-sm font-semibold transition duration-300 ease-in-out hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">APPLY FILTERS</button>
      <button id="reset" class="bg-[#0875F7] text-white py-2 px-6 rounded-full text-sm font-semibold transition duration-300 ease-in-out hover:bg-bg-[#0875F7] focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">RESET FILTERS</button>
    </div>
  </div>

  <!-- Info Section -->
  <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-800 p-4 rounded-md mb-6 relative">
  <p class="text-sm sm:text-base">You can check 1 or more boxes to multi-apply for more than 1 assignment!</p>
  <p class="text-sm sm:text-base absolute right-5 bottom-4" id="assignmentCount">0 Assignments</p>
</div>

  <!-- Search Section -->
  <div class="flex items-center mb-8">
    <input
      type="text"
      id="searchInput"
      placeholder="Search by Assignment Code or Subject"
      class="border border-gray-300 rounded-l-md py-2 px-4 w-full text-sm sm:text-base placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-green-500 transition duration-300 ease-in-out transform hover:scale-105" />
    <button id="searchButton" class="bg-blue-500 text-white py-2 px-4 rounded-r-md text-sm sm:text-base transition duration-300 ease-in-out hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Search</button>
  </div>

  <!-- Assignment List Section -->
  <div id="assignmentList" class="overflow-y-auto h-[400px] bg-white rounded-md shadow-lg">
    <ul class="divide-y divide-gray-200">
      <!-- Placeholder for dynamically loaded assignments -->
      <li class="p-4 text-center text-gray-500">No assignments found. Please apply filters.</li>
    </ul>
  </div>

  <!-- Footer Section -->
  <div class="mt-6 flex items-center justify-between">
    <p id="selectedCount" class="text-sm text-gray-600">0 Assignments Selected</p>
    <button id="applySelected" class="bg-orange-500 text-white py-2 px-6 rounded-full text-sm font-semibold disabled:opacity-50" disabled>Apply</button>
  </div>
</div>

<!-- Inline Script for AJAX and Dynamic Loading -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const tutorType = document.getElementById('tutorType');
    const level = document.getElementById('level');
    const gender = document.getElementById('gender');
    const applyFilters = document.getElementById('applyFilters');
    const searchInput = document.getElementById('searchInput');
    const searchButton = document.getElementById('searchButton');
    const assignmentList = document.getElementById('assignmentList');
    const selectedCount = document.getElementById('selectedCount');
    const applySelected = document.getElementById('applySelected');
    const reset = document.getElementById('reset');
    var assignment_code = [];
    // Fetch assignments dynamically
    const fetchAssignments = (filters = {}) => {
      fetch('/api/assignments', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}', // Laravel CSRF token
          },
          body: JSON.stringify(filters),
        })
        .then(response => response.json())
        .then(data => {
          
          // Update assignment list
          if (data.length > 0) {
            document.getElementById('assignmentCount').innerHTML =data.length + " Assignments ";
            assignmentList.innerHTML = data.map(assignment => `
                    <li class="p-4 flex items-center justify-between hover:bg-gray-50 transition duration-300 ease-in-out">
                        <div>
                            <p class="text-sm font-semibold text-gray-800">${assignment.assignment_code}</p>
                            <p class="text-xs text-gray-500">${assignment.grade.name} - ${assignment.student_school} - ${assignment.subject_names}</p>
                        </div>
                        <input type="checkbox" class="h-5 w-5 text-blue-600 rounded transition duration-200 ease-in-out transform hover:scale-110" onclick="updateSelectedCount('${assignment.assignment_code}')" />
                    </li>
                `).join('');
          } else {
            document.getElementById('assignmentCount').innerHTML =0 + " Assignments ";
            assignmentList.innerHTML = '<li class="p-4 text-center text-gray-500">No assignments found.</li>';
          }
        })
        .catch(error => console.error('Error fetching assignments:', error));
    };

    // Handle filter application
    fetchAssignments()
    applyFilters.addEventListener('click', () => {
      const filters = {
        tutorType: tutorType.value,
        level: level.value,
        gender: gender.value,
        search: searchInput.value,
      };
      fetchAssignments(filters);
    });

    // Handle search functionality
    searchButton.addEventListener('click', () => {
      const filters = {
        tutorType: tutorType.value,
        level: level.value,
        gender: gender.value,
        search: searchInput.value,
      };
      fetchAssignments(filters);
    });
    applySelected.addEventListener('click', () => {
      const idsParam = assignment_code.join(',');

      // Construct the URL
      const baseUrl = "{{ url('apply') }}/" + idsParam;

      // Redirect to the constructed URL
      window.location.href = baseUrl;
    });

    // Update selected count
    window.updateSelectedCount = (code) => {
      assignment_code.push(code);


      const selected = document.querySelectorAll('#assignmentList input[type="checkbox"]:checked').length;
      selectedCount.textContent = `${selected} Assignments Selected`;
      applySelected.disabled = selected === 0;
    };
    reset.addEventListener('click', () => {
      const tutorType = document.getElementById('tutorType');
      const level = document.getElementById('level');
      const gender = document.getElementById('gender');
      tutorType.value = ''
      level.value = ''
      gender.value = ''
      fetchAssignments();
    });
  });
</script>
@endsection