@extends('agency.layouts.app')

@section('title', 'Tüm Dosyalar')

@section('content')
    <div class="container-fluid px-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-0 text-gray-800">Tüm Dosyalar</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 active">Tüm Dosyalar</li>
                    </ol>
                </nav>
            </div>
            <div>
                <!--button class="btn btn-success btn-sm me-2" onclick="downloadSelected()">
                    <i class="fas fa-download"></i> Seçilenleri İndir
                </button-->
                <button class="btn btn-primary btn-sm" onclick="showUploadModal()">
                    <i class="fas fa-upload"></i> Dosya Yükle
                </button>
            </div>
        </div>

        <!-- Filtreler ve Arama -->
        <div class="card shadow-sm mb-4">
            <div class="card-body py-3">
                <form method="GET" class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label small">Klasör</label>
                        <select name="folder_id" class="form-select form-select-sm">
                            <option value="">Tüm Klasörler</option>
                            @foreach($folders as $folder)
                                <option
                                    value="{{ $folder->id }}" {{ request('folder_id') == $folder->id ? 'selected' : '' }}>
                                    {{ str_repeat('└── ', $folder->level) }}{{ $folder->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label small">Yönelim</label>
                        <select name="orientation" class="form-select form-select-sm">
                            <option value="">Tümü</option>
                            <option value="landscape" {{ request('orientation') == 'landscape' ? 'selected' : '' }}>
                                Yatay
                            </option>
                            <option value="portrait" {{ request('orientation') == 'portrait' ? 'selected' : '' }}>
                                Dikey
                            </option>
                            <option value="square" {{ request('orientation') == 'square' ? 'selected' : '' }}>Kare
                            </option>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label small">Durum</label>
                        <select name="status" class="form-select form-select-sm">
                            <option value="">Tümü</option>
                            <option value="featured" {{ request('status') == 'featured' ? 'selected' : '' }}>Öne Çıkan
                            </option>
                            <option value="public" {{ request('status') == 'public' ? 'selected' : '' }}>Herkese Açık
                            </option>
                            <option value="private" {{ request('status') == 'private' ? 'selected' : '' }}>Özel</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label small">Arama</label>
                        <input type="text" name="search" class="form-control form-control-sm"
                               placeholder="Başlık, açıklama veya etiket..."
                               value="{{ request('search') }}">
                    </div>

                    <div class="col-md-2">
                        <button type="submit" class="btn btn-outline-primary btn-sm me-1">
                            <i class="fas fa-search"></i> Filtrele
                        </button>
                        <a href="{{ route('agency.disk.items.index') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Dosya Grid -->
        @if($items->count() > 0)
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <h6 class="m-0 font-weight-bold text-primary me-3">
                            Dosyalar ({{ $items->total() }})
                        </h6>
                        <div class="form-check me-3">
                            <input class="form-check-input" type="checkbox" id="selectAll">
                            <label class="form-check-label small" for="selectAll">Tümünü Seç</label>
                        </div>
                        <span class="badge bg-info" id="selectedCount">0 seçili</span>
                    </div>

                    <div class="d-flex gap-2">
                        <div class="btn-group btn-group-sm" role="group">
                            <input type="radio" class="btn-check" name="itemView" id="grid-view" checked>
                            <label class="btn btn-outline-secondary" for="grid-view">
                                <i class="fas fa-th"></i>
                            </label>
                            <input type="radio" class="btn-check" name="itemView" id="list-view">
                            <label class="btn btn-outline-secondary" for="list-view">
                                <i class="fas fa-list"></i>
                            </label>
                        </div>

                        <select class="form-select form-select-sm" id="sortSelect" style="width: auto;">
                            <option value="created_at">Yeni → Eski</option>
                            <option value="created_at_asc">Eski → Yeni</option>
                            <option value="title">Başlık A-Z</option>
                            <option value="file_size">Boyut Büyük → Küçük</option>
                            <option value="view_count">En Çok Görüntülenen</option>
                        </select>
                    </div>
                </div>

                <div class="card-body p-2">
                    <!-- Grid Görünüm -->
                    <div id="grid-content">
                        <div class="row g-2">
                            @foreach($items as $item)
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 mb-3">
                                    <div class="card border-0 shadow-sm h-100 item-card">
                                        <div class="position-relative">
                                            <img src="{{ $item->thumbnail_url }}"
                                                 alt="{{ $item->alt_text ?? $item->title }}"
                                                 class="card-img-top"
                                                 style="height: 180px; object-fit: cover; cursor: pointer;"
                                                 onclick="openImageModal({{ $item->id }})">

                                            <!-- Seçim checkbox -->
                                            <div class="position-absolute top-0 start-0 p-2">
                                                <input type="checkbox" class="form-check-input item-select"
                                                       value="{{ $item->id }}" id="img_{{ $item->id }}">
                                            </div>

                                            <!-- Badges -->
                                            <div class="position-absolute top-0 end-0 p-2">
                                                @if($item->is_featured)
                                                    <span class="badge bg-warning mb-1 d-block">
                                                    <i class="fas fa-star"></i>
                                                </span>
                                                @endif
                                                @if(!$item->is_public)
                                                    <span class="badge bg-danger mb-1 d-block">
                                                    <i class="fas fa-lock"></i>
                                                </span>
                                                @endif
                                                <span class="badge bg-secondary small">
                                                {{ strtoupper($item->extension) }}
                                            </span>
                                            </div>

                                            <!-- Hover overlay -->
                                            <div
                                                class="position-absolute bottom-0 start-0 end-0 bg-dark bg-opacity-75 text-white p-2 item-overlay">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <small>{{ $item->formatted_file_size }}</small>
                                                    <div class="btn-group btn-group-sm">
                                                        <button class="btn btn-sm btn-light"
                                                                onclick="viewImage({{ $item->id }})" title="Görüntüle">
                                                            <i class="fas fa-eye"></i>
                                                        </button>
                                                        <button class="btn btn-sm btn-light"
                                                                onclick="editImage({{ $item->id }})" title="Düzenle">
                                                            <i class="fas fa-edit"></i>
                                                        </button>
                                                        <button class="btn btn-sm btn-light"
                                                                onclick="downloadImage({{ $item->id }})" title="İndir">
                                                            <i class="fas fa-download"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="card-body p-2">
                                            <h6 class="card-title small mb-1"
                                                title="{{ $item->title ?? $item->original_name }}">
                                                {{ Str::limit($item->title ?? $item->original_name, 25) }}
                                            </h6>

                                            <p class="card-text small text-muted mb-1">
                                                <i class="fas fa-folder text-primary"></i>
                                                {{ Str::limit($item->folder->name, 15) }}
                                            </p>

                                            <div class="d-flex justify-content-between align-items-center">
                                                <small class="text-muted">
                                                    {{ $item->width }} x {{ $item->height }}
                                                </small>
                                                <div class="text-end">
                                                    <small class="text-muted">
                                                        <i class="fas fa-eye"></i> {{ $item->view_count }}
                                                    </small>
                                                    <br>
                                                    <small class="text-muted">
                                                        <i class="fas fa-download"></i> {{ $item->download_count }}
                                                    </small>
                                                </div>
                                            </div>

                                            @if($item->tags && count($item->tags) > 0)
                                                <div class="mt-2">
                                                    @foreach(array_slice($item->tags, 0, 2) as $tag)
                                                        <span
                                                            class="badge bg-light text-dark small me-1">#{{ $tag }}</span>
                                                    @endforeach
                                                    @if(count($item->tags) > 2)
                                                        <span
                                                            class="badge bg-light text-muted small">+{{ count($item->tags) - 2 }}</span>
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Liste Görünüm -->
                    <div id="list-content" style="display: none;">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                <tr>
                                    <th width="30">
                                        <input type="checkbox" class="form-check-input" id="selectAllTable">
                                    </th>
                                    <th>Dosya</th>
                                    <th>Klasör</th>
                                    <th>Boyut</th>
                                    <th>Boyutlar</th>
                                    <th>İstatistikler</th>
                                    <th>Tarih</th>
                                    <th>İşlemler</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($items as $item)
                                    <tr>
                                        <td>
                                            <input type="checkbox" class="form-check-input item-select"
                                                   value="{{ $item->id }}">
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="position-relative me-2">
                                                    <img src="{{ $item->thumbnail_url }}"
                                                         alt="{{ $item->alt_text }}"
                                                         class="rounded"
                                                         style="width: 50px; height: 50px; object-fit: cover; cursor: pointer;"
                                                         onclick="openImageModal({{ $item->id }})">
                                                    @if($item->is_featured)
                                                        <span class="position-absolute top-0 end-0 badge bg-warning"
                                                              style="font-size: 0.6rem;">
                                                            <i class="fas fa-star"></i>
                                                        </span>
                                                    @endif
                                                </div>
                                                <div>
                                                    <div
                                                        class="fw-bold">{{ Str::limit($item->title ?? $item->original_name, 30) }}</div>
                                                    <small class="text-muted">
                                                        {{ strtoupper($item->extension) }}
                                                        @if(!$item->is_public)
                                                            <span class="badge bg-danger ms-1">Özel</span>
                                                        @endif
                                                    </small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="{{ route('agency.disk.folders.show', $item->folder) }}"
                                               class="text-decoration-none">
                                                <i class="fas fa-folder"
                                                   style="color: {{ $item->folder->color_code ?? '#6c757d' }}"></i>
                                                {{ $item->folder->name }}
                                            </a>
                                        </td>
                                        <td>{{ $item->formatted_file_size }}</td>
                                        <td>
                                            {{ $item->width }} x {{ $item->height }}
                                            <br>
                                            <small class="text-muted">{{ ucfirst($item->orientation) }}</small>
                                        </td>
                                        <td>
                                            <i class="fas fa-eye text-info"></i> {{ $item->view_count }}
                                            <br>
                                            <i class="fas fa-download text-success"></i> {{ $item->download_count }}
                                        </td>
                                        <td>
                                            {{ $item->created_at->format('d.m.Y') }}
                                            <br>
                                            <small class="text-muted">{{ $item->created_at->format('H:i') }}</small>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <button class="btn btn-outline-primary"
                                                        onclick="viewImage({{ $item->id }})" title="Görüntüle">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                <button class="btn btn-outline-warning"
                                                        onclick="editImage({{ $item->id }})" title="Düzenle">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="btn btn-outline-success"
                                                        onclick="downloadImage({{ $item->id }})" title="İndir">
                                                    <i class="fas fa-download"></i>
                                                </button>
                                                <button class="btn btn-outline-danger"
                                                        onclick="deleteImage({{ $item->id }}, '{{ $item->title ?? $item->original_name }}')"
                                                        title="Sil">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Pagination -->
                @if($items->hasPages())
                    <div class="card-footer">
                        {{ $items->withQueryString()->links() }}
                    </div>
                @endif
            </div>
        @else
            <!-- Boş Durum -->
            <div class="card shadow">
                <div class="card-body text-center py-5">
                    <i class="fas fa-items fa-4x text-gray-400 mb-4"></i>
                    <h4 class="text-gray-600">Dosya Bulunamadı</h4>
                    <p class="text-gray-500 mb-4">
                        @if(request()->hasAny(['search', 'folder_id', 'orientation', 'status']))
                            Arama kriterlerinize uygun dosya bulunamadı.
                        @else
                            Henüz hiç dosya yüklenmemiş.
                        @endif
                    </p>
                    <div>
                        @if(request()->hasAny(['search', 'folder_id', 'orientation', 'status']))
                            <a href="{{ route('agency.disk.items.index') }}" class="btn btn-outline-secondary me-2">
                                <i class="fas fa-times"></i> Filtreleri Temizle
                            </a>
                        @endif
                        <button class="btn btn-primary" onclick="showUploadModal()">
                            <i class="fas fa-upload"></i> İlk Dosyayı Yükle
                        </button>
                    </div>
                </div>
            </div>
        @endif
    </div>

    <!-- Upload Modal -->
    <div class="modal fade" id="uploadModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Dosya Yükle</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="uploadForm" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label for="folder_id" class="form-label">Klasör Seçin</label>
                            <select class="form-select" id="folder_id" name="folder_id" required>
                                <option value="">Klasör seçiniz</option>
                                @foreach($folders as $folder)
                                    <option value="{{ $folder->id }}">
                                        {{ str_repeat('└── ', $folder->level) }}{{ $folder->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="items" class="form-label">Dosya Dosyaları</label>
                            <input type="file" class="form-control" id="items" name="items[]"
                                   multiple accept="item/*" required>
                            <div class="form-text">Birden fazla dosya seçebilirsiniz. (JPEG, PNG, GIF, WebP - Max:
                                10MB)
                            </div>
                        </div>
                        <div id="preview-container" class="row"></div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">İptal</button>
                    <button type="button" class="btn btn-primary" id="uploadBtn">
                        <i class="fas fa-upload"></i> Yükle
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Image View Modal -->
    <div class="modal fade" id="itemModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="itemModalTitle">Dosya</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="modalImage" src="" alt="" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Element varlık kontrolü ile görünüm değiştirme
            const gridViewBtn = document.getElementById('grid-view');
            const listViewBtn = document.getElementById('list-view');
            const gridContent = document.getElementById('grid-content');
            const listContent = document.getElementById('list-content');

            if (gridViewBtn && listViewBtn && gridContent && listContent) {
                gridViewBtn.addEventListener('change', function () {
                    if (this.checked) {
                        gridContent.style.display = 'block';
                        listContent.style.display = 'none';
                    }
                });

                listViewBtn.addEventListener('change', function () {
                    if (this.checked) {
                        gridContent.style.display = 'none';
                        listContent.style.display = 'block';
                    }
                });
            }

            // Tümünü seç
            const selectAll = document.getElementById('selectAll');
            const selectAllTable = document.getElementById('selectAllTable');

            if (selectAll) {
                selectAll.addEventListener('change', function () {
                    const checkboxes = document.querySelectorAll('.item-select');
                    checkboxes.forEach(cb => cb.checked = this.checked);
                    updateSelectedCount();
                });
            }

            if (selectAllTable) {
                selectAllTable.addEventListener('change', function () {
                    const checkboxes = document.querySelectorAll('.item-select');
                    checkboxes.forEach(cb => cb.checked = this.checked);
                    updateSelectedCount();
                });
            }

            // Seçim sayacı
            document.querySelectorAll('.item-select').forEach(cb => {
                cb.addEventListener('change', updateSelectedCount);
            });

            function updateSelectedCount() {
                const selected = document.querySelectorAll('.item-select:checked').length;
                const selectedCountEl = document.getElementById('selectedCount');
                if (selectedCountEl) {
                    selectedCountEl.textContent = selected + ' seçili';
                }
            }
        });

        function showUploadModal() {
            new bootstrap.Modal(document.getElementById('uploadModal')).show();
        }

        function openImageModal(itemId) {
            // Dosya bilgilerini modal'da göster
            window.open(`/agency/disk/items/${itemId}`, '_blank');
        }

        function viewImage(itemId) {
            window.open(`/agency/disk/items/${itemId}`, '_blank');
        }

        function editImage(itemId) {
            window.open(`/agency/disk/items/${itemId}/edit`, '_self');
        }

        function downloadImage(itemId) {
            window.open(`/agency/disk/items/${itemId}/download`, '_blank');
        }

        function deleteImage(itemId, itemName) {
            if (confirm(`"${itemName}" adlı Dosyayı silmek istediğinizden emin misiniz?\n\nBu işlem geri alınamaz.`)) {
                fetch(`/agency/disk/items/${itemId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json',
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            location.reload();
                        } else {
                            alert('Silme işlemi başarısız: ' + data.message);
                        }
                    });
            }
        }

        function downloadSelected() {
            const selected = Array.from(document.querySelectorAll('.item-select:checked')).map(cb => cb.value);
            if (selected.length === 0) {
                alert('Lütfen en az bir dosya seçin.');
                return;
            }
            console.log('Selected items for download:', selected);
            alert(`${selected.length} dosya indirilecek. (Bu özellik henüz aktif değil)`);
        }

        // Upload functionality
        document.addEventListener('DOMContentLoaded', function () {
            const uploadBtn = document.getElementById('uploadBtn');
            if (uploadBtn) {
                uploadBtn.addEventListener('click', function () {
                    const form = document.getElementById('uploadForm');
                    const folderSelect = document.getElementById('folder_id');
                    const itemsInput = document.getElementById('items');

                    if (!folderSelect.value) {
                        alert('Lütfen bir klasör seçin.');
                        return;
                    }

                    if (!itemsInput.files.length) {
                        alert('Lütfen en az bir dosya seçin.');
                        return;
                    }

                    const formData = new FormData(form);

                    // Loading state
                    uploadBtn.disabled = true;
                    uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Yükleniyor...';

                    fetch(`/agency/disk/folders/${folderSelect.value}/upload`, {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        }
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                location.reload();
                            } else {
                                alert('Yükleme hatası: ' + data.message);
                            }
                        })
                        .catch(error => {
                            console.error('Upload error:', error);
                            alert('Yükleme sırasında bir hata oluştu.');
                        })
                        .finally(() => {
                            uploadBtn.disabled = false;
                            uploadBtn.innerHTML = '<i class="fas fa-upload"></i> Yükle';
                        });
                });
            }
        });
    </script>
@endpush

@push('styles')
    <style>
        .item-card .item-overlay {
            opacity: 0;
            transition: opacity 0.3s;
        }

        .item-card:hover .item-overlay {
            opacity: 1;
        }

        .item-card:hover {
            transform: translateY(-2px);
            transition: transform 0.2s;
        }

        .item-card img {
            transition: transform 0.3s ease;
        }

        .item-card:hover img {
            transform: scale(1.05);
        }
    </style>
@endpush