@extends('layouts.admin')

@section('title', 'Inquiries Dashboard')

@section('content')
<div class="space-y-8">
    {{-- Page Header --}}
    <div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem;">
        <div>
            <h1 style="font-size: 1.75rem; font-weight: 700; color: var(--adm-navy); margin: 0; letter-spacing: -0.02em;">Contact Inquiries</h1>
            <p style="font-size: 0.875rem; color: var(--adm-text-muted); margin: 0.35rem 0 0 0;">Review, search, and manage candidate and client submissions.</p>
        </div>
        <div>
            <a href="{{ route('admin.inquiries.export', request()->query()) }}" style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.15rem; background: #FFFFFF; border: 1px solid var(--adm-border); border-radius: 10px; color: var(--adm-navy); text-decoration: none; font-size: 0.8rem; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: all 0.2s;">
                <svg style="width: 1rem; height: 1rem; color: var(--adm-teal);" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                <span>Export to CSV</span>
            </a>
        </div>
    </div>

    {{-- Stats Cards --}}
    <div class="admin-stats-grid">
        <div class="admin-stat-card">
            <div class="admin-stat-icon total">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/></svg>
            </div>
            <div>
                <p class="admin-stat-label">Total Inquiries</p>
                <p class="admin-stat-value">{{ $counts['total'] }}</p>
            </div>
        </div>

        <div class="admin-stat-card">
            <div class="admin-stat-icon unread">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
            </div>
            <div>
                <p class="admin-stat-label">Unread</p>
                <p class="admin-stat-value" style="color: #D97706;">{{ $counts['unread'] }}</p>
            </div>
        </div>

        <div class="admin-stat-card">
            <div class="admin-stat-icon talent">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
            </div>
            <div>
                <p class="admin-stat-label">Recruitment</p>
                <p class="admin-stat-value" style="color: var(--adm-teal);">{{ $counts['talent'] }}</p>
            </div>
        </div>

        <div class="admin-stat-card">
            <div class="admin-stat-icon finance">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
            </div>
            <div>
                <p class="admin-stat-label">Finance Service</p>
                <p class="admin-stat-value" style="color: #B45309;">{{ $counts['finance'] }}</p>
            </div>
        </div>
    </div>

    {{-- Filters Card --}}
    <div class="admin-filter-card">
        <form method="GET" action="{{ route('admin.inquiries.index') }}" class="admin-filter-form">
            <div class="admin-form-group">
                <label for="search" class="admin-label">Search Query</label>
                <input id="search" name="search" type="text" value="{{ $filters['search'] }}" placeholder="Search by name, company, email, message..." class="admin-input" />
            </div>

            <div class="admin-form-group">
                <label for="service" class="admin-label">Service</label>
                <select id="service" name="service" class="admin-select">
                    <option value="">All Services</option>
                    <option value="talent" {{ $filters['service'] === 'talent' ? 'selected' : '' }}>Recruitment &amp; Talent</option>
                    <option value="finance" {{ $filters['service'] === 'finance' ? 'selected' : '' }}>Accounts &amp; Finance</option>
                    <option value="other" {{ $filters['service'] === 'other' ? 'selected' : '' }}>Other Inquiries</option>
                </select>
            </div>

            <div class="admin-form-group">
                <label for="status" class="admin-label">Status</label>
                <select id="status" name="status" class="admin-select">
                    <option value="">All Statuses</option>
                    <option value="unread" {{ $filters['status'] === 'unread' ? 'selected' : '' }}>Unread Only</option>
                    <option value="read" {{ $filters['status'] === 'read' ? 'selected' : '' }}>Read</option>
                </select>
            </div>

            <div style="display: flex; gap: 0.5rem;">
                <button type="submit" class="admin-btn-navy">
                    Filter
                </button>
                @if($filters['search'] !== '' || $filters['service'] !== '' || $filters['status'] !== '')
                    <a href="{{ route('admin.inquiries.index') }}" class="admin-btn-reset" title="Reset Filters">
                        <svg style="width: 14px; height: 14px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                    </a>
                @endif
            </div>
        </form>
    </div>

    {{-- Inquiries Table --}}
    <div class="admin-table-card">
        <div style="overflow-x: auto;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th style="width: 44px; text-align: center;">Status</th>
                        <th>Contact</th>
                        <th>Service</th>
                        <th style="max-width: 320px;">Message</th>
                        <th>Date</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($inquiries as $inquiry)
                        <tr class="{{ !$inquiry->is_read ? 'unread-row' : '' }}" id="inquiry-row-{{ $inquiry->id }}">
                            <td style="text-align: center;">
                                <span class="status-dot {{ !$inquiry->is_read ? 'unread' : 'read' }}" title="{{ !$inquiry->is_read ? 'Unread' : 'Read' }}"></span>
                            </td>
                            <td>
                                <div style="font-weight: 600; color: var(--adm-navy);">{{ $inquiry->name }}</div>
                                @if($inquiry->company)
                                    <div style="font-size: 0.775rem; color: var(--adm-text-muted);">{{ $inquiry->company }}</div>
                                @endif
                                <div style="font-size: 0.775rem; color: #94A3B8; margin-top: 0.25rem; display: flex; align-items: center; gap: 0.5rem;">
                                    <a href="mailto:{{ $inquiry->email }}" style="color: var(--adm-teal); text-decoration: none;">{{ $inquiry->email }}</a>
                                    @if($inquiry->phone)
                                        <span>&bull;</span>
                                        <a href="tel:{{ $inquiry->phone }}" style="color: var(--adm-text-muted); text-decoration: none;">{{ $inquiry->phone }}</a>
                                    @endif
                                </div>
                            </td>
                            <td style="white-space: nowrap;">
                                @if($inquiry->service === 'talent')
                                    <span class="admin-badge talent">Recruitment</span>
                                @elseif($inquiry->service === 'finance')
                                    <span class="admin-badge finance">Finance</span>
                                @else
                                    <span class="admin-badge other">Other</span>
                                @endif
                            </td>
                            <td style="max-width: 320px;">
                                <div style="font-size: 0.8rem; color: #475569; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer;" onclick="openDetailModal({{ $inquiry->id }})">
                                    {{ $inquiry->message }}
                                </div>
                            </td>
                            <td style="font-size: 0.775rem; color: var(--adm-text-muted); white-space: nowrap;">
                                <div style="font-weight: 500;">{{ $inquiry->created_at->format('d M Y') }}</div>
                                <div style="font-size: 0.7rem; color: #94A3B8;">{{ $inquiry->created_at->format('h:i A') }}</div>
                            </td>
                            <td style="text-align: right; white-space: nowrap;">
                                <div style="display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem;">
                                    <button type="button" onclick="openDetailModal({{ $inquiry->id }})" class="action-btn" title="View Full Details">
                                        <svg style="width: 16px; height: 16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                    </button>

                                    <form method="POST" action="{{ route('admin.inquiries.toggle-read', $inquiry) }}" style="margin: 0;">
                                        @csrf
                                        @method('PATCH')
                                        <button type="submit" class="action-btn" title="{{ $inquiry->is_read ? 'Mark as Unread' : 'Mark as Read' }}">
                                            @if($inquiry->is_read)
                                                <svg style="width: 16px; height: 16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76"/></svg>
                                            @else
                                                <svg style="width: 16px; height: 16px; color: #D97706;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                                            @endif
                                        </button>
                                    </form>

                                    <form method="POST" action="{{ route('admin.inquiries.destroy', $inquiry) }}" style="margin: 0;" onsubmit="return confirm('Are you sure you want to delete this inquiry from {{ addslashes($inquiry->name) }}?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="action-btn delete" title="Delete Inquiry">
                                            <svg style="width: 16px; height: 16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" style="padding: 3.5rem 1rem; text-align: center; color: var(--adm-text-muted);">
                                <svg style="width: 42px; height: 42px; color: #CBD5E1; margin: 0 auto 0.75rem auto; display: block;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/></svg>
                                <p style="font-weight: 600; color: #475569; margin: 0;">No inquiries found</p>
                                <p style="font-size: 0.8rem; color: #94A3B8; margin: 0.25rem 0 0 0;">Try adjusting your search query or filters.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if ($inquiries->hasPages())
            <div style="padding: 1rem 1.5rem; border-top: 1px solid var(--adm-border); background: #F8FAFC;">
                {{ $inquiries->links() }}
            </div>
        @endif
    </div>
</div>

{{-- Detail Modal --}}
<div id="detail-modal" class="admin-modal-backdrop" style="display: none;">
    <div class="admin-modal-box">
        <div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--adm-border); padding-bottom: 1rem;">
            <div>
                <span id="modal-service" class="admin-badge talent" style="margin-bottom: 0.5rem; display: inline-block;"></span>
                <h3 id="modal-name" style="font-size: 1.25rem; font-weight: 700; color: var(--adm-navy); margin: 0;"></h3>
                <p id="modal-company" style="font-size: 0.8rem; color: var(--adm-text-muted); margin: 0.25rem 0 0 0;"></p>
            </div>
            <button type="button" onclick="closeDetailModal()" style="background: none; border: none; font-size: 1.5rem; color: #94A3B8; cursor: pointer; padding: 0; line-height: 1;">&times;</button>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--adm-border); font-size: 0.8rem;">
            <div>
                <span style="color: #94A3B8; display: block; margin-bottom: 0.2rem; font-size: 0.675rem; font-weight: 700; text-transform: uppercase;">Email</span>
                <a id="modal-email" href="" style="color: var(--adm-teal); font-weight: 600; text-decoration: none; word-break: break-all;"></a>
            </div>
            <div>
                <span style="color: #94A3B8; display: block; margin-bottom: 0.2rem; font-size: 0.675rem; font-weight: 700; text-transform: uppercase;">Phone</span>
                <a id="modal-phone" href="" style="color: var(--adm-navy); font-weight: 600; text-decoration: none;"></a>
            </div>
            <div>
                <span style="color: #94A3B8; display: block; margin-bottom: 0.2rem; font-size: 0.675rem; font-weight: 700; text-transform: uppercase;">Submitted Date</span>
                <span id="modal-date" style="color: #475569; font-weight: 500;"></span>
            </div>
            <div>
                <span style="color: #94A3B8; display: block; margin-bottom: 0.2rem; font-size: 0.675rem; font-weight: 700; text-transform: uppercase;">Sender IP</span>
                <span id="modal-ip" style="color: #475569; font-family: monospace;"></span>
            </div>
        </div>

        <div style="padding: 1.25rem 0;">
            <span style="color: #94A3B8; display: block; margin-bottom: 0.5rem; font-size: 0.675rem; font-weight: 700; text-transform: uppercase;">Message</span>
            <div id="modal-message" style="padding: 1rem; border-radius: 12px; background: #F8FAFC; border: 1px solid var(--adm-border); font-size: 0.825rem; color: #334155; white-space: pre-wrap; line-height: 1.5;"></div>
        </div>

        <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.5rem;">
            <a id="modal-reply-btn" href="" class="admin-btn-navy" style="text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem;">
                Reply via Email
            </a>
            <button type="button" onclick="closeDetailModal()" class="admin-btn-reset" style="cursor: pointer; font-size: 0.8rem; font-weight: 600;">
                Close
            </button>
        </div>
    </div>
</div>

@push('scripts')
<script>
    async function openDetailModal(id) {
        const modal = document.getElementById('detail-modal');
        try {
            const res = await fetch(`/admin/inquiries/${id}`, {
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            const data = await res.json();

            document.getElementById('modal-name').textContent = data.name;
            document.getElementById('modal-company').textContent = data.company !== '—' ? data.company : '';
            document.getElementById('modal-email').textContent = data.email;
            document.getElementById('modal-email').href = `mailto:${data.email}`;
            document.getElementById('modal-phone').textContent = data.phone;
            document.getElementById('modal-phone').href = data.phone !== '—' ? `tel:${data.phone}` : '#';
            document.getElementById('modal-service').textContent = data.service_label;
            document.getElementById('modal-date').textContent = data.created_at;
            document.getElementById('modal-ip').textContent = data.ip_address;
            document.getElementById('modal-message').textContent = data.message;
            document.getElementById('modal-reply-btn').href = `mailto:${data.email}?subject=Re: Inquiry with Apexcel Global Solutions`;

            modal.style.display = 'flex';

            // Update row status visually to read
            const row = document.getElementById(`inquiry-row-${id}`);
            if (row) {
                row.classList.remove('unread-row');
                const dot = row.querySelector('.status-dot');
                if (dot) {
                    dot.className = 'status-dot read';
                    dot.title = 'Read';
                }
            }
        } catch (err) {
            console.error(err);
        }
    }

    function closeDetailModal() {
        document.getElementById('detail-modal').style.display = 'none';
    }

    document.getElementById('detail-modal')?.addEventListener('click', (e) => {
        if (e.target.id === 'detail-modal') closeDetailModal();
    });
</script>
@endpush
@endsection