@if (auth()->user()->hasRole('admin'))
    @extends('layouts.admin.app')
@elseif(auth()->user()->hasRole('editor'))
    {{-- @extends('layouts.editor') --}}
@else
    {{-- @extends('layouts.user') --}}
@endif
@section('styles')
    {{-- <link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.13.6/b-2.4.1/sl-1.7.0/datatables.min.css" /> --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" />
    <style>
        div.dataTables_wrapper div.dataTables_length select {
            width: 50%;
        }

        #example_paginate>ul>li.paginate_button.page-item.active>a {
            color: white !important;
        }
    </style>
@endsection
@section('content')
    <h1>Folders</h1>
    @if(count($breadcrumbs) > 0)
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('folders.index') }}">Root</a></li>
                @foreach($breadcrumbs as $crumb)
                    <li class="breadcrumb-item">
                        <a href="{{ route('folders.index', ['folderId' => $crumb['id']]) }}">
                            {{ $crumb['name'] }}
                        </a>
                    </li>
                @endforeach
            </ol>
        </nav>
    @endif
    <table class="table" id="folders-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                
                <th>Created At</th>
                <th>Action</th>
            </tr>
        </thead>
    </table>
@endsection

@section('script')
    <script src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.13.6/b-2.4.1/sl-1.7.0/datatables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <script>
        $(document).ready(function() {
            var table = $('#folders-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{!! route('folders.index') !!}',
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            $('#folders-table tbody').on('click', 'tr', function() {
                var folder_id = table.row(this).data().id;
                getSubfolders(folder_id);
            });
        });

        function getSubfolders(folder_id) {
            $('#folders-table').DataTable().ajax.url('/subfolders-data/' + folder_id).load();
        }
    </script>
@endsection