{% extends "layout.html.twig" %}

{% block title %}Ask for an Item - LocalLendables{% endblock %}

{% block content %}

<div class="container-fluid px-3 py-4">
  <!-- Header Section -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-start mb-3">
        <div class="d-flex align-items-start">
          <img src="/lendables/logo_asking_600.png" alt="Ask for Item" class="me-3" style="height: 100px;">
          <div>
            <h1 class="h3 mb-2 text-primary fw-bold onlycavolini headertitle">Ask for an Item</h1>
            <p class="text-muted mb-0">Request an item from your community</p>
          </div>
        </div>

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

  <div class="row justify-content-center">
    <div class="col-12 col-xl-10">
      <div class="card border-0 shadow-sm">
        <div class="card-body p-4">
          <form id="askItemForm">
            <div class="row">
              <!-- Left Column - Main Form (2/3 width) -->
              <div class="col-md-8">
                <!-- Item Title -->
                <div class="mb-4">
                  <label for="title" class="form-label fw-semibold">What are you looking for? <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="title" name="title" required
                         placeholder="What item do you need?">
                </div>

                <!-- Category -->
                <div class="mb-4">
                  <label for="category" class="form-label fw-semibold">Category <span class="text-danger">*</span></label>
                  <select class="form-select" id="category" name="category" required>
                    <option value="">Choose a category</option>
                    {% for category in categories %}
                    <option value="{{ category.category }}">{{ category.category }}</option>
                    {% endfor %}
                  </select>
                </div>

                <!-- Description -->
                <div class="mb-4">
                  <label for="description" class="form-label fw-semibold">Description <span class="text-danger">*</span></label>
                  <textarea class="form-control" id="description" name="description" rows="4" required
                            placeholder="Describe what you're looking for, what you need it for, and any specific requirements..."></textarea>
                  <div class="form-text">Details help community members understand exactly what you need.</div>
                </div>

                <!-- When Needed -->
                <div class="mb-4">
                  <label for="whenNeeded" class="form-label fw-semibold">When do you need it?</label>
                  <input type="text" class="form-control" id="whenNeeded" name="whenNeeded"
                         placeholder="e.g., This weekend, Next month, ASAP...">
                  <div class="form-text">Let others know your timeline</div>
                </div>

                <!-- Duration Needed -->
                <div class="mb-4">
                  <label for="durationNeeded" class="form-label fw-semibold">How long do you need it?</label>
                  <select class="form-select" id="durationNeeded" name="durationNeeded">
                    <option value="">Select duration</option>
                    <option value="few-hours">A few hours</option>
                    <option value="1-day">1 day</option>
                    <option value="few-days">A few days</option>
                    <option value="1-week">1 week</option>
                    <option value="few-weeks">A few weeks</option>
                    <option value="1-month">1 month</option>
                    <option value="flexible">Flexible</option>
                  </select>
                </div>

                <!-- Special Notes -->
                <div class="mb-4">
                  <label for="specialNotes" class="form-label fw-semibold">Special Notes</label>
                  <textarea class="form-control" id="specialNotes" name="specialNotes" rows="3"
                            placeholder="Any additional information, pickup preferences, or special requirements..."></textarea>
                  <div class="form-text">Add any additional details that might be helpful</div>
                </div>
              </div>

              <!-- Right Column - Preview & Settings (1/3 width) -->
              <div class="col-md-4">
                <!-- Request Preview -->
                <div class="mb-4">
                  <label class="form-label fw-semibold">Request Preview</label>
                  <div class="card border-2 border-dashed border-secondary bg-light">
                    <div class="card-body text-center p-4">
                      <img src="/lendables/logo_asking_600.png" alt="Request" class="mb-3" style="height: 80px;">
                      <h6 class="card-title text-muted">Your Request</h6>
                      <p class="card-text small text-muted">All ask requests use the same icon to help community members quickly identify requests.</p>
                    </div>
                  </div>
                </div>

                <!-- Contact Preferences -->
                <div class="mb-4">
                  <label class="form-label fw-semibold">Contact Preferences</label>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="allowChat" name="allowChat" checked>
                    <label class="form-check-label" for="allowChat">
                      Allow chat messages
                    </label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="publicRequest" name="publicRequest" checked>
                    <label class="form-check-label" for="publicRequest">
                      Make this request visible to all community members
                    </label>
                  </div>
                </div>

                <!-- Urgency Level -->
                <div class="mb-4">
                  <label for="urgency" class="form-label fw-semibold">Urgency Level</label>
                  <select class="form-select" id="urgency" name="urgency">
                    <option value="low">Low - No rush</option>
                    <option value="medium" selected>Medium - Would be nice to have soon</option>
                    <option value="high">High - Need it soon</option>
                    <option value="urgent">Urgent - Need it ASAP</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- Submit Button -->
            <div class="row">
              <div class="col-12">
                <hr class="my-4">
                <div class="d-flex justify-content-between align-items-center">
                  <div class="form-text">
                    <i class="fas fa-info-circle me-1"></i>
                    Your request will be visible to community members who can help.
                  </div>
                  <div class="d-flex gap-2">
                    <a href="/dashboard" class="btn btn-outline-secondary">Cancel</a>
                    <button type="submit" class="btn btn-primary px-4">
                      <i class="fas fa-paper-plane me-2"></i>Submit Request
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Success Modal -->
<div class="modal fade" id="successModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header border-0 pb-0">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center py-4">
        <div class="mb-3">
          <i class="fas fa-check-circle text-success" style="font-size: 3rem;"></i>
        </div>
        <h5 class="modal-title mb-3">Request Submitted!</h5>
        <p class="text-muted mb-4">Your item request has been posted to the community. Members who have what you're looking for can reach out to you.</p>
        <div class="d-flex gap-2 justify-content-center">
          <a href="/dashboard" class="btn btn-primary">Go to Dashboard</a>
          <a href="/browse" class="btn btn-outline-primary">Browse Items</a>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
document.getElementById('askItemForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData();
    
    // Get all form values
    formData.append('title', document.getElementById('title').value);
    formData.append('category', document.getElementById('category').value);
    formData.append('description', document.getElementById('description').value);
    formData.append('whenNeeded', document.getElementById('whenNeeded').value);
    formData.append('durationNeeded', document.getElementById('durationNeeded').value);
    formData.append('specialNotes', document.getElementById('specialNotes').value);
    formData.append('allowChat', document.getElementById('allowChat').checked);
    formData.append('publicRequest', document.getElementById('publicRequest').checked);
    formData.append('urgency', document.getElementById('urgency').value);
    formData.append('type', 'request'); // Mark this as a request
    
    try {
        const response = await fetch('/api/requests', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: new URLSearchParams(formData)
        });
        
        const result = await response.json();
        
        if (result.success) {
            // Show success modal
            const successModal = new bootstrap.Modal(document.getElementById('successModal'));
            successModal.show();
        } else {
            LocalLendables.showToast('Error', 'Error submitting request: ' + (result.error || 'Unknown error'), 'error');
        }
    } catch (error) {
        console.error('Error:', error);
        LocalLendables.showToast('Error', 'Error submitting request. Please try again.', 'error');
    }
});
</script>

{% endblock %}