@extends('ged.layout')
@section('title', 'Documents')
@section('page_title', 'Tous les documents')

@section('content')
<div class="ged-page-header">
    <h1><i class="fas fa-file-alt"></i> Documents</h1>
    <button onclick="document.getElementById('uploadModal').style.display='flex'" class="ged-btn ged-btn-primary">
        <i class="fas fa-upload"></i> Uploader
    </button>
</div>

<div class="ged-card">
    @if($documents->count())
    <div class="ged-table-wrap">
        <table class="ged-table">
            <thead>
                <tr><th>Document</th><th>Dossier</th><th>Type</th><th>Taille</th><th>Version</th><th>Uploadé par</th><th>Date</th><th>Actions</th></tr>
            </thead>
            <tbody>
            @foreach($documents as $doc)
            <tr>
                <td>
                    <div style="display:flex;align-items:center;gap:10px">
                        <i class="{{ $doc->icon }}" style="font-size:20px;width:24px;text-align:center"></i>
                        <div>
                            <div style="font-weight:600;color:var(--gray-900);font-size:13px">{{ $doc->name }}</div>
                            <div style="font-size:10px;color:var(--gray-400)">{{ $doc->original_name }}</div>
                        </div>
                    </div>
                </td>
                <td style="font-size:12px">
                    @if($doc->folder)
                    <a href="{{ route('ged.folders.show', $doc->folder_id) }}" style="color:var(--green)">{{ $doc->folder->name }}</a>
                    @else — @endif
                </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"><i class="fas fa-eye"></i></a>
                        <a href="{{ route('ged.documents.download', $doc->id) }}" class="ged-btn ged-btn-outline ged-btn-sm"><i class="fas fa-download"></i></a>
                        @if(session('ged_user.role') !== 'lecteur')
                        <form method="POST" action="{{ route('ged.documents.destroy', $doc->id) }}" onsubmit="return confirm('Supprimer ?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="ged-btn ged-btn-danger ged-btn-sm"><i class="fas fa-trash"></i></button>
                        </form>
                        @endif
                    </div>
                </td>
            </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    <div style="margin-top:16px">{{ $documents->links() }}</div>
    @else
    <div class="ged-empty"><i class="fas fa-file-alt"></i><p>Aucun document</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
            <div class="ged-form-group">
                <label>Dossier</label>
                <select name="folder_id" class="ged-form-control">
                    <option value="">— Racine —</option>
                    @foreach(\App\Models\Folder::orderBy('name')->get() as $f)
                    <option value="{{ $f->id }}">{{ $f->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="ged-form-group">
                <label>Nom</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('docFile').click()">
                    <input type="file" id="docFile" name="file" required style="display:none"
                           accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.webp,.zip,.rar"
                           onchange="document.getElementById('docFileName').textContent=this.files[0]?.name||''">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <p>Cliquez pour sélectionner</p>
                    <small id="docFileName">PDF, Word, Excel, Images · Max 50 Mo</small>
                </div>
            </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