@extends('layouts.header')

@section('content')
<main>
    <div class="container-fluid px-4">
        <h1 class="mt-4">FAQ Entries</h1>
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item active">Dashboard</li>
        </ol>
        <div class="row">
            <div class="col-xl-12">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-table me-1"></i>
                        FAQ Entries
                    </div>
                    <div class="card-body">
                        @if (session('success'))
                            <div class="alert alert-success" id="successMessage">
                                {{ session('success') }}
                            </div>
                        @endif

                        <!-- Toggle Button for Active/Inactive FAQs -->
                        <div class="mb-3">
                            <button id="toggleStatus" class="btn btn-primary">Show Inactive</button>
                        </div>

                        <div class="table-responsive">
                            <table id="faqTable" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Full Name</th>
                                        <th>Email</th>
                                        <th>Number</th>
                                        <th>Question</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($faqs as $index => $faq)
                                        <tr class="faq-row {{ $faq->status == 1 ? 'approved' : 'unapproved' }}">
                                            <td class="index-cell">{{ $index + 1 }}</td>
                                            <td>{{ $faq->full_name }}</td>
                                            <td>{{ $faq->email }}</td>
                                            <td>{{ $faq->number }}</td>
                                            <td>{{ $faq->question }}</td>
                                            <td>
                                                <div class="action-buttons">
                                                    <form action="{{ route('faq.approve', $faq->id) }}" method="POST" style="display: inline;">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="submit" class="btn-approve">
                                                            ✔
                                                        </button>
                                                    </form>
                                                    <form action="{{ route('faq.destroy', $faq->id) }}" method="POST" style="display: inline;">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn-delete">
                                                            ✖
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<style>
    .approved {
        /* background-color: #006400; /* Dark green background for approved entries */
        /* color: white; White text for better contrast */ */
    }

    .unapproved {
        /* Default background and text color for unapproved entries */
    }

    .action-buttons {
        display: flex;
        gap: 10px;
    }

    .btn-approve, .btn-delete {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        font-size: 18px;
        line-height: 0; /* To ensure symbols are vertically centered */
    }

    .btn-approve {
        background-color: #4CAF50;
        color: white;
    }

    .btn-delete {
        background-color: #f44336;
        color: white;
    }

    /* DataTable specific styles */
    div#faqTable_filter {
        float: right;
    }

    div#faqTable_paginate {
        float: right;
    }

    div#faqTable_length {
        display: flex;
        align-items: center; /* Vertically center the items */
    }

    div#faqTable_length label {
        margin-right: 10px; /* Adjust as needed */
    }

    div#faqTable_length label {
        display: flex;
    }
</style>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap5.min.js"></script>


<script>
    $(document).ready(function() {
    var table = $('#faqTable').DataTable({
        "order": [[4, 'desc']] // Sort by the "Status" column (assuming it's the fifth column) in descending order
    });

    // Fade out the success message after 3 seconds
    setTimeout(function() {
        var successMessage = document.getElementById('successMessage');
        if (successMessage) {
            successMessage.style.transition = 'opacity 0.5s';
            successMessage.style.opacity = '0';
            setTimeout(function() {
                successMessage.remove();
            }, 500); // Wait for the fade-out transition to complete
        }
    }, 3000); // 3 seconds

    // Toggle between active and inactive FAQs
    $('#toggleStatus').click(function() {
        var showInactive = $(this).text() === 'Show Inactive';
        $(this).text(showInactive ? 'Show Active' : 'Show Inactive');

        table.rows().every(function(rowIdx, tableLoop, rowLoop) {
            var data = this.node();
            if (showInactive) {
                $(data).toggle($(data).hasClass('unapproved'));
            } else {
                $(data).toggle($(data).hasClass('approved'));
            }
        });

        // Update the index numbers
        updateIndexNumbers();
    });

    // Initial update of index numbers
    updateIndexNumbers();

    // Trigger click event to initially show inactive entries
    $('#toggleStatus').trigger('click');
});

function updateIndexNumbers() {
    var index = 1;
    $('.faq-row:visible').each(function() {
        $(this).find('.index-cell').text(index++);
    });
}

</script>


@endpush
@endsection