@extends('layouts.admin')

@section('content')
    <div class="container-fluid py-4">
        <!-- Search Filter Section -->
        <div class="card shadow-sm mb-4">
            <div class="card-body p-3">
                <div class="row align-items-center">
                    <div class="col-md-6 mb-3 mb-md-0">
                        <h4 class="mb-0 text-primary fw-bold">
                            <i class="fas fa-envelope me-2"></i>Contact Submissions
                        </h4>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search by description..."
                                    id="searchInput">
                                <button class="btn btn-primary" type="button">
                                    <i class="fas fa-search text-white"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contact Cards Section -->
        <div class="row" id="contactsContainer">
            @foreach ($contacts as $contact)
                <div class="col-md-6 col-lg-4 mb-4 contact-card">
                    <div class="card shadow-sm h-100">
                        <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                            <h5 class="mb-0 text-truncate" title="{{ $contact->subject }}">
                                <i class="fas fa-tag me-2 text-primary"></i>{{ $contact->subject }}
                            </h5>
                            <span class="badge bg-primary">New</span>
                        </div>
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="avatar-circle bg-primary text-white me-3">
                                    {{ strtoupper(substr($contact->name, 0, 1)) }}
                                </div>
                                <div>
                                    <h6 class="mb-0 fw-bold">{{ $contact->name }}</h6>
                                    <a href="mailto:{{ $contact->email }}" class="text-primary">
                                        <small><i class="fas fa-envelope me-1"></i>{{ $contact->email }}</small>
                                    </a>
                                </div>
                            </div>

                            <div class="message-box bg-light p-3 rounded mb-3">
                                <p class="mb-0">{{ $contact->message }}</p>
                            </div>

                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="far fa-clock me-1"></i>{{ $contact->created_at->diffForHumans() }}
                                </small>
                                <div class="btn-group">
                                    <a href="mailto:{{ $contact->email }}?subject=RE: {{ $contact->subject }}&body=Dear {{ $contact->name }},"
                                        class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-reply me-1"></i>Reply
                                    </a>
                                    @if (auth()->user()->isAdmin())
                                        <button class="btn btn-outline-danger btn-sm delete-btn" data-id="{{ $contact->id }}">
                                            <i class="fas fa-trash me-1"></i>Delete
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Empty State (shown when no results found) -->
        <div id="emptyState" class="card shadow-sm text-center p-5 d-none">
            <div class="py-5">
                <i class="fas fa-inbox fa-4x text-muted mb-4"></i>
                <h4>No contact submissions found</h4>
                <p class="text-muted">Try adjusting your search criteria or check back later</p>
            </div>
        </div>

        <!-- Pagination -->
        <div class="d-flex justify-content-center mt-4">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li class="page-item {{ $contacts->onFirstPage() ? 'disabled' : '' }}">
                        <a class="page-link bg-light border-0 text-primary" href="{{ $contacts->previousPageUrl() }}">
                            Previous
                        </a>
                    </li>

                    @for ($i = 1; $i <= $contacts->lastPage(); $i++)
                        <li class="page-item {{ $contacts->currentPage() == $i ? 'active' : '' }}">
                            <a class="page-link {{ $contacts->currentPage() == $i ? 'bg-primary border-0' : 'bg-light border-0 text-primary' }}"
                                href="{{ $contacts->url($i) }}">{{ $i }}</a>
                        </li>
                    @endfor

                    <li class="page-item {{ $contacts->hasMorePages() ? '' : 'disabled' }}">
                        <a class="page-link bg-light border-0 text-primary" href="{{ $contacts->nextPageUrl() }}">
                            Next
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

    <!-- Hidden form for delete -->
    <form id="deleteForm" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>

    <style>
        /* Custom styles */
        .avatar-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .message-box {
            max-height: 120px;
            overflow-y: auto;
        }

        .page-item.active .page-link {
            color: white;
        }

        .pagination .page-link {
            margin: 0 5px;
            border-radius: 5px;
            padding: 8px 16px;
        }

        /* Search styles to match image */
        .form-control:focus {
            border-color: #6c63ff;
            box-shadow: 0 0 0 0.25rem rgba(108, 99, 255, 0.25);
        }

        .btn-primary {
            background-color: #6c63ff;
            border-color: #6c63ff;
        }

        .btn-primary:hover {
            background-color: #5a52d5;
            border-color: #5a52d5;
        }

        .text-primary {
            color: #6c63ff !important;
        }

        .bg-primary {
            background-color: #6c63ff !important;
        }

        .btn-outline-primary {
            color: #6c63ff;
            border-color: #6c63ff;
        }

        .btn-outline-primary:hover {
            background-color: #6c63ff;
            border-color: #6c63ff;
        }

        input#searchInput.form-control {
            border-radius: 5px 0px 0px 5px;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Search functionality
            const searchInput = document.getElementById('searchInput');
            const contactCards = document.querySelectorAll('.contact-card');
            const contactsContainer = document.getElementById('contactsContainer');
            const emptyState = document.getElementById('emptyState');

            searchInput.addEventListener('input', function () {
                const searchTerm = this.value.toLowerCase();
                let hasResults = false;

                contactCards.forEach(card => {
                    const name = card.querySelector('h6').textContent.toLowerCase();
                    const email = card.querySelector('a').textContent.toLowerCase();
                    const subject = card.querySelector('h5').textContent.toLowerCase();
                    const message = card.querySelector('.message-box').textContent.toLowerCase();

                    if (name.includes(searchTerm) || email.includes(searchTerm) ||
                        subject.includes(searchTerm) || message.includes(searchTerm)) {
                        card.style.display = '';
                        hasResults = true;
                    } else {
                        card.style.display = 'none';
                    }
                });

                // Toggle empty state
                if (hasResults) {
                    contactsContainer.classList.remove('d-none');
                    emptyState.classList.add('d-none');
                } else {
                    contactsContainer.classList.add('d-none');
                    emptyState.classList.remove('d-none');
                }
            });

            // Delete button functionality
            const deleteButtons = document.querySelectorAll('.delete-btn');
            const deleteForm = document.getElementById('deleteForm');

            deleteButtons.forEach(button => {
                button.addEventListener('click', function () {
                    const contactId = this.getAttribute('data-id');
                    const contactRoute = "{{ route('contacts.destroy', ':id') }}".replace(':id', contactId);

                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#6c63ff',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            deleteForm.action = contactRoute;
                            deleteForm.submit();
                        }
                    });
                });
            });
        });
    </script>

    @if(session('success'))
        <script>
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: '{{ session('success') }}',
                timer: 3000,
                showConfirmButton: false,
                position: 'top-end',
                background: '#fff',
                iconColor: '#6c63ff'
            });
        </script>
    @endif
@endsection