@extends('layouts.admin')

@section('title', 'Contact Form Messages & Inquiries')
@section('header_title', 'Contact Form Inquiries')

@section('content')

<!-- Filter / Search Header Strip -->
<div class="card-custom p-3 p-md-4 mb-4">
    <form method="GET" action="{{ route('admin.contacts.index') }}" class="row g-2 align-items-center">
        
        <!-- Search Input -->
        <div class="col-12 col-md-6">
            <div class="input-group">
                <span class="input-group-text bg-white border-end-0 text-muted"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control border-start-0 ps-1" name="search" value="{{ request('search') }}" placeholder="Search sender name, email, phone, message content...">
            </div>
        </div>

        <!-- Status Filter -->
        <div class="col-6 col-md-4">
            <select class="form-select" name="status" onchange="this.form.submit()">
                <option value="" {{ !request('status') ? 'selected' : '' }}>All Messages ({{ $counts['all'] }})</option>
                <option value="unread" {{ request('status') == 'unread' ? 'selected' : '' }}>Unread / New ({{ $counts['unread'] }})</option>
                <option value="read" {{ request('status') == 'read' ? 'selected' : '' }}>Read / Reviewed ({{ $counts['read'] }})</option>
            </select>
        </div>

        <div class="col-6 col-md-2 d-flex gap-2">
            <button type="submit" class="btn btn-ftptn w-100 rounded-pill"><i class="bi bi-funnel me-1"></i> Filter</button>
            @if(request()->hasAny(['search', 'status']))
                <a href="{{ route('admin.contacts.index') }}" class="btn btn-outline-secondary rounded-pill" title="Reset Filters"><i class="bi bi-arrow-counterclockwise"></i></a>
            @endif
        </div>

    </form>
</div>

<!-- Messages Data Table -->
<div class="card-custom p-3 p-md-4">
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
        <div>
            <h6 class="fw-bold text-dark mb-0 font-outfit fs-6">Contact Inquiries Inbox</h6>
            <span class="text-muted small">Showing <strong>{{ $submissions->total() }}</strong> total website inquiries</span>
        </div>
        @if($counts['unread'] > 0)
            <span class="badge bg-warning text-dark px-3 py-2 rounded-pill fw-bold" style="background-color: #d4aa2c !important;">
                <i class="bi bi-envelope-exclamation-fill me-1"></i> {{ $counts['unread'] }} Unread Message{{ $counts['unread'] > 1 ? 's' : '' }}
            </span>
        @endif
    </div>

    <!-- Responsive Table Container -->
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr class="text-muted small text-uppercase" style="font-size: 0.72rem; letter-spacing: 0.05em; background-color: #f8fafc;">
                    <th class="py-3 ps-3 rounded-start" style="width: 45px;">Status</th>
                    <th class="py-3">Sender Details</th>
                    <th class="py-3">Contact</th>
                    <th class="py-3">Service Interest</th>
                    <th class="py-3" style="max-width: 320px;">Message Snippet</th>
                    <th class="py-3">Received</th>
                    <th class="py-3 pe-3 text-end rounded-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($submissions as $msg)
                    <tr class="{{ !$msg->is_read ? 'table-warning-subtle fw-medium' : '' }}" style="{{ !$msg->is_read ? 'background-color: rgba(212, 170, 44, 0.04);' : '' }}">
                        <td class="ps-3 py-3 text-center">
                            @if(!$msg->is_read)
                                <span class="badge bg-warning text-dark rounded-pill px-2 py-1" style="font-size: 0.7rem; background-color: #d4aa2c !important;" title="New Unread Message">
                                    <span class="pulse-dot me-1"></span> New
                                </span>
                            @else
                                <span class="badge bg-secondary-subtle text-secondary rounded-pill px-2 py-1" style="font-size: 0.7rem;">
                                    <i class="bi bi-check2-all"></i> Read
                                </span>
                            @endif
                        </td>
                        <td>
                            <a href="{{ route('admin.contacts.show', $msg->id) }}" class="fw-bold text-dark text-decoration-none d-block">
                                {{ $msg->name }}
                            </a>
                            <small class="text-muted text-truncate d-block" style="max-width: 180px;">{{ $msg->email }}</small>
                        </td>
                        <td>
                            @if($msg->phone)
                                <a href="https://wa.me/91{{ preg_replace('/\D/', '', $msg->phone) }}" target="_blank" class="text-success text-decoration-none small fw-semibold d-block">
                                    <i class="bi bi-whatsapp me-1"></i> {{ $msg->phone }}
                                </a>
                            @else
                                <span class="text-muted small">-</span>
                            @endif
                        </td>
                        <td>
                            @if($msg->service_interest)
                                <span class="badge bg-light text-dark border px-2 py-1 rounded-pill small">
                                    {{ $msg->service_interest }}
                                </span>
                            @else
                                <span class="text-muted small">General Inquiry</span>
                            @endif
                        </td>
                        <td style="max-width: 320px;">
                            <div class="text-truncate text-secondary small" style="max-width: 320px;">
                                {{ Str::limit($msg->message, 80) }}
                            </div>
                        </td>
                        <td>
                            <small class="text-muted text-nowrap">{{ $msg->created_at->format('d M Y, h:i A') }}</small>
                        </td>
                        <td class="pe-3 text-end text-nowrap">
                            <div class="btn-group btn-group-sm">
                                <!-- View Detail -->
                                <a href="{{ route('admin.contacts.show', $msg->id) }}" class="btn btn-outline-primary" title="View Full Message">
                                    <i class="bi bi-eye-fill"></i>
                                </a>

                                <!-- Toggle Read Status Form -->
                                <form action="{{ route('admin.contacts.toggle-read', $msg->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-outline-secondary" title="{{ $msg->is_read ? 'Mark as Unread' : 'Mark as Read' }}">
                                        <i class="bi {{ $msg->is_read ? 'bi-envelope' : 'bi-envelope-open' }}"></i>
                                    </button>
                                </form>

                                <!-- Direct Email -->
                                <a href="mailto:{{ $msg->email }}?subject=Reply%20from%20FTPTN%20Federation" class="btn btn-outline-success" title="Reply via Email">
                                    <i class="bi bi-reply-fill"></i>
                                </a>

                                <!-- Delete -->
                                <button type="button" class="btn btn-outline-danger" title="Delete Message" data-bs-toggle="modal" data-bs-target="#deleteContactModal{{ $msg->id }}">
                                    <i class="bi bi-trash3-fill"></i>
                                </button>
                            </div>

                            <!-- Delete Modal for this row -->
                            <div class="modal fade text-start" id="deleteContactModal{{ $msg->id }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content rounded-4 border-0 shadow-lg">
                                        <div class="modal-header border-bottom p-4">
                                            <h6 class="modal-title fw-bold text-danger d-flex align-items-center gap-2">
                                                <i class="bi bi-trash3-fill"></i> Confirm Message Deletion
                                            </h6>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body p-4">
                                            <p class="mb-1">Are you sure you want to permanently delete the inquiry from <strong>{{ $msg->name }}</strong>?</p>
                                            <small class="text-muted d-block mt-2">Email: {{ $msg->email }} | Date: {{ $msg->created_at->format('d M Y') }}</small>
                                        </div>
                                        <div class="modal-footer border-top p-3 d-flex justify-content-between">
                                            <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                                            <form action="{{ route('admin.contacts.destroy', $msg->id) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger rounded-pill px-4 fw-semibold">Delete Message</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted">
                            <div class="py-4">
                                <i class="bi bi-chat-left-dots fs-1 d-block mb-2 text-secondary opacity-50"></i>
                                <h6 class="fw-bold text-secondary mb-1">No Inquiries Found</h6>
                                <p class="small text-muted mb-0">Website contact form submissions will appear here in real-time.</p>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination Links -->
    @if($submissions->hasPages())
        <div class="mt-4 pt-3 border-top d-flex justify-content-between align-items-center flex-wrap gap-2">
            <span class="small text-muted">
                Showing {{ $submissions->firstItem() }} to {{ $submissions->lastItem() }} of {{ $submissions->total() }} inquiries
            </span>
            <div>
                {{ $submissions->links('pagination::bootstrap-5') }}
            </div>
        </div>
    @endif

</div>

@endsection