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

{% block title %}New Hosted Site{% endblock %}

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

{% block content %}
{{ page_header('New Hosted Site', back_url='/admin/hosting/sites', back_label='Back') }}

<div class="max-w-2xl mx-auto">
    <div class="px-4 py-5 sm:p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <div class="space-y-5">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                    Business Name <span class="text-red-500">*</span>
                </label>
                <input type="text" x-model="form.business_name" placeholder="Acme Luxembourg SARL" autofocus
                       class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray dark:bg-gray-700 dark:text-gray-300">
            </div>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Contact Name</label>
                    <input type="text" x-model="form.contact_name" placeholder="Jean Dupont"
                           class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray dark:bg-gray-700 dark:text-gray-300">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Contact Email</label>
                    <input type="email" x-model="form.contact_email" placeholder="contact@acme.lu"
                           class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray dark:bg-gray-700 dark:text-gray-300">
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Contact Phone</label>
                <input type="tel" x-model="form.contact_phone" placeholder="+352 ..."
                       class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray dark:bg-gray-700 dark:text-gray-300">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Internal Notes</label>
                <textarea x-model="form.internal_notes" rows="3" placeholder="Any internal notes..."
                          class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray dark:bg-gray-700 dark:text-gray-300"></textarea>
            </div>

            <!-- Prospect Selector -->
            <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Create from Prospect (optional)</label>
                <div class="flex mt-1 space-x-2">
                    <input type="number" x-model="prospectId" placeholder="Prospect ID" {# noqa: FE008 - prospect ID input #}
                           class="flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray dark:bg-gray-700 dark:text-gray-300">
                    <button type="button" @click="createFromProspect()"
                            :disabled="!prospectId || creating"
                            class="inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-teal-600 border border-transparent rounded-lg hover:bg-teal-700 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed">
                        Create from Prospect
                    </button>
                </div>
            </div>
        </div>

        <!-- Footer Actions -->
        <div class="flex flex-col sm:flex-row justify-end mt-8 pt-4 border-t border-gray-200 dark:border-gray-700 gap-3">
            <a href="/admin/hosting/sites"
               class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                Cancel
            </a>
            <button type="button" @click="createSite()"
                    :disabled="!form.business_name || creating"
                    class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-teal-600 border border-transparent rounded-lg hover:bg-teal-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed">
                <span x-show="!creating" x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
                <span x-show="creating" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                <span x-text="creating ? 'Creating...' : 'Create Site'"></span>
            </button>
        </div>

        <div x-show="errorMsg" class="mt-4 p-3 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-900 dark:text-red-300" x-text="errorMsg"></div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function hostingSiteNew() {
    return {
        ...data(),
        currentPage: 'hosting-sites',
        form: { business_name: '', contact_name: '', contact_email: '', contact_phone: '', internal_notes: '' },
        prospectId: '',
        creating: false,
        errorMsg: '',
        async createSite() {
            this.creating = true;
            this.errorMsg = '';
            try {
                const site = await apiClient.post('/admin/hosting/sites', this.form);
                window.location.href = '/admin/hosting/sites/' + site.id;
            } catch (e) {
                this.errorMsg = e.message || 'Failed to create site';
            } finally {
                this.creating = false;
            }
        },
        async createFromProspect() {
            this.creating = true;
            this.errorMsg = '';
            try {
                const site = await apiClient.post('/admin/hosting/sites/from-prospect/' + this.prospectId);
                window.location.href = '/admin/hosting/sites/' + site.id;
            } catch (e) {
                this.errorMsg = e.message || 'Failed to create from prospect';
            } finally {
                this.creating = false;
            }
        },
    };
}
</script>
{% endblock %}
