

<section
  data-role-labels='{"info_desk":"Information Desk Volunteer","greeter":"Greeter \/ Welcome Team Member","guide":"Directional Guide (helps participants find locations)","stage":"Stage Assistant\/Backstage Crew","child-assistant":"Children\u0027s Area Assistant","exhibition-support":"Exhibition Support Volunteer","catering-assistant":"Catering Assistant \/ Refreshment Helper"}'
  data-favourites='[]'
  data-ajax-nonce="e5c392142d"
  data-provide-labels='{"accommodation":"Accommodation","catering":"Catering","transport":"Transport","gadgets":"Gadgets","insurance":"Volunteer Insurance","certificate":"Certificate of participation","training":"Introductory training","access":"Access to the event","gifts":"Small gifts or recognition rewards","other":"Other"}'
  data-user-applications-roles='[]'
  data-apply-nonce="c43172de05"
  x-data="{

    // zainicjalizowana wartość, nadpiszemy ją w init()
    applyNonce: '',

    // Alpine wywoła tę metodę tuż po uruchomieniu
    init() {
      this.applyNonce = this.$el.getAttribute('data-apply-nonce');
      console.log('Loaded applyNonce:', this.applyNonce);
    },

    favourites: JSON.parse($el.dataset.favourites || '[]'),
    ajaxNonce: $el.dataset.ajaxNonce,
    isFav(id) {
      return this.favourites.includes(id)
    },
    async toggleFav(id) {
      try {
        const res = await fetch('https://ahod-eu.com/wp-admin/admin-ajax.php', {
          method: 'POST',
          credentials: 'same-origin',
          headers: {'Content-Type':'application/x-www-form-urlencoded'},
          body: new URLSearchParams({
            action: 'toggle_favourite',
            event_id: id,
            _wpnonce: this.ajaxNonce
          })
        });
        const json = await res.json();
        if (! json.success) throw new Error(json.data||'error');
        this.favourites = json.data.favourites;
      } catch (err) {
        console.error('Fav error', err);
      }
    },



    // filtr
    showFilter: false,
    filters: { location:'', start:'', end:'', roles:[], provided:[] },
    
    // parsujemy labelki z data-role-labels
    roleLabels: JSON.parse($el.dataset.roleLabels),
    userAppsRoles:  JSON.parse($el.dataset.userApplicationsRoles),
    selectedRole: '',
    availableRoles:  [],

    application: {
      experience: '',
      dateStart: '',
      dateEnd: '',
      roles: [],
      phone: '',
      email: '',
      agree1: false,
      agree2: false
    },

    // modal aplikacji
    showApplyModal: false,
    modalEvent: null,
    applyStatus: '',

    // otwórz modal
    openApply(e) {
      this.modalEvent    = e;
      this.applyStatus   = '';
      this.selectedRole  = '';

      // PREFILL DATY w formularzu:
  this.application.dateStart = e.start.slice(0,10);
  this.application.dateEnd   = e.end.slice(0,10);

      // filtrujemy role: zostaw tylko te, których nie ma w userAppsRoles[e.id]
      const taken = this.userAppsRoles[e.id] || [];
      this.availableRoles = e.roles.filter(r => ! taken.includes(r));
      this.showApplyModal = true;
    },

    

    // wyślij AJAX
    async apply(app) {
  try {
    console.log('🔔 Apply() called with:', {
      event_id: this.modalEvent.id,
      role:     this.selectedRole,
      data:     app,
    });

    const params = new URLSearchParams({
      action:     'apply_event',
      event_id:   this.modalEvent.id,
      // wysyłamy teraz WSZYSTKIE zaznaczone role:
      roles:      JSON.stringify(app.roles),
      experience: app.experience,
      dateStart:  app.dateStart,
      dateEnd:    app.dateEnd,
      phone:      app.phone,
      email:      app.email,
      nonce:      this.applyNonce,
    });

    const res = fetch('https://ahod-eu.com/wp-admin/admin-ajax.php', {
      method:      'POST',
      credentials: 'same-origin',
      headers:     { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
      body:        params.toString(),
    });
    console.log('🔔 fetch status:', res.status);

    let json;
    try {
      json = await res.json();
    } catch (err) {
      console.error('🔔 nie udało się zparsować JSON:', err);
      throw new Error(`Response not JSON, status ${res.status}`);
    }
    console.log('🔔 apply_event JSON:', json);

    if (! res.ok) {
      throw new Error(`HTTP error ${res.status}`);
    }

    if (! json.success) {
      console.error('🔔 apply_event returned success=false, data:', json.data);
      const reason = json.data?.reason || 'unknown';
      alert(`Server rejected request: ${reason}`);
      this.applyStatus = 'error';
      return;
    }

    // === SUKCES ===
    this.applyStatus = 'success';
    // zaktualizuj localState
    if (! Array.isArray(this.userAppsRoles[this.modalEvent.id])) {
      this.userAppsRoles[this.modalEvent.id] = [];
    }
    this.userAppsRoles[this.modalEvent.id].push(this.selectedRole);

  } catch (err) {
    console.error('🔔 apply() exception:', err);
    alert(`Apply() exception: ${err.message}`);
    this.applyStatus = 'error';
  }
},

    // filtr
    matches(e) {
   
    const s = this.filters.start, eD = this.filters.end;

    if ( this.filters.location && ! e.location.toLowerCase().includes(this.filters.location.toLowerCase()) ) return false;
    if ( this.filters.roles.length && ! this.filters.roles.some(r => e.roles.includes(r)) ) return false;

    if ( this.filters.provided.length && ! this.filters.provided.some(p => e.provided.includes(p)) ) return false;

    // 4) Date range (porównujemy same daty YYYY-MM-DD)
      if (this.filters.start && this.filters.end) {
        const filterStart = this.filters.start.trim();               
        const filterEnd   = this.filters.end.trim();                 
        const eventStart  = e.start.slice(0,10).trim();              
        const eventEnd    = e.end.slice(0,10).trim();                

        const noOverlap = (eventEnd   < filterStart)
                        || (eventStart > filterEnd);

        if (noOverlap) {
          console.log('✖ Odrzucony przez zakres dat (brak nakładania się)');
          return false;
        }
      }

      return true;
    },

    clearFilter(name) {
      if ( name === 'roles' || name === 'provided' ) {
        this.filters[name] = [];
      } else {
        this.filters[name] = '';
      }
    }
  }"
  class="pb-32 max-w-6xl mx-auto">

  <!-- Nagłówek + przycisk Filter -->
  <div class="flex gap-4 mb-8 items-center">
    <h1 class="text-[24px] font-normal uppercase">Events</h1>
    <button
      @click="showFilter = !showFilter"
      class="text-[24px] font-normal flex items-center space-x-1 uppercase">
      <span>Filter</span>
      <img src="/wp-content/uploads/2025/07/triangle_down.svg" class="w-4 h-4" />
    </button>
    <div class="flex flex-wrap gap-2 ml-4">
      <template x-if="!filters.location && !filters.start && !filters.end && !filters.roles.length && !filters.provided.length">
        <span class="text-sm text-gray-500">No filters applied</span>
      </template>
      <template x-if="filters.location">
        <span class="bg-gray-200 px-2 py-1 rounded text-sm flex items-center">
          Location: <strong class="ml-1" x-text="filters.location"></strong>
          <button @click="clearFilter('location')" class="ml-1 text-red-500">&times;</button>
        </span>
      </template>
      <template x-if="filters.start && filters.end">
        <span class="bg-gray-200 px-2 py-1 rounded text-sm flex items-center">
          Date: <strong class="ml-1" x-text="filters.start + ' – ' + filters.end"></strong>
          <button @click="clearFilter('start'); clearFilter('end')" class="ml-1 text-red-500">&times;</button>
        </span>
      </template>
      <template x-for="role in filters.roles" :key="role">
        <span class="bg-gray-200 px-2 py-1 rounded text-sm flex items-center">
          Role: <strong class="ml-1" x-text="role"></strong>
          <button @click="filters.roles = filters.roles.filter(r => r !== role)" class="ml-1 text-red-500">&times;</button>
        </span>
      </template>
      <template x-for="item in filters.provided" :key="item">
        <span class="bg-gray-200 px-2 py-1 rounded text-sm flex items-center">
          Provided: <strong class="ml-1" x-text="item"></strong>
          <button @click="filters.provided = filters.provided.filter(p => p !== item)" class="ml-1 text-red-500">&times;</button>
        </span>
      </template>
    </div>
  </div>

  <!-- Panel filtrów -->
  <div
    x-show="showFilter"
    x-cloak
    class="absolute top-22 left-1/2 transform -translate-x-1/2 z-10 bg-white border border-gray-300 rounded p-6 max-w-[630px] w-full shadow-lg">
    <button
      @click="showFilter = false"
      class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 text-2xl leading-none">&times;</button>

    <!-- Lokalizacja -->
    <div class="mb-4">
      <label class="block text-sm font-medium mb-2">Localisation</label>
      <div class="relative">
        <input
          type="text"
          x-model="filters.location"
          placeholder="Localisation"
          class="w-full border border-[var(--primary)] p-3 pr-10" />
        <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
          <img src="/wp-content/uploads/2025/07/location.svg" class="w-[32px] h-[40px]" />
        </div>
      </div>
    </div>

    <!-- Data eventu -->
    <div class="mb-6">
      <label class="block text-[20px] mb-1">Event's date</label>
      <div class="relative flex items-center border border-[var(--primary)] overflow-hidden h-[61px]">
        <input
          type="date"
          x-model="filters.start"
          class="flex-1 py-2 pl-3 pr-2 border-none focus:ring-0 focus:outline-none" />
        <span class="px-2 text-gray-400 pointer-events-none">—</span>
        <input
          type="date"
          x-model="filters.end"
          class="flex-1 py-2 pl-2 pr-16 border-none focus:ring-0 focus:outline-none" />
        <span class="absolute right-2 pointer-events-none">
          <img src="/wp-content/uploads/2025/07/calendar.svg" class="h-[42px] w-[39px]" />
        </span>
      </div>
    </div>

    <!-- Roles of volunteers -->
    <fieldset class="mb-6">
      <legend class="text-sm font-medium mb-2">Roles of volunteers</legend>
      <div class="grid grid-cols-1 gap-2">
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="info_desk"
              x-model="filters.roles"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)]
                 checked:bg-[var(--primary)] checked:border-[var(--primary)]
                 transition focus:outline-none focus:ring-2 focus:ring-[var(--primary)]
                 cursor-pointer" />
            <span class="text-sm">Information Desk Volunteer</span>
          </label>
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="greeter"
              x-model="filters.roles"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)]
                 checked:bg-[var(--primary)] checked:border-[var(--primary)]
                 transition focus:outline-none focus:ring-2 focus:ring-[var(--primary)]
                 cursor-pointer" />
            <span class="text-sm">Greeter / Welcome Team Member</span>
          </label>
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="guide"
              x-model="filters.roles"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)]
                 checked:bg-[var(--primary)] checked:border-[var(--primary)]
                 transition focus:outline-none focus:ring-2 focus:ring-[var(--primary)]
                 cursor-pointer" />
            <span class="text-sm">Directional Guide (helps participants find locations)</span>
          </label>
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="stage"
              x-model="filters.roles"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)]
                 checked:bg-[var(--primary)] checked:border-[var(--primary)]
                 transition focus:outline-none focus:ring-2 focus:ring-[var(--primary)]
                 cursor-pointer" />
            <span class="text-sm">Stage Assistant/Backstage Crew</span>
          </label>
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="child-assistant"
              x-model="filters.roles"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)]
                 checked:bg-[var(--primary)] checked:border-[var(--primary)]
                 transition focus:outline-none focus:ring-2 focus:ring-[var(--primary)]
                 cursor-pointer" />
            <span class="text-sm">Children&#039;s Area Assistant</span>
          </label>
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="exhibition-support"
              x-model="filters.roles"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)]
                 checked:bg-[var(--primary)] checked:border-[var(--primary)]
                 transition focus:outline-none focus:ring-2 focus:ring-[var(--primary)]
                 cursor-pointer" />
            <span class="text-sm">Exhibition Support Volunteer</span>
          </label>
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="catering-assistant"
              x-model="filters.roles"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)]
                 checked:bg-[var(--primary)] checked:border-[var(--primary)]
                 transition focus:outline-none focus:ring-2 focus:ring-[var(--primary)]
                 cursor-pointer" />
            <span class="text-sm">Catering Assistant / Refreshment Helper</span>
          </label>
              </div>
    </fieldset>


    <!-- Provided by the organiser -->
    <fieldset class="mb-6">
      <legend class="text-sm font-medium mb-2">Provided by the organiser</legend>
      <div class="grid grid-cols-1 gap-2">
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="accommodation"
              x-model="filters.provided"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)] checked:bg-[var(--primary)] checked:border-[var(--primary)] transition" />
            <span class="text-sm">Accommodation</span>
          </label>
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="catering"
              x-model="filters.provided"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)] checked:bg-[var(--primary)] checked:border-[var(--primary)] transition" />
            <span class="text-sm">Catering</span>
          </label>
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="transport"
              x-model="filters.provided"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)] checked:bg-[var(--primary)] checked:border-[var(--primary)] transition" />
            <span class="text-sm">Transport</span>
          </label>
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="gadgets"
              x-model="filters.provided"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)] checked:bg-[var(--primary)] checked:border-[var(--primary)] transition" />
            <span class="text-sm">Gadgets</span>
          </label>
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="insurance"
              x-model="filters.provided"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)] checked:bg-[var(--primary)] checked:border-[var(--primary)] transition" />
            <span class="text-sm">Volunteer Insurance</span>
          </label>
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="certificate"
              x-model="filters.provided"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)] checked:bg-[var(--primary)] checked:border-[var(--primary)] transition" />
            <span class="text-sm">Certificate of participation</span>
          </label>
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="training"
              x-model="filters.provided"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)] checked:bg-[var(--primary)] checked:border-[var(--primary)] transition" />
            <span class="text-sm">Introductory training</span>
          </label>
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="access"
              x-model="filters.provided"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)] checked:bg-[var(--primary)] checked:border-[var(--primary)] transition" />
            <span class="text-sm">Access to the event</span>
          </label>
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="gifts"
              x-model="filters.provided"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)] checked:bg-[var(--primary)] checked:border-[var(--primary)] transition" />
            <span class="text-sm">Small gifts or recognition rewards</span>
          </label>
                  <label class="inline-flex items-center space-x-2">
            <input
              type="checkbox"
              value="other"
              x-model="filters.provided"
              class="appearance-none h-6 w-6 border-2 border-[var(--primary)] checked:bg-[var(--primary)] checked:border-[var(--primary)] transition" />
            <span class="text-sm">Other</span>
          </label>
        

      </div>
    </fieldset>
  </div>

  <!-- Lista eventów -->
  <div class="space-y-12 mt-6">
            <div
                    <div
          x-data='{
    id:       297,
    title:    "Wiatrakowa 25, Warszawa – 2025-08-10T21:10",
    location: "Wiatrakowa 25, Warszawa",
    start:    "2025-08-10T21:10",
    end:      "2025-08-17T21:10",
    provided: ["insurance","certificate","training"],
    roles:    ["info_desk","greeter","guide"],
    excerpt: "",
    image:   "https://ahod-eu.com/wp-content/uploads/2025/07/blog_post3.jpg",
    recruitStart: "2025-08-02",
    recruitEnd:   "2025-08-08"
  }'
          x-show="matches($data)"
          class="flex flex-col md:flex-row bg-white">

          <div class="relative md:w-1/3 h-64 md:h-auto overflow-visible">
            <img width="545" height="385" src="https://ahod-eu.com/wp-content/uploads/2025/07/blog_post3.jpg" class="object-cover w-full h-full shadow-2xl wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://ahod-eu.com/wp-content/uploads/2025/07/blog_post3.jpg 545w, https://ahod-eu.com/wp-content/uploads/2025/07/blog_post3-300x212.jpg 300w" sizes="auto, (max-width: 545px) 100vw, 545px" />            <div class="absolute top-0 -right-4 w-[18px] h-[25px] bg-yellow-400"></div>
          </div>

          <div class="md:w-2/3 pl-10 pr-6 flex flex-col justify-between">
            <div>
              <div class="flex items-center justify-between mb-2">
      <!-- Tytuł -->
      <h2 class="text-[28px] md:text-[36px] font-bold uppercase leading-[110%]">
        Wiatrakowa 25, Warszawa – 2025-08-10T21:10      </h2>
      <!-- Przycisk ulubionych -->
      <img
    :src="isFav(id)
      ? '/wp-content/uploads/2025/07/star_filled.svg'
      : '/wp-content/uploads/2025/07/star.svg'"
    @click="toggleFav(id)"
    class="w-6 h-6 cursor-pointer"
    alt="Toggle favourite" />
    </div>
              <p class="font-normal text-[20px] md:text-[24px] mb-4"></p>
              <ul class="space-y-1 mb-4 gap-1">
                <li>
                  <strong class="text-[20px] md:text-[24px] text-[var(--primary)]">Event date:</strong><br>
                  10.08.2025 – 17.08.2025                </li>
                <li>
                  <strong class="text-[20px] md:text-[24px] text-[var(--green)]">Volunteers Recruitment:</strong><br>
                  02.08.2025 – 08.08.2025                </li>
                <li>
                  <strong class="text-[20px] md:text-[24px] text-[var(--hover)]">Localisation:</strong><br>
                  Wiatrakowa 25, Warszawa                </li>
                                  <li>
                    <strong class="text-[20px] md:text-[24px] text-[var(--primary)]">Organiser provides:</strong>
                    <ul class="ml-4 mt-1 space-y-2">
                                              <li class="flex items-start gap-2">
                          <img src="/wp-content/uploads/2025/07/triangle_down.svg" class="-rotate-90 w-3 h-3 mt-1" />
                          <span>Volunteer Insurance</span>
                        </li>
                                              <li class="flex items-start gap-2">
                          <img src="/wp-content/uploads/2025/07/triangle_down.svg" class="-rotate-90 w-3 h-3 mt-1" />
                          <span>Certificate of participation</span>
                        </li>
                                              <li class="flex items-start gap-2">
                          <img src="/wp-content/uploads/2025/07/triangle_down.svg" class="-rotate-90 w-3 h-3 mt-1" />
                          <span>Introductory training</span>
                        </li>
                                          </ul>
                  </li>
                              </ul>
            </div>
            <button
              @click="openApply($data)"
              class="mt-4 inline-block bg-[var(--primary)] text-white uppercase text-center py-2 px-6 rounded hover:bg-[var(--hover)] transition">
              Volunteer
            </button>

          </div>
        </div>
        </div>

</section>