@include('layouts.header', ['title' => 'User Guide'])
<!-- Begin page -->
<div class="wrapper">

    <!-- Include the Navbar -->
    @include('layouts.navbar')


    <!-- Include the Left Sidebar -->
    @include('layouts.sidebar')

    <!-- ============================================================== -->
    <!-- Start Page Content here -->
    <!-- ============================================================== -->

    <div class="content-page">
        <div class="content">

            <!-- Start Content-->
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right"></div>
                            {{-- <h4 class="page-title">Manage Agency Lists</h4> --}}
                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h4 class="header-title mb-0">User Guide</h4>

                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12 mb-3">

                                    </div>
                                </div>

                                <table id="basic-datatable" class="table table-striped dt-responsive nowrap w-100">
                                    <thead>
                                        <tr>
                                            <th>Sl. No.</th>
                                            <th>Name</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($helpTypes as $id => $help)
                                            @php
                                                $fileName = $help['section'] . '.mp4';
                                                $fileUrl = asset('assets/help-videos/' . $fileName);
                                                $fileExists = file_exists(
                                                    public_path('assets/help-videos/' . $fileName),
                                                );
                                            @endphp
                                            <tr>
                                                <td>{{ ($helpTypes->currentPage() - 1) * $helpTypes->perPage() + $loop->iteration }}
                                                </td>
                                                <td>
                                                    @if ($fileExists)
                                                        <a href="{{ $fileUrl }}" target="_blank"
                                                            style="text-decoration: underline;">
                                                            {{ str_replace('_', ' ', $help['section']) }}
                                                        </a>
                                                    @else
                                                        {{ str_replace('_', ' ', $help['section']) }}
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>


                                <!-- Pagination -->
                                <div class="mt-3">
                                    {{ $helpTypes->appends(request()->query())->links('pagination::bootstrap-5') }}
                                </div>




                            </div> <!-- end card body-->
                        </div> <!-- end card -->
                    </div><!-- end col-->
                </div> <!-- end row-->

            </div> <!-- container -->

        </div> <!-- content -->

        <!-- Include the Footer -->
        @include('layouts.footer')

    </div>

    <!-- ============================================================== -->
    <!-- End Page content -->
    <!-- ============================================================== -->

</div>
<!-- END wrapper -->

<!-- Vendor js -->
<script src="{{ asset('assets/js/vendor.min.js') }}"></script>

<!-- App js -->
<script src="{{ asset('assets/js/app.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable.js') }}"></script>

<!-- Custom JS -->
<script src="{{ asset('assets/js/pages/agency/agency.js') }}"></script>

<script>
    $(document).ready(function() {
        @if ($errors->any())
            @foreach ($errors->all() as $error)
                toastr.error("{{ $error }}");
            @endforeach
        @endif

        @if (session('success'))
            toastr.success("{{ session('success') }}");
        @endif

        @if (session('error'))
            toastr.error("{{ session('error') }}");
        @endif
    });
</script>


</body>

</html>