{% extends 'public_frontend/base.html' %}
{% block title %}Request Pickup{% endblock %}
{% block content %}
<h1 class="text-xl font-semibold mb-4">Request a Pickup</h1>
<form method="post" class="bg-white rounded shadow p-4 grid gap-4">
  {% csrf_token %}
  <div>
    <label class="block text-sm font-medium mb-1">Name</label>
    <input type="text" name="name" value="{{ form.name.value|default:'' }}" required class="w-full border rounded px-3 py-2">
    {% if form.name.errors %}<p class="text-red-600 text-sm">{{ form.name.errors.0 }}</p>{% endif %}
  </div>
  <div class="grid md:grid-cols-2 gap-4">
    <div>
      <label class="block text-sm font-medium mb-1">Email</label>
      <input type="email" name="email" value="{{ form.email.value|default:'' }}" class="w-full border rounded px-3 py-2">
    </div>
    <div>
      <label class="block text-sm font-medium mb-1">Phone</label>
      <input type="text" name="phone" value="{{ form.phone.value|default:'' }}" class="w-full border rounded px-3 py-2">
    </div>
  </div>
  <div>
    <label class="block text-sm font-medium mb-1">Pickup Address</label>
    <textarea name="address" required class="w-full border rounded px-3 py-2" rows="3">{{ form.address.value|default:'' }}</textarea>
    {% if form.address.errors %}<p class="text-red-600 text-sm">{{ form.address.errors.0 }}</p>{% endif %}
  </div>
  <div class="grid md:grid-cols-2 gap-4">
    <div>
      <label class="block text-sm font-medium mb-1">Preferred Date/Time</label>
      <input type="datetime-local" name="preferred_at" value="{{ form.preferred_at.value|default:'' }}" class="w-full border rounded px-3 py-2">
    </div>
  </div>
  <div>
    <label class="block text-sm font-medium mb-1">Materials / Notes</label>
    <textarea name="materials" class="w-full border rounded px-3 py-2" rows="4">{{ form.materials.value|default:'' }}</textarea>
  </div>
  <div>
    <button class="btn-primary" type="submit">Submit Request</button>
  </div>
</form>
<style>.btn-primary{background:#1d4ed8;color:white;padding:.5rem .75rem;border-radius:.375rem}</style>
{% endblock %}

