@extends('admin.admin_dashboard')

@section('customcss')
  <style>
    body,
    .content-body,
    .card,
    th,
    td {
      color: #000000;
      font-size: 14px;
    }

    /* ================= Off Days Settings Page ================= */
    .settings-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 20px;
      border-radius: 10px;
      margin-bottom: 30px;
    }

    .settings-header h4 {
      margin: 0;
      font-size: 24px;
      font-weight: 700;
    }

    .settings-header p {
      margin: 5px 0 0 0;
      font-size: 14px;
      opacity: 0.9;
    }

    .settings-card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      padding: 30px;
    }

    .section-title {
      font-size: 18px;
      font-weight: 700;
      color: #333;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid #667eea;
    }

    .off-day-checkbox {
      display: flex;
      align-items: center;
      padding: 15px 20px;
      background: white;
      border: 2px solid #e9ecef;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      user-select: none;
      margin-bottom: 10px;
    }

    .off-day-checkbox:hover {
      border-color: #667eea;
      background-color: #f8f9ff;
      transform: translateX(5px);
    }

    .off-day-checkbox input[type="checkbox"] {
      margin-right: 12px;
      cursor: pointer;
      width: 20px;
      height: 20px;
      accent-color: #667eea;
    }

    .off-day-checkbox input[type="checkbox"]:checked + .off-day-label {
      color: #667eea;
      font-weight: 700;
    }

    .off-day-label {
      font-size: 16px;
      color: #333;
      transition: all 0.3s ease;
      flex: 1;
    }

    .off-day-badge {
      background: #dc3545;
      color: white;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .off-day-checkbox input[type="checkbox"]:checked ~ .off-day-badge {
      opacity: 1;
    }

    .save-button {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 12px 40px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 20px;
    }

    .save-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .save-button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .info-box {
      background: #e7f3ff;
      border-left: 4px solid #2196F3;
      padding: 15px;
      border-radius: 5px;
      margin-bottom: 20px;
    }

    .info-box i {
      color: #2196F3;
      margin-right: 10px;
    }

    .info-box p {
      margin: 0;
      color: #1976D2;
      font-size: 14px;
    }

    .days-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    @media (min-width: 768px) {
      .days-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  </style>
@endsection

@section('admin')
  <div class="content-body">
    <div class="container-fluid">
      
      <!-- Page Header -->
      <div class="settings-header">
        <h4>
          <i class="fas fa-calendar-times me-2"></i>
          Off Days Settings
        </h4>
        <p>Configure weekly off days for all class routines</p>
      </div>

      <!-- Settings Card -->
      <div class="row">
        <div class="col-lg-8 offset-lg-2">
          <div class="settings-card">
            
            <!-- Info Box -->
            <div class="info-box">
              <i class="fas fa-info-circle"></i>
              <p>
                <strong>Note:</strong> Selected days will be excluded from all class routine tables. 
                This setting applies globally to all routines in the system.
              </p>
            </div>

            <!-- Section Title -->
            <div class="section-title">
              <i class="fas fa-calendar-week me-2"></i>
              Select Off Days
            </div>

            <!-- Days Grid -->
            <div class="days-grid" id="offDaysContainer">
              <label class="off-day-checkbox">
                <input type="checkbox" value="1" class="off-day-input">
                <span class="off-day-label">
                  <i class="fas fa-calendar-day me-2"></i>
                  Saturday
                </span>
                <span class="off-day-badge">OFF DAY</span>
              </label>

              <label class="off-day-checkbox">
                <input type="checkbox" value="2" class="off-day-input">
                <span class="off-day-label">
                  <i class="fas fa-calendar-day me-2"></i>
                  Sunday
                </span>
                <span class="off-day-badge">OFF DAY</span>
              </label>

              <label class="off-day-checkbox">
                <input type="checkbox" value="3" class="off-day-input">
                <span class="off-day-label">
                  <i class="fas fa-calendar-day me-2"></i>
                  Monday
                </span>
                <span class="off-day-badge">OFF DAY</span>
              </label>

              <label class="off-day-checkbox">
                <input type="checkbox" value="4" class="off-day-input">
                <span class="off-day-label">
                  <i class="fas fa-calendar-day me-2"></i>
                  Tuesday
                </span>
                <span class="off-day-badge">OFF DAY</span>
              </label>

              <label class="off-day-checkbox">
                <input type="checkbox" value="5" class="off-day-input">
                <span class="off-day-label">
                  <i class="fas fa-calendar-day me-2"></i>
                  Wednesday
                </span>
                <span class="off-day-badge">OFF DAY</span>
              </label>

              <label class="off-day-checkbox">
                <input type="checkbox" value="6" class="off-day-input">
                <span class="off-day-label">
                  <i class="fas fa-calendar-day me-2"></i>
                  Thursday
                </span>
                <span class="off-day-badge">OFF DAY</span>
              </label>

              <label class="off-day-checkbox">
                <input type="checkbox" value="7" class="off-day-input">
                <span class="off-day-label">
                  <i class="fas fa-calendar-day me-2"></i>
                  Friday
                </span>
                <span class="off-day-badge">OFF DAY</span>
              </label>
            </div>

            <!-- Save Button -->
            <div class="text-center">
              <button id="saveOffDays" class="save-button">
                <i class="fas fa-save me-2"></i>
                Save Settings
              </button>
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>
@endsection

@section('customjs')
<script>
(function() {
  let offDays = [];

  // Toast notification
  function toast(msg, type = 'info') {
    const toastContainer = document.getElementById('toastContainer') || createToastContainer();
    const toastId = 'toast-' + Date.now();

    let bgClass = 'bg-info';
    let icon = 'fa-info-circle';
    if (type === 'success') { bgClass = 'bg-success'; icon = 'fa-check-circle'; }
    else if (type === 'danger') { bgClass = 'bg-danger'; icon = 'fa-exclamation-circle'; }
    else if (type === 'warning') { bgClass = 'bg-warning'; icon = 'fa-exclamation-triangle'; }

    const toastHTML = `
      <div id="${toastId}" class="toast align-items-center text-white ${bgClass} border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
          <div class="toast-body">
            <i class="fas ${icon} me-2"></i>${msg}
          </div>
          <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
      </div>
    `;
    toastContainer.insertAdjacentHTML('beforeend', toastHTML);

    const toastEl = document.getElementById(toastId);
    const bsToast = new bootstrap.Toast(toastEl, { delay: 3000 });
    bsToast.show();

    toastEl.addEventListener('hidden.bs.toast', function() { toastEl.remove(); });
  }

  function createToastContainer() {
    const container = document.createElement('div');
    container.id = 'toastContainer';
    container.className = 'toast-container position-fixed top-0 end-0 p-3';
    container.style.zIndex = '9999';
    document.body.appendChild(container);
    return container;
  }

  // Load off days from database
  async function loadOffDays() {
    try {
      const response = await fetch('{{ route("routine.getOffDays") }}', {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      });
      const data = await response.json();
      
      if (data.success) {
        offDays = data.off_days || [];
        // Update checkboxes
        document.querySelectorAll('.off-day-input').forEach(input => {
          input.checked = offDays.includes(Number(input.value));
        });
      }
    } catch (e) {
      console.error('Failed to load off days:', e);
      toast('Failed to load settings', 'danger');
    }
  }

  // Save off days to database
  async function saveOffDays() {
    const selectedDays = Array.from(document.querySelectorAll('.off-day-input:checked'))
      .map(input => Number(input.value));
    
    const btn = document.getElementById('saveOffDays');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';

    try {
      const response = await fetch('{{ route("routine.updateOffDays") }}', {
        method: 'POST',
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ off_days: selectedDays })
      });

      const data = await response.json();

      if (response.ok && data.success) {
        offDays = data.off_days || [];
        toast('Off days settings saved successfully!', 'success');
      } else {
        // Show detailed error message
        let errorMsg = data.message || 'Failed to save settings';
        if (data.error) {
          errorMsg += ': ' + data.error;
        }
        if (data.errors) {
          // Validation errors
          const validationErrors = Object.values(data.errors).flat().join(', ');
          errorMsg += ': ' + validationErrors;
        }
        toast(errorMsg, 'danger');
        console.error('Server response:', data);
      }
    } catch (e) {
      console.error('Failed to save off days:', e);
      toast('Network error: Failed to save settings', 'danger');
    } finally {
      btn.disabled = false;
      btn.innerHTML = '<i class="fas fa-save me-2"></i>Save Settings';
    }
  }

  // Initialize
  loadOffDays();

  // Save button click handler
  document.getElementById('saveOffDays').addEventListener('click', saveOffDays);

})();
</script>
@endsection