@extends('admin::layouts.admin')

@section('title', 'FAQs')

@section('content')
<div class="cms-page">
    {{-- Page Title --}}
    <h1 class="page-title-setting">FAQs</h1>


    {{-- Data Card --}}
    <div class="setting-card">
        {{-- Card Header with Gradient --}}
        <div class="setting-card-header">
            <div class="header-icon">
                <i class="fas fa-question-circle"></i>
            </div>
            <span class="header-title">Data FAQs</span>
        </div>

        {{-- Search and Add Section --}}
        <div class="setting-toolbar">
            <div class="search-section">
                <label class="search-label">Cari Data</label>
                <div class="search-input-wrapper">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="Cari FAQ..." class="search-input" id="searchInput">
                </div>
            </div>
            <a href="{{ route('admin.faq.create') }}" class="btn-add-data">
                <i class="fas fa-plus"></i>
                Tambah Data
            </a>
        </div>

        {{-- Data Table --}}
        <div class="setting-table-wrapper">
            <table class="setting-table">
                <thead>
                    <tr>
                        <th>Pertanyaan</th>
                        <th>Jawaban</th>
                        <th>Kategori</th>
                        <th>Order</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                    @forelse($faqs as $faq)
                        <tr>
                            <td class="question-cell">
                                <span class="question-text">{{ $faq->question }}</span>
                            </td>
                            <td class="answer-cell">
                                <span class="answer-text">{{ Str::limit($faq->answer, 80) }}</span>
                            </td>
                            <td class="category-cell">
                                @if($faq->category)
                                    <span class="badge-custom badge-info">{{ $faq->category }}</span>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td class="order-cell">
                                <span class="order-badge">{{ $faq->order }}</span>
                            </td>
                            <td class="status-cell">
                                @if($faq->is_active)
                                    <span class="badge-custom badge-success">Aktif</span>
                                @else
                                    <span class="badge-custom badge-secondary">Tidak Aktif</span>
                                @endif
                            </td>
                            <td class="action-cell">
                                <div class="action-buttons">
                                    <a href="{{ route('admin.faq.edit', $faq->id) }}"
                                       class="btn-action edit"
                                       title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form action="{{ route('admin.faq.destroy', $faq->id) }}"
                                          method="POST"
                                          class="d-inline delete-form">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" class="btn-action delete btn-delete" title="Hapus">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted py-4">
                                <i class="fas fa-inbox fa-3x mb-3 d-block" style="opacity: 0.3;"></i>
                                Tidak ada data FAQ
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Table Footer --}}
        <div class="setting-table-footer">
            <div class="showing-info">Showing {{ $faqs->count() }} entries</div>
        </div>
    </div>
</div>

<style>
/* CMS Page Styles */
.cms-page {
    max-width: 1400px;
}

.page-title-setting {
    font-family: 'Plus Jakarta Sans', sans-serif;itron', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--purple-primary);
    margin-bottom: 24px;
}

/* Setting Card */
.setting-card {
    background: rgba(26, 23, 48, 0.6);
    border-radius: 16px;
    overflow: hidden;
}

/* Card Header with Gradient */
.setting-card-header {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.header-title {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

/* Toolbar Section */
.setting-toolbar {
    padding: 20px 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.search-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.search-input-wrapper {
    position: relative;
    width: 400px;
}

.search-input-wrapper i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    color: var(--cyan-primary);
    font-size: 0.9rem;
}

.search-input::placeholder {
    color: var(--cyan-primary);
}

.search-input:focus {
    outline: none;
    border-color: var(--purple-primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.btn-add-data {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--cyan-primary) 0%, #0891b2 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-add-data:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4);
    color: white;
}

/* Setting Table */
.setting-table-wrapper {
    overflow-x: auto;
}

.setting-table {
    width: 100%;
    border-collapse: collapse;
}

.setting-table th {
    padding: 16px 24px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(109, 40, 217, 0.2) 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.setting-table th:first-child,
.setting-table th:nth-child(2) {
    text-align: left;
}

.setting-table td {
    padding: 16px 24px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.setting-table tbody tr:hover {
    background: rgba(139, 92, 246, 0.05);
}

/* Table Cells */
.question-cell {
    width: 280px;
}

.question-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.answer-cell {
    width: 320px;
}

.answer-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.category-cell,
.order-cell,
.status-cell {
    text-align: center;
    width: 120px;
}

.badge-custom {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-success {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-secondary {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.badge-info {
    background: rgba(6, 182, 212, 0.2);
    color: var(--cyan-primary);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.order-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 8px;
    font-weight: 600;
    color: var(--purple-secondary);
}

/* Action Cell */
.action-cell {
    width: 120px;
}

.action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.btn-action {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    background: transparent;
    border-radius: 8px;
    color: var(--purple-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-action:hover {
    background: var(--purple-primary);
    border-color: var(--purple-primary);
    color: white;
}

.btn-action.delete:hover {
    background: var(--pink-primary);
    border-color: var(--pink-primary);
}

/* Table Footer */
.setting-table-footer {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.showing-info {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 992px) {
    .setting-table th:nth-child(3),
    .setting-table td.category-cell {
        display: none;
    }
}

@media (max-width: 768px) {
    .setting-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-wrapper {
        width: 100%;
    }

    .btn-add-data {
        width: 100%;
        justify-content: center;
    }

    .setting-table th:nth-child(2),
    .setting-table td.answer-cell {
        display: none;
    }
}
</style>

<script>
// Show success message if exists
@if(session('success'))
Swal.fire({
    icon: 'success',
    title: 'Berhasil!',
    text: '{{ session('success') }}',
    confirmButtonColor: '#8b5cf6',
    background: 'rgba(26, 23, 48, 0.95)',
    color: '#e2e8f0',
    timer: 3000,
    timerProgressBar: true
});
@endif

// Simple client-side search
document.getElementById('searchInput')?.addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    const rows = document.querySelectorAll('#tableBody tr');

    rows.forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(searchTerm) ? '' : 'none';
    });
});

// SweetAlert for delete confirmation
document.querySelectorAll('.btn-delete').forEach(button => {
    button.addEventListener('click', function(e) {
        e.preventDefault();
        const form = this.closest('.delete-form');

        Swal.fire({
            title: 'Konfirmasi Hapus',
            text: 'Yakin ingin menghapus FAQ ini?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#8b5cf6',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal',
            background: 'rgba(26, 23, 48, 0.95)',
            color: '#e2e8f0',
            customClass: {
                popup: 'swal-popup-custom',
                confirmButton: 'swal-confirm-custom',
                cancelButton: 'swal-cancel-custom'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });
});
</script>
@endsection