@extends('ged.layout')
@section('title', $folder->name)
@section('page_title', $folder->name)

@section('content')
<div class="ged-breadcrumb">
    <a href="{{ route('ged.folders.index') }}"><i class="fas fa-home"></i> Dossiers</a>
    @foreach($breadcrumb as $crumb)
        <span>/</span>
        @if(!$loop->last)
            <a href="{{ route('ged.folders.show', $crumb->id) }}">{{ $crumb->name }}</a>
        @else
            <span style="color:var(--gray-600)">{{ $crumb->name }}</span>
        @endif
    @endforeach
</div>

<div class="ged-page-header">
    <h1>
        <i class="fas fa-folder" style="color:{{ $folder->color }}"></i>
        {{ $folder->name }}
    </h1>
    <div style="display:flex;gap:8px">
        @if($folder->canWrite($gedUser))
        <a href="{{ route('ged.folders.edit', $folder->id) }}" class="ged-btn ged-btn-outline">
            <i class="fas fa-edit"></i> Modifier
        </a>
        @endif
        @if(session('ged_user.role') !== 'lecteur')
        <a href="{{ route('ged.folders.create') }}?parent={{ $folder->id }}" class="ged-btn ged-btn-outline">
            <i class="fas fa-folder-plus"></i> Sous-dossier
        </a>
        @endif
        <button onclick="document.getElementById('uploadModal').style.display='flex'"
                class="ged-btn ged-btn-primary">
            <i class="fas fa-upload"></i> Uploader
        </button>
    </div>
</div>

{{-- Sous-dossiers --}}
@if($folder->children->count())
<div class="ged-card">
    <div class="ged-card-title"><i class="fas fa-folder"></i> Sous-dossiers</div>
    <div class="ged-folder-grid" style="margin-bottom:0">
        @foreach($folder->children as $child)
        <a href="{{ route('ged.folders.show', $child->id) }}" class="ged-folder-item">
            <div class="ged-folder-icon" style="background:{{ $child->color }}20">
                <i class="fas fa-folder" style="color:{{ $child->color }}"></i>
            </div>
            <div class="ged-folder-name">{{ $child->name }}</div>
            <div class="ged-folder-meta">{{ $child->documents->count() }} doc(s)</div>
        </a>
        @endforeach
    </div>
</div>
@endif

{{-- Documents --}}
<div class="ged-card">
    <div class="ged-card-title"><i class="fas fa-file-alt"></i> Documents ({{ $folder->documents->count() }})</div>
    @if($folder->documents->count())
    <div class="ged-table-wrap">
        <table class="ged-table">
            <thead>
                <tr><th>Nom</th><th>Type</th><th>Taille</th><th>Version</th><th>Uploadé par</th><th>Date</th><th>Actions</th></tr>
            </thead>
            <tbody>
            @foreach($folder->documents as $doc)
            <tr>
                <td>
                    <div style="display:flex;align-items:center;gap:8px">
                        <i class="{{ $doc->icon }}" style="font-size:16px;width:20px;text-align:center"></i>
                        <span style="font-weight:500;color:var(--gray-900)">{{ $doc->name }}</span>
                    </div>
                </td>
                <td><span class="ged-badge ged-badge-gray">{{ strtoupper($doc->extension) }}</span></td>
                <td style="font-size:12px">{{ $doc->formatted_size }}</td>
                <td><span class="ged-badge ged-badge-blue">v{{ $doc->version }}</span></td>
                <td style="font-size:12px">{{ $doc->uploader?->name }}</td>
                <td style="font-size:11px;color:var(--gray-400)">{{ $doc->created_at->format('d/m/Y') }}</td>
                <td>
                    <div style="display:flex;gap:4px">
                        <a href="{{ route('ged.documents.show', $doc->id) }}" class="ged-btn ged-btn-outline ged-btn-sm" title="Voir">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="{{ route('ged.documents.download', $doc->id) }}" class="ged-btn ged-btn-outline ged-btn-sm" title="Télécharger">
                            <i class="fas fa-download"></i>
                        </a>
                    </div>
                </td>
            </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    @else
    <div class="ged-empty" style="padding:32px 0">
        <i class="fas fa-file"></i>
        <p>Aucun document dans ce dossier</p>
    </div>
    @endif
</div>

{{-- Modal Upload --}}
<div id="uploadModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center">
    <div style="background:#fff;border-radius:14px;padding:28px;width:480px;max-width:90%">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
            <h3 style="font-size:15px;font-weight:700;color:var(--green-dark)">Uploader un document</h3>
            <button onclick="document.getElementById('uploadModal').style.display='none'"
                    style="background:none;border:none;cursor:pointer;font-size:18px;color:var(--gray-400)">×</button>
        </div>
        <form method="POST" action="{{ route('ged.documents.upload') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="folder_id" value="{{ $folder->id }}">
            <div class="ged-form-group">
                <label>Nom du document</label>
                <input type="text" name="name" class="ged-form-control" placeholder="Laissez vide pour utiliser le nom du fichier">
            </div>
            <div class="ged-form-group">
                <label>Fichier *</label>
                <div class="ged-upload-zone" onclick="document.getElementById('modalFile').click()">
                    <input type="file" id="modalFile" name="file" required style="display:none"
                           accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.webp,.zip,.rar"
                           onchange="document.getElementById('modalFileName').textContent=this.files[0]?.name||''">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <p>Cliquez pour sélectionner</p>
                    <small id="modalFileName">PDF, Word, Excel, Images · Max 50 Mo</small>
                </div>
            </div>
            <div class="ged-form-group">
                <label>Description</label>
                <textarea name="description" class="ged-form-control" rows="2" placeholder="Description optionnelle"></textarea>
            </div>
            <div style="display:flex;gap:8px;justify-content:flex-end">
                <button type="button" onclick="document.getElementById('uploadModal').style.display='none'"
                        class="ged-btn ged-btn-outline">Annuler</button>
                <button type="submit" class="ged-btn ged-btn-primary"><i class="fas fa-upload"></i> Uploader</button>
            </div>
        </form>
    </div>
</div>
@endsection