@extends('layouts.admin')

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

@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-0 text-gray-800">Contact Message Details</h1>
        <p class="text-muted">View and manage contact form submission</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.contact-messages.index') }}" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-arrow-left"></i> Back to Messages
        </a>
        @if($message->status == 'new')
            <button class="btn btn-sm btn-primary" onclick="markAsRead({{ $message->id }})">
                <i class="fas fa-envelope-open"></i> Mark as Read
            </button>
        @endif
        @if($message->status != 'replied')
            <button class="btn btn-sm btn-success" data-toggle="modal" data-target="#replyModal">
                <i class="fas fa-reply"></i> Reply
            </button>
        @endif
    </div>
</div>

<div class="row">
    {{-- Message Details --}}
    <div class="col-lg-8">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Message Content</h6>
            </div>
            <div class="card-body">
                {{-- Message Status Badge --}}
                <div class="mb-3">
                    @switch($message->status)
                        @case('new')
                            <span class="badge badge-warning badge-lg">
                                <i class="fas fa-envelope"></i> New Message
                            </span>
                            @break
                        @case('read')
                            <span class="badge badge-info badge-lg">
                                <i class="fas fa-envelope-open"></i> Read
                            </span>
                            @break
                        @case('replied')
                            <span class="badge badge-success badge-lg">
                                <i class="fas fa-reply"></i> Replied
                            </span>
                            @break
                    @endswitch
                </div>

                {{-- Subject --}}
                <div class="mb-4">
                    <h4 class="mb-2">{{ $message->subject }}</h4>
                    @if($message->category)
                        <span class="badge badge-secondary">{{ ucfirst($message->category) }}</span>
                    @endif
                </div>

                {{-- Message Content --}}
                <div class="mb-4">
                    <div class="bg-light p-4 rounded">
                        <div style="white-space: pre-wrap;">{{ $message->message }}</div>
                    </div>
                </div>

                {{-- Additional Info --}}
                @if($message->phone || $message->website)
                    <div class="border-top pt-3">
                        <h6 class="text-muted mb-3">Additional Information</h6>
                        @if($message->phone)
                            <div class="mb-2">
                                <strong>Phone:</strong> {{ $message->phone }}
                            </div>
                        @endif
                        @if($message->website)
                            <div class="mb-2">
                                <strong>Website:</strong> 
                                <a href="{{ $message->website }}" target="_blank">{{ $message->website }}</a>
                            </div>
                        @endif
                    </div>
                @endif
            </div>
        </div>

        {{-- Reply History --}}
        @if($message->replies && $message->replies->count() > 0)
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Reply History</h6>
                </div>
                <div class="card-body">
                    @foreach($message->replies as $reply)
                        <div class="d-flex mb-3 {{ $loop->last ? '' : 'border-bottom pb-3' }}">
                            <div class="avatar avatar-sm rounded-circle bg-success text-white mr-3 mt-1">
                                <i class="fas fa-user"></i>
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <strong>Admin Reply</strong>
                                        <small class="text-muted ml-2">{{ $reply->created_at->format('M d, Y \a\t H:i') }}</small>
                                    </div>
                                </div>
                                <div class="mt-2" style="white-space: pre-wrap;">{{ $reply->content }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>

    {{-- Sidebar --}}
    <div class="col-lg-4">
        {{-- Sender Information --}}
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Sender Information</h6>
            </div>
            <div class="card-body">
                <div class="text-center mb-3">
                    <div class="avatar avatar-lg rounded-circle bg-primary text-white mx-auto mb-2" style="width: 4rem; height: 4rem; font-size: 1.5rem;">
                        {{ strtoupper(substr($message->name, 0, 1)) }}
                    </div>
                    <h5 class="mb-1">{{ $message->name }}</h5>
                    @if($message->company)
                        <div class="text-muted">{{ $message->company }}</div>
                    @endif
                </div>

                <div class="border-top pt-3">
                    <div class="mb-2">
                        <strong>Email:</strong><br>
                        <a href="mailto:{{ $message->email }}">{{ $message->email }}</a>
                    </div>
                    @if($message->phone)
                        <div class="mb-2">
                            <strong>Phone:</strong><br>
                            <a href="tel:{{ $message->phone }}">{{ $message->phone }}</a>
                        </div>
                    @endif
                    @if($message->website)
                        <div class="mb-2">
                            <strong>Website:</strong><br>
                            <a href="{{ $message->website }}" target="_blank">{{ $message->website }}</a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Message Meta --}}
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Message Details</h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <strong>Received:</strong><br>
                    <span class="text-muted">{{ $message->created_at->format('M d, Y \a\t H:i') }}</span><br>
                    <small class="text-muted">{{ $message->created_at->diffForHumans() }}</small>
                </div>

                @if($message->ip_address)
                    <div class="mb-3">
                        <strong>IP Address:</strong><br>
                        <code>{{ $message->ip_address }}</code>
                    </div>
                @endif

                @if($message->user_agent)
                    <div class="mb-3">
                        <strong>User Agent:</strong><br>
                        <small class="text-muted">{{ Str::limit($message->user_agent, 50) }}</small>
                    </div>
                @endif

                <div class="mb-3">
                    <strong>Status Changes:</strong><br>
                    @if($message->read_at)
                        <small class="text-muted d-block">Read: {{ $message->read_at->format('M d, Y H:i') }}</small>
                    @endif
                    @if($message->replied_at)
                        <small class="text-muted d-block">Replied: {{ $message->replied_at->format('M d, Y H:i') }}</small>
                    @endif
                </div>
            </div>
        </div>

        {{-- Actions --}}
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Actions</h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="mailto:{{ $message->email }}?subject=Re: {{ $message->subject }}" 
                       class="btn btn-primary btn-sm">
                        <i class="fas fa-envelope"></i> Send Email
                    </a>
                    
                    @if($message->phone)
                        <a href="tel:{{ $message->phone }}" class="btn btn-info btn-sm">
                            <i class="fas fa-phone"></i> Call
                        </a>
                    @endif

                    <button class="btn btn-warning btn-sm" onclick="addNote()">
                        <i class="fas fa-sticky-note"></i> Add Note
                    </button>

                    <button class="btn btn-danger btn-sm" onclick="deleteMessage({{ $message->id }})">
                        <i class="fas fa-trash"></i> Delete
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Reply Modal --}}
<div class="modal fade" id="replyModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reply to {{ $message->name }}</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="replyForm" action="{{ route('admin.contact-messages.reply', $message) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="reply_subject">Subject</label>
                        <input type="text" class="form-control" id="reply_subject" name="subject" 
                               value="Re: {{ $message->subject }}" required>
                    </div>
                    <div class="form-group">
                        <label for="reply_content">Message</label>
                        <textarea class="form-control" id="reply_content" name="content" rows="8" 
                                  placeholder="Type your reply here..." required></textarea>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="send_copy" name="send_copy" checked>
                        <label class="form-check-label" for="send_copy">
                            Send copy to {{ $message->email }}
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-paper-plane"></i> Send Reply
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

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

.avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
}

.avatar-lg {
    width: 4rem;
    height: 4rem;
    font-size: 1.5rem;
}

.badge-lg {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

.d-grid {
    display: grid;
}

.gap-2 {
    gap: 0.5rem;
}

code {
    font-size: 0.875rem;
}
</style>
@endpush

@push('scripts')
<script>
function markAsRead(messageId) {
    if (confirm('Mark this message as read?')) {
        fetch(`/admin/contact-messages/${messageId}/mark-read`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .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.');
        });
    }
}

function deleteMessage(messageId) {
    if (confirm('Are you sure you want to delete this message? This action cannot be undone.')) {
        fetch(`/admin/contact-messages/${messageId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.href = '{{ route("admin.contact-messages.index") }}';
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred. Please try again.');
        });
    }
}

function addNote() {
    const note = prompt('Add a note about this message:');
    if (note && note.trim()) {
        // Implementation for adding notes
        alert('Note functionality will be implemented in the next update.');
    }
}

// Form submission
document.getElementById('replyForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
    
    fetch(this.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            $('#replyModal').modal('hide');
            window.location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred. Please try again.');
    })
    .finally(() => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
    });
});
</script>
@endpush