{% extends "layouts/dashboard.twig" %}

{% block title %}{{ title }} - {{ platformName }}{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">{{ title }}</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"><a href="{{ url('admin/dashboard') }}">{{ __('dashboard.title') }}</a></li>
        <li class="breadcrumb-item active">{{ __('contact.admin.title') }}</li>
    </ol>
    
    <div class="mb-4">
        <div class="btn-group" role="group">
            <a href="{{ url('admin/contacts?status=all') }}" class="btn {{ current_status == 'all' ? 'btn-primary' : 'btn-outline-primary' }}">
                {{ __('contact.admin.statuses.all') }}
            </a>
            <a href="{{ url('admin/contacts?status=unread') }}" class="btn {{ current_status == 'unread' ? 'btn-primary' : 'btn-outline-primary' }}">
                {{ __('contact.admin.statuses.unread') }}
            </a>
            <a href="{{ url('admin/contacts?status=read') }}" class="btn {{ current_status == 'read' ? 'btn-primary' : 'btn-outline-primary' }}">
                {{ __('contact.admin.statuses.read') }}
            </a>
            <a href="{{ url('admin/contacts?status=new') }}" class="btn {{ current_status == 'new' ? 'btn-primary' : 'btn-outline-primary' }}">
                {{ __('contact.admin.statuses.new') }}
            </a>
            <a href="{{ url('admin/contacts?status=in_progress') }}" class="btn {{ current_status == 'in_progress' ? 'btn-primary' : 'btn-outline-primary' }}">
                {{ __('contact.admin.statuses.in_progress') }}
            </a>
            <a href="{{ url('admin/contacts?status=resolved') }}" class="btn {{ current_status == 'resolved' ? 'btn-primary' : 'btn-outline-primary' }}">
                {{ __('contact.admin.statuses.resolved') }}
            </a>
            <a href="{{ url('admin/contacts?status=closed') }}" class="btn {{ current_status == 'closed' ? 'btn-primary' : 'btn-outline-primary' }}">
                {{ __('contact.admin.statuses.closed') }}
            </a>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header">
            <i class="bi bi-envelope me-1"></i>
            {{ __('contact.admin.list_title') }}
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>{{ __('contact.admin.columns.name') }}</th>
                            <th>{{ __('contact.admin.columns.email') }}</th>
                            <th>{{ __('contact.admin.columns.subject') }}</th>
                            <th>{{ __('contact.admin.columns.status') }}</th>
                            <th>{{ __('contact.admin.columns.date') }}</th>
                            <th>{{ __('contact.admin.columns.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for contact in contacts %}
                        <tr class="{{ not contact.isRead() ? 'table-primary' : '' }}">
                            <td>
                                {% if not contact.isRead() %}
                                    <i class="bi bi-envelope-fill text-primary me-1"></i>
                                {% else %}
                                    <i class="bi bi-envelope-open text-muted me-1"></i>
                                {% endif %}
                                {{ contact.contacts_name }}
                            </td>
                            <td>{{ contact.contacts_email }}</td>
                            <td>{{ contact.contacts_subject }}</td>
                            <td>
                                {% set statusColors = {
                                    'new': 'primary',
                                    'in_progress': 'warning',
                                    'resolved': 'success',
                                    'closed': 'secondary'
                                } %}
                                <span class="badge bg-{{ statusColors[contact.contacts_status] ?? 'secondary' }}">
                                    {{ __('contact.admin.statuses.' ~ contact.contacts_status) }}
                                </span>
                            </td>
                            <td>{{ contact.formatted_created_at }}</td>
                            <td>
                                <a href="{{ url('admin/contacts/' ~ contact.contacts_id) }}" class="btn btn-info btn-sm" title="{{ __('contact.admin.actions.view') }}">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <button type="button" class="btn btn-sm {{ contact.isRead() ? 'btn-secondary' : 'btn-success' }}"
                                        onclick="toggleReadStatus({{ contact.contacts_id }})"
                                        title="{{ contact.isRead() ? __('contact.admin.actions.mark_unread') : __('contact.admin.actions.mark_read') }}">
                                    <i class="bi {{ contact.isRead() ? 'bi-envelope' : 'bi-envelope-check' }}"></i>
                                </button>
                                <button type="button" class="btn btn-danger btn-sm"
                                        onclick="deleteContact({{ contact.contacts_id }})"
                                        title="{{ __('contact.admin.actions.delete') }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="6" class="text-center">{{ __('contact.admin.no_messages') }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
function toggleReadStatus(id) {
    fetch(`{{ url('admin/contacts/') }}${id}/toggle-read`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert(data.message || '{{ __("contact.admin.error_occurred") }}');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('{{ __("contact.admin.error_occurred") }}');
    });
}

function deleteContact(id) {
    if (confirm("{{ __('contact.admin.confirm_delete') }}")) {
        fetch(`{{ url('admin/contacts/') }}${id}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.message || '{{ __("contact.admin.error_occurred") }}');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('{{ __("contact.admin.error_occurred") }}');
        });
    }
}
</script>
{% endblock %}