---
import SecureLayout from '../../../layouts/SecureLayout.astro';
---

<SecureLayout title="New Lead - Black Canyon Tickets">
  <div class="container mx-auto px-4 py-12">
    <div class="max-w-4xl mx-auto">
      <div class="mb-8">
        <h1 class="text-3xl font-bold text-white mb-2">Add New Lead</h1>
        <p class="text-blue-100">Submit a new event lead to track and manage</p>
      </div>

      <form id="lead-form" class="space-y-8">
        <!-- Event Information -->
        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-8 border border-white/20">
          <h2 class="text-xl font-bold text-white mb-6">Event Information</h2>
          
          <div class="grid md:grid-cols-2 gap-6">
            <div>
              <label class="block text-white text-sm font-medium mb-2">Event Name *</label>
              <input type="text" id="event-name" required class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            
            <div>
              <label class="block text-white text-sm font-medium mb-2">Event Type</label>
              <select id="event-type" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">Select event type</option>
                <option value="wedding">Wedding</option>
                <option value="corporate">Corporate Event</option>
                <option value="festival">Festival</option>
                <option value="concert">Concert</option>
                <option value="gala">Gala</option>
                <option value="conference">Conference</option>
                <option value="other">Other</option>
              </select>
            </div>
            
            <div>
              <label class="block text-white text-sm font-medium mb-2">Event Date</label>
              <input type="date" id="event-date" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            
            <div>
              <label class="block text-white text-sm font-medium mb-2">Expected Attendance</label>
              <input type="number" id="expected-attendance" placeholder="e.g., 150" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
          </div>
          
          <div class="mt-6">
            <label class="block text-white text-sm font-medium mb-2">Venue</label>
            <input type="text" id="venue" placeholder="Event venue name" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
          </div>
          
          <div class="mt-6">
            <label class="block text-white text-sm font-medium mb-2">Event Description</label>
            <textarea id="event-description" rows="3" placeholder="Brief description of the event..." class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
          </div>
        </div>

        <!-- Organizer Contact -->
        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-8 border border-white/20">
          <h2 class="text-xl font-bold text-white mb-6">Organizer Contact</h2>
          
          <div class="grid md:grid-cols-2 gap-6">
            <div>
              <label class="block text-white text-sm font-medium mb-2">Full Name *</label>
              <input type="text" id="organizer-name" required class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            
            <div>
              <label class="block text-white text-sm font-medium mb-2">Email *</label>
              <input type="email" id="organizer-email" required class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            
            <div>
              <label class="block text-white text-sm font-medium mb-2">Phone</label>
              <input type="tel" id="organizer-phone" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            
            <div>
              <label class="block text-white text-sm font-medium mb-2">Title/Position</label>
              <input type="text" id="organizer-title" placeholder="e.g., Event Coordinator" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
          </div>
          
          <div class="mt-6">
            <label class="block text-white text-sm font-medium mb-2">Organization</label>
            <input type="text" id="organizer-organization" placeholder="Company or organization name" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
          </div>
        </div>

        <!-- Lead Status -->
        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-8 border border-white/20">
          <h2 class="text-xl font-bold text-white mb-6">Lead Status</h2>
          
          <div class="grid md:grid-cols-2 gap-6">
            <div>
              <label class="block text-white text-sm font-medium mb-2">Current Status</label>
              <select id="lead-status" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="cold">Cold Lead</option>
                <option value="contacted">Contacted</option>
                <option value="confirmed">Confirmed Interest</option>
                <option value="converted">Converted</option>
                <option value="dead">Dead Lead</option>
              </select>
            </div>
            
            <div>
              <label class="block text-white text-sm font-medium mb-2">Follow-up Date</label>
              <input type="date" id="follow-up-date" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
          </div>
          
          <div class="mt-6">
            <label class="block text-white text-sm font-medium mb-2">Notes</label>
            <textarea id="lead-notes" rows="4" placeholder="Add any relevant notes about this lead..." class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
          </div>
        </div>

        <!-- Submit Button -->
        <div class="flex justify-between">
          <a href="/territory-manager/leads" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-3 rounded-lg transition-colors duration-200">
            Cancel
          </a>
          <button type="submit" class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-300">
            Save Lead
          </button>
        </div>
      </form>
    </div>
  </div>

  <script>
    // TODO: Implement lead creation functionality
    // This is a scaffold - complete implementation needed
    
    document.getElementById('lead-form').addEventListener('submit', async (e) => {
      e.preventDefault();
      
      const formData = {
        event_name: document.getElementById('event-name').value,
        event_type: document.getElementById('event-type').value,
        event_date: document.getElementById('event-date').value,
        expected_attendance: document.getElementById('expected-attendance').value,
        venue: document.getElementById('venue').value,
        event_description: document.getElementById('event-description').value,
        organizer_contact: {
          name: document.getElementById('organizer-name').value,
          email: document.getElementById('organizer-email').value,
          phone: document.getElementById('organizer-phone').value,
          title: document.getElementById('organizer-title').value,
          organization: document.getElementById('organizer-organization').value
        },
        status: document.getElementById('lead-status').value,
        follow_up_date: document.getElementById('follow-up-date').value,
        notes: document.getElementById('lead-notes').value
      };
      
      try {
        // TODO: Implement API call to create lead
        console.log('Creating lead:', formData);
        
        // Placeholder success
        alert('Lead created successfully!');
        window.location.href = '/territory-manager/leads';
      } catch (error) {
        console.error('Error creating lead:', error);
        alert('Error creating lead. Please try again.');
      }
    });
  </script>
</SecureLayout>