feat: redesign tickets main view and basket view with improved styles and layout

- Updated SCSS for tickets main view and basket view, enhancing visual design and responsiveness.
- Added new calendar functionality in the admin panel for managing ticket availability.
- Implemented error handling for ticket availability in the basket view.
- Introduced a new calendar availability table in the database for tracking ticket dates.
- Added a new link to the calendar in the logged-in user navigation.
- Improved ticket selection logic to disable unavailable tickets in the main view.
- Created guidelines for code standards in AGENTS.md.

templates/admin-panel/calendar.php

@@ -0,0 +1,167 @@
+<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/pl.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+
+<div id="tickets-calendar-admin">
+  <div class="container">
+    <div class="tickets-orders">
+      <h1>Kalendarz</h1>
+
+      <div class="calendar-controls">
+        <div class="mb-3">
+          <label for="ticket_group" class="form-label"><strong>Rodzaj biletu</strong></label>
+          <select id="ticket_group" class="form-select">
+            <?php foreach ($this->calendar_groups as $groupKey => $groupData) : ?>
+              <option value="<?= htmlspecialchars($groupKey, ENT_QUOTES, 'UTF-8'); ?>">
+                <?= htmlspecialchars($groupData['label'], ENT_QUOTES, 'UTF-8'); ?>
+              </option>
+            <?php endforeach; ?>
+          </select>
+        </div>
+
+        <input type="hidden" id="calendar_csrf_token" value="<?= htmlspecialchars($this->csrf_token, ENT_QUOTES, 'UTF-8'); ?>">
+
+        <div id="admin-flatpickr"></div>
+
+        <div class="calendar-buttons mt-3">
+          <button type="button" class="btn btn-outline-success" id="enable-month">Odblokuj cały miesiąc</button>
+          <button type="button" class="btn btn-outline-danger" id="disable-month">Zablokuj cały miesiąc</button>
+          <button type="button" class="btn btn-primary" id="save-calendar">Zapisz</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script type="text/javascript">
+  $(function() {
+    let enabledDatesSet = new Set();
+
+    const calendarInstance = flatpickr("#admin-flatpickr", {
+      inline: true,
+      mode: "multiple",
+      dateFormat: "Y-m-d",
+      disableMobile: true,
+      locale: "pl",
+      onChange: function(selectedDates, dateStr, instance) {
+        syncSetWithPicker(instance);
+      }
+    });
+
+    function formatDateToYmd(dateObject) {
+      const year = dateObject.getFullYear();
+      const month = String(dateObject.getMonth() + 1).padStart(2, "0");
+      const day = String(dateObject.getDate()).padStart(2, "0");
+      return year + "-" + month + "-" + day;
+    }
+
+    function syncSetWithPicker(instance) {
+      enabledDatesSet = new Set(instance.selectedDates.map(function(dateObject) {
+        return formatDateToYmd(dateObject);
+      }));
+    }
+
+    function renderCurrentSetToPicker() {
+      calendarInstance.setDate(Array.from(enabledDatesSet), false, "Y-m-d");
+    }
+
+    function getCurrentGroup() {
+      return $('#ticket_group').val();
+    }
+
+    function handleError(message) {
+      if ($.alert) {
+        $.alert(message);
+      } else {
+        alert(message);
+      }
+    }
+
+    function fetchDatesForGroup() {
+      $.ajax({
+        type: 'POST',
+        cache: false,
+        url: '/apanel/calendar_dates/',
+        data: {
+          ticket_group: getCurrentGroup()
+        },
+        success: function(rawResponse) {
+          const response = $.parseJSON(rawResponse);
+          if (response.status !== 'ok') {
+            handleError(response.message || 'Nie udało się pobrać danych kalendarza.');
+            return;
+          }
+
+          enabledDatesSet = new Set(response.enabled_dates || []);
+          renderCurrentSetToPicker();
+        },
+        error: function() {
+          handleError('Błąd połączenia podczas pobierania kalendarza.');
+        }
+      });
+    }
+
+    function updateWholeMonth(enableMonth) {
+      const year = calendarInstance.currentYear;
+      const monthIndex = calendarInstance.currentMonth;
+      const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
+
+      for (let day = 1; day <= daysInMonth; day++) {
+        const dateObject = new Date(year, monthIndex, day);
+        const dateString = formatDateToYmd(dateObject);
+        if (enableMonth) {
+          enabledDatesSet.add(dateString);
+        } else {
+          enabledDatesSet.delete(dateString);
+        }
+      }
+
+      renderCurrentSetToPicker();
+    }
+
+    function saveCalendar() {
+      $.ajax({
+        type: 'POST',
+        cache: false,
+        url: '/apanel/calendar_save/',
+        data: {
+          ticket_group: getCurrentGroup(),
+          dates: Array.from(enabledDatesSet),
+          csrf_token: $('#calendar_csrf_token').val()
+        },
+        success: function(rawResponse) {
+          const response = $.parseJSON(rawResponse);
+          if (response.status !== 'ok') {
+            handleError(response.message || 'Nie udało się zapisać kalendarza.');
+            return;
+          }
+
+          if ($.alert) {
+            $.alert('Kalendarz został zapisany.');
+          }
+        },
+        error: function() {
+          handleError('Błąd połączenia podczas zapisu kalendarza.');
+        }
+      });
+    }
+
+    $('body').on('change', '#ticket_group', function() {
+      fetchDatesForGroup();
+    });
+
+    $('body').on('click', '#enable-month', function() {
+      updateWholeMonth(true);
+    });
+
+    $('body').on('click', '#disable-month', function() {
+      updateWholeMonth(false);
+    });
+
+    $('body').on('click', '#save-calendar', function() {
+      saveCalendar();
+    });
+
+    fetchDatesForGroup();
+  });
+</script>