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

@section('content')
<div class="ged-page-header">
    <h1><i class="{{ $document->icon }}"></i> {{ $document->name }}</h1>
    <div style="display:flex;gap:8px">
        <a href="{{ route('ged.documents.download', $document->id) }}" class="ged-btn ged-btn-primary">
            <i class="fas fa-download"></i> Télécharger
        </a>
        @if(session('ged_user.role') !== 'lecteur')
        <button onclick="document.getElementById('versionModal').style.display='flex'" class="ged-btn ged-btn-outline">
            <i class="fas fa-code-branch"></i> Nouvelle version
        </button>
        @endif
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start">

    {{-- Prévisualisation --}}
    <div class="ged-card">
        <div class="ged-card-title"><i class="fas fa-eye"></i> Prévisualisation</div>
        @if($document->isImage())
            <img src="{{ route('ged.documents.preview', $document->id) }}"
                 alt="{{ $document->name }}"
                 style="max-width:100%;border-radius:8px;border:1px solid var(--gray-200)">
        @elseif($document->isPdf())
            <iframe src="{{ route('ged.documents.preview', $document->id) }}"
                    style="width:100%;height:600px;border:none;border-radius:8px"></iframe>
        @else
            <div class="ged-empty">
                <i class="{{ $document->icon }}" style="font-size:4rem"></i>
                <p style="margin-bottom:16px">Prévisualisation non disponible pour ce type de fichier</p>
                <a href="{{ route('ged.documents.download', $document->id) }}" class="ged-btn ged-btn-primary">
                    <i class="fas fa-download"></i> Télécharger pour ouvrir
                </a>
            </div>
        @endif
    </div>

    {{-- Infos --}}
    <div>
        <div class="ged-card">
            <div class="ged-card-title"><i class="fas fa-info-circle"></i> Informations</div>
            <div style="display:flex;flex-direction:column;gap:10px">
                @foreach([
                    ['Nom original', $document->original_name],
                    ['Type', strtoupper($document->extension)],
                    ['Taille', $document->formatted_size],
                    ['Version', 'v' . $document->version],
                    ['Dossier', $document->folder?->name ?? '—'],
                    ['Uploadé par', $document->uploader?->name],
                    ['Date', $document->created_at->format('d/m/Y H:i')],
                    ['Téléchargements', $document->download_count],
                ] as [$label, $value])
                <div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--gray-100)">
                    <span style="font-size:11px;color:var(--gray-400);text-transform:uppercase;letter-spacing:1px">{{ $label }}</span>
                    <span style="font-size:13px;font-weight:500;color:var(--gray-900)">{{ $value }}</span>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Historique versions --}}
        <div class="ged-card">
            <div class="ged-card-title"><i class="fas fa-history"></i> Historique versions</div>
            @if($document->versions->count())
            @foreach($document->versions as $ver)
            <div style="display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--gray-100)">
                <span class="ged-badge {{ $ver->version == $document->version ? 'ged-badge-green' : 'ged-badge-gray' }}">
                    v{{ $ver->version }}
                </span>
                <div style="flex:1">
                    <div style="font-size:12px;color:var(--gray-700)">{{ $ver->changelog ?? 'Version ' . $ver->version }}</div>
                    <div style="font-size:10px;color:var(--gray-400)">{{ $ver->uploader?->name }} · {{ $ver->created_at->format('d/m/Y') }}</div>
                </div>
                <span style="font-size:11px;color:var(--gray-400)">{{ $ver->formatted_size }}</span>
            </div>
            @endforeach
            @else
            <div class="ged-empty" style="padding:16px 0"><i class="fas fa-history"></i><p>Aucune version</p></div>
            @endif
        </div>

        {{-- Actions --}}
        @if(session('ged_user.role') !== 'lecteur')
        <div class="ged-card">
            <div class="ged-card-title"><i class="fas fa-cog"></i> Actions</div>
            <div style="display:flex;flex-direction:column;gap:8px">
                <a href="{{ route('ged.messages.compose') }}?doc={{ $document->id }}" class="ged-btn ged-btn-outline" style="justify-content:center">
                    <i class="fas fa-share-alt"></i> Partager par message
                </a>
                <form method="POST" action="{{ route('ged.documents.destroy', $document->id) }}"
                      onsubmit="return confirm('Supprimer définitivement ce document ?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="ged-btn ged-btn-danger" style="width:100%;justify-content:center">
                        <i class="fas fa-trash"></i> Supprimer
                    </button>
                </form>
            </div>
        </div>
        @endif
    </div>
</div>

{{-- Modal Nouvelle Version --}}
<div id="versionModal" 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)">Nouvelle version</h3>
            <button onclick="document.getElementById('versionModal').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.version', $document->id) }}" enctype="multipart/form-data">
            @csrf
            <div class="ged-form-group">
                <label>Nouveau fichier *</label>
                <div class="ged-upload-zone" onclick="document.getElementById('verFile').click()">
                    <input type="file" id="verFile" name="file" required style="display:none"
                           onchange="document.getElementById('verFileName').textContent=this.files[0]?.name||''">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <p>Cliquez pour sélectionner</p>
                    <small id="verFileName">Max 50 Mo</small>
                </div>
            </div>
            <div class="ged-form-group">
                <label>Notes de version</label>
                <textarea name="changelog" class="ged-form-control" rows="2" placeholder="Qu'est-ce qui a changé ?"></textarea>
            </div>
            <div style="display:flex;gap:8px;justify-content:flex-end">
                <button type="button" onclick="document.getElementById('versionModal').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 v{{ $document->version + 1 }}</button>
            </div>
        </form>
    </div>
</div>
@endsection