@extends('layouts.app', ['title' => 'DMS | Dokumenten-Explorer'])
@section('content')

<div class="container-fluid py-3">

    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-3">
        <div>
            <h4 class="mb-0 fw-bold"><i class="bi bi-folder2-open me-2 text-primary"></i>Dokumenten-Explorer</h4>
        </div>
        <form class="d-flex gap-2" method="GET" action="{{ route('dms.index') }}">
            <input type="text" name="search" class="form-control form-control-sm" style="width:260px"
                placeholder="Dateiname suchen…" value="{{ $search }}">
            <button class="btn btn-sm btn-outline-primary">Suchen</button>
            @if($search)
                <a href="{{ route('dms.index') }}" class="btn btn-sm btn-outline-secondary">×</a>
            @endif
        </form>
    </div>

    <div class="row g-3">

        {{-- ── Linke Spalte: Ordnerbaum ── --}}
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-light fw-semibold py-2 d-flex align-items-center justify-content-between">
                    <span><i class="bi bi-diagram-3 me-1"></i>Ordner</span>
                    <button id="dmsTreeToggleAll" class="btn btn-xs btn-outline-secondary rounded-pill px-2" style="font-size:.7rem;">
                        <i class="bi bi-arrows-expand me-1"></i><span id="dmsTreeToggleLabel">Alle auf</span>
                    </button>
                </div>
                <div class="card-body p-2" style="overflow-y:auto;max-height:75vh;">
                    <ul class="list-unstyled mb-0 dms-tree">
                        @foreach($rootFolders as $root)
                            @include('dms._folder_node', ['folder' => $root, 'depth' => 0, 'currentFolderId' => $folderId])
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>

        {{-- ── Rechte Spalte: Inhalt ── --}}
        <div class="col-md-9">

            {{-- Breadcrumb --}}
            {{-- Moderner Pfad-Navigator --}}
            <nav aria-label="breadcrumb" class="mb-3">
                <div class="dms-path d-flex align-items-center gap-1 flex-nowrap" style="overflow:hidden;">

                    {{-- Start --}}
                    <a href="{{ route('dms.index') }}" class="dms-crumb dms-crumb-link flex-shrink-0">
                        <i class="bi bi-house-door-fill"></i>
                        <span>Start</span>
                    </a>

                    @foreach($breadcrumb as $crumb)
                        {{-- Separator --}}
                        <i class="bi bi-chevron-right text-muted flex-shrink-0" style="font-size:.65rem;opacity:.5;"></i>

                        @php $long = mb_strlen($crumb->name) > 30; @endphp

                        @if($loop->last)
                            {{-- Aktiver Ordner --}}
                            <span class="dms-crumb dms-crumb-active {{ $long ? 'text-truncate' : '' }}"
                                  style="{{ $long ? 'max-width:260px;' : '' }}"
                                  @if($long) title="{{ $crumb->name }}" data-bs-toggle="tooltip" data-bs-placement="bottom" @endif>
                                <i class="bi bi-folder-fill text-warning"></i>
                                <span class="{{ $long ? 'd-inline-block text-truncate' : '' }}"
                                      style="{{ $long ? 'max-width:220px;vertical-align:bottom;' : '' }}">{{ $crumb->name }}</span>
                            </span>
                        @else
                            {{-- Navigierbarer Ordner --}}
                            <a href="{{ route('dms.index', ['folder' => $crumb->id]) }}"
                               class="dms-crumb dms-crumb-link {{ $long ? 'text-truncate' : '' }}"
                               style="{{ $long ? 'max-width:260px;' : '' }}"
                               @if($long) title="{{ $crumb->name }}" data-bs-toggle="tooltip" data-bs-placement="bottom" @endif>
                                <i class="bi bi-folder2"></i>
                                <span class="{{ $long ? 'd-inline-block text-truncate' : '' }}"
                                      style="{{ $long ? 'max-width:220px;vertical-align:bottom;' : '' }}">{{ $crumb->name }}</span>
                            </a>
                        @endif
                    @endforeach

                </div>
            </nav>

            {{-- ── Explorer-Tabelle (Ordner + Dateien unified) ── --}}
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light py-2 d-flex justify-content-between align-items-center">
                    <span class="fw-semibold">
                        <i class="bi bi-folder2-open me-1 text-primary"></i>
                        @if($search)
                            Suchergebnisse für <em class="text-primary">„{{ $search }}"</em>
                            <span class="text-muted fw-normal small ms-1">
                                ({{ $searchFolders->count() }} Ordner · {{ $files->total() }} Datei{{ $files->total() !== 1 ? 'en' : '' }})
                            </span>
                        @else
                            Inhalt
                            <span class="text-muted fw-normal small ms-1">
                                ({{ $subFolders->count() }} Ordner · {{ $files->total() }} Datei{{ $files->total() !== 1 ? 'en' : '' }})
                            </span>
                        @endif
                    </span>
                    @if($folderId)
                    <a href="{{ route('dms.folder.zip', $folderId) }}"
                       class="btn btn-xs btn-outline-primary rounded-pill"
                       title="Ordner inkl. Unterordner als ZIP herunterladen">
                        <i class="bi bi-file-earmark-zip me-1"></i>ZIP
                    </a>
                    @endif
                </div>
                <div class="card-body p-0">
                    @if($subFolders->isEmpty() && $files->isEmpty() && (!$search || ($searchFolders->isEmpty() && $files->isEmpty())))
                        <div class="text-center text-muted py-5">
                            <i class="bi bi-search fs-1 d-block mb-2 opacity-25"></i>
                            {{ $search ? 'Keine Ergebnisse für „' . $search . '".' : 'Dieser Ordner ist leer.' }}
                        </div>
                    @else
                    <div class="table-responsive">
                        <table class="table table-hover table-sm mb-0 align-middle dms-explorer-table">
                            @php
                                $sortParams = array_filter(['folder' => $folderId, 'search' => $search]);
                                $nameDir    = ($sort === 'name' && $dir === 'asc') ? 'desc' : 'asc';
                                $dateDir    = ($sort === 'created_at' && $dir === 'asc') ? 'desc' : 'asc';
                                $nameUrl    = route('dms.index', array_merge($sortParams, ['sort' => 'name',       'dir' => $nameDir]));
                                $dateUrl    = route('dms.index', array_merge($sortParams, ['sort' => 'created_at', 'dir' => $dateDir]));
                            @endphp
                            <thead class="table-light">
                                <tr>
                                    <th style="width:44%">
                                        <a href="{{ $nameUrl }}" class="text-decoration-none text-muted fw-semibold dms-sort-link">
                                            Name
                                            @if($sort === 'name')
                                                <i class="bi bi-arrow-{{ $dir === 'asc' ? 'up' : 'down' }} ms-1"></i>
                                            @else
                                                <i class="bi bi-arrow-down-up ms-1 opacity-25"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th>Typ</th>
                                    <th class="text-end">Größe</th>
                                    <th>
                                        <a href="{{ $dateUrl }}" class="text-decoration-none text-muted fw-semibold dms-sort-link">
                                            Datum
                                            @if($sort === 'created_at')
                                                <i class="bi bi-arrow-{{ $dir === 'asc' ? 'up' : 'down' }} ms-1"></i>
                                            @else
                                                <i class="bi bi-arrow-down-up ms-1 opacity-25"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th class="text-center" style="width:90px">Aktionen</th>
                                </tr>
                            </thead>
                            <tbody>

                                {{-- ── Ordner-Suchtreffer (nur bei aktiver Suche) ── --}}
                                @if($search && $searchFolders->count())
                                <tr class="table-light">
                                    <td colspan="5" class="px-3 py-1">
                                        <span class="small text-muted fw-semibold">
                                            <i class="bi bi-folder me-1"></i>
                                            Ordner ({{ $searchFolders->count() }})
                                        </span>
                                    </td>
                                </tr>
                                @foreach($searchFolders as $sf)
                                <tr class="dms-row-folder">
                                    <td>
                                        <a href="{{ route('dms.index', ['folder' => $sf->id]) }}"
                                           class="text-decoration-none text-dark d-flex align-items-center gap-2">
                                            <i class="bi bi-folder-fill text-warning fs-5 flex-shrink-0"></i>
                                            <span class="fw-semibold small">
                                                {!! preg_replace('/(' . preg_quote($search, '/') . ')/i', '<mark class="px-0 rounded">$1</mark>', e($sf->name)) !!}
                                            </span>
                                        </a>
                                    </td>
                                    <td><span class="text-muted small">Ordner</span></td>
                                    <td class="text-end text-muted small">—</td>
                                    <td class="text-muted small">{{ $sf->created_at?->format('d.m.Y') ?? '—' }}</td>
                                    <td class="text-center">
                                        <a href="{{ route('dms.index', ['folder' => $sf->id]) }}"
                                           class="btn btn-xs btn-outline-secondary" title="Öffnen">
                                            <i class="bi bi-arrow-right"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                                @if($files->count())
                                <tr class="table-light">
                                    <td colspan="5" class="px-3 py-1">
                                        <span class="small text-muted fw-semibold">
                                            <i class="bi bi-file-earmark me-1"></i>
                                            Dateien ({{ $files->total() }})
                                        </span>
                                    </td>
                                </tr>
                                @endif
                                @endif

                                {{-- ── Ordner zuerst (normale Ansicht) ── --}}
                                @if(!$search)
                                @foreach($subFolders as $sf)
                                <tr class="dms-row-folder">
                                    <td>
                                        <a href="{{ route('dms.index', ['folder' => $sf->id]) }}"
                                           class="text-decoration-none text-dark d-flex align-items-center gap-2">
                                            <i class="bi bi-folder-fill text-warning fs-5 flex-shrink-0"></i>
                                            <span class="fw-semibold small">{{ $sf->name }}</span>
                                        </a>
                                    </td>
                                    <td><span class="text-muted small">Ordner</span></td>
                                    <td class="text-end text-muted small">—</td>
                                    <td class="text-muted small">{{ $sf->created_at?->format('d.m.Y') ?? '—' }}</td>
                                    <td class="text-center">
                                        <a href="{{ route('dms.index', ['folder' => $sf->id]) }}"
                                           class="btn btn-xs btn-outline-secondary" title="Öffnen">
                                            <i class="bi bi-arrow-right"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                                @endif

                                {{-- ── Dateien danach ── --}}
                                @foreach($files as $file)
                                @php $ext = strtolower(pathinfo($file->original_name ?: $file->filename ?: '', PATHINFO_EXTENSION)); @endphp
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            @if($ext === 'pdf')
                                                <i class="bi bi-file-earmark-pdf-fill text-danger fs-5 flex-shrink-0"></i>
                                            @elseif(in_array($ext, ['jpg','jpeg','png','gif','webp']))
                                                <i class="bi bi-file-earmark-image-fill text-success fs-5 flex-shrink-0"></i>
                                            @elseif(in_array($ext, ['doc','docx']))
                                                <i class="bi bi-file-earmark-word-fill fs-5 flex-shrink-0" style="color:#2b5797;"></i>
                                            @elseif(in_array($ext, ['xls','xlsx','csv']))
                                                <i class="bi bi-file-earmark-excel-fill fs-5 flex-shrink-0" style="color:#1d6f42;"></i>
                                            @elseif(in_array($ext, ['ppt','pptx']))
                                                <i class="bi bi-file-earmark-ppt-fill fs-5 flex-shrink-0" style="color:#d24726;"></i>
                                            @elseif(in_array($ext, ['zip','rar','7z']))
                                                <i class="bi bi-file-earmark-zip-fill text-warning fs-5 flex-shrink-0"></i>
                                            @else
                                                <i class="bi bi-file-earmark-fill text-secondary fs-5 flex-shrink-0"></i>
                                            @endif
                                            <span class="small text-truncate" style="max-width:280px;">
                                                {{ $file->original_name ?? $file->filename }}
                                            </span>
                                            @if(($file->version ?? 1) > 1)
                                                <span class="badge bg-light text-dark border flex-shrink-0" style="font-size:.65rem;">v{{ $file->version }}</span>
                                            @endif
                                        </div>
                                    </td>
                                    <td><span class="badge bg-light text-dark border small">{{ match($file->category) {
                                        'invoice_out'          => 'Ausgangsrechnung',
                                        'invoice_in'           => 'Eingangsrechnung',
                                        'dunning'              => 'Mahnung',
                                        'rechnung_invoice'     => 'PMS-Rechnung',
                                        'storno_invoice'       => 'Stornorechnung',
                                        'angebot'              => 'Angebot',
                                        'auftragsbestaetigung' => 'Auftragsbestätigung',
                                        'anhang'               => 'Anhang',
                                        default                => $file->category,
                                    } }}</span></td>
                                    <td class="text-end small text-muted">
                                        {{ $file->filesize ? number_format($file->filesize / 1024, 0, ',', '.') . ' KB' : '—' }}
                                    </td>
                                    <td class="small text-muted">{{ $file->created_at?->format('d.m.Y') }}</td>
                                    <td class="text-center">
                                        @if($file->existsOnDisk())
                                        <button class="btn btn-xs btn-outline-secondary me-1"
                                            data-preview-url="{{ route('dms.preview', $file->id) }}"
                                            data-download-url="{{ route('dms.download', $file->id) }}"
                                            data-filename="{{ $file->original_name ?? $file->filename }}"
                                            data-ext="{{ $ext }}"
                                            onclick="dmsPreview(this)" title="Vorschau">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                        <a href="{{ route('dms.download', $file->id) }}"
                                           class="btn btn-xs btn-outline-primary" title="Herunterladen">
                                            <i class="bi bi-download"></i>
                                        </a>
                                        @else
                                        <span class="badge bg-warning text-dark small">fehlend</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>

                    {{-- Pagination --}}
                    @if($files->hasPages())
                    <div class="px-3 py-2 border-top">
                        {{ $files->links() }}
                    </div>
                    @endif
                    @endif
                </div>
            </div>

        </div>{{-- /col-md-9 --}}
    </div>{{-- /row --}}
</div>

{{-- Vorschau-Modal --}}
<div class="modal fade" id="dmsPreviewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen">
        <div class="modal-content border-0">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-semibold">
                    <i id="dmsPreviewIcon" class="bi bi-file-earmark me-2"></i>
                    <span id="dmsPreviewTitle">Vorschau</span>
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-2 d-flex align-items-center justify-content-center" id="dmsPreviewBody" style="min-height:85vh;">
                {{-- Inhalt wird per JS gesetzt --}}
            </div>
            <div class="modal-footer border-0 py-2">
                <a id="dmsPreviewDownload" href="#" class="btn btn-outline-primary rounded-pill px-4">
                    <i class="bi bi-download me-1"></i> Herunterladen
                </a>
                <button type="button" class="btn btn-outline-secondary rounded-pill px-4"
                    data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));

// ── Ordnerbaum: collapse/expand mit localStorage ──
const LS_KEY = 'dms_tree_open';

function treeGetOpen() {
    try { return JSON.parse(localStorage.getItem(LS_KEY) || '[]'); } catch { return []; }
}
function treeSave(ids) {
    localStorage.setItem(LS_KEY, JSON.stringify(ids));
}

// Aktiven Ordner und alle Vorfahren automatisch aufklappen
function treeExpandActivePath() {
    const activeRow = document.querySelector('.dms-tree-row.active-folder');
    if (!activeRow) return;
    let el = activeRow.closest('.dms-children');
    while (el) {
        el.classList.add('show');
        const btn = document.querySelector('[data-bs-target="#' + el.id + '"]');
        if (btn) btn.setAttribute('aria-expanded', 'true');
        el = el.parentElement?.closest('.dms-children');
    }
}

// gespeicherte Zustände wiederherstellen
treeGetOpen().forEach(id => {
    const el = document.getElementById('dmsf-' + id);
    if (el) {
        el.classList.add('show');
        const btn = document.querySelector('[data-bs-target="#dmsf-' + id + '"]');
        if (btn) btn.setAttribute('aria-expanded', 'true');
    }
});

// aktiven Pfad immer aufklappen (überschreibt localStorage falls nötig)
treeExpandActivePath();

// ── Alle aufklappen / alle zuklappen ──
const toggleAllBtn   = document.getElementById('dmsTreeToggleAll');
const toggleAllIcon  = toggleAllBtn.querySelector('i');
const toggleAllLabel = document.getElementById('dmsTreeToggleLabel');
let   allExpanded    = false;

function treeSetAllExpanded(expand) {
    const collapses = document.querySelectorAll('.dms-children');
    const btns      = document.querySelectorAll('.dms-toggle[data-bs-toggle="collapse"]');
    collapses.forEach(el => {
        if (expand) el.classList.add('show');
        else        el.classList.remove('show');
    });
    btns.forEach(btn => btn.setAttribute('aria-expanded', expand ? 'true' : 'false'));
    const openIds = expand
        ? [...collapses].map(el => el.id.replace('dmsf-', ''))
        : [];
    treeSave(openIds);
}

toggleAllBtn.addEventListener('click', () => {
    allExpanded = !allExpanded;
    treeSetAllExpanded(allExpanded);
    toggleAllIcon.className  = allExpanded ? 'bi bi-arrows-collapse me-1' : 'bi bi-arrows-expand me-1';
    toggleAllLabel.textContent = allExpanded ? 'Alle zu' : 'Alle auf';
});

// Zustand bei jedem Toggle speichern
document.querySelectorAll('.dms-toggle[data-bs-toggle="collapse"]').forEach(btn => {
    btn.addEventListener('click', () => {
        const targetId = btn.dataset.bsTarget.replace('#dmsf-', '');
        const open = treeGetOpen();
        const idx  = open.indexOf(targetId);
        // Zustand nach dem Toggle lesen (Bootstrap toggelt async)
        setTimeout(() => {
            const isNowOpen = btn.getAttribute('aria-expanded') === 'true';
            if (isNowOpen && idx === -1) open.push(targetId);
            else if (!isNowOpen && idx > -1) open.splice(idx, 1);
            treeSave(open);
        }, 50);
    });
});

var dmsModal = new bootstrap.Modal(document.getElementById('dmsPreviewModal'));

function dmsPreview(btn) {
    var url      = btn.dataset.previewUrl;
    var dlUrl    = btn.dataset.downloadUrl;
    var name     = btn.dataset.filename || 'Vorschau';
    var ext      = (btn.dataset.ext || '').toLowerCase();
    var body     = document.getElementById('dmsPreviewBody');
    var imgExts  = ['jpg','jpeg','png','gif','webp','bmp','svg'];
    var pdfExts  = ['pdf'];

    document.getElementById('dmsPreviewTitle').textContent  = name;
    document.getElementById('dmsPreviewDownload').href      = dlUrl;

    if (pdfExts.includes(ext)) {
        document.getElementById('dmsPreviewIcon').className = 'bi bi-file-earmark-pdf-fill text-danger me-2';
        body.style.padding = '0';
        body.style.display = 'block';
        body.innerHTML = '<iframe src="' + url + '" style="width:100%;height:85vh;border:0;" frameborder="0"></iframe>';
    } else if (imgExts.includes(ext)) {
        document.getElementById('dmsPreviewIcon').className = 'bi bi-file-earmark-image-fill text-success me-2';
        body.style.padding = '1rem';
        body.style.display = 'flex';
        body.innerHTML = '<img src="' + url + '" style="max-width:100%;max-height:85vh;object-fit:contain;" />';
    } else {
        document.getElementById('dmsPreviewIcon').className = 'bi bi-file-earmark me-2';
        body.style.padding = '1rem';
        body.style.display = 'flex';
        body.innerHTML = '<div class="text-center text-muted">'
            + '<i class="bi bi-file-earmark-x fs-1 d-block mb-3"></i>'
            + '<p class="mb-1">Vorschau nicht möglich für <strong>.' + ext + '</strong></p>'
            + '<p class="text-small mb-4">Bitte Datei herunterladen.</p>'
            + '</div>';
    }

    dmsModal.show();
}

document.getElementById('dmsPreviewModal').addEventListener('hidden.bs.modal', function () {
    document.getElementById('dmsPreviewBody').innerHTML = '';
});
</script>
@endpush

<style>
.hover-card:hover { background:#f8f9fa !important; transform:translateY(-1px); transition:.15s; }
.btn-xs { padding:.2rem .45rem; font-size:.75rem; }

/* ── Ordnerbaum ── */
.dms-tree { padding-left: 0; }
.dms-tree-item { list-style: none; }
.dms-children .dms-tree { padding-left: 16px; border-left: 1px solid #e9ecef; margin-left: 10px; }

.dms-tree-row {
    display: flex;
    align-items: center;
    gap: .2rem;
    padding: .22rem .3rem;
    border-radius: 6px;
    cursor: default;
    transition: background .1s;
}
.dms-tree-row:hover { background: #f1f3f9; }
.dms-tree-row.active-folder { background: #e8f0fe; }

.dms-toggle {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #6c757d;
    border-radius: 4px;
    transition: background .1s;
}
.dms-toggle:hover { background: #dee2e6; color: #333; }
.dms-toggle-placeholder { width: 18px; flex-shrink: 0; }

.dms-chevron {
    font-size: .65rem;
    transition: transform .2s ease;
}
.dms-toggle[aria-expanded="true"] .dms-chevron { transform: rotate(90deg); }

.dms-tree-link {
    font-size: .8rem;
    text-decoration: none;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: .1rem .2rem;
    border-radius: 4px;
}
.dms-tree-link:hover { text-decoration: none; }

/* ── Moderner Pfad-Navigator ── */
.dms-path {
    background: #f1f3f9;
    border: 1px solid #e2e6f0;
    border-radius: 10px;
    padding: .45rem .75rem;
    font-size: .8rem;
}
.dms-crumb {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem;
    border-radius: 6px;
    white-space: nowrap;
    min-width: 0;
}
.dms-crumb-link {
    color: #495057;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.dms-crumb-link:hover {
    background: #fff;
    color: var(--bs-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.dms-crumb-active {
    background: #fff;
    color: #212529;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    border: 1px solid #e2e6f0;
}

/* ── Explorer-Tabelle ── */
.dms-explorer-table thead th {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    border-bottom: 2px solid #e9ecef;
    padding: .5rem .75rem;
}
.dms-explorer-table td {
    padding: .45rem .75rem;
    vertical-align: middle;
}
.dms-row-folder {
    background: #fffdf5;
}
.dms-row-folder:hover {
    background: #fff8e1 !important;
}
.dms-explorer-table tbody tr:hover {
    background: #f5f8ff;
}
.dms-sort-link:hover { color: #343a40 !important; }
.dms-sort-link:hover .opacity-25 { opacity: .6 !important; }
</style>

@endsection