@extends('layouts.app')
@section('page-title', 'Document Repository')
@section('content')
<style>
    .doc-toolbar { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:1rem; }
    .doc-breadcrumb { font-size:.85rem; color:#8891a0; margin-bottom:.75rem; }
    .doc-breadcrumb a { color:#4f5fce; text-decoration:none; }
    .doc-breadcrumb .sep { margin:0 .35rem; }

    .doc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:.9rem; }
    .doc-tile { border:1px solid #eef0f2; border-radius:10px; padding:.9rem .75rem; background:#fff; position:relative; transition:box-shadow .15s; }
    .doc-tile:hover { box-shadow:0 2px 10px rgba(0,0,0,.06); }
    .doc-tile .doc-icon { font-size:2.1rem; margin-bottom:.5rem; position:relative; }
    .doc-tile .doc-lock { position:absolute; top:0; left:24px; font-size:.85rem; color:#dc3545; background:#fff; border-radius:50%; }
    .doc-tile .doc-name { font-size:.83rem; font-weight:600; color:#2a2f3a; word-break:break-word; display:block; text-decoration:none; }
    .doc-tile .doc-name:hover { color:#4f5fce; }
    .doc-tile .doc-meta { font-size:.7rem; color:#8891a0; margin-top:3px; }
    .doc-tile .doc-role-badge { font-size:.65rem; color:#8891a0; margin-top:2px; }
.doc-tile .doc-actions { position:absolute; top:.5rem; right:.5rem; display:flex; gap:2px; opacity:0; transition:opacity .15s; z-index:5; }
.doc-tile:hover .doc-actions,
.doc-tile:focus-within .doc-actions { opacity:1; }
    .doc-tile .doc-actions button { background:#fff; border:1px solid #eef0f2; border-radius:5px; width:24px; height:24px; font-size:.68rem; color:#8891a0; }
    .doc-tile .doc-actions button:hover { color:#4f5fce; border-color:#4f5fce; }
    .doc-empty { text-align:center; color:#8891a0; padding:3rem 1rem; font-size:.88rem; }

    .doc-modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:9999; align-items:center; justify-content:center; padding:1rem; }
    .doc-modal-overlay.active { display:flex; }
    .doc-modal { width:min(100%,440px); background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 20px 45px rgba(0,0,0,.25); max-height:90vh; overflow-y:auto; }
    .doc-modal-header { padding:.9rem 1.1rem; border-bottom:1px solid #eef0f2; display:flex; justify-content:space-between; align-items:center; font-weight:700; }
    .doc-modal-body { padding:1.1rem; }
    .field-hint { font-size:.7rem; color:#8891a0; margin-top:.25rem; }
    .role-check-list { border:1px solid #eef0f2; border-radius:8px; padding:.6rem .75rem; max-height:180px; overflow-y:auto; margin-top:.4rem; }
    .role-check-list .form-check { margin-bottom:.25rem; }
    .parent-hint { background:#f5f6ff; border:1px solid #dbe0fa; border-radius:8px; padding:.5rem .7rem; font-size:.75rem; color:#4f5fce; margin-bottom:.75rem; }
</style>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
        <h2 class="mb-0">Document Repository</h2>
        <form method="GET" action="{{ route('documents.search') }}" class="d-flex gap-2">
            <input type="text" name="q" class="form-control form-control-sm" placeholder="Search files &amp; folders..." style="min-width:220px">
            <button class="btn btn-sm btn-outline-primary" type="submit"><i class="fas fa-search"></i></button>
        </form>
    </div>
    <div class="card-body">
        @if(session('success'))
            <div class="alert alert-success mb-3">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger mb-3">{{ session('error') }}</div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger mb-3">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="doc-breadcrumb">
            <a href="{{ route('documents.index') }}"><i class="bi bi-house-door me-1"></i>Home</a>
            @foreach($breadcrumbs as $crumb)
                <span class="sep">/</span>
                @if($loop->last)
                    <span>{{ $crumb->name }}</span>
                @else
                    <a href="{{ route('documents.index', ['folder' => $crumb->id]) }}">{{ $crumb->name }}</a>
                @endif
            @endforeach
        </div>

        @if($canManage)
        <div class="doc-toolbar">
            <button class="btn btn-sm btn-primary" onclick="openModal('newFolderModal')"><i class="bi bi-folder-plus me-1"></i>New Folder</button>
            <button class="btn btn-sm btn-outline-primary" onclick="openModal('uploadModal')"><i class="bi bi-cloud-upload me-1"></i>Upload Files</button>
        </div>
        @endif

        @if($subfolders->isEmpty() && $files->isEmpty())
            <div class="doc-empty">
                <i class="bi bi-folder2-open" style="font-size:2rem;color:#e5e8ec;display:block;margin-bottom:.5rem"></i>
                This folder is empty.
            </div>
        @else
        <div class="doc-grid">
            @foreach($subfolders as $sub)
            @php $subOwnRoleIds = $sub->roles->pluck('id')->all(); @endphp
            <div class="doc-tile">
                @if($canManage)
                <div class="doc-actions">
                    <button onclick="openAccessModal('folder', {{ $sub->id }}, {{ json_encode($subOwnRoleIds) }})" title="Manage Access"><i class="bi bi-shield-lock"></i></button>
                    <button onclick="openRenameModal('folder', {{ $sub->id }}, '{{ addslashes($sub->name) }}')" title="Rename"><i class="bi bi-pencil"></i></button>
                    <button onclick="openMoveModal('folder', {{ $sub->id }}, {{ $sub->parent_id ?? 'null' }})" title="Move"><i class="bi bi-arrows-move"></i></button>
                    <form method="POST" action="{{ route('documents.folders.destroy', $sub) }}" class="d-inline" onsubmit="return confirm('Delete this folder and everything inside it? This cannot be undone.');">
                        @csrf @method('DELETE')
                        <button type="submit" title="Delete"><i class="bi bi-trash text-danger"></i></button>
                    </form>
                </div>
                @endif
                <a href="{{ route('documents.index', ['folder' => $sub->id]) }}" style="text-decoration:none">
                    <div class="doc-icon">
                        <i class="bi bi-folder-fill" style="color:#f5c451"></i>
                        @if(!empty($subOwnRoleIds))
                            <i class="bi bi-lock-fill doc-lock" title="Restricted: {{ $sub->roleNames() }}"></i>
                        @endif
                    </div>
                    <span class="doc-name">{{ $sub->name }}</span>
                    <div class="doc-meta">{{ $sub->children_count }} folder{{ $sub->children_count === 1 ? '' : 's' }}, {{ $sub->documents_count }} file{{ $sub->documents_count === 1 ? '' : 's' }}</div>
                    @if($canManage)
                        <div class="doc-role-badge">{{ !empty($subOwnRoleIds) ? 'Restricted: '.$sub->roleNames() : 'Inherits parent access' }}</div>
                    @endif
                </a>
            </div>
            @endforeach

            @foreach($files as $file)
            @php $fileOwnRoleIds = $file->roles->pluck('id')->all(); @endphp
            <div class="doc-tile">
                @if($canManage)
                <div class="doc-actions">
                    <button onclick="openAccessModal('file', {{ $file->id }}, {{ json_encode($fileOwnRoleIds) }})" title="Manage Access"><i class="bi bi-shield-lock"></i></button>
                    <button onclick="openRenameModal('file', {{ $file->id }}, '{{ addslashes($file->name) }}')" title="Rename"><i class="bi bi-pencil"></i></button>
                    <button onclick="openMoveModal('file', {{ $file->id }}, {{ $file->folder_id ?? 'null' }})" title="Move"><i class="bi bi-arrows-move"></i></button>
                    <form method="POST" action="{{ route('documents.destroy', $file) }}" class="d-inline" onsubmit="return confirm('Delete this file?');">
                        @csrf @method('DELETE')
                        <button type="submit" title="Delete"><i class="bi bi-trash text-danger"></i></button>
                    </form>
                </div>
                @endif
                <a href="{{ route('documents.download', $file) }}" style="text-decoration:none">
                    <div class="doc-icon">
                        <i class="bi {{ $file->icon_class }}"></i>
                        @if(!empty($fileOwnRoleIds))
                            <i class="bi bi-lock-fill doc-lock" title="Restricted: {{ $file->roleNames() }}"></i>
                        @endif
                    </div>
                    <span class="doc-name">{{ $file->name }}</span>
                    <div class="doc-meta">{{ $file->human_size }} &middot; {{ optional($file->uploader)->name ?? 'Unknown' }}</div>
                    @if($canManage)
                        <div class="doc-role-badge">{{ !empty($fileOwnRoleIds) ? 'Restricted: '.$file->roleNames() : 'Inherits folder access' }}</div>
                    @endif
                </a>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>

@if($canManage)
<!-- New Folder Modal -->
<div class="doc-modal-overlay" id="newFolderModal">
    <div class="doc-modal">
        <div class="doc-modal-header">
            <span>New Folder</span>
            <button class="btn btn-sm btn-outline-secondary" onclick="closeModal('newFolderModal')"><i class="bi bi-x-lg"></i></button>
        </div>
        <div class="doc-modal-body">
            <div class="parent-hint"><i class="bi bi-info-circle me-1"></i>This folder allows: {{ $allowedRoleNamesHere }}</div>
            <form method="POST" action="{{ route('documents.folders.store') }}">
                @csrf
                <input type="hidden" name="parent_id" value="{{ $folder->id ?? '' }}">
                <label class="form-label fw-semibold" style="font-size:.85rem">Folder Name</label>
                <input type="text" name="name" class="form-control" required autofocus>

                <label class="form-label fw-semibold mt-3" style="font-size:.85rem">Restrict to Roles <span class="text-muted fw-normal">(leave empty to inherit)</span></label>
                <div class="role-check-list">
                    @forelse($allRoles as $role)
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="role_ids[]" value="{{ $role->id }}" id="nf-role-{{ $role->id }}"
                                {{ $allowedRoleIdsHere !== null && !in_array($role->id, $allowedRoleIdsHere) ? 'disabled' : '' }}>
                            <label class="form-check-label" for="nf-role-{{ $role->id }}">{{ $role->display_name }}</label>
                        </div>
                    @empty
                        <div class="text-muted" style="font-size:.8rem">No roles found.</div>
                    @endforelse
                </div>

                <button type="submit" class="btn btn-primary w-100 mt-3">Create Folder</button>
            </form>
        </div>
    </div>
</div>

<!-- Upload Files Modal -->
<div class="doc-modal-overlay" id="uploadModal">
    <div class="doc-modal">
        <div class="doc-modal-header">
            <span>Upload Files</span>
            <button class="btn btn-sm btn-outline-secondary" onclick="closeModal('uploadModal')"><i class="bi bi-x-lg"></i></button>
        </div>
        <div class="doc-modal-body">
            <div class="parent-hint"><i class="bi bi-info-circle me-1"></i>This folder allows: {{ $allowedRoleNamesHere }}</div>
            <form method="POST" action="{{ route('documents.upload') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="folder_id" value="{{ $folder->id ?? '' }}">
                <label class="form-label fw-semibold" style="font-size:.85rem">Files</label>
                <input type="file" name="files[]" class="form-control" multiple required>

                <label class="form-label fw-semibold mt-3" style="font-size:.85rem">Restrict to Roles <span class="text-muted fw-normal">(leave empty to inherit)</span></label>
                <div class="role-check-list">
                    @forelse($allRoles as $role)
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="role_ids[]" value="{{ $role->id }}" id="up-role-{{ $role->id }}"
                                {{ $allowedRoleIdsHere !== null && !in_array($role->id, $allowedRoleIdsHere) ? 'disabled' : '' }}>
                            <label class="form-check-label" for="up-role-{{ $role->id }}">{{ $role->display_name }}</label>
                        </div>
                    @empty
                        <div class="text-muted" style="font-size:.8rem">No roles found.</div>
                    @endforelse
                </div>

                <button type="submit" class="btn btn-primary w-100 mt-3">Upload</button>
            </form>
        </div>
    </div>
</div>

<!-- Rename Modal (shared for folders and files) -->
<div class="doc-modal-overlay" id="renameModal">
    <div class="doc-modal">
        <div class="doc-modal-header">
            <span>Rename</span>
            <button class="btn btn-sm btn-outline-secondary" onclick="closeModal('renameModal')"><i class="bi bi-x-lg"></i></button>
        </div>
        <div class="doc-modal-body">
            <form method="POST" id="renameForm">
                @csrf
                @method('PUT')
                <label class="form-label fw-semibold" style="font-size:.85rem">New Name</label>
                <input type="text" name="name" id="renameInput" class="form-control" required>
                <button type="submit" class="btn btn-primary w-100 mt-3">Save</button>
            </form>
        </div>
    </div>
</div>

<!-- Move Modal (shared for folders and files) -->
<div class="doc-modal-overlay" id="moveModal">
    <div class="doc-modal">
        <div class="doc-modal-header">
            <span>Move to...</span>
            <button class="btn btn-sm btn-outline-secondary" onclick="closeModal('moveModal')"><i class="bi bi-x-lg"></i></button>
        </div>
        <div class="doc-modal-body">
            <form method="POST" id="moveForm">
                @csrf
                @method('PUT')
                <label class="form-label fw-semibold" style="font-size:.85rem">Destination Folder</label>
                <select name="__move_target__" id="moveSelect" class="form-select" required>
                    <option value="">-- Home (root) --</option>
                    @foreach($allFoldersFlat as $f)
                        <option value="{{ $f['id'] }}">{{ $f['label'] }}</option>
                    @endforeach
                </select>
                <div class="field-hint">
                    A folder cannot be moved into itself or one of its own subfolders. If this item has its own
                    role restriction, that restriction must also be allowed by the destination folder.
                </div>
                <button type="submit" class="btn btn-primary w-100 mt-3">Move</button>
            </form>
        </div>
    </div>
</div>

<!-- Manage Access Modal (shared for folders and files) -->
<div class="doc-modal-overlay" id="accessModal">
    <div class="doc-modal">
        <div class="doc-modal-header">
            <span>Manage Access</span>
            <button class="btn btn-sm btn-outline-secondary" onclick="closeModal('accessModal')"><i class="bi bi-x-lg"></i></button>
        </div>
        <div class="doc-modal-body">
            <div class="parent-hint"><i class="bi bi-info-circle me-1"></i>Parent allows: {{ $allowedRoleNamesHere }}</div>
            <form method="POST" id="accessForm">
                @csrf
                @method('PUT')
                <label class="form-label fw-semibold" style="font-size:.85rem">Restrict to Roles <span class="text-muted fw-normal">(leave all unchecked to inherit from parent)</span></label>
                <div class="role-check-list">
                    @forelse($allRoles as $role)
                        <div class="form-check">
                            <input class="form-check-input role-checkbox" type="checkbox" name="role_ids[]" value="{{ $role->id }}" id="ac-role-{{ $role->id }}"
                                {{ $allowedRoleIdsHere !== null && !in_array($role->id, $allowedRoleIdsHere) ? 'disabled' : '' }}>
                            <label class="form-check-label" for="ac-role-{{ $role->id }}">{{ $role->display_name }}</label>
                        </div>
                    @empty
                        <div class="text-muted" style="font-size:.8rem">No roles found.</div>
                    @endforelse
                </div>
                <button type="submit" class="btn btn-primary w-100 mt-3">Save Access</button>
            </form>
        </div>
    </div>
</div>

<script>
    function openModal(id) { document.getElementById(id).classList.add('active'); }
    function closeModal(id) { document.getElementById(id).classList.remove('active'); }
    document.querySelectorAll('.doc-modal-overlay').forEach(function (overlay) {
        overlay.addEventListener('click', function (e) {
            if (e.target === overlay) overlay.classList.remove('active');
        });
    });

    function openRenameModal(type, id, currentName) {
        const form = document.getElementById('renameForm');
        form.action = type === 'folder'
            ? `{{ url('documents/folders') }}/${id}/rename`
            : `{{ url('documents') }}/${id}/rename`;
        document.getElementById('renameInput').value = currentName;
        openModal('renameModal');
    }

    function openMoveModal(type, id, currentParentId) {
        const form = document.getElementById('moveForm');
        form.action = type === 'folder'
            ? `{{ url('documents/folders') }}/${id}/move`
            : `{{ url('documents') }}/${id}/move`;

        // The form field name differs between the two endpoints
        // (parent_id for folders, folder_id for files) — swap it here
        // rather than maintaining two near-identical modals.
        const select = document.getElementById('moveSelect');
        select.name = type === 'folder' ? 'parent_id' : 'folder_id';
        select.value = currentParentId ?? '';

        openModal('moveModal');
    }

    function openAccessModal(type, id, ownRoleIds) {
        const form = document.getElementById('accessForm');
        form.action = type === 'folder'
            ? `{{ url('documents/folders') }}/${id}/roles`
            : `{{ url('documents') }}/${id}/roles`;

        document.querySelectorAll('#accessModal .role-checkbox').forEach(function (cb) {
            cb.checked = ownRoleIds.includes(parseInt(cb.value));
        });

        openModal('accessModal');
    }
</script>
@endif
@endsection