@extends('layouts.app')

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

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Information Display</a></li>
                <li class="breadcrumb-item"><a href="{{ route('welcome_greetings.index') }}">Welcome Greeting</a></li>
                <li class="breadcrumb-item active">View</li>
            </ol>
            <!-- end breadcrumb -->

            <!-- begin page-header -->
            <h1 class="page-header">View Welcome Greeting</h1>
            <!-- end page-header -->

            <!-- Display success/error messages -->
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fa fa-check-circle"></i> {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fa fa-exclamation-triangle"></i> {{ session('error') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <!-- Dynamic alert container for AJAX responses -->
            <div id="alert-container"></div>

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <h4 class="panel-title">Welcome Greeting Details</h4>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        Welcome Greeting Content
                                        <span
                                            class="badge badge-{{ $welcomeGreeting->is_active ? 'success' : 'secondary' }} ml-2"
                                            id="status-badge">
                                            {{ $welcomeGreeting->is_active ? 'Active' : 'Inactive' }}
                                        </span>
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="content-display" style="font-size: 16px; line-height: 1.6;">
                                        {!! $welcomeGreeting->content !!}
                                    </div>
                                </div>
                            </div>

                            <!-- Image Display Section -->
                            @if ($welcomeGreeting->hasImage())
                                <div class="card mt-3">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">
                                            <i class="fa fa-image"></i> Welcome Image
                                        </h5>
                                    </div>
                                    <div class="card-body text-center">
                                        @if ($welcomeGreeting->imageExists())
                                            <img src="{{ \App\Helpers\UrlHelper::getStorageUrl($welcomeGreeting->image_path, request()) }}"
                                                alt="{{ $welcomeGreeting->alt_text }}" class="img-responsive img-thumbnail"
                                                style="max-width: 100%; max-height: 400px; object-fit: contain;">
                                            <div class="mt-3">
                                                <p><strong>Image Title:</strong> {{ $welcomeGreeting->title }}</p>
                                                @if ($welcomeGreeting->alt_text)
                                                    <p><strong>Alt Text:</strong> {{ $welcomeGreeting->alt_text }}</p>
                                                @endif
                                                <p><strong>File Size:</strong> {{ $welcomeGreeting->human_file_size }}</p>
                                            </div>
                                        @else
                                            <div class="alert alert-warning">
                                                <i class="fa fa-exclamation-triangle fa-3x mb-3"></i>
                                                <h5>Image File Not Found</h5>
                                                <p class="mb-0">The image file could not be located on the server.</p>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endif
                        </div>

                        <div class="col-md-4">
                            <!-- Assignment Information -->
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-tasks"></i> Assignment Information
                                    </h5>
                                </div>
                                <div class="card-body">
                                    @if ($summary['general'])
                                        <div class="assignment-item mb-3">
                                            <span class="badge badge-primary mb-2">
                                                <i class="fa fa-globe"></i> General Assignment
                                            </span>
                                            <p class="text-muted mb-0">This greeting is assigned to ALL rooms.</p>
                                        </div>
                                    @endif

                                    @if ($summary['personal_rooms']->count() > 0)
                                        <div class="assignment-item mb-3">
                                            <span class="badge badge-info mb-2">
                                                <i class="fa fa-user"></i> Personal Assignment
                                            </span>
                                            <p class="text-muted">Assigned to {{ $summary['personal_rooms']->count() }}
                                                specific room(s):</p>
                                            <div class="personal-rooms-list">
                                                @foreach ($summary['personal_rooms'] as $room)
                                                    <span class="badge badge-light mr-1 mb-1">{{ $room->room }}</span>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif

                                    @if (!$summary['general'] && $summary['personal_rooms']->count() == 0)
                                        <div class="assignment-item">
                                            <span class="badge badge-secondary mb-2">
                                                <i class="fa fa-times"></i> No Assignment
                                            </span>
                                            <p class="text-muted mb-0">This greeting is not currently assigned to any rooms.
                                            </p>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <!-- Basic Information -->
                            <div class="card mt-3">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-info-circle"></i> Basic Information
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td class="font-weight-bold">Title:</td>
                                            <td>{{ $welcomeGreeting->title }}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Status:</td>
                                            <td>
                                                @if ($welcomeGreeting->is_active)
                                                    <span class="badge badge-success">Active</span>
                                                @else
                                                    <span class="badge badge-secondary">Inactive</span>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Created:</td>
                                            <td>{{ $welcomeGreeting->created_at->format('M d, Y \a\t H:i') }}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Last Updated:</td>
                                            <td>{{ $welcomeGreeting->updated_at->format('M d, Y \a\t H:i') }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="card mt-3">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-cogs"></i> Actions
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="d-grid gap-2">
                                        <!-- Toggle Active Status Button (AJAX) - Hidden for general assignments -->
                                        @if (!$summary['general'])
                                            <button type="button"
                                                class="btn btn-custom btn-{{ $welcomeGreeting->is_active ? 'warning' : 'success' }} btn-block"
                                                id="toggle-status-btn" data-greeting-id="{{ $welcomeGreeting->id }}"
                                                data-current-status="{{ $welcomeGreeting->is_active ? 1 : 0 }}">
                                                <i class="fa fa-{{ $welcomeGreeting->is_active ? 'pause' : 'play' }}"
                                                    id="toggle-icon"></i>
                                                <span
                                                    id="toggle-text">{{ $welcomeGreeting->is_active ? 'Deactivate' : 'Activate' }}</span>
                                            </button>
                                        @endif

                                        <!-- Edit Button -->
                                        <a href="{{ route('welcome_greetings.edit', $welcomeGreeting->id) }}"
                                            class="btn btn-custom btn-block">
                                            <i class="fa fa-edit"></i> Edit Greeting
                                        </a>

                                        <!-- Back Button -->
                                        <a href="{{ route('welcome_greetings.index') }}"
                                            class="btn btn-custom btn-block">
                                            <i class="fa fa-arrow-left"></i> Back to List
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <!-- Technical Information -->
                            @if ($welcomeGreeting->hasImage())
                                <div class="card mt-3">
                                    <div class="card-header">
                                        <h6 class="card-title mb-0">
                                            <i class="fa fa-file-image-o"></i> Technical Details
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <table class="table table-borderless table-sm">
                                            <tr>
                                                <td class="font-weight-bold">Original Filename:</td>
                                                <td>
                                                    <small class="text-muted">
                                                        <code>{{ $welcomeGreeting->original_filename }}</code>
                                                    </small>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">MIME Type:</td>
                                                <td>
                                                    <small class="text-muted">
                                                        <code>{{ $welcomeGreeting->mime_type }}</code>
                                                    </small>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">Storage Path:</td>
                                                <td>
                                                    <small class="text-muted">
                                                        <code>{{ $welcomeGreeting->image_path }}</code>
                                                    </small>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">Image URL:</td>
                                                <td>
                                                    <small class="text-muted">
                                                        <a href="{{ \App\Helpers\UrlHelper::getStorageUrl($welcomeGreeting->image_path, request()) }}"
                                                            target="_blank" class="text-info">
                                                            View URL <i class="fa fa-external-link"></i>
                                                        </a>
                                                    </small>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

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

    <!-- Include jQuery for AJAX functionality -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>
        .card {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
        }

        .card-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            padding: 0.75rem 1.25rem;
        }

        .card-body {
            padding: 1.25rem;
        }

        .content-display {
            background-color: #A9A9A9;
            padding: 1rem;
            border-radius: 0.375rem;
            border: 1px solid #dee2e6;
        }

        .assignment-item {
            margin-bottom: 0.5rem;
        }

        .personal-rooms-list .badge {
            margin-right: 0.25rem;
            margin-bottom: 0.25rem;
        }

        /* Ensure panel title is black */
        .panel-title {
            color: #000000 !important;
        }

        /* Card title styling */
        .card-title {
            color: #000000 !important;
        }

        /* Custom button variants */
        .btn-custom.btn-success {
            background-color: #28a745 !important;
            border-color: #28a745 !important;
            color: white !important;
        }

        .btn-custom.btn-success:hover {
            background-color: #218838 !important;
            border-color: #1e7e34 !important;
            color: white !important;
        }

        .btn-custom.btn-warning {
            background-color: #ffc107 !important;
            border-color: #ffc107 !important;
            color: #212529 !important;
        }

        .btn-custom.btn-warning:hover {
            background-color: #e0a800 !important;
            border-color: #d39e00 !important;
            color: #212529 !important;
        }

        .btn-custom.btn-danger {
            background-color: #dc3545 !important;
            border-color: #dc3545 !important;
            color: white !important;
        }

        .btn-custom.btn-danger:hover {
            background-color: #c82333 !important;
            border-color: #bd2130 !important;
            color: white !important;
        }

        .btn-custom.btn-secondary {
            background-color: #6c757d !important;
            border-color: #6c757d !important;
            color: white !important;
        }

        .btn-custom.btn-secondary:hover {
            background-color: #5a6268 !important;
            border-color: #545b62 !important;
            color: white !important;
        }

        /* Button group spacing */
        .d-grid {
            display: grid;
        }

        .gap-2 {
            gap: 0.5rem;
        }

        .btn-block {
            display: block;
            width: 100%;
        }

        .btn-block+.btn-block {
            margin-top: 0.25rem;
        }

        /* Loading state for buttons */
        .btn-loading {
            opacity: 0.6;
            pointer-events: none;
        }

        /* Alert animations */
        .alert {
            animation: slideInDown 0.3s ease-out;
        }

        @keyframes slideInDown {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Image styling */
        .img-responsive {
            max-width: 100%;
            height: auto;
        }

        .img-thumbnail {
            padding: 0.25rem;
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
        }

        /* Responsive design */
        @media (max-width: 768px) {
            .d-grid {
                width: 100%;
            }

            .d-grid .btn {
                width: 100%;
                margin-bottom: 0.5rem;
            }
        }
    </style>

    <script>
        window.routes = {
            toggleGreetingActive: '{{ route('welcome_greetings.toggleActive', ':id') }}'
        };
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get the toggle button
            const toggleButton = document.getElementById('toggle-status-btn');

            if (toggleButton) {
                toggleButton.addEventListener('click', function() {
                    const button = this;
                    const greetingId = button.dataset.greetingId;
                    const currentStatus = parseInt(button.dataset.currentStatus);
                    const newStatus = currentStatus ? 0 : 1; // Toggle status

                    // Prevent double clicks
                    if (button.classList.contains('btn-loading')) {
                        return;
                    }

                    // Add loading class
                    button.classList.add('btn-loading');
                    const originalContent = button.innerHTML;
                    button.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Processing...';

                    // Use Laravel route helper with proper model binding
                    const url = '{{ route('welcome_greetings.toggleActive', ':welcome_greeting') }}'
                        .replace(':welcome_greeting', greetingId);

                    // Get CSRF token
                    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute(
                        'content');

                    fetch(url, {
                            method: 'PATCH',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': csrfToken,
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            body: JSON.stringify({
                                is_active: newStatus
                            })
                        })
                        .then(response => {
                            // FIX 1: Explicitly check for an HTTP redirect status (e.g., 302) 
                            if (response.redirected) {
                                // If the server explicitly redirected, follow it immediately.
                                window.location.href = response.url;
                                return; // Stop promise chain
                            }

                            // FIX 2: Check for successful HTTP status (200-299)
                            if (!response.ok) {
                                // If the server returned 4xx or 5xx, throw error for catch block
                                return response.json().then(errorData => {
                                    throw new Error(errorData.message ||
                                        `HTTP ${response.status}: ${response.statusText}`);
                                });
                            }

                            // FIX 3: Parse JSON for 200/201 status
                            return response.json();
                        })
                        .then(data => {
                            if (data && data.success) {
                                // FIX 1: Capture the success message and store it in local storage
                                localStorage.setItem('toggle_status_success', data.message);

                                // FIX 2: Redirect immediately to the index page
                                window.location.href = '{{ route('welcome_greetings.index') }}';
                            } else if (data) {
                                // Handle JSON that was parsed but reports failure
                                // Revert button on failure
                                updateToggleButton(button, currentStatus);
                                showAlert('danger', data.message || 'Failed to update status');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            let errorMessage = 'Failed to update welcome greeting status';

                            if (error.message.includes('HTTP 500')) {
                                errorMessage = 'Server error during status update.';
                            } else {
                                errorMessage = error.message;
                            }

                            // Revert button status visually since it failed
                            button.classList.remove(newStatus ? 'btn-success' : 'btn-warning');
                            button.classList.add(currentStatus ? 'btn-warning' : 'btn-success');

                            showAlert('danger', errorMessage);
                        })
                });
            }

            // Auto-dismiss alerts after 5 seconds
            setTimeout(function() {
                const alerts = document.querySelectorAll('.alert');
                alerts.forEach(alert => {
                    if (alert.parentNode) {
                        alert.remove();
                    }
                });
            }, 5000);
        });

        // Function to update toggle button appearance
        function updateToggleButton(button, isActive) {
            const icon = button.querySelector('#toggle-icon');
            const text = button.querySelector('#toggle-text');

            // Remove existing button classes
            button.classList.remove('btn-success', 'btn-warning', 'btn-secondary');

            if (isActive) {
                // Active state - show deactivate button
                button.classList.add('btn-warning');
                if (icon) {
                    icon.className = 'fa fa-pause';
                }
                if (text) {
                    text.textContent = 'Deactivate';
                }
            } else {
                // Inactive state - show activate button
                button.classList.add('btn-success');
                if (icon) {
                    icon.className = 'fa fa-play';
                }
                if (text) {
                    text.textContent = 'Activate';
                }
            }
        }

        // Function to update status badge
        function updateStatusBadge(isActive) {
            const badge = document.getElementById('status-badge');
            if (badge) {
                badge.classList.remove('badge-success', 'badge-secondary');

                if (isActive) {
                    badge.classList.add('badge-success');
                    badge.textContent = 'Active';
                } else {
                    badge.classList.add('badge-secondary');
                    badge.textContent = 'Inactive';
                }
            }
        }

        // Function to show alert messages
        function showAlert(type, message) {
            // Remove existing alerts
            const alertContainer = document.getElementById('alert-container');
            const existingAlerts = alertContainer.querySelectorAll('.alert');
            existingAlerts.forEach(alert => alert.remove());

            const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            <i class="fa fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'}"></i> 
            <strong>${type === 'success' ? 'Success!' : 'Error!'}</strong> ${escapeHtml(message)}
            <button type="button" class="close" onclick="this.parentElement.remove()">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    `;

            alertContainer.insertAdjacentHTML('beforeend', alertHtml);

            // Auto-dismiss after 5 seconds
            setTimeout(() => {
                const alert = alertContainer.querySelector('.alert');
                if (alert && alert.parentNode) {
                    alert.remove();
                }
            }, 5000);
        }

        // Function to escape HTML to prevent XSS
        function escapeHtml(unsafe) {
            return unsafe
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }
    </script>
@endsection