@extends('layouts.app-admin')

@section('title', 'FAQ Management')

@push('styles')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .btn-group .btn {
            min-width: 35px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-group .btn i {
            font-size: 14px;
        }

        .btn-toggle-status {
            min-width: 80px !important;
        }

        .table td {
            vertical-align: middle;
        }
    </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">
                    <div class="page-pretitle">
                        Manajemen
                    </div>
                    <h2 class="page-title">
                        <i class="ti ti-help-circle me-2"></i>
                        Frequently Asked Questions
                    </h2>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="{{ route('admin.faq.create') }}" class="btn btn-primary d-none d-sm-inline-block">
                            <i class="ti ti-plus me-1"></i>
                            Tambah FAQ Baru
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">
            <!-- Alert Messages -->
            @if (session('success'))
                <div class="alert alert-success alert-dismissible" role="alert">
                    <div class="d-flex">
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24"
                                viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M5 12l5 5l10 -10"></path>
                            </svg>
                        </div>
                        <div>{{ session('success') }}</div>
                    </div>
                    <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger alert-dismissible" role="alert">
                    <div class="d-flex">
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24"
                                viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <circle cx="12" cy="12" r="9"></circle>
                                <line x1="12" y1="8" x2="12" y2="12"></line>
                                <line x1="12" y1="16" x2="12.01" y2="16"></line>
                            </svg>
                        </div>
                        <div>{{ session('error') }}</div>
                    </div>
                    <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
                </div>
            @endif

            <!-- Search and Filter -->
            <div class="row mb-3">
                <div class="col-12">
                    <div class="card search-form">
                        <div class="card-body">
                            <form method="GET" action="{{ route('admin.faq.index') }}">
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label">Cari FAQ</label>
                                        <div class="input-icon">
                                            <span class="input-icon-addon">
                                                <i class="ti ti-search"></i>
                                            </span>
                                            <input type="text" name="search" class="form-control"
                                                placeholder="Cari pertanyaan atau jawaban..." value="{{ $search }}">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Kategori</label>
                                        <select name="category" class="form-select">
                                            <option value="">Semua Kategori</option>
                                            @foreach ($categories as $key => $value)
                                                <option value="{{ $key }}"
                                                    {{ $category === $key ? 'selected' : '' }}>
                                                    {{ $value }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Status</label>
                                        <select name="status" class="form-select">
                                            <option value="">Semua Status</option>
                                            <option value="1" {{ $status === '1' ? 'selected' : '' }}>Aktif</option>
                                            <option value="0" {{ $status === '0' ? 'selected' : '' }}>Nonaktif
                                            </option>
                                        </select>
                                    </div>
                                    <div class="col-md-2 d-flex align-items-end">
                                        <div class="btn-list">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="ti ti-search me-1"></i> Cari
                                            </button>
                                            <a href="{{ route('admin.faq.index') }}" class="btn btn-outline-secondary">
                                                <i class="ti ti-refresh me-1"></i> Reset
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- FAQ List -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Daftar FAQ</h3>
                            <div class="card-actions">
                                <div class="d-flex gap-2">
                                    <span class="badge bg-primary">Total: {{ $stats['total'] }}</span>
                                    <span class="badge bg-success">Aktif: {{ $stats['active'] }}</span>
                                    <span class="badge bg-danger">Nonaktif: {{ $stats['inactive'] }}</span>
                                </div>
                            </div>
                        </div>

                        @if (count($faqs) > 0)
                            <div class="table-responsive">
                                <table class="table table-vcenter card-table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Urutan</th>
                                            <th>Kategori</th>
                                            <th>Pertanyaan</th>
                                            <th>Jawaban</th>
                                            <th class="w-1">Status</th>
                                            <th class="w-1">Tanggal</th>
                                            <th class="w-1">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($faqs as $faq)
                                            <tr id="faq-{{ $faq->id }}">
                                                <td>
                                                    <span class="badge bg-secondary">{{ $faq->order }}</span>
                                                </td>
                                                <td>
                                                    <span class="badge bg-primary">
                                                        {{ $categories[$faq->category] ?? $faq->category }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <div class="faq-question">
                                                        {{ Str::limit($faq->question, 60) }}
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="faq-answer text-muted">
                                                        {{ Str::limit(strip_tags($faq->answer), 80) }}
                                                    </div>
                                                </td>
                                                <td>
                                                    @if ($faq->is_active)
                                                        <span class="badge bg-success">Aktif</span>
                                                    @else
                                                        <span class="badge bg-danger">Nonaktif</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <span class="text-muted"
                                                        title="{{ $faq->created_at->format('d M Y H:i') }}">
                                                        {{ $faq->created_at->diffForHumans() }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <div class="d-flex gap-1">
                                                        {{-- View Button --}}
                                                        <a href="{{ route('admin.faq.show', $faq) }}"
                                                            class="btn btn-sm btn-outline-info" data-bs-toggle="tooltip"
                                                            title="Lihat Detail">
                                                            <i class="ti ti-eye"></i>
                                                        </a>

                                                        {{-- Edit Button --}}
                                                        <a href="{{ route('admin.faq.edit', $faq) }}"
                                                            class="btn btn-sm btn-outline-warning"
                                                            data-bs-toggle="tooltip" title="Edit">
                                                            <i class="ti ti-pencil"></i>
                                                        </a>

                                                        {{-- Delete Button --}}
                                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                            onclick="confirmDelete('{{ $faq->id }}', '{{ addslashes($faq->question) }}')"
                                                            data-bs-toggle="tooltip" title="Hapus">
                                                            <i class="ti ti-trash"></i>
                                                        </button>
                                                    </div>

                                                    {{-- Hidden Delete Form --}}
                                                    <form id="delete-form-{{ $faq->id }}"
                                                        action="{{ route('admin.faq.destroy', $faq) }}" method="POST"
                                                        class="d-none">
                                                        @csrf
                                                        @method('DELETE')
                                                    </form>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6" class="text-center py-4">
                                                    <div class="empty">
                                                        <div class="empty-img">
                                                            <i class="ti ti-help-circle text-muted"
                                                                style="font-size: 4rem;"></i>
                                                        </div>
                                                        <p class="empty-title">Belum Ada FAQ</p>
                                                        <p class="empty-subtitle text-muted">
                                                            Mulai dengan menambahkan FAQ pertama untuk membantu pengguna.
                                                        </p>
                                                        <div class="empty-action">
                                                            <a href="{{ route('admin.faq.create') }}"
                                                                class="btn btn-primary">
                                                                <i class="ti ti-plus me-1"></i>
                                                                Tambah FAQ Pertama
                                                            </a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                            <!-- Pagination -->
                            @if (is_object($faqs) && method_exists($faqs, 'hasPages') && $faqs->hasPages())
                                <div class="card-footer d-flex align-items-center">
                                    <p class="m-0 text-muted">
                                        Menampilkan <span>{{ $faqs->firstItem() }}</span> sampai
                                        <span>{{ $faqs->lastItem() }}</span>
                                        dari <span>{{ $faqs->total() }}</span> FAQ
                                    </p>
                                    <ul class="pagination m-0 ms-auto">
                                        {{ $faqs->appends(request()->query())->links('pagination.tabler') }}
                                    </ul>
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function confirmDelete(faqId, faqQuestion) {
            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: `FAQ "${faqQuestion}" akan dihapus permanen!`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#e53935',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form-' + faqId).submit();
                }
            });
        }

        // Initialize tooltips
        document.addEventListener('DOMContentLoaded', function() {
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });

        // Simple search functionality
        function performSearch() {
            const searchTerm = document.getElementById('search').value.toLowerCase();
            const rows = document.querySelectorAll('tbody tr');

            rows.forEach(function(row) {
                const question = row.querySelector('td:nth-child(4)').textContent.toLowerCase();
                const answer = row.querySelector('td:nth-child(5)').textContent.toLowerCase();

                if (question.includes(searchTerm) || answer.includes(searchTerm)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }

        // Add search event listener
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('search');
            if (searchInput) {
                searchInput.addEventListener('input', performSearch);
            }
        });
    </script>
@endsection