@extends('admin.layout.app')
@section('title', __('front.contact_messages'))

@section('body')
<section class="section pt-4">
    <div class="container-fluid">

        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center gap-3 mb-4">
                    <div>
                        <h4 class="fw-bold mb-1 text-dark">
                            <i class="fas fa-envelope-open-text me-2 text-primary"></i>
                            {{ __('front.contact_messages') }}
                        </h4>
                        <p class="text-muted mb-0">
                            <i class="fas fa-info-circle me-1"></i>
                            {{ __('front.total_messages') }} <span class="badge bg-primary">{{ $contacts->total() }}</span>
                            @php
                                $unreadCount = $contacts->where('is_read', false)->count();
                            @endphp
                            @if($unreadCount > 0)
                            | <i class="fas fa-circle text-danger me-1"></i>
                            {{ __('front.unread_messages') }} <span class="badge bg-danger">{{ $unreadCount }}</span>
                            @endif
                        </p>
                    </div>

                    <div class="d-flex flex-wrap gap-3 w-100 w-lg-auto">
                        {{-- Export Buttons --}}
                        <div class="btn-group" role="group">

                            <a href="{{ route('contacts.export.pdf', request()->query()) }}" class="btn btn-sm btn-danger">
                                <i class="fas fa-file-pdf me-1"></i> PDF
                            </a>
                        </div>

                        {{-- Search Form --}}
                        <form class="d-flex gap-2 flex-grow-1" method="GET" action="{{ route('contacts.index') }}">
                            <div class="input-group input-group-sm">
                                <span class="input-group-text bg-light border-end-0">
                                    <i class="fas fa-search text-muted"></i>
                                </span>
                                <input type="text" name="q" value="{{ request('q') }}"
                                       class="form-control border-start-0"
                                       placeholder="{{ __('front.search_by_name_email_or_subject') }}">
                            </div>
                            <button class="btn btn-primary btn-sm">
                                <i class="fas fa-magnifying-glass me-1"></i> {{ __('front.search') }}
                            </button>
                        </form>

                        {{-- Filter Buttons --}}
                        <div class="btn-group btn-group-sm" role="group">
                            <a href="{{ route('contacts.index') }}"
                               class="btn btn-outline-primary {{ !request('filter') ? 'active' : '' }}">
                                <i class="fas fa-list me-1"></i> {{ __('front.all') }}
                            </a>
                            <a href="{{ route('contacts.index', ['filter' => 'unread']) }}"
                               class="btn btn-outline-danger {{ request('filter') == 'unread' ? 'active' : '' }}">
                                <i class="fas fa-envelope me-1"></i> {{ __('front.unread') }}
                            </a>
                            <a href="{{ route('contacts.index', ['filter' => 'read']) }}"
                               class="btn btn-outline-success {{ request('filter') == 'read' ? 'active' : '' }}">
                                <i class="fas fa-envelope-open me-1"></i> {{ __('front.read') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show d-flex align-items-center" role="alert">
                <i class="fas fa-check-circle me-2"></i>
                <div>{{ session('success') }}</div>
                <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <!-- Bulk Delete Form -->
        <form method="POST" id="bulkDeleteForm" action="{{ route('contacts.bulk-delete') }}">
            @csrf
            @method('DELETE')
            <input type="hidden" name="ids" id="selectedIds" value="">
        </form>

        <div class="card border-0 shadow-lg rounded-3 overflow-hidden">
            <div class="card-header bg-white border-bottom py-3">
                <div class="d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 text-dark">
                        <i class="fas fa-comments me-2 text-primary"></i>
                        {{ __('front.messages') }}
                    </h6>
                    <div class="d-flex gap-2">
                        <button type="button" id="bulkDeleteBtn" class="btn btn-sm btn-outline-danger" disabled>
                            <i class="fas fa-trash-alt me-1"></i> {{ __('front.delete_selected') }}
                        </button>
                        <div class="text-muted small">
                            <i class="fas fa-clock me-1"></i>
                            {{ __('front.last_updated') }}: {{ now()->format('Y-m-d h:i A') }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th width="60" class="text-center">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="selectAll">
                                    </div>
                                </th>
                                <th width="80" class="text-center">{{ __('front.status') }}</th>
                                <th>{{ __('front.sender') }}</th>
                                <th>{{ __('front.subject') }}</th>
                                <th>{{ __('front.phone') }}</th>
                                <th>{{ __('front.date') }}</th>
                                <th class="text-end">{{ __('front.actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($contacts as $c)
                                <tr class="{{ !$c->is_read ? 'table-warning border-start border-warning border-3' : '' }}">
                                    <td class="text-center">
                                        <div class="form-check">
                                            <input class="form-check-input message-checkbox" type="checkbox" value="{{ $c->id }}">
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        @if(!$c->is_read)
                                            <span class="badge bg-danger rounded-pill px-3 py-2">{{ __('front.unread') }}</span>
                                        @else
                                            <span class="badge bg-success rounded-pill px-3 py-2">{{ __('front.read') }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-circle bg-primary-light text-primary me-3">
                                                {{ strtoupper(substr($c->name, 0, 1)) }}
                                            </div>
                                            <div>
                                                <div class="fw-semibold text-dark">{{ $c->name }}</div>
                                                <div class="text-muted small">
                                                    <i class="fas fa-envelope me-1"></i>
                                                    {{ $c->email }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="fw-medium text-dark">{{ $c->subject ?? '—' }}</div>
                                        @if($c->message)
                                            <div class="text-muted small text-truncate" style="max-width: 250px;">
                                                <i class="fas fa-comment me-1"></i>
                                                {{ Str::limit($c->message, 60) }}
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        @if($c->phone)
                                            <a href="tel:{{ $c->phone }}" class="text-decoration-none">
                                                <i class="fas fa-phone text-primary me-1"></i> {{ $c->phone }}
                                            </a>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="small text-muted">
                                            <i class="fas fa-calendar-alt me-1"></i> {{ $c->created_at?->format('Y-m-d') }}
                                        </div>
                                        <div class="small text-muted">
                                            <i class="fas fa-clock me-1"></i> {{ $c->created_at?->format('h:i A') }}
                                        </div>
                                    </td>
                                    <td class="text-end">
                                        <div class="btn-group btn-group-sm" role="group">
                                            <a class="btn btn-outline-primary" href="{{ route('contacts.show', $c->id) }}" title="{{ __('front.view') }}">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <form method="POST" action="{{ route('contacts.destroy', $c->id) }}" class="d-inline" onsubmit="return confirm('{{ __('front.are_you_sure_you_want_to_delete_this_message') }}')">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="btn btn-outline-danger" title="{{ __('front.delete') }}">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="7" class="text-center py-5">...</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            @if($contacts->hasPages())
            <div class="card-footer bg-white border-top py-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="text-muted small">
                        <i class="fas fa-info-circle me-1"></i>
                        {{ __('front.showing') }} {{ $contacts->firstItem() }} - {{ $contacts->lastItem() }} {{ __('front.of') }} {{ $contacts->total() }}
                    </div>
                    <div>{{ $contacts->links('pagination::bootstrap-5') }}</div>
                </div>
            </div>
            @endif
        </div>
    </div>
</section>

<style>
    .avatar-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
    .bg-primary-light { background-color: rgba(13, 110, 253, 0.1); }
    .border-warning { border-left-color: #ffc107 !important; }
    .btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
    .table-hover tbody tr:hover { background-color: rgba(0, 0, 0, 0.02); }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const selectAll = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.message-checkbox');
        const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
        const selectedIdsInput = document.getElementById('selectedIds');

        function updateBulkDeleteButton() {
            const anyChecked = Array.from(checkboxes).some(cb => cb.checked);
            bulkDeleteBtn.disabled = !anyChecked;
        }

        if (selectAll) {
            selectAll.addEventListener('change', function() {
                checkboxes.forEach(cb => cb.checked = selectAll.checked);
                updateBulkDeleteButton();
            });
        }

        checkboxes.forEach(cb => {
            cb.addEventListener('change', updateBulkDeleteButton);
        });

        if (bulkDeleteBtn) {
            bulkDeleteBtn.addEventListener('click', function(e) {
                e.preventDefault();
                const selected = Array.from(checkboxes).filter(cb => cb.checked).map(cb => cb.value);
                if (selected.length === 0) return;

                if (confirm('{{ __('front.confirm_bulk_delete') }}')) {
                    selectedIdsInput.value = JSON.stringify(selected);
                    document.getElementById('bulkDeleteForm').submit();
                }
            });
        }
    });
</script>
@endsection