@extends('user.details-layout', ['pageTitle' => 'List Activities'])

@section('content')
    <!-- Zero configuration table -->
    <section class="main-content-section thin-section-border">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header page-title-row">
                        <h2 class="page-title-secondary nk-block-title fw-normal float-left">Activity Logs</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-content collapse show">
                        <div class="card-body card-dashboard">
                            @component('components.activities-table', [
                                'dataSourceUrl' => route('user.activities_datalist', ['user' => $user ? $user->id : auth()->id()])
                            ])
                            @endcomponent
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" tabindex="-1" id="activitiesPayloadModal">
        <div class="modal-dialog" style="max-width: 700px" role="document">
            <div class="modal-content">
                <div class="modal-header text-center bg-custom-green text-white">
                    <h5 class="modal-title" id="modalTitle">Notification Request Payload</h5>
                    <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                        <em class="icon ni ni-cross"></em>
                    </a>
                </div>
                <div class="modal-body">
                    <div class="w-100">
                        <table class="table table-bordered table-responsive d-block">
                            <caption></caption>
                            <thead class="bg-custom-green text-white">
                            <tr>
                                <th scope="col">S/N</th>
                                <th scope="col">Column</th>
                                <th scope="col">Value</th>
                            </tr>
                            </thead>
                            <tbody id="activityContent">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('more-scripts')
    <script src="{{ asset('js/pages/list-activities.js') }}"></script>
@endsection