<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Admin Exhibition Settings</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="/css/style.css">
  <style>
    .form-container { max-width: 600px; margin: 50px auto; padding: 20px; }
    .error-message { color: red; font-size: 0.9em; }
    .success-message { color: green; font-size: 0.9em; }
    .form-group { margin-bottom: 15px; }
    label { display: block; margin-bottom: 5px; }
    input[type="datetime-local"] { width: 100%; padding: 8px; }
    button { padding: 10px 20px; background: #3399cc; color: white; border: none; cursor: pointer; }
    button:disabled { background: #ccc; cursor: not-allowed; }
  </style>
</head>
<body>
  <div class="form-container">
    <h2>Exhibition Settings</h2>
    <form id="exhibitionSettingsForm">
      <div class="form-group">
        <label for="start_datetime">Start Date & Time</label>
        <input type="datetime-local" id="start_datetime" name="start_datetime" required>
        <span id="start_datetime_error" class="error-message"></span>
      </div>
      <div class="form-group">
        <label for="end_datetime">End Date & Time</label>
        <input type="datetime-local" id="end_datetime" name="end_datetime" required>
        <span id="end_datetime_error" class="error-message"></span>
      </div>
      <button type="submit" id="submitSettings">Save Settings</button>
      <span id="form_message" class="success-message"></span>
    </form>
  </div>

  <script>
    $(document).ready(function() {
      $.get('/api/exhibition-settings', function(data) {
        if (data.start_datetime && data.end_datetime) {
          $('#start_datetime').val(data.start_datetime.slice(0, 16));
          $('#end_datetime').val(data.end_datetime.slice(0, 16));
        }
      }).fail(function(err) {
        $('#form_message').removeClass('success-message').addClass('error-message').text('Error loading settings');
      });

      $('#exhibitionSettingsForm').submit(function(e) {
        e.preventDefault();
        let isValid = true;

        const start = $('#start_datetime').val();
        const end = $('#end_datetime').val();
        const now = new Date().toISOString().slice(0, 16);

        $('#start_datetime_error').text('');
        $('#end_datetime_error').text('');

        if (!start || start < now) {
          $('#start_datetime_error').text('Start date/time must be in the future');
          isValid = false;
        }

        if (!end || end <= start) {
          $('#end_datetime_error').text('End date/time must be after start date/time');
          isValid = false;
        }

        if (!isValid) return;

        $.ajax({
          url: '/api/exhibition-settings',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify({ start_datetime: start, end_datetime: end }),
          success: function(response) {
            $('#form_message').removeClass('error-message').addClass('success-message').text('Settings saved successfully');
            setTimeout(() => $('#form_message').text(''), 3000);
          },
          error: function(err) {
            $('#form_message').removeClass('success-message').addClass('error-message').text('Error saving settings');
          }
        });
      });
    });
  </script>
</body>
</html>