@extends('layouts/layoutMaster')

@section('title', ($companyDetails['name'] ?? 'Client') . ' — Document Repository')

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

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

@section('page-style')
    <style>
        .client-detail-nav .nav-link {
            color: #697a8d;
            border-radius: 0.375rem;
            padding: 0.55rem 1rem;
        }
        .client-detail-nav .nav-link:hover {
            background-color: rgba(105, 122, 141, 0.08);
        }
        .client-detail-nav .nav-link.active {
            color: #696cff;
            background-color: rgba(105, 108, 255, 0.08);
            font-weight: 600;
        }
        .repo-file-card {
            transition: box-shadow 0.2s;
            cursor: pointer;
        }
        .repo-file-card:hover {
            box-shadow: 0 0.25rem 1rem rgba(105, 108, 255, 0.12);
        }
        .repo-file-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.375rem;
        }
    </style>
@endsection

@section('content')
    {{-- Page Header --}}
    <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">Client Details</h4>
                    <p class="text-muted mb-0">Permanent files stored for this client.</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('clients') }}">Clients</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $companyDetails['name'] ?? '' }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    {{-- Company Header Card --}}
    @include('companies.administrator._header', ['companyDetails' => $companyDetails])

    {{-- Left Nav + Right Content --}}
    <div class="row g-4">
        {{-- Left Sidebar Navigation --}}
        <div class="col-12 col-lg-3">
            @include('companies.administrator._nav', ['activePage' => 'documents-repository', 'companyDetails' => $companyDetails])
        </div>

        {{-- Right Content --}}
        <div class="col-12 col-lg-9">

            {{-- Stats Cards --}}
            <div class="row g-3 mb-4">
                <div class="col-sm-6 col-md-3">
                    <div class="card p-3">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-3">
                                <span class="avatar-initial rounded bg-label-primary"><i class="ti ti-files ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">24</h5>
                                <small class="text-muted">Total Files</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card p-3">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-3">
                                <span class="avatar-initial rounded bg-label-info"><i class="ti ti-file-text ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">15</h5>
                                <small class="text-muted">From DR</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card p-3">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-3">
                                <span class="avatar-initial rounded bg-label-success"><i class="ti ti-upload ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">9</h5>
                                <small class="text-muted">Uploaded</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card p-3">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-3">
                                <span class="avatar-initial rounded bg-label-warning"><i class="ti ti-database ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">~18 MB</h5>
                                <small class="text-muted">Storage</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Repository Card --}}
            <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">Permanent files stored from document requests and manual uploads.</small>
                        </div>
                        <button class="btn btn-primary btn-sm" id="btn-upload-file">
                            <i class="ti ti-upload me-1"></i> Upload File
                        </button>
                    </div>
                </div>

                {{-- Repository Filters --}}
                <div class="card-body border-bottom pb-3">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label small text-muted mb-1">Source</label>
                            <select class="form-select form-select-sm" id="repo-filter-source">
                                <option value="">All Sources</option>
                                <option value="dr">Document Request</option>
                                <option value="upload">Manual Upload</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small text-muted mb-1">File Type</label>
                            <select class="form-select form-select-sm" id="repo-filter-type">
                                <option value="">All Types</option>
                                <option value="pdf">PDF</option>
                                <option value="excel">Excel</option>
                                <option value="word">Word</option>
                                <option value="image">Image</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small text-muted mb-1">Category</label>
                            <select class="form-select form-select-sm" id="repo-filter-category">
                                <option value="">All Categories</option>
                                <option value="financial">Financial Statements</option>
                                <option value="tax">Tax Documents</option>
                                <option value="corporate">Corporate Secretarial</option>
                                <option value="compliance">Compliance</option>
                                <option value="general">General</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Repository File Grid --}}
            <div class="row g-3" id="repo-file-grid">

                {{-- Sample file 1: PDF from DR --}}
                <div class="col-md-6 col-lg-4 repo-file-item" data-source="dr" data-type="pdf" data-category="financial">
                    <div class="card repo-file-card p-3">
                        <div class="d-flex align-items-start">
                            <div class="repo-file-icon bg-label-danger me-3">
                                <i class="ti ti-file-type-pdf ti-md"></i>
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <h6 class="mb-1 text-truncate" title="Audited Financial Statements FY2025.pdf">Audited Financial Statements FY2025.pdf</h6>
                                <div class="d-flex flex-wrap gap-2 mb-2">
                                    <small class="text-muted"><i class="ti ti-file-text ti-xs me-1"></i>2.4 MB</small>
                                    <small class="text-muted"><i class="ti ti-calendar ti-xs me-1"></i>15 Feb 2026</small>
                                </div>
                                <div class="d-flex gap-1">
                                    <span class="badge bg-label-primary" style="font-size: 0.7rem;">DR-2026-0042</span>
                                    <span class="badge bg-label-secondary" style="font-size: 0.7rem;">Financial</span>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex gap-1 mt-2 justify-content-end">
                            <button class="btn btn-sm btn-icon" title="Preview"><i class="ti ti-eye"></i></button>
                            <button class="btn btn-sm btn-icon" title="Download"><i class="ti ti-download"></i></button>
                            <button class="btn btn-sm btn-icon" title="Delete"><i class="ti ti-trash"></i></button>
                        </div>
                    </div>
                </div>

                {{-- Sample file 2: Excel from DR --}}
                <div class="col-md-6 col-lg-4 repo-file-item" data-source="dr" data-type="excel" data-category="financial">
                    <div class="card repo-file-card p-3">
                        <div class="d-flex align-items-start">
                            <div class="repo-file-icon bg-label-success me-3">
                                <i class="ti ti-file-spreadsheet ti-md"></i>
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <h6 class="mb-1 text-truncate" title="Trial Balance FY2025.xlsx">Trial Balance FY2025.xlsx</h6>
                                <div class="d-flex flex-wrap gap-2 mb-2">
                                    <small class="text-muted"><i class="ti ti-file-text ti-xs me-1"></i>856 KB</small>
                                    <small class="text-muted"><i class="ti ti-calendar ti-xs me-1"></i>12 Feb 2026</small>
                                </div>
                                <div class="d-flex gap-1">
                                    <span class="badge bg-label-primary" style="font-size: 0.7rem;">DR-2026-0042</span>
                                    <span class="badge bg-label-secondary" style="font-size: 0.7rem;">Financial</span>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex gap-1 mt-2 justify-content-end">
                            <button class="btn btn-sm btn-icon" title="Preview"><i class="ti ti-eye"></i></button>
                            <button class="btn btn-sm btn-icon" title="Download"><i class="ti ti-download"></i></button>
                            <button class="btn btn-sm btn-icon" title="Delete"><i class="ti ti-trash"></i></button>
                        </div>
                    </div>
                </div>

                {{-- Sample file 3: PDF from DR --}}
                <div class="col-md-6 col-lg-4 repo-file-item" data-source="dr" data-type="pdf" data-category="tax">
                    <div class="card repo-file-card p-3">
                        <div class="d-flex align-items-start">
                            <div class="repo-file-icon bg-label-danger me-3">
                                <i class="ti ti-file-type-pdf ti-md"></i>
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <h6 class="mb-1 text-truncate" title="Tax Computation FY2025.pdf">Tax Computation FY2025.pdf</h6>
                                <div class="d-flex flex-wrap gap-2 mb-2">
                                    <small class="text-muted"><i class="ti ti-file-text ti-xs me-1"></i>1.1 MB</small>
                                    <small class="text-muted"><i class="ti ti-calendar ti-xs me-1"></i>08 Feb 2026</small>
                                </div>
                                <div class="d-flex gap-1">
                                    <span class="badge bg-label-primary" style="font-size: 0.7rem;">DR-2026-0039</span>
                                    <span class="badge bg-label-secondary" style="font-size: 0.7rem;">Tax</span>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex gap-1 mt-2 justify-content-end">
                            <button class="btn btn-sm btn-icon" title="Preview"><i class="ti ti-eye"></i></button>
                            <button class="btn btn-sm btn-icon" title="Download"><i class="ti ti-download"></i></button>
                            <button class="btn btn-sm btn-icon" title="Delete"><i class="ti ti-trash"></i></button>
                        </div>
                    </div>
                </div>

                {{-- Sample file 4: Word, manual upload --}}
                <div class="col-md-6 col-lg-4 repo-file-item" data-source="upload" data-type="word" data-category="corporate">
                    <div class="card repo-file-card p-3">
                        <div class="d-flex align-items-start">
                            <div class="repo-file-icon bg-label-primary me-3">
                                <i class="ti ti-file-type-doc ti-md"></i>
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <h6 class="mb-1 text-truncate" title="Board Resolution 2025.docx">Board Resolution 2025.docx</h6>
                                <div class="d-flex flex-wrap gap-2 mb-2">
                                    <small class="text-muted"><i class="ti ti-file-text ti-xs me-1"></i>245 KB</small>
                                    <small class="text-muted"><i class="ti ti-calendar ti-xs me-1"></i>20 Jan 2026</small>
                                </div>
                                <div class="d-flex gap-1">
                                    <span class="badge bg-label-info" style="font-size: 0.7rem;">Uploaded</span>
                                    <span class="badge bg-label-secondary" style="font-size: 0.7rem;">Corporate</span>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex gap-1 mt-2 justify-content-end">
                            <button class="btn btn-sm btn-icon" title="Preview"><i class="ti ti-eye"></i></button>
                            <button class="btn btn-sm btn-icon" title="Download"><i class="ti ti-download"></i></button>
                            <button class="btn btn-sm btn-icon" title="Delete"><i class="ti ti-trash"></i></button>
                        </div>
                    </div>
                </div>

                {{-- Sample file 5: Image, manual upload --}}
                <div class="col-md-6 col-lg-4 repo-file-item" data-source="upload" data-type="image" data-category="compliance">
                    <div class="card repo-file-card p-3">
                        <div class="d-flex align-items-start">
                            <div class="repo-file-icon bg-label-warning me-3">
                                <i class="ti ti-photo ti-md"></i>
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <h6 class="mb-1 text-truncate" title="SSM Certificate 2026.jpg">SSM Certificate 2026.jpg</h6>
                                <div class="d-flex flex-wrap gap-2 mb-2">
                                    <small class="text-muted"><i class="ti ti-file-text ti-xs me-1"></i>3.8 MB</small>
                                    <small class="text-muted"><i class="ti ti-calendar ti-xs me-1"></i>05 Jan 2026</small>
                                </div>
                                <div class="d-flex gap-1">
                                    <span class="badge bg-label-info" style="font-size: 0.7rem;">Uploaded</span>
                                    <span class="badge bg-label-secondary" style="font-size: 0.7rem;">Compliance</span>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex gap-1 mt-2 justify-content-end">
                            <button class="btn btn-sm btn-icon" title="Preview"><i class="ti ti-eye"></i></button>
                            <button class="btn btn-sm btn-icon" title="Download"><i class="ti ti-download"></i></button>
                            <button class="btn btn-sm btn-icon" title="Delete"><i class="ti ti-trash"></i></button>
                        </div>
                    </div>
                </div>

                {{-- Sample file 6: PDF, manual upload --}}
                <div class="col-md-6 col-lg-4 repo-file-item" data-source="upload" data-type="pdf" data-category="general">
                    <div class="card repo-file-card p-3">
                        <div class="d-flex align-items-start">
                            <div class="repo-file-icon bg-label-danger me-3">
                                <i class="ti ti-file-type-pdf ti-md"></i>
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <h6 class="mb-1 text-truncate" title="Company Profile 2026.pdf">Company Profile 2026.pdf</h6>
                                <div class="d-flex flex-wrap gap-2 mb-2">
                                    <small class="text-muted"><i class="ti ti-file-text ti-xs me-1"></i>5.2 MB</small>
                                    <small class="text-muted"><i class="ti ti-calendar ti-xs me-1"></i>02 Jan 2026</small>
                                </div>
                                <div class="d-flex gap-1">
                                    <span class="badge bg-label-info" style="font-size: 0.7rem;">Uploaded</span>
                                    <span class="badge bg-label-secondary" style="font-size: 0.7rem;">General</span>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex gap-1 mt-2 justify-content-end">
                            <button class="btn btn-sm btn-icon" title="Preview"><i class="ti ti-eye"></i></button>
                            <button class="btn btn-sm btn-icon" title="Download"><i class="ti ti-download"></i></button>
                            <button class="btn btn-sm btn-icon" title="Delete"><i class="ti ti-trash"></i></button>
                        </div>
                    </div>
                </div>

            </div>

            {{-- Empty state (hidden by default, shown when no files match) --}}
            <div class="text-center py-5 d-none" id="repo-empty">
                <i class="ti ti-folder-off ti-xl text-muted mb-3 d-block"></i>
                <h6 class="text-muted">No files found</h6>
                <p class="text-muted small mb-0">Try adjusting your filters or upload a new file.</p>
            </div>

        </div>
    </div>

    {{-- Upload File Modal --}}
    <div class="modal fade" id="upload-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-bottom">
                    <div>
                        <h5 class="modal-title mb-0">Upload Document</h5>
                        <small class="text-muted">Upload a file to the client's document repository.</small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-3">
                    <form id="upload-form">
                        <div class="mb-3">
                            <label class="form-label" for="upload-file">File</label>
                            <input type="file" class="form-control" id="upload-file" required />
                            <small class="text-muted">Max file size: 25 MB. Accepted: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG.</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="upload-category">Category</label>
                            <select class="form-select" id="upload-category" required>
                                <option value="">Select category…</option>
                                <option value="financial">Financial Statements</option>
                                <option value="tax">Tax Documents</option>
                                <option value="corporate">Corporate Secretarial</option>
                                <option value="compliance">Compliance</option>
                                <option value="general">General</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="upload-remarks">Remarks <span class="text-muted">(optional)</span></label>
                            <textarea class="form-control" id="upload-remarks" rows="2" placeholder="Brief description of the document…"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary" id="upload-submit-btn">
                        <i class="ti ti-upload me-1"></i> Upload
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-script')
    <script>
        $(function () {
            var clientId = '{{ $companyDetails['id'] ?? '' }}';

            // ── Repository Filters ──
            function filterRepo() {
                var source = $('#repo-filter-source').val();
                var type = $('#repo-filter-type').val();
                var category = $('#repo-filter-category').val();
                var visible = 0;

                $('.repo-file-item').each(function () {
                    var show = true;
                    if (source && $(this).data('source') !== source) show = false;
                    if (type && $(this).data('type') !== type) show = false;
                    if (category && $(this).data('category') !== category) show = false;

                    $(this).toggleClass('d-none', !show);
                    if (show) visible++;
                });

                $('#repo-empty').toggleClass('d-none', visible > 0);
            }

            $('#repo-filter-source, #repo-filter-type, #repo-filter-category').on('change', filterRepo);

            // ── Upload Modal ──
            $('#btn-upload-file').on('click', function () {
                $('#upload-form')[0].reset();
                $('#upload-modal').modal('show');
            });
            $('#upload-submit-btn').on('click', function () {
                if (!$('#upload-file').val()) {
                    toastNoti('Please select a file to upload.', 'warning');
                    return;
                }
                toastNoti('File upload is under development.', 'info');
                $('#upload-modal').modal('hide');
            });
        });
    </script>
@endsection