{% extends 'baseadmin.html.twig' %}

{% block title %}{{ parent() }} - Coupons{% endblock %}

{% block breadcrumb %}
{{ parent() }}
<li class="breadcrumb-item active">Coupons</li>
{% endblock %}

{% block content %}
<div class="container-fluid px-0">
  <style>
    .coupon-row {
      transition: background-color 0.3s ease;
    }
    .coupon-row:hover {
      background-color: rgba(255, 255, 255, 0.05);
    }

    .coupon-row .coupon-delete-btn {
      opacity: 0;
      transition: opacity 0.1s ease;
    }
    .coupon-row:hover .coupon-delete-btn {
      opacity: 1;
    }
  </style>

  <!-- Page Heading -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0 text-light">Coupon Management</h1>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createCouponModal">
      <i class="fas fa-plus me-2"></i>Create New Coupon
    </button>
  </div>

  <!-- Coupon List Card -->
  <div class="card shadow mb-4">
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
      <h6 class="m-0 font-weight-bold text-light">Existing Coupons</h6>
      <div class="input-group" style="width: 300px">
        <input type="text" class="form-control" id="coupon-search" placeholder="Search coupons...">
        <button class="btn btn-outline-secondary" type="button"><i class="fas fa-search"></i></button>
      </div>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover mb-0" id="coupon-list">
          <thead>
            <tr>
              <th class="px-4"><i class="fas fa-tag me-2"></i>Code</th>
              <th><i class="fas fa-dollar-sign me-2"></i>Value</th>
              <th><i class="fas fa-calendar-alt me-2"></i>Created</th>
              <th><i class="fas fa-hourglass-half me-2"></i>Expiry</th>
              <th><i class="fas fa-question-circle me-2"></i>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody id="coupons-table-body">
            <tr>
              <td colspan="7" class="text-center py-4 pe-none" id="loadingMessage">
                <div class="spinner-border text-primary" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
                <p class="text-muted mt-3">Loading coupons...</p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Create Coupon Modal -->
<div class="modal fade" id="createCouponModal" tabindex="-1" aria-labelledby="createCouponModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="createCouponModalLabel">Create New Coupon</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="create-coupon-form" class="needs-validation" novalidate>
          <div class="mb-3">
            <label for="coupon-code" class="form-label">Coupon Code</label>
            <div class="input-group">
              <span class="input-group-text"><i class="fas fa-tag"></i></span>
              <input type="text" class="form-control" id="coupon-code" name="code" placeholder="e.g. SUMMER25" required>
              <button type="button" class="btn btn-outline-secondary" id="generate-code">Generate</button>
            </div>
            <div class="form-text">Enter a unique code or generate automatically</div>
          </div>
          <div class="row mb-3">
            <div class="col">
              <label for="coupon-amount" class="form-label">Value</label>
              <div class="input-group">
                <select name="type" id="coupon-type" class="form-select" required>
                  <option value="fixed">Fixed Amount ($)</option>
                  <option value="percent">Percentage (%)</option>
                </select>
                <input type="number" class="form-control" id="coupon-amount" name="amount" placeholder="10" step="0.01" min="0" required>
              </div>
            </div>
          </div>
          <div class="mb-3">
            <label for="coupon-limit" class="form-label">Usage Limit</label>
            <div class="input-group">
              <span class="input-group-text"><i class="fas fa-redo"></i></span>
              <input type="number" class="form-control" id="coupon-limit" name="limit" placeholder="Unlimited" min="1" value="">
            </div>
            <div class="form-text">How many times this coupon can be used (blank for unlimited)</div>
          </div>
          <div class="mb-3">
            <label class="form-label">Expiration</label>
            <div class="input-group">
              <span class="input-group-text"><i class="fas fa-calendar"></i></span>
              <input type="date" class="form-control" id="coupon-expiry" name="expiry">
            </div>
            <div class="form-text">Leave blank for no expiration</div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="submit" form="create-coupon-form" class="btn btn-primary">Create Coupon</button>
      </div>
    </div>
  </div>
</div>

<!-- Edit Coupon Modal -->
<div class="modal fade" id="editCouponModal" tabindex="-1" aria-labelledby="editCouponModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editCouponModalLabel">Edit Coupon</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="edit-coupon-form" class="needs-validation" novalidate>
          <input type="hidden" id="edit-coupon-id" name="id">
          <div class="mb-3">
            <label for="edit-coupon-code" class="form-label">Coupon Code</label>
            <div class="input-group">
              <span class="input-group-text"><i class="fas fa-tag"></i></span>
              <input type="text" class="form-control" id="edit-coupon-code" name="code" placeholder="e.g. SUMMER25" readonly required>
            </div>
          </div>
          <div class="row mb-3">
            <div class="col">
              <label for="edit-coupon-amount" class="form-label">Value</label>
              <div class="input-group">
                <select name="type" id="edit-coupon-type" class="form-select" required>
                  <option value="fixed">Fixed Amount ($)</option>
                  <option value="percent">Percentage (%)</option>
                </select>
                <input type="number" class="form-control" id="edit-coupon-amount" name="amount" placeholder="10" step="0.01" min="0" required>
              </div>
            </div>
          </div>
          <div class="mb-3">
            <label for="edit-coupon-limit" class="form-label">Usage Limit</label>
            <div class="input-group">
              <span class="input-group-text"><i class="fas fa-redo"></i></span>
              <input type="number" class="form-control" id="edit-coupon-limit" name="limit" placeholder="Unlimited" min="1">
            </div>
            <div class="form-text">How many times this coupon can be used (blank for unlimited)</div>
          </div>
          <div class="mb-3">
            <label class="form-label">Expiration</label>
            <div class="input-group">
              <span class="input-group-text"><i class="fas fa-calendar"></i></span>
              <input type="date" class="form-control" id="edit-coupon-expiry" name="expiry">
            </div>
            <div class="form-text">Leave blank for no expiration</div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="submit" form="edit-coupon-form" class="btn btn-primary">Update Coupon</button>
      </div>
    </div>
  </div>
</div>

<script>
async function editCoupon(id) {
  try {
    // Show loading state
    const editBtn = document.querySelector(`tr[data-id="${id}"] .btn-outline-primary`);
    editBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
    editBtn.disabled = true;
    
    // Fetch the coupon data
    const res = await fetch(`/admin/coupons/get?coupon=${id}`);
    
    if (!res.ok) {
      throw new Error('Failed to fetch coupon details');
    }
    
    const coupon = await res.json();
    
    // Fill the form with coupon data
    const form = document.getElementById('edit-coupon-form');
    form.id.value = coupon.id;
    form.code.value = coupon.code;
    form.type.value = coupon.type;
    form.amount.value = coupon.amount;
    form.limit.value = coupon.max_redemptions || '';
    form.expiry.value = coupon.valid_to || '';
    
    // Show the modal
    const modal = new bootstrap.Modal(document.getElementById('editCouponModal'));
    modal.show();
  } catch (error) {
    Toast.fire({
      icon: 'error',
      title: `${error.message || 'Failed to load coupon details'}. Errors can occur if there's a network issue or if your session has expired. Please refresh the page and try again.`
    });
  } finally {
    // Reset button state
    const editBtn = document.querySelector(`tr[data-id="${id}"] .btn-outline-primary`);
    editBtn.innerHTML = '<i class="fas fa-edit"></i>';
    editBtn.disabled = false;
  }
}

document.addEventListener('DOMContentLoaded', function() {
  // Initialize the edit coupon form
  const editForm = document.getElementById('edit-coupon-form');
  
  // Edit form submission
  editForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    // Basic form validation
    if (!editForm.checkValidity()) {
      e.stopPropagation();
      editForm.classList.add('was-validated');
      return;
    }
    
    const id = editForm.id.value;
    const code = editForm.code.value.trim();
    const amount = parseFloat(editForm.amount.value);
    const type = editForm.type.value;
    const limit = editForm.limit.value ? parseInt(editForm.limit.value) : null;
    const expiry = editForm.expiry.value || null;

    try {
      // Show loading state
      const submitBtn = document.querySelector('[form="edit-coupon-form"]');
      const originalText = submitBtn.innerHTML;
      submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Updating...';
      submitBtn.disabled = true;
      
      const res = await fetch(`/admin/coupons/update`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code, amount, type, limit, expiry })
      });

      if (res.ok) {
        // Success notification
        const modal = bootstrap.Modal.getInstance(document.getElementById('editCouponModal'));
        modal.hide();
        editForm.reset();
        
        Toast.fire({
          icon: 'success',
          title: `Coupon ${code} updated successfully!`
        });
        
        loadCoupons();
      } else {
        const error = await res.json();
        throw new Error(error.message || 'Failed to update coupon');
      }
    } catch (error) {
      Toast.fire({
        icon: 'error',
        title: error.message || 'Failed to update coupon'
      });
    } finally {
      // Reset button state
      const submitBtn = document.querySelector('[form="edit-coupon-form"]');
      submitBtn.innerHTML = 'Update Coupon';
      submitBtn.disabled = false;
    }
  });


  // Initialize the create coupon form
  const form = document.getElementById('create-coupon-form');
  
  // Generate random coupon code
  document.getElementById('generate-code').addEventListener('click', function() {
    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
    let code = '';
    for (let i = 0; i < 8; i++) {
      code += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    document.getElementById('coupon-code').value = code;
  });
  
  // Form submission
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    // Basic form validation
    if (!form.checkValidity()) {
      e.stopPropagation();
      form.classList.add('was-validated');
      return;
    }
    
    const code = form.code.value.trim();
    const amount = parseFloat(form.amount.value);
    const type = form.type.value;
    const limit = form.limit.value ? parseInt(form.limit.value) : null;
    const expiry = form.expiry.value || null;

    try {
      // Show loading state
      const submitBtn = document.querySelector('[form="create-coupon-form"]');
      const originalText = submitBtn.innerHTML;
      submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Creating...';
      submitBtn.disabled = true;
      
      const res = await fetch('/admin/coupons/create', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code, amount, type, limit, expiry })
      });

      if (res.ok) {
        // Success notification
        const modal = bootstrap.Modal.getInstance(document.getElementById('createCouponModal'));
        modal.hide();
        form.reset();
        
        Toast.fire({
          icon: 'success',
          title: `Coupon ${code} created successfully!`
        });
        
        loadCoupons();
      } else {
        const error = await res.json();
        throw new Error(error.message || 'Failed to create coupon');
      }
    } catch (error) {
      Toast.fire({
        icon: 'error',
        title: error.message || 'Failed to create coupon'
      });
    } finally {
      // Reset button state
      const submitBtn = document.querySelector('[form="create-coupon-form"]');
      submitBtn.innerHTML = 'Create Coupon';
      submitBtn.disabled = false;
    }
  });
  
  // Search functionality
  document.getElementById('coupon-search').addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    const rows = document.querySelectorAll('#coupons-table-body tr');
    
    rows.forEach(row => {
      const code = row.querySelector('td:first-child')?.textContent.toLowerCase();
      if (code && code.includes(searchTerm)) {
        row.style.display = '';
      } else {
        row.style.display = 'none';
      }
    });
  });
  
  // Load coupons on page load
  loadCoupons();
});

async function loadCoupons() {
  try {
    const res = await fetch('/admin/coupons/list');
    
    if (!res.ok) {
      throw new Error('Failed to fetch coupons');
    }
    
    const data = await res.json();
    const tbody = document.getElementById('coupons-table-body');
    tbody.innerHTML = '';
        
    if (data.length === 0) {
      tbody.innerHTML = `
        <tr>
          <td colspan="7" class="text-center py-4 pe-none">
            <div class="text-muted">
              <i class="fas fa-ticket-alt fa-3x mb-3"></i>
              <p>No coupons found. Create your first coupon to get started.</p>
            </div>
          </td>
        </tr>`;
      return;
    }
    
    data.forEach(c => {
      // coupon data: [{ "id": "PxBDg5Iw", "object": "coupon", "amount_off": null, "created": 1714934476, "currency": null, "duration": "once", "duration_in_months": null, "livemode": false, "max_redemptions": null, "metadata": [], "name": "First purchase discount", "percent_off": 10, "redeem_by": null, "times_redeemed": 3, "valid": true }, ...]

      // commented out as this is for the old coupon system
      // const createdDate = new Date(c.created_at || Date.now()).toLocaleDateString();
      // const statusClass = c.used ? 'danger' : (c.expired ? 'warning' : 'success');
      // const statusText = c.used ? 'Used' : (c.expired ? 'Expired' : 'Active');
      
      // // Calculate expiration time
      // let expiresText = '';
      // let expiresClass = '';
      
      // if (c.valid_to) {
      //   const now = new Date();
      //   const expiryDate = new Date(c.valid_to);
        
      //   if (expiryDate < now) {
      //     const diffTime = Math.abs(expiryDate - now);
      //     const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
          
      //     if (diffDays == 1) {
      //       // Less than a day
      //       const diffHours = Math.ceil(diffTime / (1000 * 60 * 60));
      //       expiresText = `Today`;
      //       expiresClass = 'text-danger';
      //     } else if (diffDays < 3) {
      //       expiresText = `${diffDays}d ago`;
      //       expiresClass = 'text-danger';
      //     } else if (diffDays < 14) {
      //       expiresText = `${diffDays}d ago`;
      //       expiresClass = 'text-danger';
      //     } else {
      //       expiresText = `${Math.floor(diffDays / 7)}w ago`;
      //       expiresClass = 'text-danger';
      //     }
      //   } else {
      //     const diffTime = Math.abs(expiryDate - now);
      //     const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
          
      //     if (diffDays < 1) {
      //       // Less than a day
      //       const diffHours = Math.ceil(diffTime / (1000 * 60 * 60));
      //       expiresText = `${diffHours}h left`;
      //       expiresClass = 'text-danger';
      //     } else if (diffDays < 3) {
      //       expiresText = `${diffDays}h left`;
      //       expiresClass = 'text-warning';
      //     } else if (diffDays < 14) {
      //       expiresText = `${diffDays}d left`;
      //       expiresClass = 'text-info';
      //     } else {
      //       expiresText = `${Math.floor(diffDays / 7)}w`;
      //       expiresClass = '';
      //     }
      //   }
      // } else {
      //   expiresText = 'Indefinite';
      //   expiresClass = 'text-muted';
      // }
      
      // tbody.innerHTML += `
      //   <tr data-id="${c.id}">
      //     <td class="px-4">
      //       <span class="fw-bold">${c.code}</span>
      //     </td>
      //     <td>
      //       <span class="badge bg-${c.type === 'percent' ? 'info' : 'secondary'} bg-opacity-75">
      //         ${c.type === 'percent' ? `${c.amount}%` : `$${c.amount.toFixed(2)}`}
      //       </span>
      //     </td>
      //     <td>${c.type === 'percent' ? 'Percentage' : 'Fixed Amount'}</td>
      //     <td>${createdDate}</td>
      //     <td>
      //       <span class="${expiresClass}">${expiresText}</span>
      //     </td>
      //     <td>
      //       <span class="badge bg-${statusClass}">${statusText}</span>
      //     </td>
      //     <td class="text-end pe-4">
      //       <div class="btn-group btn-group-sm">
      //         <button type="button" class="btn btn-outline-primary" onclick="editCoupon('${c.id}')">
      //           <i class="fas fa-edit"></i>
      //         </button>
      //         <button type="button" class="btn btn-outline-danger" onclick="deleteCoupon('${c.id}')">
      //           <i class="fas fa-trash"></i>
      //         </button>
      //       </div>
      //     </td>
      //   </tr>`;

      // new stripe system
      const createdDate = new Date(c.created * 1000).toLocaleDateString();
      const statusClass = c.valid ? 'success' : 'danger';
      const statusText = c.valid ? 'Active' : 'Inactive';
      const usageText = c.max_redemptions ? `${c.times_redeemed}/${c.max_redemptions}` : `${c.times_redeemed}/∞`;
      const expiresText = c.redeem_by ? new Date(c.redeem_by * 1000).toLocaleDateString() : 'Until Deleted';
        
      tbody.innerHTML += `
        <tr data-id="${c.id}" class="coupon-row">
          <td class="px-4">
            <span class="fw-bold">${c.id}</span>
          </td>
          <td>
            <span class="badge bg-primary bg-opacity-75">
              ${c.percent_off ? `${c.percent_off}% off` : `-$${(c.amount_off / 100).toFixed(2)}`}
            </span>
          </td>
          <td>${createdDate}</td>
          <td>${expiresText}</td>
          <td>
            <span class="badge bg-${statusClass}">${statusText}</span>
            <span class="badge bg-secondary ms-2">${usageText}</span>
          </td>
          <td class="text-end pe-4">
            <div class="btn-group btn-group-sm">
              <button type="button" class="btn btn-outline-danger coupon-delete-btn" onclick="deleteCoupon('${c.id}')">
                <i class="fas fa-trash"></i>
              </button>
            </div>
          </td>
        </tr>`;
    });
    
  } catch (error) {
    console.error('Error loading coupons:', error);
    Toast.fire({
      icon: 'error',
      title: 'Failed to load coupons'
    });
    document.querySelector("#loadingMessage").innerHTML = `Failed to load coupons. Please refresh your page.`;
  }
}


function deleteCoupon(id) {
  Swal.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#dc3545',
    cancelButtonColor: '#6c757d',
    confirmButtonText: 'Yes, delete it!'
  }).then(async (result) => {
    if (result.isConfirmed) {
      try {
        const res = await fetch(`/admin/coupons/delete?coupon=${id}`, {
          method: 'DELETE'
        });
        
        if (res.ok) {
          document.querySelector(`tr[data-id="${id}"]`).remove();
          loadCoupons(); // Refresh stats
          
          Toast.fire({
            icon: 'success',
            title: 'Coupon deleted successfully'
          });
        } else {
          throw new Error('Failed to delete coupon');
        }
      } catch (error) {
        Toast.fire({
          icon: 'error',
          title: error.message || 'Failed to delete coupon'
        });
      }
    }
  });
}
</script>
{% endblock %}