@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('running_texts.index') }}">Running Text</a></li>
                <li class="breadcrumb-item active">View</li>
            </ol>
            <!-- end breadcrumb -->

            <!-- begin page-header -->
            <h1 class="page-header">View Running Text</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') || $errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fa fa-exclamation-triangle"></i>
                    @if (session('error'))
                        {{ session('error') }}
                    @endif
                    @foreach ($errors->all() as $error)
                        <div>{{ $error }}</div>
                    @endforeach
                    <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">Running Text 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">
                                        Running Text Content
                                        <span
                                            class="badge badge-{{ $runningText->is_active ? 'success' : 'secondary' }} ml-2"
                                            id="status-badge">
                                            {{ $runningText->is_active ? 'Active' : 'Inactive' }}
                                        </span>
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="content-display" style="font-size: 16px; line-height: 1.6;">
                                        {!! nl2br(e($runningText->content)) !!}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <!-- Basic Information -->
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-info-circle"></i> Information
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td class="font-weight-bold">Status:</td>
                                            <td>
                                                @if ($runningText->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>{{ $runningText->created_at->format('M d, Y \a\t H:i') }}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Last Updated:</td>
                                            <td>{{ $runningText->updated_at->format('M d, Y \a\t H:i') }}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Characters:</td>
                                            <td>{{ strlen($runningText->content) }} / 1000</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">
                                        <!-- Option 1: AJAX Button (Like WelcomeGreeting) -->
                                        <button type="button" class="btn btn-custom btn-block" id="toggle-status-btn"
                                            data-running-text-id="{{ $runningText->id }}"
                                            data-current-status="{{ $runningText->is_active ? 1 : 0 }}">
                                            <i class="fa fa-{{ $runningText->is_active ? 'pause' : 'play' }}"
                                                id="toggle-icon"></i>
                                            <span
                                                id="toggle-text">{{ $runningText->is_active ? 'Deactivate' : 'Activate' }}</span>
                                        </button>

                                        <!-- Edit Button -->
                                        <a href="{{ route('running_texts.edit', $runningText->id) }}"
                                            class="btn btn-custom btn-block">
                                            <i class="fa fa-edit"></i> Edit Running Text
                                        </a>
                                        <a href="{{ route('running_texts.index') }}" class="btn btn-custom">
                                            <i class="fa fa-arrow-left"></i> Back to List
                                        </a>
                                        <!-- Delete Button -->
                                        <form action="{{ route('running_texts.destroy', $runningText->id) }}"
                                            method="POST" class="w-100" onsubmit="return confirmDelete()">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-custom btn-block">
                                                <i class="fa fa-trash"></i> Delete
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

        <!-- begin scroll to top btn -->
        <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>
        <!-- end scroll to top btn -->
    </div>

    <style>
        .card {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }

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

        .card-body {
            padding: 1.25rem;
        }

        .content-display {
            background-color: #f8f9fa;
            padding: 1rem;
            border-radius: 0.375rem;
            border: 1px solid #dee2e6;
            word-wrap: break-word;
            min-height: 100px;
        }

        .panel-title {
            color: #000000 !important;
        }

        .card-title {
            color: #000000 !important;
        }

        .d-grid {
            display: grid;
        }

        .gap-2 {
            gap: 0.5rem;
        }

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

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

        .btn-loading {
            opacity: 0.6;
            pointer-events: none;
        }

        .alert {
            animation: slideInDown 0.3s ease-out;
        }

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

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

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

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

    <script>
        // CSRF token for AJAX requests
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
            '{{ csrf_token() }}';

        document.addEventListener('DOMContentLoaded', function() {
            // Handle toggle status button click (AJAX approach)
            const toggleBtn = document.getElementById('toggle-status-btn');

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

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

                    // Use the proper Laravel route helper with PATCH method
                    const url = `{{ route('running_texts.toggleActive', ':id') }}`.replace(':id',
                        runningTextId);

                    fetch(url, {
                            method: 'PATCH', // Changed from POST to 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 => {
                            // 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;
                            }

                            if (!response.ok) {
                                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                            }
                            return response.json();
                        })
                        .then(data => {
                            if (data && data.success) {
                                // Show success message
                                showAlert('success', data.message);
                                setTimeout(() => {
                                    window.location.reload();
                                }, 800);
                            } else if (data) {
                                throw new Error(data.message || 'Failed to update status');
                            }
                        })
                        .catch(error => {
                            console.error('Toggle error:', error);
                            showAlert('danger', error.message ||
                                'Failed to update running text status');
                        })
                        .finally(() => {
                            // Remove loading state
                            toggleBtn.classList.remove('btn-loading');

                            // Reset button content if it still shows loading
                            if (toggleBtn.querySelector('.fa-spinner')) {
                                const currentStatus = parseInt(toggleBtn.dataset.currentStatus);
                                updateToggleButton(toggleBtn, currentStatus);
                            }
                        });
                });
            }

            // Auto-dismiss alerts after 5 seconds
            setTimeout(function() {
                document.querySelectorAll('.alert').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');

            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
            document.querySelectorAll('#alert-container .alert').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" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            `;

            document.getElementById('alert-container').insertAdjacentHTML('beforeend', alertHtml);

            // Auto-dismiss after 5 seconds
            setTimeout(() => {
                document.querySelectorAll('#alert-container .alert').forEach(alert => {
                    if (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;");
        }

        // Function to confirm delete action
        function confirmDelete() {
            return confirm('Are you sure you want to delete this running text?\n\nThis action cannot be undone.');
        }
    </script>
@endsection