@extends('layouts.admin')

@section('content')
    <section>
        <div class="container-fluid">
            <!-- Start: Breadcrumb -->
            <nav class="breadcrumb-nav" aria-label="breadcrumb">
                <h4 class="breadcrumb-heading">Manage Topic Categories</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Categories</li>
                </ol>
            </nav>
            <!-- End: Breadcrumb -->

            @if(count($topic_categories) > 0)
                <div class="row row-cols-1 g-4">
                    <div class="col">
                        <x-alert></x-alert>
                    </div>
                    <div class="col">
                        <div class="d-flex justify-content-end">
                            <a href="{{ route('categories.create') }}" class="button primary gap-2"><i class="bi bi-plus-lg"></i>Add New Topic</a>
                        </div>
                    </div>
                    <div class="col">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th width="3%" class="text-center">No.</th>
                                        <th width="35%">Title</th>
                                        <th>Topic</th>
                                        <th>Date Posted</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($topic_categories as $key => $value)
                                        <tr>
                                            <td class="text-center">{{ ++$key }}</td>
                                            <td class="w-space-normal">{{ $value->name }}</td>
                                            <td>{{ $value->topic->name }}</td>
                                            <td>{{ Helper::dateFormatter($value->updated_at) }}</td>
                                            <td class="text-center">
                                                {!! $value->status_text !!}
                                            </td>
                                            <td>
                                                <div class="dropdown d-flex justify-content-center dropend">
                                                    <button class="button sm text-dark" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="bi bi-three-dots text-muted"></i>
                                                    </button>
                                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                        <li><a class="dropdown-item" href="{{ route('categories.edit', $value->permalink) }}"><i class="bi bi-pencil"></i> Edit</a></li>
                                                        <li><a class="dropdown-item delete" href="javascript:void(0);" data-url="{{ route('categories.destroy', encrypt($value->id)) }}" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="bi bi-trash"></i> Delete</a></li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @else
                <div class="row">
                    <div class="col-xl-12">
                        <div class="empty-state-relative">
                            <div class="empty-state-relative-icon-wrapper">
                                <i class="bi bi-question empty-state-relative-icon"></i>
                            </div>
                            <h4 class="empty-state-relative-text">There are no topic categories yet.</h4>
                            <span>All categories will show up here.</span>
                            <a href="{{ route('categories.create') }}" class="button primary gap-2"><i class="bi bi-plus-lg"></i>Add New Topic Category</a>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </section>
@endsection

@section('modals')
    <!-- Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-modal="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="" method="POST" id="delete_form">
                    @method('DELETE')
                    @csrf

                    <div class="modal-body">
                        <p>This will remove this post from your blog. You will no longer be able to view or edit it once deleted.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button dark" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="button danger">Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        $(document).on('click', '.delete', function() {
            let url = $(this).data('url');
            $('#delete_form').attr('action', url);
        });
    </script>
@endpush