@extends('layouts.main')

@section('title', 'Judges')

@section('styles')
<style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: Arial, sans-serif; background: #f0f0f0; }

    .image-container {
      position: relative;
      width: 100%;
    }
    .image-container img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      display: block;
    }
    .image-container h1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 2em;
      font-weight: normal;
      text-align: center;
      white-space: nowrap;
    }

    .search-card {
      position: relative;
      z-index: 10;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.15);
      max-width: 620px;
      margin: -80px auto 0 auto;
      padding: 2rem 2rem 1.5rem;
    }
    .search-row {
      display: flex;
      gap: 1rem;
      margin-bottom: 1rem;
      flex-wrap: wrap;
    }
    .search-card select,
    .search-card input {
      flex: 1;
      min-width: 140px;
      padding: 12px 16px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      color: #555;
      background: #fff;
      outline: none;
      transition: border-color 0.2s;
    }
    .search-card select:focus,
    .search-card input:focus {
      border-color: #5b5fc7;
    }
    .search-btn {
      display: block;
      width: 100%;
      padding: 13px;
      background: #1a1a6e;
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 1px;
      cursor: pointer;
      margin-top: 0.5rem;
      transition: background 0.2s;
    }
    .search-btn:hover { background: #2e2ea0; }

    .results-section {
      max-width: 900px;
      margin: 2.5rem auto;
      padding: 0 1rem;
    }
    .results-section h2 {
      font-size: 1rem;
      color: #555;
      margin-bottom: 1rem;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    }
    thead tr { background: #1a1a6e; color: #fff; }
    thead th {
      padding: 12px 16px;
      text-align: left;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.5px;
    }
    tbody tr {
      border-bottom: 1px solid #eee;
      transition: background 0.15s;
      cursor: pointer;
    }
    tbody tr:hover { background: #f0f0ff; }
    tbody td {
      padding: 11px 16px;
      font-size: 13px;
      color: #333;
    }
    .badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: bold;
      color: #fff;
    }
    .badge-green  { background: #2e7d32; }
    .badge-blue   { background: #1565c0; }
    .badge-orange { background: #e65100; }
    .badge-gray   { background: #757575; }

    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }
    .modal-overlay.open { display: flex; }
    .modal {
      background: #fff;
      border-radius: 10px;
      padding: 2rem;
      max-width: 420px;
      width: 90%;
      position: relative;
    }
    .modal h2 { font-size: 1.2rem; color: #1a1a6e; margin-bottom: 0.3rem; }
    .modal p  { font-size: 13px; color: #555; margin-bottom: 0.4rem; line-height: 1.6; }
    .modal-close {
      position: absolute;
      top: 12px; right: 16px;
      font-size: 20px;
      cursor: pointer;
      color: #888;
      background: none;
      border: none;
    }
    .modal-close:hover { color: #333; }

    .cookie-banner {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: #1a1a1a;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.8rem;
      padding: 0.9rem 1.5rem;
      font-size: 14px;
      z-index: 999;
    }
    .cookie-banner p { flex: 1; min-width: 220px; }
    .btn-accept      { background: #2e7d32; color: #fff; border: none; padding: 8px 18px; border-radius: 4px; cursor: pointer; font-size: 14px; }
    .btn-deny        { background: #c62828; color: #fff; border: none; padding: 8px 18px; border-radius: 4px; cursor: pointer; font-size: 14px; }
    .btn-personalize,
    .btn-policy      { background: #e0e0e0; color: #333; border: none; padding: 8px 18px; border-radius: 4px; cursor: pointer; font-size: 14px; }
    .cookie-banner button:hover { opacity: 0.85; }
</style>
@endsection

@section('content')
  <div class="image-container">
    <img src="{{ asset('img/olym.jpg') }}" alt="Olympic rings photo">
    <h1>Judging</h1>
  </div>

  <div class="search-card">
    <div class="search-row">
      <select id="discipline">
        <option value="">-- Select a discipline --</option>
        <option>Artistic Gymnastics (MAG)</option>
        <option>Artistic Gymnastics (WAG)</option>
        <option>Rhythmic Gymnastics (RG)</option>
        <option>Trampoline (TRA)</option>
        <option>Acrobatic Gymnastics (ACRO)</option>
        <option>Aerobic Gymnastics (AER)</option>
        <option>Parkour (PK)</option>
      </select>
      <select id="country">
        <option value="">-- Select a country --</option>
        <option>Lebanon</option>
        <option>France</option>
        <option>USA</option>
        <option>Germany</option>
        <option>Japan</option>
        <option>Brazil</option>
        <option>Australia</option>
        <option>China</option>
        <option>Russia</option>
        <option>Italy</option>
      </select>
      <input type="text" id="judgeId" placeholder="ID">
    </div>
    <div class="search-row">
      <select id="category">
        <option value="">-- Select a category --</option>
        <option>Brevet</option>
        <option>Category 1</option>
        <option>Category 2</option>
        <option>Category 3</option>
      </select>
      <input type="text" id="surname" placeholder="Surname / Family name">
    </div>
    <button class="search-btn" onclick="searchJudges()">SEARCH</button>
  </div>

  <!-- RESULTS -->
  <div class="results-section">
    <h2 id="results-count"></h2>
    <table id="results-table" style="display:none;">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Country</th>
          <th>Discipline</th>
          <th>Category</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody id="results-body"></tbody>
    </table>
  </div>

  <!-- JUDGE MODAL -->
  <div class="modal-overlay" id="modalOverlay">
    <div class="modal">
      <button class="modal-close" onclick="closeModal()">&#x2715;</button>
      <h2 id="modal-name"></h2>
      <p id="modal-id"></p>
      <p id="modal-country"></p>
      <p id="modal-discipline"></p>
      <p id="modal-category"></p>
      <p id="modal-status"></p>
    </div>
  </div>

  <div class="cookie-banner" id="cookieBanner">
    <p>This site uses cookies and gives you control over what you want to activate</p>
    <button class="btn-accept"      onclick="document.getElementById('cookieBanner').style.display='none'">OK, accept all</button>
    <button class="btn-deny"        onclick="document.getElementById('cookieBanner').style.display='none'">Deny all cookies</button>
    <button class="btn-personalize" onclick="document.getElementById('cookieBanner').style.display='none'">Personalize</button>
    <button class="btn-policy"      onclick="document.getElementById('cookieBanner').style.display='none'">Privacy policy</button>
  </div>
@endsection

@section('scripts')
<script>
    const judges = [
      { id: 'J001', name: 'Ali Hassan',       country: 'Lebanon',   discipline: 'Artistic Gymnastics (MAG)', category: 'Brevet',     status: 'Active' },
      { id: 'J002', name: 'Marie Dupont',     country: 'France',    discipline: 'Rhythmic Gymnastics (RG)',  category: 'Category 1', status: 'Active' },
      { id: 'J003', name: 'Yuki Tanaka',      country: 'Japan',     discipline: 'Trampoline (TRA)',          category: 'Brevet',     status: 'Active' },
      { id: 'J004', name: 'Carlos Silva',     country: 'Brazil',    discipline: 'Acrobatic Gymnastics (ACRO)', category: 'Category 2', status: 'Inactive' },
      { id: 'J005', name: 'Sarah Johnson',    country: 'USA',       discipline: 'Artistic Gymnastics (WAG)', category: 'Brevet',     status: 'Active' },
      { id: 'J006', name: 'Hans Müller',      country: 'Germany',   discipline: 'Aerobic Gymnastics (AER)',  category: 'Category 1', status: 'Active' },
      { id: 'J007', name: 'Li Wei',           country: 'China',     discipline: 'Artistic Gymnastics (MAG)', category: 'Brevet',     status: 'Active' },
      { id: 'J008', name: 'Giulia Rossi',     country: 'Italy',     discipline: 'Rhythmic Gymnastics (RG)',  category: 'Category 3', status: 'Inactive' },
      { id: 'J009', name: 'Emma Wilson',      country: 'Australia', discipline: 'Trampoline (TRA)',          category: 'Category 2', status: 'Active' },
      { id: 'J010', name: 'Nadia Petrova',    country: 'Russia',    discipline: 'Artistic Gymnastics (WAG)', category: 'Brevet',     status: 'Active' },
    ];

    function searchJudges() {
      const discipline = document.getElementById('discipline').value;
      const country    = document.getElementById('country').value;
      const id         = document.getElementById('judgeId').value.trim().toLowerCase();
      const category   = document.getElementById('category').value;
      const surname    = document.getElementById('surname').value.trim().toLowerCase();

      const filtered = judges.filter(j => {
        return (!discipline || j.discipline === discipline)
            && (!country    || j.country    === country)
            && (!id         || j.id.toLowerCase().includes(id))
            && (!category   || j.category   === category)
            && (!surname    || j.name.toLowerCase().includes(surname));
      });

      const tbody = document.getElementById('results-body');
      const table = document.getElementById('results-table');
      const count = document.getElementById('results-count');

      tbody.innerHTML = '';

      if (filtered.length === 0) {
        count.textContent = 'No judges found matching your criteria.';
        table.style.display = 'none';
        return;
      }

      count.textContent = `${filtered.length} judge(s) found:`;
      table.style.display = 'table';

      filtered.forEach(j => {
        const badgeClass = j.status === 'Active' ? 'badge-green' : 'badge-gray';
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td>${j.id}</td>
          <td><strong>${j.name}</strong></td>
          <td>${j.country}</td>
          <td>${j.discipline}</td>
          <td>${j.category}</td>
          <td><span class="badge ${badgeClass}">${j.status}</span></td>
        `;
        tr.addEventListener('click', () => openModal(j));
        tbody.appendChild(tr);
      });
    }

    function openModal(j) {
      document.getElementById('modal-name').textContent       = j.name;
      document.getElementById('modal-id').textContent         = 'ID: ' + j.id;
      document.getElementById('modal-country').textContent    = 'Country: ' + j.country;
      document.getElementById('modal-discipline').textContent = 'Discipline: ' + j.discipline;
      document.getElementById('modal-category').textContent   = 'Category: ' + j.category;
      document.getElementById('modal-status').textContent     = 'Status: ' + j.status;
      document.getElementById('modalOverlay').classList.add('open');
    }

    function closeModal() {
      document.getElementById('modalOverlay').classList.remove('open');
    }

    document.getElementById('modalOverlay').addEventListener('click', function(e) {
      if (e.target === this) closeModal();
    });
</script>
@endsection