<!DOCTYPE html>
<html lang="ar">

<head>
  <meta charset="UTF-8">
  <title>02 Mai zarzis</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet" />
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Inter', sans-serif;
    }
 
  </style>
</head>

<body class="bg-gray-100 p-8">
  

<nav class=" bg-white border-gray-200 dark:bg-gray-900">
  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
  <a class="flex items-center space-x-3 rtl:space-x-reverse">
      
      <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">02 Mai zarzis</span>
  </a>
  <div class="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
  <button
  type="button"
  class="flex items-center justify-center text-xl rounded-full p-4 md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 bg-gray-100 dark:bg-gray-800"
  id="user-menu-button"
  aria-expanded="false"
  data-dropdown-toggle="user-dropdown"
  data-dropdown-placement="bottom"
>
  <i class="fa-solid fa-user text-l"></i>
</button>

      <!-- Dropdown menu -->
      <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-dropdown">
        <div class="px-4 py-3">
          <span class="block text-sm text-gray-900 dark:text-white"><?php echo e(Auth::user()->name); ?></span>
          <span class="block text-sm  text-gray-500 truncate dark:text-gray-400"><?php echo e(Auth::user()->email); ?></span>
        </div>
        <ul class="py-2" aria-labelledby="user-menu-button">
          <li>
            <a href="profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Profil</a>
          </li>
          <li>
          <form method="POST" action="<?php echo e(route('logout')); ?>" class="inline-block">
    <?php echo csrf_field(); ?>
    <a href="<?php echo e(route('logout')); ?>" 
       class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
       onclick="event.preventDefault(); this.closest('form').submit();">
        <?php echo e(__('Se déconnecter')); ?>

    </a>
</form>

          </li>
        </ul>
      </div>
      <button data-collapse-toggle="navbar-user" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-user" aria-expanded="false">
        <span class="sr-only">Open main menu</span>
        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
        </svg>
    </button>
  </div>
   <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
    <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
      <!-- <li>
        <a href="#" class="block py-2 px-3 text-white text-gray-900 rounded md:bg-transparent md:text-gray-900 md:p-0 md:dark:text-gray-900" aria-current="page">Parents</a>
      </li> -->
     <li>
        <a href="https://deuxmaizarzis.com/my-app/public/annees" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Année Scolaire</a>
      </li>
      
      <li>
        <a href="https://deuxmaizarzis.com/my-app/public/profs" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Enseignants</a>
      </li>
      <li>
        <a href="https://deuxmaizarzis.com/my-app/public/eleves" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Eleve</a>
      </li>
      <li>
        <a href="https://deuxmaizarzis.com/my-app/public/classes" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Classe</a>
      </li>
      <li>
        <a href="https://deuxmaizarzis.com/my-app/public/matieres" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Matière</a>
      </li>
      <!-- <li>
        <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Bulletin</a>
      </li> -->
    </ul>
  </div>
  </div>
</nav>

<div class="py-4"></div>

<form class="max-w-[800px] mx-auto">
        <div class="max-w-[800px] h-[40px] flex items-center justify-center bg-[#113C6B] rounded-full px-4">
        <span class="text-white text-sm"> Le classe <?php echo e($classe->name); ?> <?php echo e($classe->year); ?></span>
        </div>
    </form>
<!-- <form class="max-w-lg mx-auto">
    <div class="flex">
        <label for="search-dropdown" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Your Email</label>
        <button id="dropdown-button" data-dropdown-toggle="dropdown" class="flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600" type="button">All categories <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
  </svg></button>
        <div id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
            <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdown-button">
            <li>
                <button type="button" class="inline-flex w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Mockups</button>
            </li>
            <li>
                <button type="button" class="inline-flex w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Templates</button>
            </li>
            <li>
                <button type="button" class="inline-flex w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Design</button>
            </li>
            <li>
                <button type="button" class="inline-flex w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Logos</button>
            </li>
            </ul>
        </div>
        <div class="relative w-full">
            <input type="search" id="search-dropdown" class="block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-lg border-s-gray-50 border-s-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-s-gray-700  dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" placeholder="Search by name or year" required />
            <button type="submit" class="absolute top-0 end-0 p-2.5 text-sm font-medium h-full text-white bg-blue-700 rounded-e-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
                </svg>
                <span class="sr-only">Search</span>
            </button>
        </div>
    </div>
</form> -->
<div class="py-4"></div>


<div class="relative overflow-x-auto shadow-md sm:rounded-lg">

    <table class="w-full  text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400" id="data-table">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="p-4">
                    <div class="flex items-center">
                       id
                    </div>
                </th>
                <th scope="col" class="px-6 py-3">
                    Nom & Pénom
                </th>
                <!--<th scope="col" class="px-6 py-3">-->
                <!--    Moy 1-->
                <!--</th>-->
                <!-- <th scope="col" class="px-6 py-3">-->
                <!--    Moy 2-->
                <!--</th>-->
                <!-- <th scope="col" class="px-6 py-3">-->
                <!--    Moy 3-->
                <!--</th>-->
                <!--<th scope="col" class="px-6 py-3">-->
                <!--    Gen-->
                <!--</th>-->
                <th scope="col" class="px-6 py-3">
                    Date de Naissance
                </th>
                <th scope="col" class="px-6 py-3">
                    Parent
                </th>
                <th scope="col" class="px-6 py-3">
                    Téléphone
                </th>
                <th scope="col" class="px-6 py-3">
                    Bulletin 
                </th>
                <th scope="col" class="px-6 py-3">
                    Dispenser 
                </th>
                <th scope="col" class="px-6 py-3">
                    Dossier Scolaire
                </th>
                <th scope="col" class="px-6 py-3">
                    Action
                </th>
            </tr>
        </thead>
        <tbody>
        <?php if($classe->eleves->count() > 0): ?>
        
            <?php $__currentLoopData = $classe->eleves; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $eleve): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                    <td class="w-4 p-4">
                        <div class="flex items-center">
                           <?php echo e($eleve->id); ?>

                        </div>
                    </td>
                    <th scope="row" class="flex items-center px-6 py-4 text-gray-900 whitespace-nowrap dark:text-white">
                       
                        <div class="flex items-center">
                            <div><?php echo e($eleve->first_name); ?> <?php echo e($eleve->last_name); ?></div>
                            
                        </div>  
                    </th>
                    
<!--                    <?php $__currentLoopData = $eleve->scores; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $score): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>-->
<!--    <td class="w-4 p-4">-->
<!--        <div class="flex items-center">-->
<!--             <?php echo e(number_format($score->average, 2)); ?>-->
<!--        </div>-->
<!--    </td>-->
<!--<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>-->

<!--                 <td class="px-6 py-4">-->
<!--                <?php echo e($eleve->genmoyenne?->moyenne); ?>-->

<!--                    </td>-->
                     
                    <td class="px-6 py-4">
                    <?php echo e($eleve->date); ?>

                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                                     <?php echo e($eleve->email); ?>


                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                                     <?php echo e($eleve->phone); ?>


                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                        <div class="flex gap-2">
                            <a href="<?php echo e(route('classes.bulletin', ['ids' => 1, 'ide' => $eleve->id, 'idc' => $classe->id])); ?>" class="bg-green-100 text-gray-800 text-sm font-medium py-1 px-3 rounded">1</a>
                            <a href="<?php echo e(route('classes.bulletin', ['ids' => 2, 'ide' => $eleve->id, 'idc' => $classe->id])); ?>" class="bg-green-100 text-gray-800 text-sm font-medium py-1 px-3 rounded">2</a>
                            <a href="<?php echo e(route('classes.bulletin', ['ids' => 3, 'ide' => $eleve->id, 'idc' => $classe->id])); ?>" class="bg-green-100 text-gray-800 text-sm font-medium py-1 px-3 rounded">3</a>
                        </div>

                        </div>
                    </td>
<td class="px-6 py-4">
    <div class="flex items-center">
        <a href="#" 
           class="edit-dispenser bg-green-100 text-gray-800 text-sm font-medium py-1 px-3 rounded"
           data-id="<?php echo e($eleve->id); ?>"
           data-classeid="<?php echo e($classe->id); ?>"
           data-first-name="<?php echo e($eleve->first_name); ?>" 
           data-last-name="<?php echo e($eleve->last_name); ?>" 
           data-semestre1="<?php echo e($eleve->semestre1 ? 'true' : 'false'); ?>"
           data-semestre2="<?php echo e($eleve->semestre2 ? 'true' : 'false'); ?>"
           data-semestre3="<?php echo e($eleve->semestre3 ? 'true' : 'false'); ?>">
           
           Dispense
        </a>
    </div>
</td>


                    <td class="px-6 py-4">
                        <div class="flex items-center">
                           <a href="<?php echo e(route('classes.dossier', ['ids' => 1, 'ide' => $eleve->id, 'idc' => $classe->id])); ?>" class="bg-green-100 text-gray-800 text-sm font-medium py-1 px-3 rounded">Dossier Scolaire</a>
                             

                        </div>
                    </td>
                    <td class="px-6 py-4">
                      <div class="flex gap-4">
                      <a href="crud-modal-update" class="edit-matiere font-medium text-blue-600 dark:text-blue-500 hover:underline" 
   data-id="<?php echo e($eleve->id); ?>" 
   data-first-name="<?php echo e($eleve->first_name); ?>" 
   data-last-name="<?php echo e($eleve->last_name); ?>" 
   data-email="<?php echo e($eleve->email); ?>" 
 
   data-date="<?php echo e($eleve->date); ?>" 
   data-phone="<?php echo e($eleve->phone); ?>"
   data-code="<?php echo e($eleve->code); ?>">
    <i class="fa-regular fa-pen-to-square"></i>
</a>


                          <form action="<?php echo e(route('eleves.destroy', $eleve->id)); ?>" method="POST" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette eleve ?');">
                              <?php echo csrf_field(); ?>
                              <?php echo method_field('DELETE'); ?>
                              <button type="submit" class="btn btn-danger text-red-600"><i class="fa-regular fa-trash-can"></i></button>
                          </form>
                      </div>
                    </td>
                </tr>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        
        <?php else: ?>
            <p>Aucun élève dans cette classe.</p>
        <?php endif; ?>


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




<div id="crud-modal-dispenser" tabindex="-1" aria-hidden="true" 
     class="hidden fixed top-0 left-0 w-full h-full flex justify-center items-center bg-gray-900 bg-opacity-50 z-50">
    <div class="relative w-full max-w-md bg-white rounded-lg shadow-lg dark:bg-gray-700">
        <!-- Modal Header -->
        <div class="flex items-center justify-between p-4 border-b dark:border-gray-600">
<h3 id="modal-student-name" class="text-lg font-semibold text-gray-900 dark:text-white">
    Dispense <span id="student-first-name"></span> <span id="student-last-name"></span>
</h3>

            <button type="button" class="text-gray-400 hover:text-gray-900 dark:hover:text-white" id="close-modal">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <!-- Modal Body -->
        <form id="form-dispenser" method="POST" class="p-5">
            <?php echo csrf_field(); ?>
            <?php echo method_field('PUT'); ?>
            <div class="grid gap-4 mb-4">
                <!-- Trimestre 1 -->
                <div class="flex items-center gap-4">
                    <input type="text" value="Trimestre 1" readonly 
                           class="flex-1 p-2.5 border rounded-lg bg-gray-100 dark:bg-gray-600 dark:text-white">
                    <input type="checkbox" name="semestre1" id="semestre1-checkbox" class="w-5 h-5">
                </div>

                <!-- Trimestre 2 -->
                <div class="flex items-center gap-4">
                    <input type="text" value="Trimestre 2" readonly 
                           class="flex-1 p-2.5 border rounded-lg bg-gray-100 dark:bg-gray-600 dark:text-white">
                    <input type="checkbox" name="semestre2" id="semestre2-checkbox" class="w-5 h-5">
                </div>

                <!-- Trimestre 3 -->
                <div class="flex items-center gap-4">
                    <input type="text" value="Trimestre 3" readonly 
                           class="flex-1 p-2.5 border rounded-lg bg-gray-100 dark:bg-gray-600 dark:text-white">
                    <input type="checkbox" name="semestre3" id="semestre3-checkbox" class="w-5 h-5">
                </div>
            </div>

            <!-- Save Button -->
            <div class="text-right">
                <button type="submit" 
                        class="px-5 py-2.5 text-sm font-medium text-white bg-blue-700 rounded-lg hover:bg-blue-800">
                    Sauvegarder
                </button>
            </div>
        </form>
    </div>
</div>



<script>
    document.addEventListener('DOMContentLoaded', function() {
        const dispenseButtons = document.querySelectorAll('.edit-dispenser');
        const modalStudentNameFirst = document.getElementById('student-first-name');
        const modalStudentNameLast = document.getElementById('student-last-name');
        const modal = document.getElementById('crud-modal-dispenser');
        const closeModalButton = document.getElementById('close-modal');

        dispenseButtons.forEach(button => {
            button.addEventListener('click', function() {
                // Get student data from data attributes
                const firstName = this.getAttribute('data-first-name');
                const lastName = this.getAttribute('data-last-name');

                // Update modal header with student names
                modalStudentNameFirst.textContent = firstName;
                modalStudentNameLast.textContent = lastName;

                // Show the modal
                modal.classList.remove('hidden');
            });
        });

        // Close modal event
        closeModalButton.addEventListener('click', function() {
            modal.classList.add('hidden');
        });
    });
</script>

<!-- Modal -->
<div id="crud-modal-update" tabindex="-1" aria-hidden="true" 
     class="hidden fixed top-0 left-0 w-full h-full flex justify-center items-center bg-gray-900 bg-opacity-50 z-50">
    <div class="relative w-full max-w-md bg-white rounded-lg shadow-lg dark:bg-gray-700">
        <!-- Modal Header -->
        <div class="flex items-center justify-between p-4 border-b dark:border-gray-600">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                Modifier Élève
            </h3>
            <button type="button" class="text-gray-400 hover:text-gray-900 dark:hover:text-white"
                    id="close-modal">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <!-- Modal Body -->
        <form id="update-form" method="POST" class="p-5">
            <?php echo csrf_field(); ?>
            <?php echo method_field('PUT'); ?>
            <div class="grid gap-4 mb-4">
                <!-- First Name -->
                <div>
                    <label for="modal-first-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                        Nom
                    </label>
                    <input type="text" id="modal-first-name" name="first_name"
                           class="w-full p-2.5 border rounded-lg bg-gray-50 dark:bg-gray-600 dark:text-white">
                </div>
                <!-- Last Name -->
                <div>
                    <label for="modal-last-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                        Prénom
                    </label>
                    <input type="text" id="modal-last-name" name="last_name"
                           class="w-full p-2.5 border rounded-lg bg-gray-50 dark:bg-gray-600 dark:text-white">
                </div>
                <div>
                    <label for="modal-code" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                        Numéro d'enregistrement
                    </label>
                    <input type="text" id="modal-code" name="code"
                           class="w-full p-2.5 border rounded-lg bg-gray-50 dark:bg-gray-600 dark:text-white">
                </div>
                <!-- Date of Birth -->
                <div>
                    <label for="modal-date" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                        Date de Naissance
                    </label>
                    <input type="date" id="modal-date" name="date"
                           class="w-full p-2.5 border rounded-lg bg-gray-50 dark:bg-gray-600 dark:text-white">
                </div>
                <!-- Classe -->

                <!-- Parent Email -->
                <div>
                    <label for="modal-parent" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                        Parent
                    </label>
                    <input type="text" id="modal-parent" name="email"
                           class="w-full p-2.5 border rounded-lg bg-gray-50 dark:bg-gray-600 dark:text-white">
                </div>
                <!-- Phone -->
                <div>
                    <label for="modal-phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                        Téléphone
                    </label>
                    <input type="text" id="modal-phone" name="phone"
                           class="w-full p-2.5 border rounded-lg bg-gray-50 dark:bg-gray-600 dark:text-white">
                </div>
            </div>
            <!-- Submit Button -->
            <div class="text-right">
                <button type="submit" 
                        class="px-5 py-2.5 text-sm font-medium text-white bg-blue-700 rounded-lg hover:bg-blue-800">
                    Mettre à jour
                </button>
            </div>
        </form>
    </div>
</div>
</body>
<script>
document.querySelectorAll('.edit-matiere').forEach(button => {
    button.addEventListener('click', () => {
        const modal = document.getElementById('crud-modal-update');
        modal.classList.remove('hidden');
    });
});


document.querySelectorAll('.edit-dispenser').forEach(button => {
    button.addEventListener('click', () => {
        const modal = document.getElementById('crud-modal-dispenser');
        modal.classList.remove('hidden');
    });
});


document.addEventListener('DOMContentLoaded', () => {
    const editButtons = document.querySelectorAll('.edit-matiere');
    const modal = document.getElementById('crud-modal-update');
    const closeModal = document.getElementById('close-modal');
    const form = document.getElementById('update-form');

    // Modal Fields
    const firstnameInput = document.getElementById('modal-first-name');
    const lastnameInput = document.getElementById('modal-last-name');
    const dateInput = document.getElementById('modal-date');

    const parentInput = document.getElementById('modal-parent');
    const phoneInput = document.getElementById('modal-phone');
    const codeInput = document.getElementById('modal-code');
    
    // Open Modal
    editButtons.forEach(button => {
        button.addEventListener('click', (e) => {
            e.preventDefault();

            // Get data from button
            const { id, firstName, lastName, date, email, phone, code } = button.dataset;

            // Populate modal fields
            firstnameInput.value = firstName || '';
            lastnameInput.value = lastName || '';
            dateInput.value = date || '';
         
            parentInput.value = email || '';
            phoneInput.value = phone || '';
            
            codeInput.value = code || '';
            
            // Set form action
            form.action = `https://deuxmaizarzis.com/my-app/public/eleves/${id}`;

            // Show modal
            modal.classList.remove('hidden');
        });
    });

    // Close Modal
    closeModal.addEventListener('click', () => {
        modal.classList.add('hidden');
    });

    // Close modal on outside click
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.classList.add('hidden');
        }
    });
});




document.addEventListener('DOMContentLoaded', () => {
    const editButtons = document.querySelectorAll('.edit-dispenser');
    const modal = document.getElementById('crud-modal-dispenser');
    const closeModal = document.getElementById('close-modal');
    const form = document.getElementById('form-dispenser');

    // Unique checkbox ids
    const semestre1Checkbox = document.getElementById('semestre1-checkbox');
    const semestre2Checkbox = document.getElementById('semestre2-checkbox');
    const semestre3Checkbox = document.getElementById('semestre3-checkbox');

    // Open Modal and fill data
    editButtons.forEach(button => {
        button.addEventListener('click', (e) => {
            e.preventDefault();

            const id = button.dataset.id;
            const idc = button.dataset.classeid;
            const semestre1 = button.dataset.semestre1 === 'true';
            const semestre2 = button.dataset.semestre2 === 'true';
            const semestre3 = button.dataset.semestre3 === 'true';

            // Populate checkboxes
            semestre1Checkbox.checked = semestre1;
            semestre2Checkbox.checked = semestre2;
            semestre3Checkbox.checked = semestre3;
           
            // Set form action
            form.action = `https://deuxmaizarzis.com/my-app/public/dispenser/${id}/${idc}`;

            // Show modal
            modal.classList.remove('hidden');
        });
    });

    // Close Modal
    closeModal.addEventListener('click', () => {
        modal.classList.add('hidden');
    });

    // Close modal on outside click
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.classList.add('hidden');
        }
    });
});



    // Optional: Filter by the search input (search across all columns)
    document.getElementById('search-dropdown').addEventListener('input', function () {
        const searchTerm = this.value.toLowerCase();
        const rows = document.querySelectorAll('#data-table tbody tr');
        rows.forEach(function (row) {
            const cells = row.getElementsByTagName('td');
            let match = false;
            for (let i = 0; i < cells.length; i++) {
                if (cells[i].textContent.toLowerCase().includes(searchTerm)) {
                    match = true;
                    break;
                }
            }
            row.style.display = match ? '' : 'none';  // Show or hide the row based on the search term
        });
    });
</script>
</html>

<?php /**PATH /home/wzhvrvkx/public_html/my-app/resources/views/classes/ElevesClasse.blade.php ENDPATH**/ ?>