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

<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-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">Recherche</button>

        <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="" 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>

  <?php if($errors->has('duplicate')): ?>
  <div class="max-w-7xl mx-auto mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg text-center font-semibold">
    ⚠️ <?php echo e($errors->first('duplicate')); ?>

  </div>
  <?php endif; ?>

  <div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card -->
    <div class="bg-gray-100 rounded-lg shadow p-4 border-2 border-dashed border-gray-300 flex items-center justify-center h-40">
        <button data-modal-target="crud-modal" data-modal-toggle="crud-modal" class="text-gray-700 hover:text-gray-700">
            <span class="font-semibold text-lg">Ajouter Enseignant</span>
        </button>
    </div>

    <!-- Duplicate Cards -->

    <?php $__currentLoopData = $profs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $prof): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
   

        
    <div class="card-container bg-white rounded-lg shadow p-4">
    <div class="flex items-center justify-between">
        <div>
        <a href="<?php echo e(route('profs.show', $prof->id)); ?>">
                <h2 class="text-lg font-semibold text-gray-900"  data-name="<?php echo e($prof->first_name); ?>"><?php echo e($prof->first_name); ?> <?php echo e($prof->last_name); ?></h2>
                </a>
            <span class="text-sm text-gray-500 flex items-center gap-1">
                <span class=" text-xs font-medium px-2 py-1 rounded" data-year=""></span>
            </span>
        </div>
        <i class="fa fa-graduation-cap text-gray-500 text-3xl"></i>
    </div>
  
    <div class="flex mt-4 border-t pt-4 space-x-4">
        <div class="flex gap-40">
            <p><?php echo e($prof->phone); ?></p>
            <div class="flex gap-4">
            <button
    data-modal-target="crud-modal-update"
    data-modal-toggle="crud-modal-update"
    class="edit-matiere font-medium text-blue-600 dark:text-blue-500 hover:underline"
    data-id="<?php echo e($prof->id); ?>"
    data-fname="<?php echo e($prof->first_name); ?>"
    data-lname="<?php echo e($prof->last_name); ?>"
    data-phone="<?php echo e($prof->phone); ?>"
>
                    <i class="fa-regular fa-pen-to-square"></i>
                </button>
                <form action="<?php echo e(route('profs.destroy', $prof->id)); ?>" method="POST" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer Enseignant ?');">
                    <?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>
        </div>
    </div>
</div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

      
  </div>

<div id="crud-modal-update" tabindex="-1" aria-hidden="true"role="dialog" aria-labelledby="modal-title" class="hidden fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-screen overflow-y-auto">
    <div class="relative p-4 w-full max-w-md max-h-full">
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
        <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                  Modifier Enseignant
                  </h3>
                  <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="crud-modal-update">
                      <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                      </svg>
                      <span class="sr-only">Close modal</span>
                  </button>
              </div>
            <form class="p-4 md:p-5" id="update-form" method="POST">
                <?php echo csrf_field(); ?>
                <?php echo method_field('PUT'); ?>

<div class="grid gap-4 mb-4 grid-cols-2">
    <div class="col-span-2 sm:col-span-1">
        <label for="first_name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nom</label>
        <input type="text" name="first_name" id="first_name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"  required="">
    </div>
    <div class="col-span-2 sm:col-span-1">
        <label for="last_name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Prénom</label>
        <input type="text" name="last_name" id="last_name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"  required="">
    </div>
    <!-- <div class="col-span-2">
        <label for="classe" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Classe</label>
        <select id="class_ids[]" name="class_ids[]"  multiple class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
            <option selected="">Sélectionner</option>
            <?php $__currentLoopData = $matieres; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $matiere): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

              <option value="<?php echo e($matiere->id); ?>"><?php echo e($matiere->name); ?> <?php echo e($matiere->year); ?></option>

            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

        </select>
    </div> -->
    <div id="dynamic-fields-container-update" class="col-span-2 gap-4">
  <!-- Initial Fields Group -->
  <div class="col-span-2 sm:col-span-1">
    <label for="matiere" class="block text-sm font-medium text-gray-900 dark:text-white">
      Matière
    </label>
    <select
      id="matiere_ids[]"
      name="matiere_ids[]"
      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
    >
      <option selected="">Sélectionner</option>
      <?php $__currentLoopData = $matieres; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $matiere): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <option value="<?php echo e($matiere->id); ?>"><?php echo e($matiere->name); ?> <?php echo e($matiere->year); ?></option>
      <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </select>
  </div>

  <div class="col-span-2 sm:col-span-1">
    <label for="classe" class="block text-sm font-medium text-gray-900 dark:text-white">
      Classe
    </label>
    <select
      id="class_ids[]"
      name="class_ids[]"
      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
    >
      <option selected="">Sélectionner</option>
      <?php $__currentLoopData = $classes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $classe): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <option value="<?php echo e($classe->id); ?>"><?php echo e($classe->name); ?> <?php echo e($classe->year); ?></option>
      <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </select>
  </div>

  <div class="col-span-2 sm:col-span-1">
    <label class="block text-sm font-medium text-gray-900 dark:text-white">Trimestre</label>
    <select name="trimestre_ids[]"
      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white">
      <option value="1">الثلاثي الأول</option>
      <option value="2">الثلاثي الثاني</option>
      <option value="3">الثلاثي الثالث</option>
    </select>
  </div>
</div>
<div class="col-span-2">
<button
  type="button"
  id="add-field-group-update"
  class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600"
>
  Ajouter
</button>

</div>
    <div class="col-span-2">
        <label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Téléphone</label>
        <input type="text" name="phone" id="phone" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"  required="">
    </div>
</div>
<button type="submit" class="text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
    <svg class="me-1 -ms-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
    Modifier
</button>
</form>
        </div>
    </div>
</div>

  
  <!-- Main modal -->
  <div id="crud-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
      <div class="relative p-4 w-full max-w-md max-h-full">
          <!-- Modal content -->
          <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
              <!-- Modal header -->
              <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                  Ajouter Enseignant
                  </h3>
                  <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="crud-modal">
                      <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                      </svg>
                      <span class="sr-only">Close modal</span>
                  </button>
              </div>
              <!-- Modal body -->
              <form class="p-4 md:p-5" action="<?php echo e(route('profs.store')); ?>" method="POST">

                  <?php echo csrf_field(); ?>

                  <div class="grid gap-4 mb-4 grid-cols-2">
                      <div class="col-span-2 sm:col-span-1">
                          <label for="first_name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nom</label>
                          <input type="text" name="first_name" id="first_name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"  required="">
                      </div>
                      <div class="col-span-2 sm:col-span-1">
                          <label for="last_name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Prénom</label>
                          <input type="text" name="last_name" id="last_name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"  required="">
                      </div>
                      <!-- <div class="col-span-2">
                          <label for="classe" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Classe</label>
                          <select id="class_ids[]" name="class_ids[]"  multiple class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                              <option selected="">Sélectionner</option>
                              <?php $__currentLoopData = $matieres; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $matiere): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                                <option value="<?php echo e($matiere->id); ?>"><?php echo e($matiere->name); ?> <?php echo e($matiere->year); ?></option>

                              <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                          </select>
                      </div> -->
                      <div id="dynamic-fields-container" class="col-span-2  gap-4">
  <!-- Initial Fields Group -->
  <div class="col-span-2 sm:col-span-1">
    <label for="matiere" class="block text-sm font-medium text-gray-900 dark:text-white">
      Matière
    </label>
    <select
      id="matiere_ids[]"
      name="matiere_ids[]"
      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
    >
      <option selected="">Sélectionner</option>
      <?php $__currentLoopData = $matieres; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $matiere): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <option value="<?php echo e($matiere->id); ?>"><?php echo e($matiere->name); ?> <?php echo e($matiere->year); ?></option>
      <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </select>
  </div>

  <div class="col-span-2 sm:col-span-1">
    <label for="classe" class="block text-sm font-medium text-gray-900 dark:text-white">
      Classe
    </label>
    <select
      id="class_ids[]"
      name="class_ids[]"
      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
    >
      <option selected="">Sélectionner</option>
      <?php $__currentLoopData = $classes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $classe): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <option value="<?php echo e($classe->id); ?>"><?php echo e($classe->name); ?> <?php echo e($classe->year); ?></option>
      <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </select>
  </div>

  <div class="col-span-2 sm:col-span-1">
    <label class="block text-sm font-medium text-gray-900 dark:text-white">Trimestre</label>
    <select name="trimestre_ids[]"
      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white">
      <option value="1">الثلاثي الأول</option>
      <option value="2">الثلاثي الثاني</option>
      <option value="3">الثلاثي الثالث</option>
    </select>
  </div>
</div>
<div class="col-span-2">
<button
  type="button"
  id="add-field-group"
  class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600"
>
  Ajouter
</button>

</div>
                      <div class="col-span-2">
                          <label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Téléphone</label>
                          <input type="text" name="phone" id="phone" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"  required="">
                      </div>
                  </div>
                  <button type="submit" class="text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                      <svg class="me-1 -ms-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
                      Créer
                  </button>
              </form>
          </div>
      </div>
  </div> 
  
</body>
<script>

   // Returns true if duplicate (matiere + trimestre) pair found in the container
   function hasDuplicateMatieres(container) {
     const matiereSelects   = Array.from(container.querySelectorAll('select[name="matiere_ids[]"]'));
     const trimestreSelects = Array.from(container.querySelectorAll('select[name="trimestre_ids[]"]'));
     const seen = [];
     let hasDup = false;
     matiereSelects.forEach((sel, i) => {
       const matVal = sel.value;
       const triVal = trimestreSelects[i] ? trimestreSelects[i].value : '';
       if (!matVal || matVal === '') return;
       const key = matVal + '_' + triVal;
       if (seen.includes(key)) {
         sel.style.border = '2px solid red';
         if (trimestreSelects[i]) trimestreSelects[i].style.border = '2px solid red';
         hasDup = true;
       }
       seen.push(key);
     });
     return hasDup;
   }

   // Reset red borders on matiere + trimestre selects
   function resetMatieresBorders(container) {
     container.querySelectorAll('select[name="matiere_ids[]"]').forEach(s => s.style.border = '');
     container.querySelectorAll('select[name="trimestre_ids[]"]').forEach(s => s.style.border = '');
   }

   // Attach change listener to a matiere or trimestre select
   function attachDuplicateCheck(select, container) {
     select.addEventListener('change', () => {
       resetMatieresBorders(container);
       hasDuplicateMatieres(container);
     });
   }

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

    const fnameInput = document.getElementById('first_name');
    const lnameInput = document.getElementById('last_name');
    const phoneInput = document.getElementById('phone');

    // Event listeners for edit buttons
    editButtons.forEach(button => {
        button.addEventListener('click', (e) => {
            e.preventDefault();
            const id = button.dataset.id;
            const fname = button.dataset.fname;
            const lname = button.dataset.lname;
            const phone = button.dataset.phone;

            if (id && fname && lname && phone) {
                // Populate modal fields
                fnameInput.value = fname;
                lnameInput.value = lname;
                phoneInput.value = phone;

                // Update form action URL
                form.action = `https://deuxmaizarzis.com/my-app/public/profs/${id}`;

                // Show modal
                modal.classList.remove('hidden');
                modal.setAttribute('aria-hidden', 'false');
            }
        });
    });

    // Close modal button
    if (closeModalButton) {
        closeModalButton.addEventListener('click', () => {
            modal.classList.add('hidden');
            modal.setAttribute('aria-hidden', 'true');
        });
    }

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

    // Attach duplicate check to initial matiere selects
    const addContainer = document.getElementById('dynamic-fields-container');
    const updateContainer = document.getElementById('dynamic-fields-container-update');

    addContainer.querySelectorAll('select[name="matiere_ids[]"], select[name="trimestre_ids[]"]').forEach(s => attachDuplicateCheck(s, addContainer));
    updateContainer.querySelectorAll('select[name="matiere_ids[]"], select[name="trimestre_ids[]"]').forEach(s => attachDuplicateCheck(s, updateContainer));

    // Block form submit on duplicate — add form
    document.querySelector('form[action="<?php echo e(route('profs.store')); ?>"]').addEventListener('submit', function(e) {
        resetMatieresBorders(addContainer);
        if (hasDuplicateMatieres(addContainer)) {
            e.preventDefault();
            alert('Une matière est sélectionnée plusieurs fois. Veuillez corriger avant de continuer.');
        }
    });

    // Block form submit on duplicate — update form
    document.getElementById('update-form').addEventListener('submit', function(e) {
        resetMatieresBorders(updateContainer);
        if (hasDuplicateMatieres(updateContainer)) {
            e.preventDefault();
            alert('Une matière est sélectionnée plusieurs fois. Veuillez corriger avant de continuer.');
        }
    });
});
document.getElementById('add-field-group-update').addEventListener('click', function () {
    const container = document.getElementById('dynamic-fields-container-update');
    const uniqueId  = `group-${Date.now()}`;

    const matiereGroup = document.createElement('div');
    matiereGroup.className = 'field-group col-span-1 flex flex-col space-y-2';
    matiereGroup.innerHTML = `
      <label class="block text-sm font-medium text-gray-900 dark:text-white">Matière</label>
      <select name="matiere_ids[]"
        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white">
        <option value="">Sélectionner</option>
        <?php $__currentLoopData = $matieres; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $matiere): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <option value="<?php echo e($matiere->id); ?>"><?php echo e($matiere->name); ?> <?php echo e($matiere->year); ?></option>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
      </select>`;

    const classeGroup = document.createElement('div');
    classeGroup.className = 'field-group col-span-1 flex flex-col space-y-2';
    classeGroup.innerHTML = `
      <label class="block text-sm font-medium text-gray-900 dark:text-white">Classe</label>
      <select name="class_ids[]"
        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white">
        <option value="">Sélectionner</option>
        <?php $__currentLoopData = $classes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $classe): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <option value="<?php echo e($classe->id); ?>"><?php echo e($classe->name); ?> <?php echo e($classe->year); ?></option>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
      </select>`;

    const trimestreGroup = document.createElement('div');
    trimestreGroup.className = 'field-group col-span-1 flex flex-col space-y-2';
    trimestreGroup.innerHTML = `
      <label class="block text-sm font-medium text-gray-900 dark:text-white">Trimestre</label>
      <select name="trimestre_ids[]"
        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white">
        <option value="1">الثلاثي الأول</option>
        <option value="2">الثلاثي الثاني</option>
        <option value="3">الثلاثي الثالث</option>
      </select>`;

    attachDuplicateCheck(matiereGroup.querySelector('select'),   container);
    attachDuplicateCheck(trimestreGroup.querySelector('select'), container);

    container.appendChild(matiereGroup);
    container.appendChild(classeGroup);
    container.appendChild(trimestreGroup);
});


document.getElementById('add-field-group').addEventListener('click', function () {
    const container = document.getElementById('dynamic-fields-container');
    const uniqueId  = `group-${Date.now()}`;

    const matiereGroup = document.createElement('div');
    matiereGroup.className = 'field-group col-span-1 flex flex-col space-y-2';
    matiereGroup.innerHTML = `
      <label class="block text-sm font-medium text-gray-900 dark:text-white">Matière</label>
      <select name="matiere_ids[]"
        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white">
        <option value="">Sélectionner</option>
        <?php $__currentLoopData = $matieres; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $matiere): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <option value="<?php echo e($matiere->id); ?>"><?php echo e($matiere->name); ?> <?php echo e($matiere->year); ?></option>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
      </select>`;

    const classeGroup = document.createElement('div');
    classeGroup.className = 'field-group col-span-1 flex flex-col space-y-2';
    classeGroup.innerHTML = `
      <label class="block text-sm font-medium text-gray-900 dark:text-white">Classe</label>
      <select name="class_ids[]"
        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white">
        <option value="">Sélectionner</option>
        <?php $__currentLoopData = $classes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $classe): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <option value="<?php echo e($classe->id); ?>"><?php echo e($classe->name); ?> <?php echo e($classe->year); ?></option>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
      </select>`;

    const trimestreGroup = document.createElement('div');
    trimestreGroup.className = 'field-group col-span-1 flex flex-col space-y-2';
    trimestreGroup.innerHTML = `
      <label class="block text-sm font-medium text-gray-900 dark:text-white">Trimestre</label>
      <select name="trimestre_ids[]"
        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white">
        <option value="1">الثلاثي الأول</option>
        <option value="2">الثلاثي الثاني</option>
        <option value="3">الثلاثي الثالث</option>
      </select>`;

    attachDuplicateCheck(matiereGroup.querySelector('select'),   container);
    attachDuplicateCheck(trimestreGroup.querySelector('select'), container);

    container.appendChild(matiereGroup);
    container.appendChild(classeGroup);
    container.appendChild(trimestreGroup);
});

</script>
</html>
<?php /**PATH C:\Users\Toby\Desktop\02 mai zarzis\version 2026\v2\my-app\resources\views/profs/index.blade.php ENDPATH**/ ?>