@extends('layouts.main')

@section('content')

<style>
     .custom-btn {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
    }

    .custom-btn:hover {
        background-color: #0056b3;
    }
 
    .faq-table{
        border-collapse: separate;
        border-spacing: 0 14px;
    }

    /* TABLE HEAD */
    .faq-table thead th{
        border: none;
        background: #f8fafc;
        color: #64748b;
        font-size: 13px;
        font-weight: 700;
        padding: 16px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    /* ROW */
    .faq-table tbody tr{
        background: #fff;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        border-radius: 18px;
        transition: 0.3s ease;
    }

    .faq-table tbody tr:hover{
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0,0,0,0.08);
    }

    .faq-table tbody td{
        padding: 18px 16px;
        vertical-align: middle;
        border-top: none;
        border-bottom: none;
    }

    /* FAQ ICON */
    .faq-icon{
        width: 54px;
        height: 54px;
        border-radius: 16px;
        background: linear-gradient(135deg,#8b5cf6,#6366f1);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 15px rgba(99,102,241,0.3);
    }

    /* STATUS */
    .active-badge{
        background: rgba(34,197,94,0.12);
        color: #16a34a;
        padding: 8px 14px;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 600;
    }

    /* ACTION BUTTON */
    .btn-action{
        width: 42px;
        height: 42px;
        border: none;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        transition: 0.3s;
    }

    /* EDIT */
    .edit-btn{
        background: rgba(59,130,246,0.12);
        color: #2563eb;
    }

    .edit-btn:hover{
        background: #2563eb;
        color: #fff;
        transform: scale(1.08);
    }

    /* DELETE */
    .delete-btn{
        background: rgba(239,68,68,0.12);
        color: #dc2626;
    }

    .delete-btn:hover{
        background: #dc2626;
        color: #fff;
        transform: scale(1.08);
    }

    /* EMPTY */
    .empty-state{
        padding: 40px;
        text-align: center;
    }

    /* MODAL */
    .custom-input{
        border-radius: 14px;
        border: 1px solid #dbeafe;
        padding: 12px 16px;
        transition: 0.3s;
    }

    .custom-input:focus{
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59,130,246,0.1);
    }

    /* BUTTONS */
    .save-btn{
        background: linear-gradient(135deg,#2563eb,#4f46e5);
        color: #fff;
        border-radius: 12px;
        padding: 10px 22px;
        border: none;
        font-weight: 600;
    }

    .save-btn:hover{
        color: #fff;
        transform: translateY(-1px);
    }

    .close-btn{
        background: #f1f5f9;
        color: #334155;
        border-radius: 12px;
        padding: 10px 20px;
        border: none;
        font-weight: 600;
    }

    .close-btn:hover{
        background: #e2e8f0;
    }

    /* MOBILE */
    @media(max-width:768px){

        .faq-table thead{
            display: none;
        }

        .faq-table tbody tr{
            display: block;
            margin-bottom: 20px;
        }

        .faq-table tbody td{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 16px;
            border-bottom: 1px solid #f1f5f9;
        }

        .faq-table tbody td:last-child{
            border-bottom: none;
        }

    }
</style>
<div>

    <div class="d-flex justify-content-between mb-3">
        <h3>FAQ List</h3>

        @can('faq_create')
        <!-- Open Modal Button -->
        <button class="custom-btn" data-bs-toggle="modal" data-bs-target="#addFaqModal">
            + Add FAQ
        </button>
        @endcan
    </div>

    {{-- Success Message --}}
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <!-- FAQ Table -->
 <!-- FAQ Table -->
<div class="table-responsive">

    <table class="table align-middle faq-table mb-0">

        <thead>
            <tr>
                <th width="80">#ID</th>
                <th>FAQ Question</th>
                <th width="140" class="text-center">Status</th>
                <th width="140" class="text-center">Action</th>
            </tr>
        </thead>

        <tbody>

            @forelse($faqs as $faq)

            <tr>

                <!-- SERIAL -->
                <td>
                    <span class="fw-bold text-primary">
                        #{{ $loop->iteration }}
                    </span>
                </td>

                <!-- QUESTION -->
                <td>

                    <div class="d-flex align-items-center gap-3">

                        <!-- ICON -->
                        <div class="faq-icon">
                            <i class="bi bi-patch-question-fill"></i>
                        </div>

                        <!-- CONTENT -->
                        <div>

                            <h6 class="mb-1 fw-semibold text-dark">
                                {{ $faq->question }}
                            </h6>

                            {{-- <small class="text-muted">
                                Frequently Asked Question
                            </small> --}}

                        </div>

                    </div>

                </td>

                <!-- STATUS -->
                <td class="text-center">

                    <span class="badge active-badge">
                        <i class="bi bi-check-circle-fill me-1"></i>
                        Active
                    </span>

                </td>

                <!-- ACTION -->
                <td class="text-center">

                    <div class="d-flex justify-content-center align-items-center gap-2">

                        <!-- EDIT -->
                        @can('faq_edit')

                        <button class="btn-action edit-btn"
                                data-bs-toggle="modal"
                                data-bs-target="#editFaqModal{{ $faq->id }}"
                                title="Edit FAQ">

                            <i class="bi bi-pencil-square"></i>

                        </button>

                        @endcan


                        <!-- DELETE -->
                        @can('faq_delete')

                        <form action="{{ route('superadmin.faq.destroy', $faq->id) }}"
                              method="POST"
                              class="m-0">

                            @csrf
                            @method('DELETE')

                            <button type="submit"
                                    class="btn-action delete-btn"
                                    onclick="return confirm('Are you sure to delete this FAQ?')"
                                    title="Delete FAQ">

                                <i class="bi bi-trash"></i>

                            </button>

                        </form>

                        @endcan

                    </div>

                </td>

            </tr>



            <!-- ================= EDIT MODAL ================= -->
            <div class="modal fade"
                 id="editFaqModal{{ $faq->id }}"
                 tabindex="-1">

                <div class="modal-dialog modal-lg modal-dialog-centered">

                    <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">

                        <form action="{{ route('superadmin.faq.update', $faq->id) }}"
                              method="POST">

                            @csrf
                            @method('PUT')

                            <!-- HEADER -->
                            <div class="modal-header border-0 bg-primary text-white px-4 py-3">

                                <h5 class="modal-title fw-bold">
                                    <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>

                            <!-- BODY -->
                            <div class="modal-body p-4">

                                <!-- QUESTION -->
                                <div class="mb-4">

                                    <label class="form-label fw-semibold">
                                        Question
                                    </label>

                                    <input type="text"
                                           name="question"
                                           value="{{ $faq->question }}"
                                           class="form-control custom-input">

                                </div>

                                <!-- ANSWER -->
                                <div class="mb-3">

                                    <label class="form-label fw-semibold">
                                        Answer
                                    </label>

                                    <textarea name="answer"
                                              rows="5"
                                              class="form-control custom-input">{{ $faq->answer }}</textarea>

                                </div>

                            </div>

                            <!-- FOOTER -->
                            <div class="modal-footer border-0 px-4 pb-4">

                                <button type="submit"
                                        class="btn save-btn">

                                    <i class="bi bi-check-circle me-1"></i>
                                    Update FAQ

                                </button>

                                <button type="button"
                                        class="btn close-btn"
                                        data-bs-dismiss="modal">

                                    Close

                                </button>

                            </div>

                        </form>

                    </div>

                </div>

            </div>

            @empty

            <tr>

                <td colspan="4">

                    <div class="empty-state">

                        <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                             width="120"
                             class="mb-3">

                        <h5>No FAQs Found</h5>

                        <p class="text-muted mb-0">
                            No FAQ records available right now.
                        </p>

                    </div>

                </td>

            </tr>

            @endforelse

        </tbody>

    </table>

</div>

</div>

<!-- ✅ Modal Start -->
<div class="modal fade" id="addFaqModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <form action="{{ route('superadmin.faq.store') }}" method="POST">
                @csrf

                <div class="modal-header">
                    <h5 class="modal-title">Add FAQ</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <div class="mb-3">
                        <label>Question</label>
                        <input type="text" name="question" class="form-control" placeholder="Enter Question" required>
                    </div>

                    <div class="mb-3">
                        <label>Answer</label>
                        <textarea name="answer" class="form-control" rows="4" placeholder="Enter Answer" required></textarea>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="submit" class="custom-btn btn-success">Save FAQ</button>
                    <button type="button" class="custom-btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>

            </form>

        </div>
    </div>
</div>
<!-- ✅ Modal End -->

@endsection