@extends('layouts.app')

@section('content')
    <article class="active text">
        <header>
            <h2 class="h2 article-title">Portfolio Entries</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.portfolio.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">Published</th>
                    <th scope="col">Created At</th>
                    <th scope="col">Updated At</th>
                </tr>
                </thead>
                <tbody>
                @foreach($portfolios as $b)
                    <tr>
                        <th scope="row">
                            <a href="{{ route('admin.portfolio.show', $b) }}" title="View"><i class="fa-regular fa-eye text-primary pr-2"></i></a>
                            <a href="{{ route('admin.portfolio.edit', $b) }}" 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-portfolio"
                                data-portfolio-id="{{ $b->id }}"
                                data-portfolio-name="{{ $b->title }}"
                                data-toggle="modal"
                                data-target="#deletePortfolioModal"
                                title="Delete"
                            ></i>
                        </th>
                        <td>{{ $b->slug }}</td>
                        <td>{{ $b->title }}</td>
                        <td class="text-center">{!! $b->published_at ? '<div class="alert-success">Yes</div>' : '<div class="alert-danger">No</div>' !!}</td>
                        <td>{{ $b->created_at }}</td>
                        <td>{{ $b->updated_at }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </section>
    </article>

    <div class="modal fade" id="deletePortfolioModal" tabindex="-1" role="dialog" aria-labelledby="deletePortfolioModal" 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="deletePortfolioModalLabel">Delete Portfolio?</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="deletePortfolio" type="button" class="btn btn-danger">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection

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