orion/app/modules/prospecting/templates/prospecting/admin/capture.html

{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import page_header %}
{% from 'shared/macros/alerts.html' import loading_state %}

{% block title %}Quick Capture{% endblock %}

{% block alpine_data %}quickCapture(){% endblock %}

{% block content %}
{{ page_header('Quick Capture') }}

<div class="max-w-lg mx-auto">
    <!-- Success Message -->
    <div x-show="saved" x-transition
         class="mb-4 p-4 bg-green-100 text-green-700 rounded-lg dark:bg-green-900 dark:text-green-300">
        <span x-html="$icon('check-circle', 'w-5 h-5 inline mr-2')"></span>
        <span x-text="'Prospect saved: ' + lastSaved"></span>
    </div>

    <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800 space-y-5">
        <!-- Business Name -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Business Name *</label>
            <input type="text" x-model="form.business_name" required autofocus
                   class="w-full text-base rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:border-purple-400 focus:ring-purple-300 py-3">
        </div>

        <!-- Phone + Email Row -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone</label>
                <input type="tel" x-model="form.phone" placeholder="+352..."
                       class="w-full text-base rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 py-3">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
                <input type="email" x-model="form.email" placeholder="contact@..."
                       class="w-full text-base rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 py-3">
            </div>
        </div>

        <!-- Address -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>
            <input type="text" x-model="form.address"
                   class="w-full text-base rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 py-3">
        </div>

        <!-- City + Postal Code -->
        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label>
                <input type="text" x-model="form.city" placeholder="Luxembourg"
                       class="w-full text-base rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 py-3">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Postal Code</label>
                <input type="text" x-model="form.postal_code"
                       class="w-full text-base rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 py-3">
            </div>
        </div>

        <!-- Source -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Source</label>
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
                <template x-for="src in sources" :key="src.value">
                    <button @click="form.source = src.value"
                            :class="form.source === src.value ? 'bg-purple-600 text-white border-purple-600' : 'bg-white text-gray-700 border-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600'"
                            class="px-3 py-2 text-sm font-medium rounded-lg border"
                            x-text="src.label"></button>
                </template>
            </div>
        </div>

        <!-- Tags -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tags</label>
            <div class="flex flex-wrap gap-2">
                <template x-for="tag in availableTags" :key="tag">
                    <button @click="toggleTag(tag)"
                            :class="form.tags.includes(tag) ? 'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-900 dark:text-purple-300' : 'bg-gray-100 text-gray-600 border-gray-200 dark:bg-gray-700 dark:text-gray-400'"
                            class="px-3 py-1.5 text-xs font-medium rounded-full border"
                            x-text="tag"></button>
                </template>
            </div>
        </div>

        <!-- Notes -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Notes</label>
            <textarea x-model="form.notes" rows="3" placeholder="Quick notes..."
                      class="w-full text-base rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 py-3"></textarea>
        </div>

        <!-- Location -->
        <div class="flex items-center space-x-3">
            <button @click="getLocation()"
                    :disabled="gettingLocation"
                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:bg-gray-700 disabled:opacity-50">
                <span x-html="$icon('location-marker', 'w-4 h-4 mr-2')"></span>
                <span x-text="gettingLocation ? 'Getting location...' : (form.location_lat ? 'Location saved' : 'Get Location')"></span>
            </button>
            <span x-show="form.location_lat" class="text-xs text-green-600">
                <span x-text="form.location_lat?.toFixed(4)"></span>, <span x-text="form.location_lng?.toFixed(4)"></span>
            </span>
        </div>

        <!-- Submit -->
        <button @click="submitCapture()"
                :disabled="submitting || !form.business_name"
                class="w-full px-6 py-4 text-lg font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50 active:bg-purple-800">
            <span x-show="!submitting">Save & Capture Next</span>
            <span x-show="submitting">Saving...</span>
        </button>
    </div>

    <!-- Recent Captures -->
    <div x-show="recentCaptures.length > 0" class="mt-6">
        <h3 class="text-sm font-semibold text-gray-600 dark:text-gray-400 mb-2">
            Recent Captures (<span x-text="recentCaptures.length"></span>)
        </h3>
        <div class="space-y-2">
            <template x-for="cap in recentCaptures" :key="cap.id">
                <div class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm dark:bg-gray-800">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300" x-text="cap.business_name"></span>
                    <span class="text-xs text-gray-500" x-text="cap.city || cap.source"></span>
                </div>
            </template>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script defer src="{{ url_for('prospecting_static', path='admin/js/capture.js') }}"></script>
{% endblock %}