{% extends 'base.html' %}

{% block title %}SMS Logs - Notifications{% endblock %}

{% block extra_css %}
<style>
    .sms-logs-header {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        padding: 1rem;
        border-radius: 0.375rem;
        margin-bottom: 1.5rem;
    }
    
    .status-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    .log-card {
        transition: transform 0.2s;
    }
    
    .log-card:hover {
        transform: translateY(-1px);
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="sms-logs-header">
        <div class="row align-items-center">
            <div class="col">
                <h1 class="mb-0">
                    <i class="bi bi-phone"></i> SMS Logs
                </h1>
                <p class="mb-0 opacity-75">View all SMS message delivery logs</p>
            </div>
            <div class="col-auto">
                <a href="{% url 'notifications:dashboard' %}" class="btn btn-light">
                    <i class="bi bi-arrow-left"></i> Back to Dashboard
                </a>
            </div>
        </div>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        {% endfor %}
    {% endif %}

    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-4">
                    <label for="search" class="form-label">Search</label>
                    <input type="text" class="form-control" id="search" name="search" 
                           value="{{ request.GET.search }}" 
                           placeholder="Phone number, name, or message...">
                </div>
                <div class="col-md-3">
                    <label for="status" class="form-label">Status</label>
                    <select class="form-select" id="status" name="status">
                        <option value="">All Statuses</option>
                        <option value="pending" {% if request.GET.status == 'pending' %}selected{% endif %}>Pending</option>
                        <option value="sent" {% if request.GET.status == 'sent' %}selected{% endif %}>Sent</option>
                        <option value="failed" {% if request.GET.status == 'failed' %}selected{% endif %}>Failed</option>
                        <option value="delivered" {% if request.GET.status == 'delivered' %}selected{% endif %}>Delivered</option>
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="bi bi-search"></i> Filter
                    </button>
                    <a href="{% url 'notifications:sms_logs' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-x-circle"></i> Clear
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- SMS Logs -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="bi bi-list"></i> SMS Message Logs
                {% if logs %}
                    <span class="badge bg-secondary ms-2">{{ logs|length }} result{{ logs|length|pluralize }}</span>
                {% endif %}
            </h5>
        </div>
        <div class="card-body">
            {% if logs %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>Phone Number</th>
                                <th>Recipient</th>
                                <th>Message</th>
                                <th>Status</th>
                                <th>Sent At</th>
                                <th>Template</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for log in logs %}
                            <tr class="log-card">
                                <td>
                                    <strong>{{ log.recipient_phone }}</strong>
                                </td>
                                <td>
                                    {% if log.recipient_name %}
                                        {{ log.recipient_name }}
                                    {% else %}
                                        <span class="text-muted">No name</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="text-truncate" style="max-width: 200px;" title="{{ log.message }}">
                                        {{ log.message }}
                                    </div>
                                </td>
                                <td>
                                    {% if log.status == 'sent' %}
                                        <span class="badge bg-success status-badge">
                                            <i class="bi bi-check-circle"></i> Sent
                                        </span>
                                    {% elif log.status == 'failed' %}
                                        <span class="badge bg-danger status-badge">
                                            <i class="bi bi-x-circle"></i> Failed
                                        </span>
                                    {% elif log.status == 'pending' %}
                                        <span class="badge bg-warning status-badge">
                                            <i class="bi bi-clock"></i> Pending
                                        </span>
                                    {% elif log.status == 'delivered' %}
                                        <span class="badge bg-info status-badge">
                                            <i class="bi bi-check2-all"></i> Delivered
                                        </span>
                                    {% endif %}
                                </td>
                                <td>
                                    <small>
                                        {{ log.sent_at|date:"M d, Y" }}<br>
                                        {{ log.sent_at|time:"H:i" }}
                                    </small>
                                </td>
                                <td>
                                    {% if log.template_used %}
                                        <small class="text-muted">{{ log.template_used.name }}</small>
                                    {% else %}
                                        <small class="text-muted">Manual</small>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <button type="button" class="btn btn-outline-primary btn-sm" 
                                                data-bs-toggle="modal" data-bs-target="#smsModal{{ log.id }}">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                        {% if log.status == 'failed' and log.error_message %}
                                            <button type="button" class="btn btn-outline-danger btn-sm"
                                                    data-bs-toggle="tooltip" title="{{ log.error_message }}">
                                                <i class="bi bi-exclamation-triangle"></i>
                                            </button>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>

                            <!-- SMS Detail Modal -->
                            <div class="modal fade" id="smsModal{{ log.id }}" tabindex="-1">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">SMS Details</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <strong>Phone Number:</strong><br>
                                                    <span class="text-muted">{{ log.recipient_phone }}</span>
                                                </div>
                                                <div class="col-md-6">
                                                    <strong>Recipient Name:</strong><br>
                                                    <span class="text-muted">{{ log.recipient_name|default:"Not provided" }}</span>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <strong>Status:</strong><br>
                                                    {% if log.status == 'sent' %}
                                                        <span class="badge bg-success">
                                                            <i class="bi bi-check-circle"></i> Sent
                                                        </span>
                                                    {% elif log.status == 'failed' %}
                                                        <span class="badge bg-danger">
                                                            <i class="bi bi-x-circle"></i> Failed
                                                        </span>
                                                    {% elif log.status == 'pending' %}
                                                        <span class="badge bg-warning">
                                                            <i class="bi bi-clock"></i> Pending
                                                        </span>
                                                    {% elif log.status == 'delivered' %}
                                                        <span class="badge bg-info">
                                                            <i class="bi bi-check2-all"></i> Delivered
                                                        </span>
                                                    {% endif %}
                                                </div>
                                                <div class="col-md-6">
                                                    <strong>Sent At:</strong><br>
                                                    <span class="text-muted">{{ log.sent_at|date:"F d, Y H:i" }}</span>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-12">
                                                    <strong>Message:</strong><br>
                                                    <div class="border p-3 bg-light rounded">
                                                        {{ log.message }}
                                                    </div>
                                                </div>
                                            </div>
                                            {% if log.template_used %}
                                            <hr>
                                            <div class="row">
                                                <div class="col-12">
                                                    <strong>Template Used:</strong><br>
                                                    <span class="text-muted">{{ log.template_used.name }}</span>
                                                </div>
                                            </div>
                                            {% endif %}
                                            {% if log.error_message %}
                                            <hr>
                                            <div class="row">
                                                <div class="col-12">
                                                    <strong>Error Message:</strong><br>
                                                    <div class="alert alert-danger">
                                                        {{ log.error_message }}
                                                    </div>
                                                </div>
                                            </div>
                                            {% endif %}
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                <nav aria-label="SMS logs pagination">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">First</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">Previous</a>
                            </li>
                        {% endif %}
                        
                        <li class="page-item active">
                            <span class="page-link">
                                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                            </span>
                        </li>
                        
                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">Next</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">Last</a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            {% else %}
                <div class="text-center py-5">
                    <i class="bi bi-phone display-4 text-muted"></i>
                    <h4 class="text-muted mt-3">No SMS logs found</h4>
                    <p class="text-muted">No SMS messages have been sent yet or no results match your filters.</p>
                    <a href="{% url 'notifications:test_sms' %}" class="btn btn-primary">
                        <i class="bi bi-phone"></i> Send Test SMS
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
})

// Auto-dismiss alerts after 5 seconds
setTimeout(function() {
    $('.alert').fadeOut('slow');
}, 5000);
</script>
{% endblock %}