{% extends "admin/dashboard.html" %}
{% load static %}

{% block title %}
    <title>Admin | Contact Page</title>
{% endblock title %}

{% block content %}
<div class="page-content">
    <div class="container-xxl">
        <div class="row">
            <div class="col-xl-12 col-lg-12">
                <form method="post" action="" enctype="multipart/form-data">
                    {% csrf_token %}

                    <!-- Thumbnail Upload Section -->
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Add Thumbnail Photo</h4>
                            <div id="file-previews" class="mb-3" style="display: flex; flex-wrap: wrap; margin-top: 10px;">
                                <img id="imagePreview" 
                                     src="{% if contact_page and contact_page.img %}{{ contact_page.img.url }}{% else %}{% static 'assets/images/default_img_icon.png' %}{% endif %}" 
                                     alt="Contact Image" 
                                     style="width: 500px; height: 400px; object-fit: cover; border-radius: 8px;">
                            </div>
                            <input class="form-control mt-3" name="img" type="file" accept="image/*" id="imageUpload">
                        </div>
                    </div>

                    <!-- General Information Section -->
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">General Information</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!-- Title -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="title" class="form-label">Title</label>
                                        <input type="text" name="title" id="title" class="form-control" placeholder="Enter Title" value="{{ contact_page.title|default_if_none:'' }}">
                                    </div>
                                </div>

                                <!-- Intro Text -->
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label for="intro_text" class="form-label">Intro Text</label>
                                        <textarea class="form-control" name="intro_text" id="intro_text" rows="5" placeholder="Type introduction">{{ contact_page.intro_text|default_if_none:'' }}</textarea>
                                    </div>
                                </div>

                                <!-- Email -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="email" class="form-label">Email</label>
                                        <input type="email" name="email" id="email" class="form-control" placeholder="Enter Email" value="{{ contact_page.email|default_if_none:'' }}">
                                    </div>
                                </div>

                                <!-- Phone Number -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="phone_number" class="form-label">Phone Number</label>
                                        <input type="text" name="phone_number" id="phone_number" class="form-control" placeholder="Enter Phone Number" value="{{ contact_page.phone_number|default_if_none:'' }}">
                                    </div>
                                </div>

                                <!-- WhatsApp Number -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="whatsapp_number" class="form-label">WhatsApp Number</label>
                                        <input type="text" name="whatsapp_number" id="whatsapp_number" class="form-control" placeholder="Enter WhatsApp Number" value="{{ contact_page.whatsapp_number|default_if_none:'' }}">
                                    </div>
                                </div>

                                <!-- Address -->
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label for="address" class="form-label">Address</label>
                                        <textarea class="form-control" name="address" id="address" rows="3" placeholder="Type address">{{ contact_page.address|default_if_none:'' }}</textarea>
                                    </div>
                                </div>

                                <!-- Map Link -->
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label for="map_link" class="form-label">Map Link</label>
                                        <input type="url" name="map_link" id="map_link" class="form-control" placeholder="Enter Map Link" value="{{ contact_page.map_link|default_if_none:'' }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="p-3 bg-light mb-3 rounded">
                        <div class="row justify-content-end g-2">
                            <div class="col-lg-2">
                                <button type="submit" class="btn btn-outline-secondary w-100">
                                    {% if contact_page %}
                                        Update
                                    {% else %}
                                        Create
                                    {% endif %}
                                </button>
                            </div>
                            <div class="col-lg-2">
                                <a href="{% url 'contact_page' %}" class="btn btn-primary w-100">Cancel</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript for image preview -->
<script>
    document.getElementById('imageUpload').addEventListener('change', function(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('imagePreview').src = e.target.result;
            }
            reader.readAsDataURL(file);
        }
    });
</script>
{% endblock %}