@extends('layouts/layoutMaster')

@section('title', ($providerDetails->display_name ?? 'Provider') . ' — Repository')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}" />
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
@endsection

@section('content')
    @php $provId = $providerDetails->uuid ?? ''; @endphp

    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h4 class="fw-bold mb-1">Provider Details</h4>
                    <p class="text-muted mb-0">Central document library — templates, samples & reference files.</p>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ url('providers') }}">Providers</a></li>
                        <li class="breadcrumb-item active">{{ $providerDetails->display_name ?? '' }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    @include('providers.administrator._header', ['providerDetails' => $providerDetails])

    <div class="row g-4">
        <div class="col-12 col-lg-3">
            @include('providers.administrator._nav', ['activePage' => 'documents-repository', 'providerDetails' => $providerDetails])
        </div>
        <div class="col-12 col-lg-9">

            {{-- Stats --}}
            <div class="row g-4 mb-4">
                <div class="col-sm-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <p class="mb-1 text-muted">Total Documents</p>
                                    <h4 class="mb-0 fw-bold">{{ $stats['total'] ?? 24 }}</h4>
                                </div>
                                <div class="avatar">
                                    <span class="avatar-initial rounded bg-label-primary"><i class="ti ti-archive ti-md"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <p class="mb-1 text-muted">Templates</p>
                                    <h4 class="mb-0 fw-bold">{{ $stats['templates'] ?? 10 }}</h4>
                                </div>
                                <div class="avatar">
                                    <span class="avatar-initial rounded bg-label-info"><i class="ti ti-template ti-md"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <p class="mb-1 text-muted">Samples</p>
                                    <h4 class="mb-0 fw-bold">{{ $stats['samples'] ?? 8 }}</h4>
                                </div>
                                <div class="avatar">
                                    <span class="avatar-initial rounded bg-label-success"><i class="ti ti-file-check ti-md"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <p class="mb-1 text-muted">Pinned</p>
                                    <h4 class="mb-0 fw-bold">{{ $stats['pinned'] ?? 5 }}</h4>
                                </div>
                                <div class="avatar">
                                    <span class="avatar-initial rounded bg-label-warning"><i class="ti ti-pin ti-md"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Toolbar --}}
            <div class="card mb-4">
                <div class="card-header">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                        <div>
                            <h5 class="card-title mb-0">Document Repository</h5>
                            <small class="text-muted">Upload and manage templates, samples and reference documents.</small>
                        </div>
                        <div class="d-flex gap-2">
                            <div class="btn-group btn-group-sm" role="group">
                                <button type="button" class="btn btn-outline-secondary active" id="btn-view-grid" onclick="toggleView('grid')"><i class="ti ti-layout-grid"></i></button>
                                <button type="button" class="btn btn-outline-secondary" id="btn-view-list" onclick="toggleView('list')"><i class="ti ti-list"></i></button>
                            </div>
                            <select class="form-select form-select-sm" id="filter-category" style="width: auto;" onchange="filterDocuments()">
                                <option value="">All Categories</option>
                                <option value="template">Templates</option>
                                <option value="sample">Samples</option>
                                <option value="reference">Reference</option>
                                <option value="guide">Guides</option>
                            </select>
                            <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#uploadDocModal">
                                <i class="ti ti-upload me-1"></i> Upload
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Grid View --}}
                <div class="card-body" id="repo-grid-view">
                    <div class="row g-3">
                        {{-- Pinned doc --}}
                        <div class="col-md-6 col-xl-4" data-category="template">
                            <div class="border rounded p-3 h-100 position-relative">
                                <div class="position-absolute top-0 end-0 mt-2 me-2">
                                    <button class="btn btn-icon btn-sm btn-text-warning pinned" title="Unpin" onclick="togglePin(this)"><i class="ti ti-pin-filled"></i></button>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <div class="avatar avatar-sm me-2">
                                        <span class="avatar-initial rounded bg-label-danger"><i class="ti ti-file-type-pdf ti-xs"></i></span>
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h6 class="mb-0 fw-medium text-truncate">Audit Engagement Letter</h6>
                                        <small class="text-muted">Template</small>
                                    </div>
                                </div>
                                <p class="text-muted small mb-2 text-truncate">Standard engagement letter template for statutory audit assignments.</p>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <div class="d-flex gap-1">
                                        <span class="badge bg-label-secondary">PDF</span>
                                        <span class="badge bg-label-primary">v3</span>
                                    </div>
                                    <small class="text-muted">245 KB</small>
                                </div>
                                <div class="d-flex align-items-center justify-content-between border-top pt-2">
                                    <small class="text-muted">Updated 15 Jan 2026</small>
                                    <div class="d-flex gap-1">
                                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Version History" onclick="showVersionHistory('Audit Engagement Letter')"><i class="ti ti-history"></i></button>
                                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Download" onclick="toastNoti('Download is under development.', 'info')"><i class="ti ti-download"></i></button>
                                        <div class="dropdown d-inline-block">
                                            <button class="btn btn-icon btn-sm btn-text-secondary" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical"></i></button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-pencil me-2"></i>Edit Details</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-upload me-2"></i>Upload New Version</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-tag me-2"></i>Manage Tags</a></li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li><a class="dropdown-item text-danger" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Pinned doc 2 --}}
                        <div class="col-md-6 col-xl-4" data-category="template">
                            <div class="border rounded p-3 h-100 position-relative">
                                <div class="position-absolute top-0 end-0 mt-2 me-2">
                                    <button class="btn btn-icon btn-sm btn-text-warning pinned" title="Unpin" onclick="togglePin(this)"><i class="ti ti-pin-filled"></i></button>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <div class="avatar avatar-sm me-2">
                                        <span class="avatar-initial rounded bg-label-success"><i class="ti ti-file-spreadsheet ti-xs"></i></span>
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h6 class="mb-0 fw-medium text-truncate">Tax Computation Workpaper</h6>
                                        <small class="text-muted">Template</small>
                                    </div>
                                </div>
                                <p class="text-muted small mb-2 text-truncate">Standard income tax computation template with all schedules.</p>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <div class="d-flex gap-1">
                                        <span class="badge bg-label-secondary">XLSX</span>
                                        <span class="badge bg-label-primary">v5</span>
                                    </div>
                                    <small class="text-muted">128 KB</small>
                                </div>
                                <div class="d-flex align-items-center justify-content-between border-top pt-2">
                                    <small class="text-muted">Updated 20 Feb 2026</small>
                                    <div class="d-flex gap-1">
                                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Version History" onclick="showVersionHistory('Tax Computation Workpaper')"><i class="ti ti-history"></i></button>
                                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Download" onclick="toastNoti('Download is under development.', 'info')"><i class="ti ti-download"></i></button>
                                        <div class="dropdown d-inline-block">
                                            <button class="btn btn-icon btn-sm btn-text-secondary" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical"></i></button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-pencil me-2"></i>Edit Details</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-upload me-2"></i>Upload New Version</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-tag me-2"></i>Manage Tags</a></li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li><a class="dropdown-item text-danger" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Sample doc --}}
                        <div class="col-md-6 col-xl-4" data-category="sample">
                            <div class="border rounded p-3 h-100 position-relative">
                                <div class="position-absolute top-0 end-0 mt-2 me-2">
                                    <button class="btn btn-icon btn-sm btn-text-secondary" title="Pin" onclick="togglePin(this)"><i class="ti ti-pin"></i></button>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <div class="avatar avatar-sm me-2">
                                        <span class="avatar-initial rounded bg-label-danger"><i class="ti ti-file-type-pdf ti-xs"></i></span>
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h6 class="mb-0 fw-medium text-truncate">Sample Bank Confirmation</h6>
                                        <small class="text-muted">Sample</small>
                                    </div>
                                </div>
                                <p class="text-muted small mb-2 text-truncate">Sample bank confirmation letter for external confirmation procedures.</p>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <div class="d-flex gap-1">
                                        <span class="badge bg-label-secondary">PDF</span>
                                        <span class="badge bg-label-primary">v1</span>
                                    </div>
                                    <small class="text-muted">78 KB</small>
                                </div>
                                <div class="d-flex align-items-center justify-content-between border-top pt-2">
                                    <small class="text-muted">Updated 05 Dec 2025</small>
                                    <div class="d-flex gap-1">
                                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Version History" onclick="showVersionHistory('Sample Bank Confirmation')"><i class="ti ti-history"></i></button>
                                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Download" onclick="toastNoti('Download is under development.', 'info')"><i class="ti ti-download"></i></button>
                                        <div class="dropdown d-inline-block">
                                            <button class="btn btn-icon btn-sm btn-text-secondary" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical"></i></button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-pencil me-2"></i>Edit Details</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-upload me-2"></i>Upload New Version</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-tag me-2"></i>Manage Tags</a></li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li><a class="dropdown-item text-danger" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Reference doc --}}
                        <div class="col-md-6 col-xl-4" data-category="reference">
                            <div class="border rounded p-3 h-100 position-relative">
                                <div class="position-absolute top-0 end-0 mt-2 me-2">
                                    <button class="btn btn-icon btn-sm btn-text-secondary" title="Pin" onclick="togglePin(this)"><i class="ti ti-pin"></i></button>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <div class="avatar avatar-sm me-2">
                                        <span class="avatar-initial rounded bg-label-info"><i class="ti ti-file-type-doc ti-xs"></i></span>
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h6 class="mb-0 fw-medium text-truncate">SSM Annual Return Guide</h6>
                                        <small class="text-muted">Reference</small>
                                    </div>
                                </div>
                                <p class="text-muted small mb-2 text-truncate">Step-by-step guide for SSM annual return filing procedures.</p>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <div class="d-flex gap-1">
                                        <span class="badge bg-label-secondary">DOCX</span>
                                        <span class="badge bg-label-primary">v2</span>
                                    </div>
                                    <small class="text-muted">312 KB</small>
                                </div>
                                <div class="d-flex align-items-center justify-content-between border-top pt-2">
                                    <small class="text-muted">Updated 10 Jan 2026</small>
                                    <div class="d-flex gap-1">
                                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Version History" onclick="showVersionHistory('SSM Annual Return Guide')"><i class="ti ti-history"></i></button>
                                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Download" onclick="toastNoti('Download is under development.', 'info')"><i class="ti ti-download"></i></button>
                                        <div class="dropdown d-inline-block">
                                            <button class="btn btn-icon btn-sm btn-text-secondary" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical"></i></button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-pencil me-2"></i>Edit Details</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-upload me-2"></i>Upload New Version</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-tag me-2"></i>Manage Tags</a></li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li><a class="dropdown-item text-danger" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Template doc --}}
                        <div class="col-md-6 col-xl-4" data-category="template">
                            <div class="border rounded p-3 h-100 position-relative">
                                <div class="position-absolute top-0 end-0 mt-2 me-2">
                                    <button class="btn btn-icon btn-sm btn-text-warning pinned" title="Unpin" onclick="togglePin(this)"><i class="ti ti-pin-filled"></i></button>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <div class="avatar avatar-sm me-2">
                                        <span class="avatar-initial rounded bg-label-success"><i class="ti ti-file-spreadsheet ti-xs"></i></span>
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h6 class="mb-0 fw-medium text-truncate">Client Acceptance Form</h6>
                                        <small class="text-muted">Template</small>
                                    </div>
                                </div>
                                <p class="text-muted small mb-2 text-truncate">KYC and client acceptance form for new engagement onboarding.</p>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <div class="d-flex gap-1">
                                        <span class="badge bg-label-secondary">XLSX</span>
                                        <span class="badge bg-label-primary">v4</span>
                                    </div>
                                    <small class="text-muted">96 KB</small>
                                </div>
                                <div class="d-flex align-items-center justify-content-between border-top pt-2">
                                    <small class="text-muted">Updated 01 Feb 2026</small>
                                    <div class="d-flex gap-1">
                                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Version History" onclick="showVersionHistory('Client Acceptance Form')"><i class="ti ti-history"></i></button>
                                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Download" onclick="toastNoti('Download is under development.', 'info')"><i class="ti ti-download"></i></button>
                                        <div class="dropdown d-inline-block">
                                            <button class="btn btn-icon btn-sm btn-text-secondary" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical"></i></button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-pencil me-2"></i>Edit Details</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-upload me-2"></i>Upload New Version</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-tag me-2"></i>Manage Tags</a></li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li><a class="dropdown-item text-danger" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Sample doc 2 --}}
                        <div class="col-md-6 col-xl-4" data-category="sample">
                            <div class="border rounded p-3 h-100 position-relative">
                                <div class="position-absolute top-0 end-0 mt-2 me-2">
                                    <button class="btn btn-icon btn-sm btn-text-secondary" title="Pin" onclick="togglePin(this)"><i class="ti ti-pin"></i></button>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <div class="avatar avatar-sm me-2">
                                        <span class="avatar-initial rounded bg-label-danger"><i class="ti ti-file-type-pdf ti-xs"></i></span>
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h6 class="mb-0 fw-medium text-truncate">Sample Board Resolution</h6>
                                        <small class="text-muted">Sample</small>
                                    </div>
                                </div>
                                <p class="text-muted small mb-2 text-truncate">Sample board resolution for change of registered address.</p>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <div class="d-flex gap-1">
                                        <span class="badge bg-label-secondary">PDF</span>
                                        <span class="badge bg-label-primary">v1</span>
                                    </div>
                                    <small class="text-muted">54 KB</small>
                                </div>
                                <div class="d-flex align-items-center justify-content-between border-top pt-2">
                                    <small class="text-muted">Updated 22 Nov 2025</small>
                                    <div class="d-flex gap-1">
                                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Version History" onclick="showVersionHistory('Sample Board Resolution')"><i class="ti ti-history"></i></button>
                                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Download" onclick="toastNoti('Download is under development.', 'info')"><i class="ti ti-download"></i></button>
                                        <div class="dropdown d-inline-block">
                                            <button class="btn btn-icon btn-sm btn-text-secondary" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical"></i></button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-pencil me-2"></i>Edit Details</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-upload me-2"></i>Upload New Version</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-tag me-2"></i>Manage Tags</a></li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li><a class="dropdown-item text-danger" href="javascript:void(0)" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- List View (hidden by default) --}}
                <div class="card-datatable table-responsive d-none" id="repo-list-view">
                    <table class="table border-top dt-repository">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Document</th>
                                <th>Category</th>
                                <th>Format</th>
                                <th>Version</th>
                                <th>Size</th>
                                <th>Updated</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-center"><button class="btn btn-icon btn-sm btn-text-warning" onclick="togglePin(this)"><i class="ti ti-pin-filled"></i></button></td>
                                <td>
                                    <div>
                                        <span class="fw-medium d-block">Audit Engagement Letter</span>
                                        <small class="text-muted">Standard engagement letter template</small>
                                    </div>
                                </td>
                                <td><span class="badge bg-label-info">Template</span></td>
                                <td><span class="badge bg-label-secondary">PDF</span></td>
                                <td><span class="badge bg-label-primary">v3</span></td>
                                <td class="text-muted">245 KB</td>
                                <td class="text-nowrap"><small class="text-muted">15 Jan 2026</small></td>
                                <td class="text-nowrap">
                                    <button class="btn btn-sm btn-icon" title="History" onclick="showVersionHistory('Audit Engagement Letter')"><i class="ti ti-history"></i></button>
                                    <button class="btn btn-sm btn-icon" title="Download" onclick="toastNoti('Download is under development.', 'info')"><i class="ti ti-download"></i></button>
                                    <button class="btn btn-sm btn-icon" title="Edit" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-pencil"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-center"><button class="btn btn-icon btn-sm btn-text-warning" onclick="togglePin(this)"><i class="ti ti-pin-filled"></i></button></td>
                                <td>
                                    <div>
                                        <span class="fw-medium d-block">Tax Computation Workpaper</span>
                                        <small class="text-muted">Standard income tax computation template</small>
                                    </div>
                                </td>
                                <td><span class="badge bg-label-info">Template</span></td>
                                <td><span class="badge bg-label-secondary">XLSX</span></td>
                                <td><span class="badge bg-label-primary">v5</span></td>
                                <td class="text-muted">128 KB</td>
                                <td class="text-nowrap"><small class="text-muted">20 Feb 2026</small></td>
                                <td class="text-nowrap">
                                    <button class="btn btn-sm btn-icon" title="History" onclick="showVersionHistory('Tax Computation Workpaper')"><i class="ti ti-history"></i></button>
                                    <button class="btn btn-sm btn-icon" title="Download" onclick="toastNoti('Download is under development.', 'info')"><i class="ti ti-download"></i></button>
                                    <button class="btn btn-sm btn-icon" title="Edit" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-pencil"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-center"><button class="btn btn-icon btn-sm btn-text-secondary" onclick="togglePin(this)"><i class="ti ti-pin"></i></button></td>
                                <td>
                                    <div>
                                        <span class="fw-medium d-block">Sample Bank Confirmation</span>
                                        <small class="text-muted">Sample bank confirmation letter</small>
                                    </div>
                                </td>
                                <td><span class="badge bg-label-success">Sample</span></td>
                                <td><span class="badge bg-label-secondary">PDF</span></td>
                                <td><span class="badge bg-label-primary">v1</span></td>
                                <td class="text-muted">78 KB</td>
                                <td class="text-nowrap"><small class="text-muted">05 Dec 2025</small></td>
                                <td class="text-nowrap">
                                    <button class="btn btn-sm btn-icon" title="History" onclick="showVersionHistory('Sample Bank Confirmation')"><i class="ti ti-history"></i></button>
                                    <button class="btn btn-sm btn-icon" title="Download" onclick="toastNoti('Download is under development.', 'info')"><i class="ti ti-download"></i></button>
                                    <button class="btn btn-sm btn-icon" title="Edit" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-pencil"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-center"><button class="btn btn-icon btn-sm btn-text-secondary" onclick="togglePin(this)"><i class="ti ti-pin"></i></button></td>
                                <td>
                                    <div>
                                        <span class="fw-medium d-block">SSM Annual Return Guide</span>
                                        <small class="text-muted">Step-by-step filing procedures</small>
                                    </div>
                                </td>
                                <td><span class="badge bg-label-warning">Reference</span></td>
                                <td><span class="badge bg-label-secondary">DOCX</span></td>
                                <td><span class="badge bg-label-primary">v2</span></td>
                                <td class="text-muted">312 KB</td>
                                <td class="text-nowrap"><small class="text-muted">10 Jan 2026</small></td>
                                <td class="text-nowrap">
                                    <button class="btn btn-sm btn-icon" title="History" onclick="showVersionHistory('SSM Annual Return Guide')"><i class="ti ti-history"></i></button>
                                    <button class="btn btn-sm btn-icon" title="Download" onclick="toastNoti('Download is under development.', 'info')"><i class="ti ti-download"></i></button>
                                    <button class="btn btn-sm btn-icon" title="Edit" onclick="toastNoti('Under development.', 'info')"><i class="ti ti-pencil"></i></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Upload Modal --}}
    <div class="modal fade" id="uploadDocModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Upload Document</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Title <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="doc-title" placeholder="e.g. Audit Engagement Letter" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" id="doc-description" rows="3" placeholder="Brief description of the document…"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Category <span class="text-danger">*</span></label>
                        <select class="form-select" id="doc-category">
                            <option value="">Select Category</option>
                            <option value="template">Template</option>
                            <option value="sample">Sample</option>
                            <option value="reference">Reference</option>
                            <option value="guide">Guide</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tags</label>
                        <input type="text" class="form-control" id="doc-tags" placeholder="audit, engagement, statutory (comma-separated)" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label">File <span class="text-danger">*</span></label>
                        <input type="file" class="form-control" id="doc-file" />
                        <small class="text-muted">Max 10 MB. Accepted: PDF, DOCX, XLSX, PPTX, CSV, JPG, PNG.</small>
                    </div>
                    <div class="mb-0">
                        <label class="form-label">Version Notes</label>
                        <input type="text" class="form-control" id="doc-version-notes" placeholder="e.g. Initial upload" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="toastNoti('Upload is under development.', 'info')">
                        <i class="ti ti-upload me-1"></i> Upload
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Version History Offcanvas --}}
    <div class="offcanvas offcanvas-end" tabindex="-1" id="versionHistoryDrawer" aria-labelledby="versionHistoryLabel">
        <div class="offcanvas-header border-bottom">
            <h5 id="versionHistoryLabel" class="offcanvas-title">Version History</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <h6 class="fw-medium mb-3" id="version-doc-title">—</h6>

            {{-- Current version --}}
            <div class="border rounded p-3 mb-3 bg-label-primary bg-opacity-10">
                <div class="d-flex align-items-center justify-content-between mb-1">
                    <span class="badge bg-primary">Current — v3</span>
                    <small class="text-muted">15 Jan 2026</small>
                </div>
                <p class="small mb-1 text-muted">Updated formatting, added new ISQM1 compliance clause.</p>
                <div class="d-flex align-items-center justify-content-between">
                    <small class="text-muted">By: Admin User • 245 KB</small>
                    <button class="btn btn-icon btn-sm btn-text-primary" title="Download" onclick="toastNoti('Download is under development.', 'info')"><i class="ti ti-download"></i></button>
                </div>
            </div>

            {{-- Older versions --}}
            <div class="border rounded p-3 mb-3">
                <div class="d-flex align-items-center justify-content-between mb-1">
                    <span class="badge bg-label-secondary">v2</span>
                    <small class="text-muted">10 Aug 2025</small>
                </div>
                <p class="small mb-1 text-muted">Added anti-money laundering acknowledgement section.</p>
                <div class="d-flex align-items-center justify-content-between">
                    <small class="text-muted">By: Admin User • 230 KB</small>
                    <div>
                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Download" onclick="toastNoti('Download is under development.', 'info')"><i class="ti ti-download"></i></button>
                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Restore" onclick="toastNoti('Restore is under development.', 'info')"><i class="ti ti-arrow-back-up"></i></button>
                    </div>
                </div>
            </div>

            <div class="border rounded p-3 mb-3">
                <div class="d-flex align-items-center justify-content-between mb-1">
                    <span class="badge bg-label-secondary">v1</span>
                    <small class="text-muted">01 Mar 2025</small>
                </div>
                <p class="small mb-1 text-muted">Initial upload of engagement letter template.</p>
                <div class="d-flex align-items-center justify-content-between">
                    <small class="text-muted">By: Admin User • 210 KB</small>
                    <div>
                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Download" onclick="toastNoti('Download is under development.', 'info')"><i class="ti ti-download"></i></button>
                        <button class="btn btn-icon btn-sm btn-text-secondary" title="Restore" onclick="toastNoti('Restore is under development.', 'info')"><i class="ti ti-arrow-back-up"></i></button>
                    </div>
                </div>
            </div>

            <div class="text-center mt-4">
                <button class="btn btn-sm btn-outline-primary" onclick="toastNoti('Upload new version is under development.', 'info')">
                    <i class="ti ti-upload me-1"></i> Upload New Version
                </button>
            </div>
        </div>
    </div>
@endsection

@section('page-script')
    <script>
        $(function () {
            $('.dt-repository').DataTable({
                ordering: true, order: [[1, 'asc']],
                columnDefs: [
                    { orderable: false, searchable: false, targets: [0, -1] }
                ],
                language: { emptyTable: 'No documents in repository.', search: '', searchPlaceholder: 'Search…' }
            });
        });

        function toggleView(view) {
            if (view === 'list') {
                $('#repo-grid-view').addClass('d-none');
                $('#repo-list-view').removeClass('d-none');
                $('#btn-view-grid').removeClass('active');
                $('#btn-view-list').addClass('active');
            } else {
                $('#repo-grid-view').removeClass('d-none');
                $('#repo-list-view').addClass('d-none');
                $('#btn-view-grid').addClass('active');
                $('#btn-view-list').removeClass('active');
            }
        }

        function filterDocuments() {
            var cat = $('#filter-category').val();
            if (!cat) {
                $('[data-category]').show();
            } else {
                $('[data-category]').hide();
                $('[data-category="' + cat + '"]').show();
            }
        }

        function togglePin(el) {
            var $icon = $(el).find('i');
            if ($icon.hasClass('ti-pin-filled')) {
                $icon.removeClass('ti-pin-filled').addClass('ti-pin');
                $(el).removeClass('btn-text-warning pinned').addClass('btn-text-secondary');
                $(el).attr('title', 'Pin');
                toastNoti('Document unpinned.', 'success');
            } else {
                $icon.removeClass('ti-pin').addClass('ti-pin-filled');
                $(el).removeClass('btn-text-secondary').addClass('btn-text-warning pinned');
                $(el).attr('title', 'Unpin');
                toastNoti('Document pinned.', 'success');
            }
        }

        function showVersionHistory(title) {
            $('#version-doc-title').text(title);
            new bootstrap.Offcanvas(document.getElementById('versionHistoryDrawer')).show();
        }
    </script>
@endsection