@extends('layouts.app')

@section('content')
    <article class="active text">
        <header>
            <h2 class="h2 article-title">Page Catalog</h2>
        </header>
        <section>
            <span class="float-end">
                <a href="{{ route('dashboard') }}" class="float-left me-3"><i class="fa-solid fa-left-long"> Back</i></a>
                <a href="{{ route('admin.page.create') }}" class="float-end"><i class="fa-solid fa-file-circle-plus"> Create</i></a>
            </span>
            <table class="table table-striped w-100 table-dark table-auto">
                <thead>
                <tr>
                    <th scope="col"></th>
                    <th scope="col">Slug</th>
                    <th scope="col">Title</th>
                    <th scope="col">In Menu</th>
                    <th scope="col">Published</th>
                </tr>
                </thead>
                <tbody>
                @foreach($pages as $p)
                    <tr>
                        <th scope="row">
                            <a href="{{ route('admin.page.show', $p) }}" title="View"><i class="fa-regular fa-eye text-primary pr-2"></i></a>
                            <a href="{{ route('admin.page.edit', $p) }}" title="Edit"><i class="fa-regular fa-pen-to-square text-success pr-2"></i></a>
                            <i
                                class="fa-regular fa-trash-can text-danger delete-page @if($p->slug === '/') d-none @endif"
                                data-page-id="{{ $p->id }}"
                                data-page-name="{{ $p->title }}"
                                data-toggle="modal"
                                data-target="#deletePageModal"
                                title="Delete"
                            ></i>
                        </th>
                        <td>{{ $p->slug }}</td>
                        <td>{{ $p->title }}</td>
                        <td class="text-center">{!! $p->in_menu ? '<div class="alert-success">Yes</div>' : '<div class="alert-danger">No</div>' !!}</td>
                        <td class="text-center">{!! $p->published ? '<div class="alert-success">Yes</div>' : '<div class="alert-danger">No</div>' !!}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </section>
    </article>

<div class="modal fade" id="deletePageModal" tabindex="-1" role="dialog" aria-labelledby="deletePageModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <h5 class="modal-title text-white fw-bold" id="deletePageModalLabel">Delete Page?</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span inert>&times;</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button id="deletePage" type="button" class="btn btn-danger">Delete</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
    <script>
        $('.delete-page').click(function(event) {
            $('#deletePageModal').data('pageId', $(event.currentTarget).data('pageId'));
            $('#deletePageModal .modal-body').text('Are you sure you want to delete "' + $(event.currentTarget).data('pageName') + '"?');
            $('#deletePageModal').modal('show');
            $('#deletePageModal').show();
        });
        $('#deletePageModalLabel').click(function() {
            $('#deletePageModal').modal('hide');
            $('#deletePageModal').hide();
        });
        $('button#deletePage').click(function(event) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                method: 'DELETE',
                url: '{{ route('admin.page.index') }}/'+$('#deletePageModal').data('pageId'),
                success: function() {
                    location.reload();
                },
                failure: function() {},
            });
        });
    </script>
@endsection