@extends('layouts.admin')

@section('title', 'Contact Messages — Admin DaisyRisk')
@section('page-title', 'Contact Messages')

@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-0 text-gray-800">Contact Messages</h1>
        <p class="text-muted">Manage contact form submissions and inquiries</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.contact-messages.index', ['status' => 'new']) }}" class="btn btn-sm btn-warning">
            <i class="fas fa-envelope"></i> Unread ({{ $messages->where('status', 'new')->count() }})
        </a>
        <button class="btn btn-sm btn-outline-secondary" onclick="window.location.reload()">
            <i class="fas fa-sync-alt"></i> Refresh
        </button>
    </div>
</div>

{{-- Filter Cards --}}
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card border-left-primary">
            <div class="card-body py-3">
                <div class="d-flex align-items-center">
                    <div class="mr-3">
                        <i class="fas fa-envelope fa-2x text-primary"></i>
                    </div>
                    <div>
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Messages</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalMessages ?? 0 }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-left-warning">
            <div class="card-body py-3">
                <div class="d-flex align-items-center">
                    <div class="mr-3">
                        <i class="fas fa-envelope-open fa-2x text-warning"></i>
                    </div>
                    <div>
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Unread</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $unreadCount ?? 0 }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-left-success">
            <div class="card-body py-3">
                <div class="d-flex align-items-center">
                    <div class="mr-3">
                        <i class="fas fa-reply fa-2x text-success"></i>
                    </div>
                    <div>
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Replied</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $repliedCount ?? 0 }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-left-info">
            <div class="card-body py-3">
                <div class="d-flex align-items-center">
                    <div class="mr-3">
                        <i class="fas fa-calendar fa-2x text-info"></i>
                    </div>
                    <div>
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Today</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $todayCount ?? 0 }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Search & Filter Form --}}
<div class="card mb-4">
    <div class="card-header">
        <h6 class="m-0 font-weight-bold text-primary">Search & Filter Messages</h6>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ route('admin.contact-messages.index') }}">
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="search">Search</label>
                        <input type="text" class="form-control form-control-sm" id="search" name="search" 
                               value="{{ request('search') }}" placeholder="Name, email, subject...">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label for="status">Status</label>
                        <select class="form-control form-control-sm" id="status" name="status">
                            <option value="">All Status</option>
                            <option value="new" {{ request('status') == 'new' ? 'selected' : '' }}>New</option>
                            <option value="read" {{ request('status') == 'read' ? 'selected' : '' }}>Read</option>
                            <option value="replied" {{ request('status') == 'replied' ? 'selected' : '' }}>Replied</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label for="category">Category</label>
                        <select class="form-control form-control-sm" id="category" name="category">
                            <option value="">All Categories</option>
                            <option value="inquiry" {{ request('category') == 'inquiry' ? 'selected' : '' }}>General Inquiry</option>
                            <option value="support" {{ request('category') == 'support' ? 'selected' : '' }}>Support</option>
                            <option value="partnership" {{ request('category') == 'partnership' ? 'selected' : '' }}>Partnership</option>
                            <option value="feedback" {{ request('category') == 'feedback' ? 'selected' : '' }}>Feedback</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label for="date_from">From Date</label>
                        <input type="date" class="form-control form-control-sm" id="date_from" name="date_from" 
                               value="{{ request('date_from') }}">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label for="date_to">To Date</label>
                        <input type="date" class="form-control form-control-sm" id="date_to" name="date_to" 
                               value="{{ request('date_to') }}">
                    </div>
                </div>
                <div class="col-md-1">
                    <div class="form-group">
                        <label>&nbsp;</label>
                        <button type="submit" class="btn btn-primary btn-sm d-block w-100">
                            <i class="fas fa-search"></i> Search
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Messages Table --}}
<div class="card">
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">Contact Messages</h6>
        <div class="dropdown no-arrow">
            <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown">
                <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right shadow">
                <a class="dropdown-item" href="{{ route('admin.contact-messages.index') }}?export=csv">
                    <i class="fas fa-download fa-sm fa-fw mr-2 text-gray-400"></i>
                    Export CSV
                </a>
            </div>
        </div>
    </div>
    
    <div class="card-body">
        @if($messages && $messages->count() > 0)
            <div class="table-responsive">
                <table class="table table-bordered table-hover" width="100%" cellspacing="0">
                    <thead class="thead-light">
                        <tr>
                            <th width="5%">
                                <input type="checkbox" id="selectAll">
                            </th>
                            <th width="15%">Sender</th>
                            <th width="20%">Subject</th>
                            <th width="25%">Message Preview</th>
                            <th width="10%">Category</th>
                            <th width="10%">Status</th>
                            <th width="10%">Date</th>
                            <th width="5%">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($messages as $message)
                            <tr class="{{ $message->status == 'new' ? 'bg-light' : '' }}">
                                <td>
                                    <input type="checkbox" class="message-checkbox" value="{{ $message->id }}">
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar avatar-sm rounded-circle bg-primary text-white mr-2">
                                            {{ strtoupper(substr($message->name, 0, 1)) }}
                                        </div>
                                        <div>
                                            <div class="font-weight-bold">{{ $message->name }}</div>
                                            <div class="text-xs text-muted">{{ $message->email }}</div>
                                            @if($message->company)
                                                <div class="text-xs text-info">{{ $message->company }}</div>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="font-weight-bold">
                                        {{ Str::limit($message->subject, 40) }}
                                    </div>
                                </td>
                                <td>
                                    <div class="text-sm">
                                        {{ Str::limit($message->message, 80) }}
                                    </div>
                                </td>
                                <td>
                                    @if($message->category)
                                        <span class="badge badge-secondary">{{ ucfirst($message->category) }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    @switch($message->status)
                                        @case('new')
                                            <span class="badge badge-warning">
                                                <i class="fas fa-envelope"></i> New
                                            </span>
                                            @break
                                        @case('read')
                                            <span class="badge badge-info">
                                                <i class="fas fa-envelope-open"></i> Read
                                            </span>
                                            @break
                                        @case('replied')
                                            <span class="badge badge-success">
                                                <i class="fas fa-reply"></i> Replied
                                            </span>
                                            @break
                                    @endswitch
                                </td>
                                <td>
                                    <div class="text-sm">{{ $message->created_at->format('M d, Y') }}</div>
                                    <div class="text-xs text-muted">{{ $message->created_at->format('H:i') }}</div>
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('admin.contact-messages.show', $message) }}" 
                                           class="btn btn-sm btn-outline-primary" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            @if(method_exists($messages, 'links'))
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div class="text-muted">
                        Showing {{ $messages->firstItem() }} to {{ $messages->lastItem() }} of {{ $messages->total() }} results
                    </div>
                    <div>
                        {{ $messages->withQueryString()->links() }}
                    </div>
                </div>
            @endif

        @else
            <div class="text-center py-5">
                <i class="fas fa-envelope fa-3x text-gray-300 mb-3"></i>
                <h5 class="text-gray-500">No Contact Messages Found</h5>
                <p class="text-gray-400">No contact form submissions match your current filters.</p>
            </div>
        @endif
    </div>
</div>

{{-- Bulk Actions Modal --}}
<div class="modal fade" id="bulkActionsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bulk Actions</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="bulkActionsForm">
                    <div class="form-group">
                        <label>Action</label>
                        <select class="form-control" name="bulk_action" required>
                            <option value="">Select Action</option>
                            <option value="mark_read">Mark as Read</option>
                            <option value="mark_replied">Mark as Replied</option>
                            <option value="delete">Delete Messages</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <p class="text-muted">Selected messages: <span id="selectedCount">0</span></p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="executeBulkAction()">Execute</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
.avatar {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
}

.border-left-primary {
    border-left: 0.25rem solid #4e73df !important;
}

.border-left-warning {
    border-left: 0.25rem solid #f6c23e !important;
}

.border-left-success {
    border-left: 0.25rem solid #1cc88a !important;
}

.border-left-info {
    border-left: 0.25rem solid #36b9cc !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.bg-light {
    background-color: #f8f9fc !important;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Select all checkbox functionality
    document.getElementById('selectAll').addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.message-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
        updateSelectedCount();
    });

    // Update selected count
    function updateSelectedCount() {
        const selected = document.querySelectorAll('.message-checkbox:checked').length;
        document.getElementById('selectedCount').textContent = selected;
    }

    // Individual checkbox change
    document.querySelectorAll('.message-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', updateSelectedCount);
    });

    // Bulk actions
    window.executeBulkAction = function() {
        const selected = Array.from(document.querySelectorAll('.message-checkbox:checked')).map(cb => cb.value);
        const action = document.querySelector('[name="bulk_action"]').value;

        if (selected.length === 0) {
            alert('Please select at least one message.');
            return;
        }

        if (!action) {
            alert('Please select an action.');
            return;
        }

        if (confirm(`Are you sure you want to ${action.replace('_', ' ')} ${selected.length} message(s)?`)) {
            // Execute bulk action via AJAX
            fetch('{{ route("admin.contact-messages.index") }}/bulk', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    ids: selected,
                    action: action
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.reload();
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred. Please try again.');
            });
        }
    };
});
</script>
@endpush