@extends('agency.layouts.app')

@section('title', $item->title ?? $item->original_name)

@section('content')
    <div class="container-fluid px-4">
        <!-- Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h4 mb-0 text-gray-800">{{ $item->title ?? $item->original_name }}</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ route('agency.disk.index') }}">Disk</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('agency.disk.items.index') }}">Tüm Dosyalar</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('agency.disk.folders.show', $item->folder) }}">{{ $item->folder->name }}</a></li>
                        <li class="breadcrumb-item active">{{ Str::limit($item->title ?? $item->original_name, 30) }}</li>
                    </ol>
                </nav>
            </div>
            <div class="btn-group">
                <a href="{{ route('agency.disk.items.edit', $item) }}" class="btn btn-warning">
                    <i class="fas fa-edit"></i> Düzenle
                </a>
                <a href="{{ route('agency.disk.items.download', $item) }}" class="btn btn-success">
                    <i class="fas fa-download"></i> İndir
                </a>
                <button type="button" class="btn btn-danger" onclick="deleteImage()">
                    <i class="fas fa-trash"></i> Sil
                </button>
            </div>
        </div>

        <div class="row">
            <!-- Ana Dosya -->
            <div class="col-lg-8">
                <div class="card shadow mb-4">
                    <div class="card-body p-0">
                        <div class="text-center position-relative">
                            @if($item->isImage())
                                <!-- Image Preview -->
                                <img src="{{ $item->full_url }}"
                                     alt="{{ $item->alt_text ?? $item->title }}"
                                     class="img-fluid"
                                     style="max-height: 600px; width: auto;"
                                     onclick="openFullscreen()">

                                <!-- Fullscreen button -->
                                <button class="btn btn-dark btn-sm position-absolute top-0 end-0 m-3"
                                        onclick="openFullscreen()" title="Tam Ekran">
                                    <i class="fas fa-expand"></i>
                                </button>

                            @elseif($item->extension === 'pdf')
                                <!-- PDF Preview -->
                                <div class="pdf-viewer-container">
                                    <iframe src="{{ $item->full_url }}"
                                            style="width: 100%; height: 600px; border: none;"
                                            type="application/pdf">
                                    </iframe>
                                    <div class="pdf-fallback text-center py-5">
                                        <i class="fas fa-file-pdf fa-5x text-danger mb-3"></i>
                                        <h5>PDF Önizleme</h5>
                                        <p class="text-muted">Tarayıcınız PDF görüntülemeyi desteklemiyor.</p>
                                        <a href="{{ $item->full_url }}" target="_blank" class="btn btn-primary">
                                            <i class="fas fa-external-link-alt"></i> Yeni Sekmede Aç
                                        </a>
                                    </div>
                                </div>

                            @elseif($item->isVideo())
                                <!-- Video Preview -->
                                <video controls style="max-width: 100%; max-height: 600px;">
                                    <source src="{{ $item->full_url }}" type="{{ $item->mime_type }}">
                                    Tarayıcınız video oynatmayı desteklemiyor.
                                </video>

                            @elseif($item->isAudio())
                                <!-- Audio Preview -->
                                <div class="audio-preview text-center py-5">
                                    <i class="fas fa-music fa-5x mb-4" style="color: {{ $item->file_color }}"></i>
                                    <h5>{{ $item->original_name }}</h5>
                                    <audio controls class="w-100 mt-3">
                                        <source src="{{ $item->full_url }}" type="{{ $item->mime_type }}">
                                        Tarayıcınız ses oynatmayı desteklemiyor.
                                    </audio>
                                </div>

                            @elseif($item->isDocument())
                                <!-- Document Preview -->
                                <div class="document-preview text-center py-5">
                                    <i class="fas {{ $item->file_icon }} fa-5x mb-4" style="color: {{ $item->file_color }}"></i>
                                    <h5>{{ $item->original_name }}</h5>
                                    <p class="text-muted">{{ strtoupper($item->extension) }} Dökümanı</p>
                                    <div class="d-flex gap-2 justify-content-center mt-4">
                                        <a href="{{ $item->full_url }}" target="_blank" class="btn btn-primary">
                                            <i class="fas fa-external-link-alt"></i> Yeni Sekmede Aç
                                        </a>
                                        <a href="{{ route('agency.disk.items.download', $item) }}" class="btn btn-success">
                                            <i class="fas fa-download"></i> İndir
                                        </a>
                                    </div>
                                    @if($item->page_count)
                                        <p class="text-muted mt-3">
                                            <i class="fas fa-file-alt"></i> {{ $item->page_count }} sayfa
                                        </p>
                                    @endif
                                </div>

                            @elseif($item->isArchive())
                                <!-- Archive Preview -->
                                <div class="archive-preview text-center py-5">
                                    <i class="fas fa-file-archive fa-5x mb-4" style="color: {{ $item->file_color }}"></i>
                                    <h5>{{ $item->original_name }}</h5>
                                    <p class="text-muted">{{ strtoupper($item->extension) }} Arşiv Dosyası</p>
                                    <p class="text-muted">Arşiv dosyaları önizlenemiyor.</p>
                                    <a href="{{ route('agency.disk.items.download', $item) }}" class="btn btn-success mt-3">
                                        <i class="fas fa-download"></i> İndir
                                    </a>
                                </div>

                            @else
                                <!-- Other File Types -->
                                <div class="file-preview text-center py-5">
                                    <i class="fas {{ $item->file_icon }} fa-5x mb-4" style="color: {{ $item->file_color }}"></i>
                                    <h5>{{ $item->original_name }}</h5>
                                    <p class="text-muted">{{ $item->mime_type }}</p>
                                    <div class="d-flex gap-2 justify-content-center mt-4">
                                        <a href="{{ $item->full_url }}" target="_blank" class="btn btn-primary">
                                            <i class="fas fa-external-link-alt"></i> Yeni Sekmede Aç
                                        </a>
                                        <a href="{{ route('agency.disk.items.download', $item) }}" class="btn btn-success">
                                            <i class="fas fa-download"></i> İndir
                                        </a>
                                    </div>
                                </div>
                            @endif

                            <!-- File info overlay (for images and videos) -->
                            @if($item->isImage() || $item->isVideo())
                                <div class="position-absolute bottom-0 start-0 end-0 bg-dark bg-opacity-75 text-white p-3">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <small>
                                                @if($item->width && $item->height)
                                                    <i class="fas fa-expand-arrows-alt"></i> {{ $item->width }} x {{ $item->height }}
                                                @endif
                                                <span class="ms-2"><i class="fas fa-weight"></i> {{ $item->formatted_file_size }}</span>
                                            </small>
                                        </div>
                                        <div class="col-md-6 text-md-end">
                                            <small>
                                                <i class="fas fa-eye"></i> {{ $item->view_count }} görüntülenme
                                                <span class="ms-2"><i class="fas fa-download"></i> {{ $item->download_count }} indirme</span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Dosya Bilgileri -->
                @if($item->description || $item->tags)
                    <div class="card shadow">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">Açıklama ve Etiketler</h6>
                        </div>
                        <div class="card-body">
                            @if($item->description)
                                <div class="mb-3">
                                    <h6>Açıklama:</h6>
                                    <p class="text-muted">{{ $item->description }}</p>
                                </div>
                            @endif

                            @if($item->tags && count($item->tags) > 0)
                                <div>
                                    <h6>Etiketler:</h6>
                                    <div class="d-flex flex-wrap gap-2">
                                        @foreach($item->tags as $tag)
                                            <span class="badge bg-primary">#{{ $tag }}</span>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif
            </div>

            <!-- Yan Bilgi Paneli -->
            <div class="col-lg-4">
                <!-- Dosya Bilgileri -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Dosya Bilgileri</h6>
                    </div>
                    <div class="card-body">
                        <div class="row mb-2">
                            <div class="col-5 text-muted">Dosya Adı:</div>
                            <div class="col-7">{{ $item->original_name }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-5 text-muted">Dosya Türü:</div>
                            <div class="col-7">
                                <span class="badge bg-secondary">{{ strtoupper($item->extension) }}</span>
                                <small class="text-muted ms-1">{{ $item->mime_type }}</small>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-5 text-muted">Boyut:</div>
                            <div class="col-7">{{ $item->formatted_file_size }}</div>
                        </div>
                        @if($item->width && $item->height)
                            <div class="row mb-2">
                                <div class="col-5 text-muted">Boyutlar:</div>
                                <div class="col-7">{{ $item->width }} x {{ $item->height }} px</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-5 text-muted">En-Boy Oranı:</div>
                                <div class="col-7">{{ $item->aspect_ratio }}</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-5 text-muted">Yönelim:</div>
                                <div class="col-7">
                                    <span class="badge bg-info">{{ ucfirst($item->orientation) }}</span>
                                </div>
                            </div>
                        @endif
                        @if($item->page_count)
                            <div class="row mb-2">
                                <div class="col-5 text-muted">Sayfa Sayısı:</div>
                                <div class="col-7">{{ $item->page_count }}</div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Klasör Bilgisi -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Klasör</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-folder fa-2x me-3" style="color: {{ $item->folder->color_code ?? '#6c757d' }}"></i>
                            <div>
                                <h6 class="mb-0">
                                    <a href="{{ route('agency.disk.folders.show', $item->folder) }}"
                                       class="text-decoration-none">
                                        {{ $item->folder->name }}
                                    </a>
                                </h6>
                                <small class="text-muted">{{ $item->folder->full_path }}</small>
                            </div>
                        </div>

                        <div class="row text-center">
                            <div class="col-6">
                                <small class="text-muted">Klasör Türü</small>
                                <div class="fw-bold">{{ ucfirst($item->folder->folder_type) }}</div>
                            </div>
                            <div class="col-6">
                                <small class="text-muted">Toplam Dosya</small>
                                <div class="fw-bold">{{ $item->folder->item_count }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Durum ve Ayarlar -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Durum ve Ayarlar</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span>Görünürlük:</span>
                            @if($item->is_public)
                                <span class="badge bg-success">Herkese Açık</span>
                            @else
                                <span class="badge bg-warning">Özel</span>
                            @endif
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span>Onay Durumu:</span>
                            @if($item->is_approved)
                                <span class="badge bg-success">Onaylandı</span>
                            @else
                                <span class="badge bg-warning">Onay Bekliyor</span>
                            @endif
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span>Öne Çıkan:</span>
                            @if($item->is_featured)
                                <span class="badge bg-warning"><i class="fas fa-star"></i> Evet</span>
                            @else
                                <span class="badge bg-secondary">Hayır</span>
                            @endif
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <span>İşlenmiş:</span>
                            @if($item->is_processed)
                                <span class="badge bg-success">Evet</span>
                            @else
                                <span class="badge bg-danger">Hayır</span>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- İstatistikler -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">İstatistikler</h6>
                    </div>
                    <div class="card-body">
                        <div class="row text-center mb-3">
                            <div class="col-6">
                                <div class="text-muted small">Görüntülenme</div>
                                <div class="h5 mb-0 text-info">{{ $item->view_count }}</div>
                            </div>
                            <div class="col-6">
                                <div class="text-muted small">İndirme</div>
                                <div class="h5 mb-0 text-success">{{ $item->download_count }}</div>
                            </div>
                        </div>

                        @if($item->last_viewed_at)
                            <div class="row mb-2">
                                <div class="col-5 text-muted small">Son Görüntüleme:</div>
                                <div class="col-7 small">{{ $item->last_viewed_at->format('d.m.Y H:i') }}</div>
                            </div>
                        @endif

                        @if($item->last_downloaded_at)
                            <div class="row mb-2">
                                <div class="col-5 text-muted small">Son İndirme:</div>
                                <div class="col-7 small">{{ $item->last_downloaded_at->format('d.m.Y H:i') }}</div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Meta Bilgiler -->
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Meta Bilgiler</h6>
                    </div>
                    <div class="card-body">
                        <div class="row mb-2">
                            <div class="col-5 text-muted small">Yükleme Tarihi:</div>
                            <div class="col-7 small">{{ $item->created_at->format('d.m.Y H:i') }}</div>
                        </div>

                        @if($item->creator)
                            <div class="row mb-2">
                                <div class="col-5 text-muted small">Yükleyen:</div>
                                <div class="col-7 small">{{ $item->creator->full_name }}</div>
                            </div>
                        @endif

                        @if($item->updated_at != $item->created_at)
                            <div class="row mb-2">
                                <div class="col-5 text-muted small">Son Güncelleme:</div>
                                <div class="col-7 small">{{ $item->updated_at->format('d.m.Y H:i') }}</div>
                            </div>
                        @endif

                        @if($item->copyright)
                            <div class="row mb-2">
                                <div class="col-5 text-muted small">Telif Hakkı:</div>
                                <div class="col-7 small">{{ $item->copyright }}</div>
                            </div>
                        @endif

                        @if($item->photographer)
                            <div class="row mb-2">
                                <div class="col-5 text-muted small">Fotoğrafçı:</div>
                                <div class="col-7 small">{{ $item->photographer }}</div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Fullscreen Modal -->
    <div class="modal fade" id="fullscreenModal" tabindex="-1">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content bg-dark">
                <div class="modal-header border-0">
                    <h5 class="modal-title text-white">{{ $item->title ?? $item->original_name }}</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body d-flex align-items-center justify-content-center p-0">
                    <img src="{{ $item->full_url }}"
                         alt="{{ $item->alt_text ?? $item->title }}"
                         class="img-fluid"
                         style="max-height: 90vh; max-width: 90vw;">
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Dosyayı Sil</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Dikkat!</strong> Bu işlem geri alınamaz.
                    </div>
                    <p>Bu dosyayı kalıcı olarak silmek istediğinizden emin misiniz?</p>
                    <p><strong>{{ $item->title ?? $item->original_name }}</strong></p>

                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="confirmDelete">
                        <label class="form-check-label" for="confirmDelete">
                            Sonuçları anlıyorum ve dosyayı silmek istiyorum
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">İptal</button>
                    <form id="deleteForm" method="POST" action="{{ route('agency.disk.items.destroy', $item) }}" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger" id="deleteBtn" disabled>
                            <i class="fas fa-trash"></i> Dosyayı Sil
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function openFullscreen() {
            new bootstrap.Modal(document.getElementById('fullscreenModal')).show();
        }

        function deleteImage() {
            new bootstrap.Modal(document.getElementById('deleteModal')).show();
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Delete confirmation
            document.getElementById('confirmDelete').addEventListener('change', function() {
                document.getElementById('deleteBtn').disabled = !this.checked;
            });

            // Keyboard shortcuts
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    // Close any open modals
                    const modals = document.querySelectorAll('.modal.show');
                    modals.forEach(modal => {
                        bootstrap.Modal.getInstance(modal)?.hide();
                    });
                }

                if (e.key === 'f' || e.key === 'F') {
                    e.preventDefault();
                    openFullscreen();
                }

                if (e.key === 'e' || e.key === 'E') {
                    e.preventDefault();
                    window.location.href = '{{ route("agency.disk.items.edit", $item) }}';
                }

                if (e.key === 'd' || e.key === 'D') {
                    e.preventDefault();
                    window.location.href = '{{ route("agency.disk.items.download", $item) }}';
                }
            });
        });
    </script>
@endpush

@push('styles')
    <style>
        .card img {
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .card img:hover {
            transform: scale(1.02);
        }

        .modal-fullscreen .modal-body img {
            cursor: zoom-out;
        }

        .badge {
            font-size: 0.75rem;
        }

        .row.mb-2:last-child {
            margin-bottom: 0 !important;
        }

        /* PDF Viewer */
        .pdf-viewer-container {
            position: relative;
            background: #f3f4f6;
        }

        .pdf-fallback {
            display: none;
        }

        /* Document Preview */
        .document-preview,
        .archive-preview,
        .file-preview,
        .audio-preview {
            background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
            min-height: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .document-preview i,
        .archive-preview i,
        .file-preview i {
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
        }

        /* Video Player */
        video {
            background: #000;
            border-radius: 8px;
        }

        /* Audio Player */
        audio {
            max-width: 500px;
        }

        audio::-webkit-media-controls-panel {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        }

        /* File Type Icons Animation */
        .document-preview i,
        .archive-preview i,
        .file-preview i,
        .audio-preview i.fa-music {
            transition: transform 0.3s ease;
        }

        .document-preview:hover i,
        .archive-preview:hover i,
        .file-preview:hover i,
        .audio-preview:hover i.fa-music {
            transform: scale(1.1) rotate(5deg);
        }
    </style>
@endpush