@extends('layouts.user_type.auth')

@section('faq')
    <div class="row">
        <div class="col-12">
            @include('components.alert')

            <div class="card mb-4 mx-4">
                <div class="card-header pb-0">
                    <div class="d-flex flex-row justify-content-between">
                        <h5 class="mb-0">FAQ List</h5>

                        <button class="btn bg-gradient-primary btn-sm mb-0" data-bs-toggle="modal" data-bs-target="#faqModal"
                            onclick="clearForm()">+ New FAQ</button>
                    </div>
                </div>

                <!-- FAQ Table -->
                <div class="card-body px-0 pt-0 pb-2">
                    <div class="table-responsive p-0">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">No</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        ID</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Question</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Status</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($faqs as $index => $faq)
                                    <tr>
                                        <td class="ps-4">
                                            <p class="text-xs font-weight-bold mb-0">{{ $faqs->firstItem() + $index }}</p>
                                        </td>
                                        <td class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">{{ $faq->id }}</p>
                                        </td>
                                        <td class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">{{ $faq->question }}</p>
                                        </td>
                                        <td class="text-center">
                                            <p
                                                class="font-weight-bold mb-0 
                                                    @if ($faq->status == 'inactive') badge badge-sm bg-gradient-danger
                                                    @elseif($faq->status == 'active')
                                                        badge badge-sm bg-gradient-success @endif">
                                                {{ ucfirst($faq->status) }}
                                            </p>
                                        </td>
                                        <td class="text-center">
                                            <a href="#" class="mx-3" data-bs-toggle="modal"
                                                data-bs-target="#faqModal" onclick="openEditModal({{ $faq }})">
                                                <i class="fas fa-edit text-secondary"></i>
                                            </a>
                                            <span>
                                                @if ($faq->status !== 'inactive')
                                                    <form method="POST" action="{{ route('faq.delete', $faq->id) }}"
                                                        style="display:inline;">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" title="Delete FAQ"
                                                            style="background: none; border: none; padding: 0; cursor: pointer;"
                                                            onclick="return confirm('Are you sure you want to delete this FAQ?');">
                                                            <i class="fas fa-trash text-secondary"
                                                                data-bs-toggle="tooltip"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center py-5">
                                            <img src="{{ asset('assets/img/no_data_found.png') }}" alt="No Data Found"
                                                style="width: 200px; opacity: 0.6;">
                                            <p class="mt-2 text-muted">No data Found</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                        @include('components.pagination', ['paginator' => $faqs])
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for Creating or Editing FAQ -->
    <div class="modal fade" id="faqModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="faqModalLabel">Edit FAQ</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="faqForm" method="POST" action="{{ route('faq.storeOrUpdate') }}">
                        @csrf
                        <input type="hidden" id="faq_id" name="faq_id">
                        <div class="mb-3">
                            <label for="question" class="form-label">Question</label>
                            <input type="text" class="form-control" id="question" name="question" required>
                        </div>
                        <div class="mb-3">
                            <label for="answer" class="form-label">Answer</label>
                            <textarea class="form-control" id="answer" name="answer" rows="4" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-control" id="status" name="status">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function clearForm() {
            const form = document.getElementById('faqForm');
            form.reset();
            document.getElementById('faq_id').value = '';
            document.getElementById('faqModalLabel').innerText = "Add New FAQ";
        }

        function openEditModal(faq) {
            const form = document.getElementById('faqForm');
            document.getElementById('faq_id').value = faq.id;
            document.getElementById('question').value = faq.question;
            document.getElementById('answer').value = faq.answer;
            document.getElementById('status').value = faq.status;
            document.getElementById('faqModalLabel').innerText = "Edit FAQ";
        }
    </script>
@endsection