{% extends "base/base.html" %}
{% load static %}

{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
.photo-preview {
    transition: all 0.3s ease;
}
.photo-preview.uploading {
    opacity: 0.5;
}
.photo-preview.error {
    border-color: red;
}
.photo-preview.success {
    border-color: green;
}
</style>
{% endblock %}

{% block content %}
<div class="container px-4 py-8 mx-auto">
    <div class="max-w-4xl mx-auto">
        <h1 class="mb-6 text-3xl font-bold">
            {% if is_edit %}Edit{% else %}Create{% endif %} Park
        </h1>

        <form method="post" enctype="multipart/form-data" class="space-y-6" x-data="parkFormData">
            {% csrf_token %}

            {# Basic Information #}
            <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <h2 class="mb-4 text-xl font-semibold">Basic Information</h2>
                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div class="col-span-2">
                        <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Name
                        </label>
                        {{ form.name }}
                    </div>
                    <div class="col-span-2">
                        <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Description
                        </label>
                        {{ form.description }}
                    </div>
                    <div>
                        <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Owner/Operator
                        </label>
                        {{ form.owner }}
                    </div>
                    <div>
                        <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Status
                        </label>
                        {{ form.status }}
                    </div>
                </div>
            </div>

            {# Location #}
            <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <h2 class="mb-4 text-xl font-semibold">Location</h2>
                {% include "parks/partials/location_widget.html" %}
            </div>

            {# Photos #}
            <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <h2 class="mb-4 text-xl font-semibold">Photos</h2>
                
                {# Existing Photos #}
                {% if park.photos.exists %}
                    <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:grid-cols-3">
                        {% for photo in park.photos.all %}
                            <div class="relative overflow-hidden rounded-lg aspect-w-16 aspect-h-9">
                                <img src="{{ photo.image.url }}" 
                                     alt="{{ photo.caption|default:park.name }}"
                                     class="object-cover w-full h-full">
                                <div class="absolute top-0 right-0 p-2">
                                    <button type="button" 
                                            class="p-2 text-white bg-red-600 rounded-full hover:bg-red-700"
                                            hx-delete="{% url 'media:photo_delete' photo.id %}"
                                            hx-confirm="Are you sure you want to remove this photo?"
                                            hx-target="closest .relative"
                                            hx-swap="outerHTML">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}

                {# Photo Upload #}
                <div class="space-y-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Add Photos
                    </label>
                    <div class="relative">
                        <input type="file" 
                               multiple 
                               accept="image/*"
                               class="hidden"
                               x-ref="fileInput"
                               @change="handleFileSelect($event)">
                        <button type="button"
                                class="w-full px-4 py-2 text-gray-700 border-2 border-dashed rounded-lg dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
                                @click="$refs.fileInput.click()">
                            <span x-show="!previews.length">
                                <i class="mr-2 fas fa-upload"></i>
                                Click to upload photos
                            </span>
                            <span x-show="previews.length">
                                <i class="mr-2 fas fa-plus"></i>
                                Add more photos
                            </span>
                        </button>
                    </div>

                    {# Photo Previews #}
                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
                        <template x-for="(preview, index) in previews" :key="preview.id">
                            <div class="relative overflow-hidden transition-all duration-300 rounded-lg aspect-w-16 aspect-h-9 photo-preview"
                                 :class="{
                                     'uploading': preview.uploading,
                                     'error': preview.error,
                                     'success': preview.uploaded
                                 }">
                                <img :src="preview.url" 
                                     class="object-cover w-full h-full">
                                <div class="absolute top-0 right-0 p-2">
                                    <button type="button" 
                                            class="p-2 text-white bg-red-600 rounded-full hover:bg-red-700"
                                            @click="removePreview(index)">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                                <div x-show="preview.uploading" 
                                     class="absolute inset-0 flex items-center justify-center bg-black/50">
                                    <div class="w-16 h-16 border-4 border-blue-500 rounded-full animate-spin border-t-transparent"></div>
                                </div>
                                <div x-show="preview.error" 
                                     class="absolute bottom-0 left-0 right-0 p-2 text-sm text-white bg-red-500">
                                    Upload failed
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            {# Additional Details #}
            <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <h2 class="mb-4 text-xl font-semibold">Additional Details</h2>
                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div>
                        <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Opening Date
                        </label>
                        {{ form.opening_date }}
                    </div>
                    <div>
                        <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Closing Date
                        </label>
                        {{ form.closing_date }}
                    </div>
                    <div>
                        <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Operating Season
                        </label>
                        {{ form.operating_season }}
                    </div>
                    <div>
                        <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Size (acres)
                        </label>
                        {{ form.size_acres }}
                    </div>
                    <div class="col-span-2">
                        <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Website
                        </label>
                        {{ form.website }}
                    </div>
                </div>
            </div>

            {# Submission Details #}
            <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <h2 class="mb-4 text-xl font-semibold">Submission Details</h2>
                <div class="space-y-4">
                    <div>
                        <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Reason for Changes
                        </label>
                        <textarea name="reason" rows="2"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                            placeholder="Explain why you're making these changes"></textarea>
                    </div>
                    <div>
                        <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Source
                        </label>
                        <input type="text" name="source"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                            placeholder="Where did you get this information?">
                    </div>
                </div>
            </div>

            {# Submit Button #}
            <div class="flex justify-end">
                <button type="submit"
                        class="px-6 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800"
                        :disabled="uploading">
                    <span x-show="!uploading">{% if is_edit %}Save Changes{% else %}Create Park{% endif %}</span>
                    <span x-show="uploading">Uploading...</span>
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('parkFormData', () => ({
        previews: [],
        uploading: false,

        handleFileSelect(event) {
            const files = event.target.files;
            if (!files.length) return;

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (!file.type.startsWith('image/')) continue;

                const reader = new FileReader();
                reader.onload = (e) => {
                    this.previews.push({
                        id: Date.now() + i,
                        file: file,
                        url: e.target.result,
                        uploading: false,
                        uploaded: false,
                        error: false
                    });
                };
                reader.readAsDataURL(file);
            }

            // Reset file input
            event.target.value = '';
        },

        removePreview(index) {
            this.previews.splice(index, 1);
        }
    }));
});
</script>
{% endblock %}