@extends('layouts.main')

@section('content')
<style>
/* Page-specific styles — layout provides base dark theme */
.btn-add {
    background: #6366f1 !important;
    color: #ffffff !important;
    border: 1px solid #818cf8 !important;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 14px;
    transition: .25s;
    cursor: pointer;
    font-family: inherit;
}

.btn-add:hover {
    background: #818cf8 !important;
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    transition: .25s;
    cursor: pointer;
}

.btn-edit {
    background: #ffc107 !important;
    color: #000 !important;
}

.btn-edit:hover {
    background: #e0a800 !important;
    transform: scale(1.08);
}

.btn-delete {
    background: #dc3545 !important;
    color: #fff !important;
}

.btn-delete:hover {
    background: #bb2d3b !important;
    transform: scale(1.08);
}

.modern-table {
    width: 100%;
    border-collapse: collapse;
    color: #F3F4F6;
}

.modern-table thead th {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    padding: 1rem 1.2rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #818CF8;
}

.modern-table tbody tr {
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.modern-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}

.modern-table tbody td {
    padding: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: middle;
}

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

.empty-state {
    text-align: center;
    padding: 3.5rem;
    background: rgba(17, 24, 39, 0.25);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: #9CA3AF;
}
</style>

<div class="form-section">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8rem;">
        <h2 style="margin: 0;">📝 FAQ Management</h2>
        <button class="btn-add" data-bs-toggle="modal" data-bs-target="#addFaqModal">➕ Add FAQ</button>
    </div>

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

    <div style="overflow-x: auto;">
        <table class="modern-table">
            <thead>
                <tr>
                    <th width="60">#ID</th>
                    <th>Question</th>
                    <th width="150" style="text-align: center;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($faqs as $key => $faq)
                <tr>
                    <td><span style="color: #818CF8; font-weight: 600;">{{ $key + 1 }}</span></td>
                    <td>{{ $faq->question }}</td>
                    <td style="text-align: center;">
                        <div style="display: flex; justify-content: center; gap: 0.5rem;">
                            <button class="btn-action btn-edit" data-bs-toggle="modal"
                                data-bs-target="#editFaqModal{{$faq->id}}">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                            <form action="{{ route('super-admin.faq.destroy', $faq->id) }}" method="POST">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn-action btn-delete"
                                    onclick="return confirm('Delete this FAQ?')">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="3">
                        <div class="empty-state">No FAQs found.</div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- MODALS OUTSIDE THE TABLE --}}
@foreach($faqs as $faq)
<div class="modal fade" id="editFaqModal{{ $faq->id }}" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form action="{{ route('super-admin.faq.update', $faq->id) }}" method="POST" class="modal-content">
            @csrf @method('PUT')
            <div class="modal-header">
                <h5>Edit FAQ</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label>Assign to Tenant (Optional)</label>
                    <select name="tenant_id" class="form-control">
                        <option value="">No Tenant (Global)</option>
                        @foreach($tenants as $t)
                            <option value="{{ $t->id }}" {{ isset($faq) && $faq->tenant_id == $t->id ? 'selected' : '' }}>{{ $t->name }} ({{ $t->custom_domain }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3"><label>Question</label><input type="text" name="question" value="{{ $faq->question }}"
                        class="form-control" required></div>
                <div class="mb-3"><label>Answer</label><textarea name="answer" class="form-control" rows="5"
                        required>{{ $faq->answer }}</textarea></div>
            </div>
            <div class="modal-footer"><button type="submit" class="btn-add">Update FAQ</button></div>
        </form>
    </div>
</div>
@endforeach

<div class="modal fade" id="addFaqModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form action="{{ route('super-admin.faq.store') }}" method="POST" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5>Add New FAQ</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label>Assign to Tenant (Optional)</label>
                    <select name="tenant_id" class="form-control">
                        <option value="">No Tenant (Global)</option>
                        @foreach($tenants as $t)
                            <option value="{{ $t->id }}" {{ isset($faq) && $faq->tenant_id == $t->id ? 'selected' : '' }}>{{ $t->name }} ({{ $t->custom_domain }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3"><label>Question</label><input type="text" name="question" class="form-control"
                        required></div>
                <div class="mb-3"><label>Answer</label><textarea name="answer" class="form-control" rows="5"
                        required></textarea></div>
            </div>
            <div class="modal-footer"><button type="submit" class="btn-add">Save FAQ</button></div>
        </form>
    </div>
</div>

@endsection