@extends('admin.layouts.app')

@section('title', 'View Message')
@section('page-title', 'View Message')

@section('content')
<div class="card">
    <div class="card-header">
        <h3>Message from {{ $message->name }}</h3>
        <a href="{{ route('admin.messages.index') }}" class="btn btn-primary btn-sm">← Back to List</a>
    </div>
    <div class="card-body">
        @if(session('success'))
        <div class="alert-auto-dismiss" style="background: rgba(0, 255, 65, 0.1); border: 1px solid var(--primary); color: var(--primary); padding: 1rem; border-radius: 4px; margin-bottom: 2rem; display: flex; align-items: center; gap: 10px; box-shadow: 0 0 10px var(--primary-glow);">
            <svg style="width: 20px; height: 20px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
            {{ session('success') }}
        </div>
        @endif

        <!-- Message Details -->
        <div style="display: grid; grid-template-columns: 120px 1fr; gap: 1rem; margin-bottom: 2rem;">
            <div style="color: var(--text-muted); font-weight: 600;">From:</div>
            <div style="font-weight: 700;">{{ $message->name }}</div>
            
            <div style="color: var(--text-muted); font-weight: 600;">Email:</div>
            <div>
                <a href="mailto:{{ $message->email }}" style="color: var(--primary);">{{ $message->email }}</a>
            </div>
            
            <div style="color: var(--text-muted); font-weight: 600;">Date:</div>
            <div>{{ $message->created_at->format('d M Y, h:i A') }} ({{ $message->created_at->diffForHumans() }})</div>
            
            <div style="color: var(--text-muted); font-weight: 600;">Status:</div>
            <div>
                @if($message->status === 'new')
                    <span style="background: rgba(0, 255, 65, 0.1); color: var(--primary); border: 1px solid var(--primary); padding: 3px 12px; border-radius: 50px; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; box-shadow: 0 0 10px var(--primary-glow);">New</span>
                @elseif($message->status === 'read')
                    <span style="background: rgba(0, 255, 65, 0.1); color: var(--primary); border: 1px solid var(--primary); padding: 3px 12px; border-radius: 50px; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; box-shadow: 0 0 10px var(--primary-glow);">Read</span>
                @else
                    <span style="background: rgba(0, 255, 65, 0.1); color: var(--primary); border: 1px solid var(--primary); padding: 3px 12px; border-radius: 50px; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; box-shadow: 0 0 10px var(--primary-glow);">Resolved</span>
                @endif
            </div>
        </div>
        
        <!-- Message Content -->
        <div style="background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem;">
            <div style="color: var(--text-muted); font-weight: 600; margin-bottom: 0.75rem; font-size: 0.9rem;">Message:</div>
            <div style="white-space: pre-wrap; line-height: 1.8;">{{ $message->message }}</div>
        </div>
        
        <!-- Actions -->
        <div style="display: flex; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 1.5rem; margin-bottom: 2rem;">
            <!-- Update Status -->
            <form action="{{ route('admin.messages.status', $message) }}" method="POST" style="display: flex; gap: 8px; align-items: center;">
                @csrf
                @method('PATCH')
                <select name="status" class="form-control" style="width: auto; padding: 8px 12px; border-radius: 8px; background: var(--input-bg); border: 1px solid var(--border); color: var(--text);">
                    <option value="new" {{ $message->status === 'new' ? 'selected' : '' }}>New</option>
                    <option value="read" {{ $message->status === 'read' ? 'selected' : '' }}>Read</option>
                    <option value="resolved" {{ $message->status === 'resolved' ? 'selected' : '' }}>Resolved</option>
                </select>
                <button type="submit" class="btn btn-primary btn-sm">Update Status</button>
            </form>
            
            <!-- Delete -->
            <form action="{{ route('admin.messages.destroy', $message) }}" method="POST">
                @csrf
                @method('DELETE')
                <button type="button" class="btn btn-danger btn-sm" data-delete="Delete message from {{ $message->name }}?">Delete Message</button>
            </form>
        </div>

        <!-- Reply Section -->
        <div style="background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem;">
            <h4 style="margin-bottom: 1.5rem; color: var(--primary); text-transform: uppercase; letter-spacing: 1px;">Reply to User</h4>
            <form action="{{ route('admin.messages.reply', $message) }}" method="POST">
                @csrf
                <div style="margin-bottom: 1rem;">
                    <label>Subject</label>
                    <input type="text" name="subject" value="Re: Your message to PolyLearn - {{ $message->name }}" style="width: 100%;">
                </div>
                <div style="margin-bottom: 1rem;">
                    <label>Reply Message</label>
                    <textarea name="reply_message" rows="6" style="width: 100%; border-radius: var(--radius-md); padding: 1rem; background: var(--bg-dark); border: 1px solid var(--border); color: var(--text);" placeholder="Write your reply here..."></textarea>
                </div>
                <button type="submit" class="btn btn-primary">
                    <svg style="width: 18px; height: 18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                    Send Reply
                </button>
            </form>
        </div>
    </div>
</div>
@endsection