{% extends 'adminapp/master.html' %}
{% load static %}
{% block content %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

<div class="page-content py-4">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12 mb-3">
                <div class="page-title-box">
                    <h4 class="mb-0 fw-semibold">Manage AdTypes</h4>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{% url 'index' %}"><i class="bi bi-house-door-fill me-1"></i>Dashboard</a></li>
                        <li class="breadcrumb-item active text-primary">Manage AdTypes</li>
                    </ol>
                </div>
            </div>
        </div>

        <!-- Ad Types Table -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card shadow-sm border-0">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="mb-0">
                                <i class="bi bi-collection me-2"></i> AdType List
                            </h5>
                            <a href="{% url 'adtype_add' %}" class="btn btn-success rounded-pill">
                                <i class="bi bi-plus-circle me-1"></i> Add AdType
                            </a>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover table-centered mb-0 align-middle">
                                <thead class="table-dark">
                                    <tr>
                                        <th scope="col">Ad Type Name</th>
                                        <th scope="col" class="text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for adtype in adtypes %}
                                    <tr>
                                        <td class="fw-medium text-capitalize">{{ adtype.name }}</td>
                                        <td class="text-center">
                                            <a href="{% url 'adtype_edit' adtype.id %}" class="btn btn-warning btn-sm me-2 rounded-pill">
                                                <i class="bi bi-pencil-square me-1"></i> Edit
                                            </a>
                                            <button class="btn btn-danger btn-sm rounded-pill" onclick="confirmDelete('{% url 'adtype_delete' adtype.id %}')">
                                                <i class="bi bi-trash3 me-1"></i> Delete
                                            </button>
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="2" class="text-center text-muted py-4">No ad types available.</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 rounded shadow">
            <div class="modal-header bg-light border-0">
                <h5 class="modal-title fw-semibold text-danger" id="deleteModalLabel">
                    <i class="bi bi-exclamation-triangle me-1"></i> Confirm Deletion
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <p class="fs-6 fw-bold text-dark">Are you sure you want to delete this ad type?</p>
            </div>
            <div class="modal-footer border-0 justify-content-center">
                <form id="deleteForm" method="post">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger rounded-pill px-4">Delete</button>
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript for Modal -->
<script>
    function confirmDelete(deleteUrl) {
        document.getElementById('deleteForm').action = deleteUrl;
        var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
        deleteModal.show();
    }
</script>
{% endblock %}