@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        @include('partials.header')
        @include('partials.sidebar')

        <div id="content" class="content">
            <!-- Breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('messages.index') }}">Messages</a></li>
                <li class="breadcrumb-item active">View Message</li>
            </ol>

            <!-- Page Header -->
            <h1 class="page-header">Message Details</h1>

            <!-- Main Panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        Message Details
                    </h4>
                </div>

                <div class="panel-body">
                    <!-- Message Header Information -->
                    <div class="message-header">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-group">
                                    <label class="info-label">Message ID:</label>
                                    <span class="info-value">#{{ $message->id }}</span>
                                </div>
                                <div class="info-group">
                                    <label class="info-label">Subject:</label>
                                    <span class="info-value">{{ $message->subject }}</span>
                                </div>
                                <div class="info-group">
                                    <label class="info-label">Sender:</label>
                                    <span class="info-value">{{ $message->sender }}</span>
                                </div>
                                <div class="info-group">
                                    <label class="info-label">Message Type:</label>
                                    <span class="badge {{ $message->type_badge }}">
                                        @if ($message->type === 'broadcast')
                                            <i class="fa fa-broadcast-tower"></i> Broadcast
                                        @else
                                            <i class="fa fa-user"></i> Personal
                                        @endif
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-group">
                                    <label class="info-label">Sent Status:</label>
                                    <span class="badge {{ $message->sent_status_badge }}">
                                        @if ($message->sent_status)
                                            <i class="fa fa-check"></i> Sent
                                        @else
                                            <i class="fa fa-times"></i> Not Sent
                                        @endif
                                    </span>
                                </div>
                                <div class="info-group">
                                    <label class="info-label">Read Status:</label>
                                    <span class="badge {{ $message->read_status_badge }}">
                                        @if ($message->read_status)
                                            <i class="fa fa-eye"></i> Read
                                        @else
                                            <i class="fa fa-eye-slash"></i> Unread
                                        @endif
                                    </span>
                                </div>
                                <div class="info-group">
                                    <label class="info-label">Sent Date:</label>
                                    <span class="info-value">
                                        @if ($message->sent_date)
                                            {{ $message->sent_date->format('F j, Y \a\t g:i A') }}
                                        @else
                                            <span class="text-muted">Not sent yet</span>
                                        @endif
                                    </span>
                                </div>
                                <div class="info-group">
                                    <label class="info-label">Read Date:</label>
                                    <span class="info-value">
                                        @if ($message->read_date)
                                            {{ $message->read_date->format('F j, Y \a\t g:i A') }}
                                        @else
                                            <span class="text-muted">Not read yet</span>
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-group">
                                    <label class="info-label">Expiration Status:</label>
                                    @php
                                        $expirationStatus = $message->expiration_status;
                                    @endphp
                                    <span class="{{ $expirationStatus['badge_class'] }}"
                                        title="{{ $expirationStatus['tooltip'] }}">
                                        {{ $expirationStatus['display_text'] }}
                                    </span>

                                    @if ($expirationStatus['is_expired'])
                                        <div class="alert alert-warning mt-2">
                                            <i class="fas fa-exclamation-triangle"></i>
                                            <strong>Expired Message:</strong> This message is no longer visible in
                                            hospitality applications.
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                @if ($message->expires_at)
                                    <div class="info-group">
                                        <label class="info-label">Expires At (UTC):</label>
                                        <span
                                            class="info-value">{{ $message->expires_at->format('F j, Y \a\t g:i A') }}</span>
                                    </div>
                                @else
                                    <div class="info-group">
                                        <label class="info-label">Expiration:</label>
                                        <span class="info-value text-muted">Never expires</span>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <!-- Target Information -->
                    <div class="target-information">
                        <h5 class="section-title">
                            <i class="fa fa-crosshairs"></i> Target Information
                        </h5>

                        @php $target = $message->display_target; @endphp

                        @if ($target['type'] === 'single' || $target['type'] === 'multiple')
                            <div class="alert alert-primary">
                                <div class="d-flex align-items-center">
                                    <div class="mr-3">
                                        <i class="fa fa-user fa-2x"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-1">Personal Message</h6>
                                        <p class="mb-0">This message was sent to <strong>{{ $target['count'] }} specific
                                                room(s)</strong>.</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Target Rooms List -->
                            @if ($message->rooms->count() > 0)
                                <div class="target-rooms">
                                    <h6 class="mb-3">Target Rooms ({{ $message->rooms->count() }})</h6>
                                    <div class="row">
                                        @foreach ($message->rooms as $room)
                                            <div class="col-md-3 col-sm-4 col-6 mb-2">
                                                <div class="room-card">
                                                    <div class="room-number">{{ $room->room }}</div>
                                                    @if ($room->guestname)
                                                        <div class="room-guest">{{ $room->guestname }}</div>
                                                    @endif
                                                    @if ($room->roomType)
                                                        <div class="room-type">{{ $room->roomType->name }}</div>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        @elseif ($target['type'] === 'broadcast')
                            <div class="alert alert-info">
                                <div class="d-flex align-items-center">
                                    <div class="mr-3">
                                        <i class="fa fa-broadcast-tower fa-2x"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-1">Broadcast Message</h6>
                                        <p class="mb-0">This message was sent to <strong>all rooms</strong> in the system.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>

                    <hr class="my-4">

                    <!-- Message Content -->
                    <div class="message-content">
                        <h5 class="section-title">
                            <i class="fa fa-comment"></i> Message Content
                        </h5>

                        <div class="content-display">
                            {!! $message->sanitized_message !!}
                        </div>

                        <!-- Content Stats -->
                        <div class="content-stats mt-3">
                            <small class="text-muted">
                                <i class="fa fa-info-circle"></i>
                                Content length: {{ strlen(strip_tags($message->message)) }} characters
                                @if (strlen($message->message) !== strlen(strip_tags($message->message)))
                                    ({{ strlen($message->message) }} with HTML)
                                @endif
                            </small>
                        </div>
                    </div>

                    <hr class="my-4">

                    <!-- Metadata -->
                    <div class="message-metadata">
                        <h5 class="section-title">
                            <i class="fa fa-info"></i> Metadata
                        </h5>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-group">
                                    <label class="info-label">Created At:</label>
                                    <span
                                        class="info-value">{{ $message->created_at->format('F j, Y \a\t g:i A') }}</span>
                                </div>
                                <div class="info-group">
                                    <label class="info-label">Last Updated:</label>
                                    <span
                                        class="info-value">{{ $message->updated_at->format('F j, Y \a\t g:i A') }}</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-group">
                                    <label class="info-label">Time Since Sent:</label>
                                    <span class="info-value">
                                        @if ($message->sent_date)
                                            {{ $message->sent_date->diffForHumans() }}
                                        @else
                                            <span class="text-muted">Not sent</span>
                                        @endif
                                    </span>
                                </div>
                                <div class="info-group">
                                    <label class="info-label">Total Target Count:</label>
                                    <span class="info-value">
                                        <strong>{{ $message->room_count }}</strong> room(s)
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="message-actions mt-4">
                        <div role="group">
                            <a href="{{ route('messages.index') }}" class="btn btn-custom">
                                <i class="fa fa-arrow-left"></i> Back to Messages
                            </a>

                            @if (!$message->read_status)
                                <button type="button" class="btn btn-custom" onclick="markAsRead({{ $message->id }})">
                                    <i class="fa fa-eye"></i> Mark as Read
                                </button>
                            @endif

                            <button type="button" class="btn btn-custom" onclick="deleteMessage({{ $message->id }})"
                                title="Delete this message">
                                <i class="fa fa-trash"></i> Delete Message
                            </button>
                        </div>

                        <!-- Quick Actions -->
                        <div class="quick-actions mt-3">
                            <small class="text-muted">Quick Actions:</small>
                            <div class="btn-group btn-group-sm ml-2" role="group">
                                <button type="button" class="btn btn-outline-primary"
                                    onclick="copyToClipboard('{{ $message->subject }}')">
                                    <i class="fa fa-copy"></i> Copy Subject
                                </button>
                                <button type="button" class="btn btn-outline-primary"
                                    onclick="copyToClipboard('{{ strip_tags($message->message) }}')">
                                    <i class="fa fa-copy"></i> Copy Content
                                </button>
                                <a href="{{ route('messages.create') }}?template={{ $message->id }}"
                                    class="btn btn-outline-success">
                                    <i class="fa fa-clone"></i> Use as Template
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
            data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">
                        <i class="fa fa-exclamation-triangle text-warning"></i>
                        Confirm Delete
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this message?</p>
                    <div class="alert alert-warning">
                        <i class="fa fa-warning"></i>
                        <strong>Warning:</strong> This action cannot be undone.
                    </div>
                    <div class="message-summary">
                        <strong>Subject:</strong> {{ $message->subject }}<br>
                        <strong>Sender:</strong> {{ $message->sender }}<br>
                        <strong>Target:</strong> {{ $message->room_count }} room(s)
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fa fa-times"></i> Cancel
                    </button>
                    <form id="delete-form" method="POST" action="{{ route('messages.destroy', $message->id) }}"
                        style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            <i class="fa fa-trash"></i> Delete Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <style>
        .message-header {
            background-color: #f8f9fa;
            padding: 1.5rem;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

        .info-group {
            margin-bottom: 1rem;
        }

        .info-label {
            font-weight: 600;
            color: #495057;
            display: inline-block;
            min-width: 120px;
        }

        .info-value {
            color: #6c757d;
        }

        .section-title {
            color: #495057;
            font-weight: 600;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #007bff;
        }

        .content-display {
            background-color: #ffffff;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 1.5rem;
            min-height: 100px;
            line-height: 1.6;
        }

        .content-stats {
            font-size: 0.875rem;
        }

        .target-rooms {
            margin-top: 1rem;
        }

        .room-card {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 0.75rem;
            text-align: center;
            transition: all 0.2s ease;
        }

        .room-card:hover {
            background-color: #e9ecef;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .room-number {
            font-weight: 600;
            font-size: 1.1rem;
            color: #495057;
        }

        .room-guest {
            font-size: 0.875rem;
            color: #6c757d;
            margin-top: 0.25rem;
        }

        .room-type {
            font-size: 0.75rem;
            color: #6c757d;
            margin-top: 0.25rem;
            font-style: italic;
        }

        .message-metadata {
            background-color: #f8f9fa;
            padding: 1.5rem;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

        .message-actions {
            padding-top: 1.5rem;
            border-top: 1px solid #dee2e6;
        }

        .quick-actions {
            border-top: 1px solid #eee;
            padding-top: 1rem;
        }

        .badge {
            font-size: 0.75em;
            padding: 0.35em 0.6em;
            border-radius: 3px;
            font-weight: 500;
        }

        .badge-primary {
            background-color: #007bff;
            color: white;
        }

        .badge-info {
            background-color: #17a2b8;
            color: white;
        }

        .badge-success {
            background-color: #28a745;
            color: white;
        }

        .badge-danger {
            background-color: #dc3545;
            color: white;
        }

        .badge-secondary {
            background-color: #6c757d;
            color: white;
        }

        .alert {
            padding: 1rem;
            margin-bottom: 1rem;
            border: 1px solid transparent;
            border-radius: 6px;
        }

        .alert-primary {
            color: #004085;
            background-color: #cce7ff;
            border-color: #b8daff;
        }

        .alert-info {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1;
        }

        .alert-warning {
            color: #8a6d3b;
            background-color: #fcf8e3;
            border-color: #faebcc;
        }

        .d-flex {
            display: flex;
        }

        .align-items-center {
            align-items: center;
        }

        .mr-3 {
            margin-right: 1rem;
        }

        .my-4 {
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .mt-3 {
            margin-top: 1rem;
        }

        .mt-4 {
            margin-top: 1.5rem;
        }

        .mb-0 {
            margin-bottom: 0;
        }

        .mb-1 {
            margin-bottom: 0.25rem;
        }

        .mb-2 {
            margin-bottom: 0.5rem;
        }

        .mb-3 {
            margin-bottom: 1rem;
        }

        .ml-2 {
            margin-left: 0.5rem;
        }

        .message-summary {
            background-color: #f8f9fa;
            padding: 1rem;
            border-radius: 6px;
            margin-top: 1rem;
        }

        @media (max-width: 768px) {
            .message-header {
                padding: 1rem;
            }

            .content-display {
                padding: 1rem;
            }

            .room-card {
                margin-bottom: 0.5rem;
            }

            .btn-group {
                display: flex;
                flex-direction: column;
            }

            .btn-group .btn {
                margin-bottom: 0.5rem;
                margin-right: 0;
            }

            .quick-actions .btn-group {
                flex-direction: row;
                flex-wrap: wrap;
            }

            .quick-actions .btn {
                margin-bottom: 0.25rem;
                margin-right: 0.25rem;
            }
        }
    </style>

    <script>
        function deleteMessage(messageId) {
            $('#delete-modal').modal('show');
        }

        function markAsRead(messageId) {
            // Show loading state
            const markReadBtn = document.querySelector(`button[onclick="markAsRead(${messageId})"]`);
            if (markReadBtn) {
                const originalText = markReadBtn.innerHTML;
                markReadBtn.disabled = true;
                markReadBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Marking as Read...';
            }

            // Use the proper Laravel route helper
            const url = `{{ route('messages.mark-as-read', ':id') }}`.replace(':id', messageId);

            // Make AJAX call
            fetch(url, {
                    method: 'PATCH',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => {
                    // Check if response is a redirect (our controller will redirect from show page)
                    if (response.redirected) {
                        // Follow the redirect
                        window.location.href = response.url;
                        return;
                    }

                    return response.json();
                })
                .then(data => {
                    if (data && data.success) {
                        showAlert(data.message, 'success');

                        // Update UI if message was successfully marked as read
                        if (!data.already_read) {
                            updateReadStatusUI();
                        }

                        // Hide the mark as read button
                        if (markReadBtn) {
                            markReadBtn.style.display = 'none';
                        }
                    } else if (data) {
                        showAlert(data.message || 'Failed to mark message as read', 'error');

                        // Restore button if there was an error
                        if (markReadBtn) {
                            markReadBtn.disabled = false;
                            markReadBtn.innerHTML = '<i class="fa fa-eye"></i> Mark as Read';
                        }
                    }
                })
                .catch(error => {
                    console.error('Error marking message as read:', error);
                    showAlert('Network error. Please try again.', 'error');

                    // Restore button on network error
                    if (markReadBtn) {
                        markReadBtn.disabled = false;
                        markReadBtn.innerHTML = '<i class="fa fa-eye"></i> Mark as Read';
                    }
                });
        }

        function updateReadStatusUI() {
            // Update the read status badge
            const readBadge = document.querySelector('.badge.badge-secondary, .badge.badge-danger');
            if (readBadge && (readBadge.textContent.includes('Unread') || readBadge.textContent.includes('Not Read'))) {
                readBadge.className = 'badge badge-success';
                readBadge.innerHTML = '<i class="fa fa-eye"></i> Read';
            }

            // Update the read date
            const readDateElements = document.querySelectorAll('.info-label');
            readDateElements.forEach(label => {
                if (label.textContent.includes('Read Date:')) {
                    const valueElement = label.nextElementSibling;
                    if (valueElement && valueElement.classList.contains('info-value')) {
                        const now = new Date();
                        const formattedDate = now.toLocaleDateString('en-US', {
                            year: 'numeric',
                            month: 'long',
                            day: 'numeric',
                            hour: 'numeric',
                            minute: '2-digit',
                            hour12: true
                        });
                        valueElement.innerHTML = formattedDate;
                        valueElement.classList.remove('text-muted');
                    }
                }
            });
        }

        function copyToClipboard(text) {
            // Create a temporary textarea element
            const textarea = document.createElement('textarea');
            textarea.value = text;
            document.body.appendChild(textarea);

            // Select and copy the text
            textarea.select();
            document.execCommand('copy');

            // Remove the temporary element
            document.body.removeChild(textarea);

            // Show success message
            showAlert('Content copied to clipboard', 'success');
        }

        function showAlert(message, type = 'info') {
            const alertClass = type === 'success' ? 'alert-success' :
                type === 'error' ? 'alert-danger' :
                type === 'warning' ? 'alert-warning' : 'alert-info';

            const alert = document.createElement('div');
            alert.className = `alert ${alertClass} alert-dismissible fade show`;
            alert.innerHTML = `
                <i class="fa fa-${type === 'success' ? 'check-circle' : 
                                  type === 'error' ? 'exclamation-circle' : 
                                  type === 'warning' ? 'exclamation-triangle' : 'info-circle'}"></i>
                ${message}
                <button type="button" class="close" onclick="this.parentElement.remove()">
                    <span>&times;</span>
                </button>
            `;

            // Add alert to the top of content
            const content = document.getElementById('content');
            content.insertBefore(alert, content.firstChild);

            // Auto-hide after 3 seconds
            setTimeout(() => {
                if (alert.parentNode) {
                    alert.remove();
                }
            }, 3000);
        }

        // Initialize tooltips if using Bootstrap
        document.addEventListener('DOMContentLoaded', function() {
            // Add any initialization code here
            console.log('Message details page loaded');
        });
    </script>
    @endsectionBroadcast