@extends('layouts.layout')

@section('content')
    <div id="main">
        <header class="mb-3">
            <a href="#" class="burger-btn d-block d-xl-none">
                <i class="bi bi-justify fs-3"></i>
            </a>
        </header>

        <div class="page-heading">
            <div class="page-title">
                <div class="row">
                    <div class="col-12 col-md-6 order-md-1 order-last">
                        <h3>FAQ Management</h3>
                        <p class="text-subtitle text-muted">Manage and view frequently asked questions</p>
                    </div>
                    <div class="col-12 col-md-6 order-md-2 order-first">
                        <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ url('/') }}">Dashboard</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Pages -> FAQ</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            {{-- Add FAQ Form --}}
            <section id="basic-vertical-layouts">
                <div class="row match-height">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Add New FAQ</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <form class="form form-vertical" action="{{ route('faq.store') }}" method="POST">
                                        @csrf
                                        <div class="form-body">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="form-group mb-3">
                                                        <label for="question">Question <span class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i class="bi bi-question-circle"></i></span>
                                                            <input type="text" id="question"
                                                                class="form-control @error('question') is-invalid @enderror"
                                                                name="question" value="{{ old('question') }}"
                                                                placeholder="e.g. How do I apply for a loan?" required>
                                                            @error('question')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <div class="form-group mb-3">
                                                        <label for="answer">Answer <span class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i class="bi bi-chat-text"></i></span>
                                                            <textarea id="answer"
                                                                class="form-control @error('answer') is-invalid @enderror"
                                                                name="answer" rows="4"
                                                                placeholder="Enter the answer here..." required>{{ old('answer') }}</textarea>
                                                            @error('answer')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 d-flex justify-content-end gap-2">
                                                    <button type="submit" class="btn btn-primary me-1 mb-1">
                                                        <i class="bi bi-plus-circle me-1"></i> Add FAQ
                                                    </button>
                                                    <button type="reset" class="btn btn-light-secondary me-1 mb-1">
                                                        <i class="bi bi-arrow-counterclockwise me-1"></i> Reset
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- FAQ List Table --}}
            <section class="section">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h4 class="card-title mb-0">
                                    <i class="bi bi-patch-question me-2 text-primary"></i>FAQ List
                                </h4>
                                <span class="badge bg-primary rounded-pill">{{ count($faq) }} FAQs</span>
                            </div>

                            <div class="card-body">
                                <div class="mb-3">
                                    <input type="text" id="searchInput" class="form-control"
                                        placeholder="Search by question or answer...">
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-hover table-bordered align-middle mb-0" id="faqTable">
                                        <thead class="table-primary">
                                            <tr>
                                                <th class="text-center" style="width: 70px;">ID</th>
                                                <th>QUESTION</th>
                                                <th>ANSWER</th>
                                                <th class="text-center" style="width: 140px;">CREATED AT</th>
                                                <th class="text-center" style="width: 100px;">ACTION</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tableBody">
                                            @forelse ($faq as $item)
                                                <tr>
                                                    <td class="text-center">
                                                        <span class="badge text-secondary">{{ $item['id'] }}</span>
                                                    </td>
                                                    <td class="fw-semibold">{{ $item['question'] }}</td>
                                                    <td>{{ $item['answer'] }}</td>
                                                    <td class="text-center">
                                                        @if (!empty($item['create_at']))
                                                            <i class="bi bi-calendar3 me-1"></i>
                                                            {{ \Carbon\Carbon::parse($item['create_at'])->format('d M Y') }}
                                                        @else
                                                            <span class="text-muted fst-italic">N/A</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <div class="d-flex justify-content-center gap-1">
                                                            <button type="button"
                                                                class="btn btn-sm btn-outline-primary btn-edit"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#editFaqModal"
                                                                data-id="{{ $item['id'] }}"
                                                                data-question="{{ $item['question'] }}"
                                                                data-answer="{{ $item['answer'] }}">
                                                                <i class="bi bi-pencil"></i>
                                                            </button>

                                                            <button type="button"
                                                                class="btn btn-sm btn-outline-danger btn-delete"
                                                                data-id="{{ $item['id'] }}"
                                                                data-question="{{ $item['question'] }}">
                                                                <i class="bi bi-trash"></i>
                                                            </button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="5" class="text-center py-4 text-muted">
                                                        <i class="bi bi-inbox fs-3 d-block mb-2"></i>No FAQs found.
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        @include('layouts.footer')
    </div>

    {{-- ==================== TOAST NOTIFICATION ==================== --}}
    <div id="toastContainer"
        style="position:fixed;top:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;"></div>

    @if (session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showToast('success', 'Success', '{{ session('success') }}');
            });
        </script>
    @endif

    @if (session('error'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showToast('error', 'Error', '{{ session('error') }}');
            });
        </script>
    @endif

    {{-- ==================== EDIT MODAL ==================== --}}
    <div class="modal fade" id="editFaqModal" tabindex="-1" aria-labelledby="editFaqModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">

                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="editFaqModalLabel">
                        <i class="bi bi-pencil-square me-2"></i>Edit FAQ
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <form id="editFaqForm" method="POST" action="">
                    @csrf
                    @method('POST')

                    <div class="modal-body px-4 py-3">
                        <div class="row g-3">

                            <div class="col-12">
                                <label class="form-label fw-semibold">Question <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-question-circle"></i></span>
                                    <input type="text" class="form-control" id="edit_question"
                                        name="question" placeholder="Enter question" required>
                                </div>
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold">Answer <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-chat-text"></i></span>
                                    <textarea class="form-control" id="edit_answer" name="answer"
                                        rows="4" placeholder="Enter answer" required></textarea>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            <i class="bi bi-x-circle me-1"></i> Cancel
                        </button>
                        <button type="submit" class="btn btn-primary" id="editSubmitBtn">
                            <i class="bi bi-check-circle me-1"></i> Save Changes
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>
    {{-- ==================== END EDIT MODAL ==================== --}}

    {{-- ==================== DELETE MODAL ==================== --}}
    <div class="modal fade" id="deleteFaqModal" tabindex="-1" aria-labelledby="deleteFaqModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="deleteFaqModalLabel">
                        <i class="bi bi-exclamation-triangle me-2"></i>Confirm Delete
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body text-center py-4">
                    <i class="bi bi-trash3 text-danger" style="font-size: 3rem;"></i>
                    <h5 class="mt-3">Are you sure?</h5>
                    <p class="text-muted mb-0">
                        You are about to delete: <br>
                        <strong id="deleteFaqQuestion"></strong>
                        <br>This action <span class="text-danger fw-semibold">cannot be undone</span>.
                    </p>
                </div>

                <div class="modal-footer justify-content-center gap-2">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle me-1"></i> Cancel
                    </button>
                    <form id="deleteFaqForm" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger" id="deleteSubmitBtn">
                            <i class="bi bi-trash me-1"></i> Yes, Delete
                        </button>
                    </form>
                </div>

            </div>
        </div>
    </div>
    {{-- ==================== END DELETE MODAL ==================== --}}

    <script>
        // ── Populate Edit Modal ───────────────────────────────────────
        document.querySelectorAll('.btn-edit').forEach(btn => {
            btn.addEventListener('click', function() {
                const id       = this.dataset.id;
                const question = this.dataset.question;
                const answer   = this.dataset.answer;

                document.getElementById('edit_question').value = question;
                document.getElementById('edit_answer').value   = answer;

                document.getElementById('editFaqForm').action = `faq/${id}`;
            });
        });

        // ── Delete Modal ──────────────────────────────────────────────
        document.querySelectorAll('.btn-delete').forEach(btn => {
            btn.addEventListener('click', function() {
                const id       = this.dataset.id;
                const question = this.dataset.question;

                document.getElementById('deleteFaqQuestion').textContent = question;
                document.getElementById('deleteFaqForm').action = `faq/${id}`;

                new bootstrap.Modal(document.getElementById('deleteFaqModal')).show();
            });
        });

        // Loading state on delete submit
        document.getElementById('deleteFaqForm').addEventListener('submit', function() {
            const btn = document.getElementById('deleteSubmitBtn');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Deleting...';
        });

        // Loading state on edit submit
        document.getElementById('editFaqForm').addEventListener('submit', function() {
            const btn = document.getElementById('editSubmitBtn');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Saving...';
        });

        // ── Live Search ───────────────────────────────────────────────
        document.getElementById('searchInput').addEventListener('keyup', function() {
            const query = this.value.toLowerCase();
            document.querySelectorAll('#tableBody tr').forEach(row => {
                row.style.display = row.textContent.toLowerCase().includes(query) ? '' : 'none';
            });
        });

        // ── Toast Notification ────────────────────────────────────────
        function showToast(type, title, message, duration = 4000) {
            const container = document.getElementById('toastContainer');
            const toast = document.createElement('div');
            const isSuccess = type === 'success';
            toast.style.cssText = `
                display:flex;align-items:flex-start;gap:12px;
                background:var(--color-background-primary,#fff);
                border:0.5px solid #ddd;border-radius:12px;
                padding:14px 16px;min-width:300px;max-width:380px;
                border-left:3px solid ${isSuccess ? '#1D9E75' : '#E24B4A'};
                animation:toastIn .3s ease;
            `;
            toast.innerHTML = `
                <div style="width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;font-weight:500;background:${isSuccess ? '#E1F5EE' : '#FCEBEB'};color:${isSuccess ? '#0F6E56' : '#A32D2D'};">
                    ${isSuccess ? '✓' : '✕'}
                </div>
                <div style="flex:1;">
                    <p style="font-size:14px;font-weight:500;margin:0 0 2px;">${title}</p>
                    <p style="font-size:13px;color:#666;margin:0;">${message}</p>
                </div>
                <button onclick="this.parentElement.remove()" style="font-size:18px;background:none;border:none;cursor:pointer;color:#999;padding:0;line-height:1;">×</button>
            `;

            if (!document.getElementById('toastKeyframes')) {
                const style = document.createElement('style');
                style.id = 'toastKeyframes';
                style.textContent = '@keyframes toastIn{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}';
                document.head.appendChild(style);
            }

            container.appendChild(toast);
            setTimeout(() => toast.remove(), duration);
        }
    </script>
@endsection