@extends('layouts.master')

@section('title', 'Knowledgebase List')
@section('content')
    <style>
        body .select2-container {
            z-index: 9999 !important;
        }

        .modal-backdrop {
            z-index: 0;
        }
    </style>

    <!-- Button to trigger the Add Modal -->
    <div class="mb-3">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addKnowledgebaseModal">
            Add Knowledgebase Entry
        </button>
    </div>
    <!-- Add Modal -->
    <div class="modal fade" id="addKnowledgebaseModal" tabindex="-1" aria-labelledby="addKnowledgebaseLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('knowledgebase.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="addKnowledgebaseLabel">Add Knowledgebase Entry</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="title" class="form-label">Title</label>
                            <input type="text" class="form-control" name="title" required>
                        </div>
                        <div class="mb-3">
                            <label for="file" class="form-label">File</label>
                            <input type="file" class="form-control" name="file">
                        </div>
                        <div class="mb-3">
                            <label for="category" class="form-label">Categories</label>
                            <select class="form-control select2" name="categories[]" multiple="multiple" id="categorySelect"
                                required>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="tags" class="form-label">Tags</label>
                            <select class="form-control select2" name="tags[]" multiple="multiple" id="tagsSelect">
                                @foreach ($tags as $tag)
                                    <option value="{{ $tag->id }}">{{ $tag->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="content" class="form-label">Content</label>
                            <textarea class="form-control" name="content" rows="4" required></textarea>
                        </div>
                        <div class="mb-3" style="display: none;">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-select" name="status" required>
                                <option selected 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 changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- DataTables -->
    <div class="table-responsive mb-4">
        <table id="example2" class="table table-striped table-bordered dt-responsive"
            style="border-collapse: collapse; border-spacing: 0; width: 100%;">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>File</th>
                    <th>Content</th>
                    <th>Categories</th>
                    <th>Tags</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {{-- {{dd($knowledgebases)}} --}}
                @foreach ($knowledgebases as $knowledgebase)
                    {{-- {{dd($knowledgebase)}} --}}
                    <tr>
                        <td>{{ $knowledgebase->title }}</td>
                        <td>
                            @if ($knowledgebase->file_path == null)
                                Not Available
                            @else
                                <a href="{{ route('knowledgebase.download', $knowledgebase->id) }}">Download</a>
                            @endif
                        </td>
                        <td>{{ $knowledgebase->content }}</td>
                        <td>
                            @php
                                $relations = $knowledgebase->getRelations();
                                $categories = $relations['categories'] ?? null;
                            @endphp
                            @if ($categories && $categories->isNotEmpty())
                                {{ $categories->pluck('name')->implode(', ') }}
                            @else
                                No categories
                            @endif
                        </td>

                        <td>
                            @php
                                $tags = $relations['tags'] ?? null;
                            @endphp
                            @if ($tags && $tags->isNotEmpty())
                                {{ $tags->pluck('name')->implode(', ') }}
                            @else
                                No tags
                            @endif
                        </td>

                        <td>{{ $knowledgebase->status }}</td>
                        <td>
                            <button class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                data-bs-target="#editKnowledgebaseModal{{ $knowledgebase->id }}">Edit</button>
                            <form action="{{ route('knowledgebase.destroy', $knowledgebase->id) }}" method="POST"
                                style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger"
                                    onclick="return confirm('Are you sure you want to delete this entry?')">Delete</button>
                            </form>
                        </td>
                    </tr>

                    <!-- Edit Modal -->
                    <div class="modal fade" id="editKnowledgebaseModal{{ $knowledgebase->id }}" tabindex="-1"
                        aria-labelledby="editKnowledgebaseLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <form action="{{ route('knowledgebase.update', $knowledgebase->id) }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="editKnowledgebaseLabel">Edit Knowledgebase Entry
                                        </h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="mb-3">
                                            <label for="title" class="form-label">Title</label>
                                            <input type="text" class="form-control" name="title"
                                                value="{{ $knowledgebase->title }}" required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="file" class="form-label">File</label>
                                            <input type="file" class="form-control" name="file">
                                        </div>
                                        <div class="mb-3">
                                            <label for="category" class="form-label">Categories</label>
                                            <input type="text" class="form-control" name="category[]"
                                                value="{{ $categories->pluck('name')->implode(', ') }}" required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="tags" class="form-label">Tags</label>
                                            <input type="text" class="form-control" name="tags[]"
                                                value="{{ $tags->pluck('name')->implode(', ') }}">
                                        </div>
                                        <div class="mb-3">
                                            <label for="content" class="form-label">Content</label>
                                            <textarea class="form-control" name="content" rows="4" required>{{ $knowledgebase->content }}</textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label for="status" class="form-label">Status</label>
                                            <select class="form-select" name="status" required>
                                                <option value="active"
                                                    {{ $knowledgebase->status == 'active' ? 'selected' : '' }}>
                                                    Active</option>
                                                <option value="inactive"
                                                    {{ $knowledgebase->status == 'inactive' ? 'selected' : '' }}>
                                                    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 changes</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection