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

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

{% block content %}

<style>
    .swal2-popup {
        width: 350px;
        font-size: 10px;
    }

    .swal2-confirm,
    .swal2-cancel {
        padding: 8px 12px;
        font-size: 12px;
    }

    .swal2-icon {
        font-size: 10px;
    }
</style>

<div class="page-content">
    <div class="container-xxl">
        <div class="row">
            <div class="col-xl-12 col-lg-12">

                <!-- Hero Section Form -->
                <form method="post" action="{% url "about_hero_section" %}" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="card mb-4">
                        <div class="card-header">
                            <h4 class="card-title">Hero Section</h4>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Image</label> </br>
                                <img id="hero_image_preview" src="{% if hero_section and hero_section.image %}{{ hero_section.image.url }}{% else %}{% static 'assets/images/default_img_icon.png' %}{% endif %}" style="width: 500px; height: 400px; object-fit: cover; border-radius: 8px; margin-top: 10px;"></br></br>
                                <input type="file" name="image" class="form-control" id="hero_image_upload" accept="image/*">
                            </div>
                            <div class="mb-3">
                                <label for="hero_title" class="form-label">Title</label>
                                <input type="text" name="title" id="hero_title" class="form-control" placeholder="Enter Hero Title" value="{{ hero_section.title|default_if_none:'' }}">
                            </div>
                            <div class="mb-3">
                                <label for="hero_description" class="form-label">Description</label>
                                <textarea class="form-control" name="description" id="hero_description" rows="4" placeholder="Enter Description">{{ hero_section.description|default_if_none:'' }}</textarea>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <button type="submit" class="btn btn-primary">Save Section</button>
                        </div>
                    </div>
                </form>

                <!-- Stats Section Form -->
                <form method="post" action="{% url "about_stats_section" %}">
                    {% csrf_token %}
                    <div class="card mb-4">
                        <div class="card-header">
                            <h4 class="card-title">Stats Section</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-8">
                                    <h5>Existing Stats</h5>
                                    <div id="stats-container">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th class="col-lg-4">Label</th>
                                                    <th class="col-lg-1">Value</th>
                                                    <th class="col-lg-1 text-center">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for stat in stats_section_instances %}
                                                <tr>
                                                    <td> {{ stat.label }} </td>
                                                    <td> {{ stat.value }} </td>                                
                                                    <td class="text-center">
                                                        <a href="javascript:void(0);" class="btn btn-soft-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editModal_{{ stat.id }}"> 
                                                            <iconify-icon icon="solar:pen-2-broken" class="align-middle fs-18"></iconify-icon>
                                                        </a>
                                                        <a href="javascript:void(0);" class="btn btn-soft-danger btn-sm delete-button" data-url="{% url 'stat_delete' stat.id %}">
                                                            <iconify-icon icon="solar:trash-bin-minimalistic-2-broken" class="align-middle fs-18"></iconify-icon>
                                                        </a>
                                                    </td>
                                                </tr>
                                
                                                <!-- Edit Modal -->
                                                <div class="modal fade" id="editModal_{{ stat.id }}" tabindex="-1" aria-labelledby="editModalLabel_{{ stat.id }}" aria-hidden="true">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title" id="editModalLabel_{{ stat.id }}">Edit Stat</h5>
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <label for="edit_label_{{ stat.id }}" class="form-label">Label</label>
                                                                <input type="text" id="edit_label_{{ stat.id }}" class="form-control" value="{{ stat.label }}">
                                                                <label for="edit_value_{{ stat.id }}" class="form-label mt-2">Value</label>
                                                                <input type="text" id="edit_value_{{ stat.id }}" class="form-control" value="{{ stat.value }}">
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                                <button type="button" class="btn btn-primary save-changes" data-id="{{ stat.id }}" data-bs-dismiss="modal">Save changes</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                
                                <!-- Right Column: Create New Stat Form -->
                                <div class="col-lg-4">
                                    <h5>Create New Stat</h5>
                                    <div class="row align-items-center mb-3">
                                        <div class="col-lg-12">
                                            <label for="new_label" class="form-label">Label</label>
                                            <input type="text" name="new_label" id="new_label" class="form-control" placeholder="Enter label" required>
                                        </div> </br> </br>
                                        <div class="col-lg-12">
                                            <label for="new_value" class="form-label">Value</label>
                                            <input type="text" name="new_value" id="new_value" class="form-control" placeholder="Enter value" required>
                                        </div>
                                    </div>
                                    <div class="card-footer text-end">
                                        <button type="submit" class="btn btn-primary">Save Section</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>


                <!-- Principles Section Form -->
                <form method="post" action="{% url "about_principle_section" %}" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="card mb-4">
                        <div class="card-header">
                            <h4 class="card-title">Principles Section</h4>
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <!-- Image Preview and File Input -->
                                <div class="col-lg-12">
                                    <label class="form-label">Image</label>
                                    <div class="mb-2">
                                        <img id="principle_image_preview" src="{% if principle.image %}{{ principle.image.url }}{% else %}{% static 'assets/images/default_img_icon.png' %}{% endif %}" 
                                            style="width: 100%; max-width: 500px; height: auto; object-fit: cover; border-radius: 8px; margin-top: 10px;">
                                    </div>
                                    <input type="file" name="image" class="form-control principle-image-upload" data-preview-id="principle_image_preview" accept="image/*">
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <!-- Title Field -->
                                <div class="col-lg-12">
                                    <label for="principle_title" class="form-label">Title</label>
                                    <input type="text" name="title" id="principle_title" class="form-control" value="{{ principle.title }}">
                                </div>
                            </div>
                
                            <div class="row mb-3">
                                <!-- Subtitle Field -->
                                <div class="col-lg-12">
                                    <label for="principle_subtitle" class="form-label">Subtitle</label>
                                    <input type="text" name="subtitle" id="principle_subtitle" class="form-control" value="{{ principle.subtitle }}">
                                </div>
                            </div>
                
                            <div class="row mb-3">
                                <!-- Description Field -->
                                <div class="col-lg-12">
                                    <label for="principle_description" class="form-label">Description</label>
                                    <textarea name="description" id="principle_description" class="form-control" rows="3">{{ principle.description }}</textarea>
                                </div>
                            </div>
                
                        </div>
                        <div class="card-footer text-end">
                            <button type="submit" class="btn btn-primary">Save Section</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // Get CSRF token from meta tag
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    // Delete Button Functionality
    document.querySelectorAll(".delete-button").forEach(function (button) {
        button.addEventListener("click", function (event) {
            event.preventDefault();
            let deleteUrl = this.getAttribute('data-url');

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No, cancel!',
                customClass: {
                    confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                    cancelButton: 'btn btn-danger w-xs mt-2'
                },
                buttonsStyling: false
            }).then(function (result) {
                if (result.isConfirmed) {
                    fetch(deleteUrl, {
                        method: 'POST',
                        headers: {
                            'X-CSRFToken': csrfToken,
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                title: 'Deleted!',
                                text: 'The stat entry has been deleted.',
                                icon: 'success',
                                confirmButtonClass: 'btn btn-primary w-xs mt-2',
                                buttonsStyling: false
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                title: 'Error!',
                                text: data.message || 'Failed to delete the stat entry.',
                                icon: 'error',
                                confirmButtonClass: 'btn btn-primary w-xs mt-2',
                                buttonsStyling: false
                            });
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            title: 'Error!',
                            text: 'An error occurred while deleting the stat entry.',
                            icon: 'error',
                            confirmButtonClass: 'btn btn-primary w-xs mt-2',
                            buttonsStyling: false
                        });
                    });
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    Swal.fire({
                        title: 'Cancelled',
                        text: 'Your stat entry is safe :)',
                        icon: 'info',
                        confirmButtonClass: 'btn btn-primary mt-2',
                        buttonsStyling: false
                    });
                }
            });
        });
    });

    // Handle Save Changes for Edit Modal
    document.querySelectorAll(".save-changes").forEach(function (button) {
        button.addEventListener("click", function () {
            const statId = this.getAttribute("data-id");
            const label = document.getElementById(`edit_label_${statId}`).value;
            const value = document.getElementById(`edit_value_${statId}`).value;

            fetch("{% url 'stat_update' %}", {
                method: "POST",
                headers: {
                    "X-CSRFToken": csrfToken,
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    id: statId,
                    label: label,
                    value: value,
                }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire({
                        title: 'Updated!',
                        text: 'The stat has been updated successfully.',
                        icon: 'success',
                        confirmButtonClass: 'btn btn-primary mt-2',
                        buttonsStyling: false
                    }).then(() => {
                        // Reload the page to reflect updated data
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: data.message || 'Failed to update the stat.',
                        icon: 'error',
                        confirmButtonClass: 'btn btn-primary mt-2',
                        buttonsStyling: false
                    });
                }
            })
            .catch(error => {
                Swal.fire({
                    title: 'Error!',
                    text: 'An error occurred while updating the stat.',
                    icon: 'error',
                    confirmButtonClass: 'btn btn-primary mt-2',
                    buttonsStyling: false
                });
            });
        });
    });

    // Hero Section Image Preview
    document.getElementById('hero_image_upload').addEventListener('change', function(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('hero_image_preview').src = e.target.result;
            }
            reader.readAsDataURL(file);
        }
    });

    // Principle Section Image Preview
    document.querySelector('.principle-image-upload').addEventListener('change', function(event) {
        const file = event.target.files[0];
        const previewImg = document.getElementById('principle_image_preview');
        if (file && previewImg) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImg.src = e.target.result;
            }
            reader.readAsDataURL(file);
        }
    });
</script>

{% endblock %}