@extends('layouts.app-admin')

@push('styles')
    <style>
        .detail-card {
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
        }

        .status-badge {
            font-size: 0.9rem;
            padding: 6px 12px;
        }

        .question-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 10px;
            border-left: 4px solid #667eea;
        }

        .answer-section {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 10px;
            border-left: 4px solid #28a745;
        }

        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
            color: white;
        }

        .action-button {
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s;
        }

        .action-button:hover {
            transform: translateY(-1px);
        }

        .info-item {
            padding: 10px 0;
            border-bottom: 1px solid #e9ecef;
        }

        .info-item:last-child {
            border-bottom: none;
        }

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

        .activity-item {
            border-left: 3px solid #dee2e6;
            padding-left: 15px;
            margin-bottom: 15px;
            position: relative;
        }

        .activity-item::before {
            content: '';
            position: absolute;
            left: -6px;
            top: 5px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #667eea;
        }

        .copy-button {
            transition: all 0.3s;
        }

        .copy-button:hover {
            background-color: #e3f2fd;
        }

        @media (max-width: 768px) {

            .col-lg-8,
            .col-lg-4 {
                margin-bottom: 20px;
            }
        }
    </style>
@endpush

@section('content')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.dashboard') }}">Dashboard</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.faq.index') }}">FAQ</a>
                            </li>
                            <li class="breadcrumb-item active">Detail FAQ</li>
                        </ol>
                    </nav>
                    <div class="page-pretitle">
                        Manajemen FAQ
                    </div>
                    <h2 class="page-title">
                        <i class="ti ti-eye me-2"></i>
                        Detail FAQ #{{ $faq->order }}
                    </h2>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="{{ route('admin.faq.edit', $faq) }}" class="btn btn-primary action-button">
                            <i class="ti ti-pencil me-1"></i>
                            Edit FAQ
                        </a>
                        <a href="{{ route('admin.faq.index') }}" class="btn btn-outline-secondary action-button">
                            <i class="ti ti-arrow-left me-1"></i>
                            Kembali
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">
            <div class="row">
                <div class="col-lg-8">
                    <!-- FAQ Content -->
                    <div class="card detail-card">
                        <div class="card-header">
                            <h3 class="card-title">Konten FAQ</h3>
                            <div class="card-actions">
                                <button class="btn btn-sm btn-outline-primary copy-button"
                                    onclick="copyToClipboard('faq-content')">
                                    <i class="ti ti-copy me-1"></i>
                                    Salin Konten
                                </button>
                            </div>
                        </div>
                        <div class="card-body" id="faq-content">
                            <!-- Question Section -->
                            <div class="question-section p-4 mb-4">
                                <div class="d-flex align-items-start">
                                    <div class="me-3">
                                        <span
                                            class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center"
                                            style="width: 30px; height: 30px; font-weight: bold;">
                                            Q
                                        </span>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h5 class="mb-2 fw-bold">Pertanyaan:</h5>
                                        <p class="mb-0 fs-5">{{ $faq->question }}</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Answer Section -->
                            <div class="answer-section p-4">
                                <div class="d-flex align-items-start">
                                    <div class="me-3">
                                        <span
                                            class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center"
                                            style="width: 30px; height: 30px; font-weight: bold;">
                                            A
                                        </span>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h5 class="mb-2 fw-bold">Jawaban:</h5>
                                        <div class="fs-6 lh-lg">
                                            {!! nl2br(e($faq->answer)) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Activity Log (if you have activity logging) -->
                    <div class="card detail-card mt-4">
                        <div class="card-header">
                            <h3 class="card-title">Riwayat Aktivitas</h3>
                        </div>
                        <div class="card-body">
                            <div class="activity-item">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <strong>FAQ Dibuat</strong>
                                        <div class="text-muted small">
                                            {{ $faq->created_at->format('d F Y, H:i:s') }}
                                            ({{ $faq->created_at->diffForHumans() }})
                                        </div>
                                    </div>
                                    <span class="badge bg-success">Created</span>
                                </div>
                            </div>

                            @if ($faq->updated_at != $faq->created_at)
                                <div class="activity-item">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <strong>FAQ Diperbarui</strong>
                                            <div class="text-muted small">
                                                {{ $faq->updated_at->format('d F Y, H:i:s') }}
                                                ({{ $faq->updated_at->diffForHumans() }})
                                            </div>
                                        </div>
                                        <span class="badge bg-info">Updated</span>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <!-- Status Card -->
                    <div class="card detail-card stat-card">
                        <div class="card-body text-center">
                            <h3 class="card-title">Status FAQ</h3>
                            <div class="mb-3">
                                @if ($faq->is_active)
                                    <span class="badge bg-success status-badge fs-4">
                                        <i class="ti ti-eye me-1"></i>
                                        AKTIF
                                    </span>
                                @else
                                    <span class="badge bg-danger status-badge fs-4">
                                        <i class="ti ti-eye-off me-1"></i>
                                        NONAKTIF
                                    </span>
                                @endif
                            </div>
                            <p class="text-white-50 mb-0">
                                FAQ ini {{ $faq->is_active ? 'ditampilkan' : 'tidak ditampilkan' }} di halaman publik
                            </p>
                        </div>
                    </div>

                    <!-- FAQ Information -->
                    <div class="card detail-card mt-4">
                        <div class="card-header">
                            <h3 class="card-title">Informasi FAQ</h3>
                        </div>
                        <div class="card-body">
                            <div class="info-item">
                                <span class="info-label">ID:</span>
                                <span class="text-muted">{{ $faq->id }}</span>
                                <button class="btn btn-sm btn-outline-secondary ms-2 copy-button"
                                    onclick="copyToClipboard('{{ $faq->id }}', 'ID FAQ')">
                                    <i class="ti ti-copy"></i>
                                </button>
                            </div>

                            <div class="info-item">
                                <span class="info-label">Urutan:</span>
                                <span class="badge bg-primary fs-6">{{ $faq->order }}</span>
                            </div>

                            <div class="info-item">
                                <span class="info-label">Dibuat:</span>
                                <div>
                                    <div>{{ $faq->created_at->format('d F Y') }}</div>
                                    <small class="text-muted">{{ $faq->created_at->format('H:i:s') }} WIB</small>
                                </div>
                            </div>

                            <div class="info-item">
                                <span class="info-label">Diperbarui:</span>
                                <div>
                                    <div>{{ $faq->updated_at->format('d F Y') }}</div>
                                    <small class="text-muted">{{ $faq->updated_at->format('H:i:s') }} WIB</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Statistics Card -->
                    <div class="card detail-card mt-4">
                        <div class="card-header">
                            <h3 class="card-title">Statistik</h3>
                        </div>
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-6">
                                    <div class="mb-2">
                                        <span class="h4 text-primary">{{ strlen($faq->question) }}</span>
                                    </div>
                                    <div class="text-muted small">Karakter Pertanyaan</div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-2">
                                        <span class="h4 text-success">{{ strlen($faq->answer) }}</span>
                                    </div>
                                    <div class="text-muted small">Karakter Jawaban</div>
                                </div>
                            </div>

                            <hr>

                            <div class="row text-center">
                                <div class="col-6">
                                    <div class="mb-2">
                                        <span class="h4 text-info">{{ str_word_count($faq->question) }}</span>
                                    </div>
                                    <div class="text-muted small">Kata Pertanyaan</div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-2">
                                        <span class="h4 text-warning">{{ str_word_count($faq->answer) }}</span>
                                    </div>
                                    <div class="text-muted small">Kata Jawaban</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Actions -->
                    <div class="card detail-card mt-4">
                        <div class="card-header">
                            <h3 class="card-title">Aksi Cepat</h3>
                        </div>
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <a href="{{ route('admin.faq.edit', $faq) }}"
                                    class="btn btn-outline-primary action-button">
                                    <i class="ti ti-pencil me-2"></i>
                                    Edit FAQ
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize tooltips if Bootstrap tooltips are available
            if (typeof bootstrap !== 'undefined') {
                var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl);
                });
            }
        });

        // Copy to clipboard function
        function copyToClipboard(elementIdOrText, label = 'Konten') {
            let textToCopy;

            if (elementIdOrText.includes('-')) {
                // It's an element ID
                const element = document.getElementById(elementIdOrText);
                if (element) {
                    textToCopy = element.innerText || element.textContent;
                }
            } else {
                // It's direct text
                textToCopy = elementIdOrText;
            }

            if (!textToCopy) {
                Swal.fire('Error', 'Tidak ada konten untuk disalin', 'error');
                return;
            }

            navigator.clipboard.writeText(textToCopy).then(function() {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: `${label} berhasil disalin ke clipboard`,
                    timer: 2000,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end'
                });
            }).catch(function(err) {
                // Fallback for older browsers
                const textArea = document.createElement('textarea');
                textArea.value = textToCopy;
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();

                try {
                    document.execCommand('copy');
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: `${label} berhasil disalin ke clipboard`,
                        timer: 2000,
                        showConfirmButton: false,
                        toast: true,
                        position: 'top-end'
                    });
                } catch (err) {
                    Swal.fire('Error', 'Gagal menyalin ke clipboard', 'error');
                }

                document.body.removeChild(textArea);
            });
        }
    </script>
@endpush