@extends('agency.layouts.app')

@section('title', 'Dosya Düzenle - ' . ($item->title ?? $item->original_name))

@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">Dosya Düzenle</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.items.show', $item) }}">{{ Str::limit($item->title ?? $item->original_name, 20) }}</a></li>
                        <li class="breadcrumb-item active">Düzenle</li>
                    </ol>
                </nav>
            </div>
            <div>
                <a href="{{ route('agency.disk.items.show', $item) }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Geri Dön
                </a>
            </div>
        </div>

        <form action="{{ route('agency.disk.items.update', $item) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="row">
                <!-- Form Alanları -->
                <div class="col-lg-8">
                    <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">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="title" class="form-label">Başlık</label>
                                        <input type="text" class="form-control @error('title') is-invalid @enderror"
                                               id="title" name="title" value="{{ old('title', $item->title) }}"
                                               placeholder="Dosya başlığı">
                                        @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="alt_text" class="form-label">Alt Metin</label>
                                        <input type="text" class="form-control @error('alt_text') is-invalid @enderror"
                                               id="alt_text" name="alt_text" value="{{ old('alt_text', $item->alt_text) }}"
                                               placeholder="SEO için alt metin">
                                        @error('alt_text')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div class="form-text">Arama motorları ve erişilebilirlik için önemli</div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="description" class="form-label">Açıklama</label>
                                <textarea class="form-control @error('description') is-invalid @enderror"
                                          id="description" name="description" rows="4"
                                          placeholder="Dosya hakkında detaylı açıklama...">{{ old('description', $item->description) }}</textarea>
                                @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="folder_id" class="form-label required">Klasör</label>
                                        <select class="form-select @error('folder_id') is-invalid @enderror"
                                                id="folder_id" name="folder_id" required>
                                            @foreach($folders as $folder)
                                                <option value="{{ $folder->id }}"
                                                    {{ old('folder_id', $item->folder_id) == $folder->id ? 'selected' : '' }}>
                                                    {{ str_repeat('└── ', $folder->level) }}{{ $folder->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('folder_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="tags" class="form-label">Etiketler</label>
                                        <input type="text" class="form-control @error('tags') is-invalid @enderror"
                                               id="tags" name="tags"
                                               value="{{ old('tags', $item->tags ? implode(', ', $item->tags) : '') }}"
                                               placeholder="etiket1, etiket2, etiket3">
                                        @error('tags')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div class="form-text">Virgül ile ayırarak yazın</div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="copyright" class="form-label">Telif Hakkı</label>
                                        <input type="text" class="form-control @error('copyright') is-invalid @enderror"
                                               id="copyright" name="copyright" value="{{ old('copyright', $item->copyright) }}"
                                               placeholder="© 2024 Şirket Adı">
                                        @error('copyright')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="photographer" class="form-label">Fotoğrafçı</label>
                                        <input type="text" class="form-control @error('photographer') is-invalid @enderror"
                                               id="photographer" name="photographer" value="{{ old('photographer', $item->photographer) }}"
                                               placeholder="Fotoğrafçı adı">
                                        @error('photographer')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Durum Ayarları -->
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Görünürlük Ayarları</label>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input @error('is_public') is-invalid @enderror"
                                                   type="checkbox" id="is_public" name="is_public" value="1"
                                                {{ old('is_public', $item->is_public) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="is_public">
                                                Herkese Açık
                                            </label>
                                            <div class="form-text">Bu dosya herkese açık olacak mı?</div>
                                        </div>
                                        @error('is_public')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Öne Çıkarma</label>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input @error('is_featured') is-invalid @enderror"
                                                   type="checkbox" id="is_featured" name="is_featured" value="1"
                                                {{ old('is_featured', $item->is_featured) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="is_featured">
                                                <i class="fas fa-star text-warning"></i> Öne Çıkan Dosya
                                            </label>
                                            <div class="form-text">Bu dosya öne çıkan Dosyalar arasında gösterilsin mi?</div>
                                        </div>
                                        @error('is_featured')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Form Butonları -->
                    <div class="card shadow">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <button type="button" class="btn btn-danger" onclick="deleteImage()">
                                        <i class="fas fa-trash"></i> Dosyayı Sil
                                    </button>
                                </div>
                                <div class="d-flex gap-2">
                                    <a href="{{ route('agency.disk.items.show', $item) }}" class="btn btn-secondary">
                                        <i class="fas fa-times"></i> İptal
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> Değişiklikleri Kaydet
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Önizleme ve Bilgiler -->
                <div class="col-lg-4">
                    <!-- Dosya Önizleme -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">Önizleme</h6>
                        </div>
                        <div class="card-body text-center">
                            <div class="position-relative mb-3">
                                <img src="{{ $item->thumbnail_url }}"
                                     alt="{{ $item->alt_text ?? $item->title }}"
                                     class="img-fluid rounded shadow"
                                     style="max-height: 200px;">

                                <!-- Badges Preview -->
                                <div class="position-absolute top-0 end-0 p-2">
                                    <span class="badge bg-secondary mb-1 d-block">{{ strtoupper($item->extension) }}</span>
                                    <span class="badge bg-warning d-none" id="featured-badge">
                                    <i class="fas fa-star"></i>
                                </span>
                                    <span class="badge bg-success d-none" id="public-badge">Açık</span>
                                    <span class="badge bg-warning d-none" id="private-badge">Özel</span>
                                </div>
                            </div>

                            <h6 id="preview-title" class="text-gray-800">{{ $item->title ?? $item->original_name }}</h6>
                            <p id="preview-alt" class="small text-muted">{{ $item->alt_text ?? 'Alt metin' }}</p>

                            <div class="small text-muted">
                                <div>{{ $item->width }} x {{ $item->height }} px</div>
                                <div>{{ $item->formatted_file_size }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Mevcut Bilgiler -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-info">Mevcut Durum</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>

                            <div class="small">
                                <div class="mb-2">
                                    <strong>Dosya Adı:</strong> {{ $item->original_name }}
                                </div>
                                <div class="mb-2">
                                    <strong>Yükleme:</strong> {{ $item->created_at->format('d.m.Y H:i') }}
                                </div>
                                @if($item->updated_at != $item->created_at)
                                    <div class="mb-2">
                                        <strong>Son Güncelleme:</strong> {{ $item->updated_at->format('d.m.Y H:i') }}
                                    </div>
                                @endif
                                <div class="mb-2">
                                    <strong>Mevcut Klasör:</strong> {{ $item->folder->name }}
                                </div>
                                <div class="mb-2">
                                    <strong>Durum:</strong>
                                    @if($item->is_public)
                                        <span class="badge bg-success">Herkese Açık</span>
                                    @else
                                        <span class="badge bg-warning">Özel</span>
                                    @endif
                                    @if($item->is_featured)
                                        <span class="badge bg-warning ms-1"><i class="fas fa-star"></i></span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Dosya Bilgileri -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-secondary">Dosya Detayları</h6>
                        </div>
                        <div class="card-body">
                            <div class="small">
                                <div class="row mb-1">
                                    <div class="col-5 text-muted">Format:</div>
                                    <div class="col-7">{{ strtoupper($item->extension) }}</div>
                                </div>
                                <div class="row mb-1">
                                    <div class="col-5 text-muted">MIME:</div>
                                    <div class="col-7">{{ $item->mime_type }}</div>
                                </div>
                                <div class="row mb-1">
                                    <div class="col-5 text-muted">Boyut:</div>
                                    <div class="col-7">{{ $item->formatted_file_size }}</div>
                                </div>
                                <div class="row mb-1">
                                    <div class="col-5 text-muted">Boyutlar:</div>
                                    <div class="col-7">{{ $item->width }} x {{ $item->height }}</div>
                                </div>
                                <div class="row mb-1">
                                    <div class="col-5 text-muted">Oran:</div>
                                    <div class="col-7">{{ $item->aspect_ratio }}</div>
                                </div>
                                <div class="row">
                                    <div class="col-5 text-muted">Yönelim:</div>
                                    <div class="col-7">{{ ucfirst($item->orientation) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Hızlı İşlemler -->
                    <div class="card shadow">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-success">Hızlı İşlemler</h6>
                        </div>
                        <div class="card-body">
                            <div class="list-group list-group-flush">
                                <a href="{{ route('agency.disk.items.show', $item) }}"
                                   class="list-group-item list-group-item-action border-0 px-0">
                                    <i class="fas fa-eye text-primary me-2"></i> Dosyayı Görüntüle
                                </a>
                                <a href="{{ route('agency.disk.items.download', $item) }}"
                                   class="list-group-item list-group-item-action border-0 px-0">
                                    <i class="fas fa-download text-success me-2"></i> Dosyayı İndir
                                </a>
                                <a href="{{ route('agency.disk.folders.show', $item->folder) }}"
                                   class="list-group-item list-group-item-action border-0 px-0">
                                    <i class="fas fa-folder text-warning me-2"></i> Klasöre Git
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </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>
        document.addEventListener('DOMContentLoaded', function() {
            const titleInput = document.getElementById('title');
            const altInput = document.getElementById('alt_text');
            const featuredCheck = document.getElementById('is_featured');
            const publicCheck = document.getElementById('is_public');

            const previewTitle = document.getElementById('preview-title');
            const previewAlt = document.getElementById('preview-alt');
            const featuredBadge = document.getElementById('featured-badge');
            const publicBadge = document.getElementById('public-badge');
            const privateBadge = document.getElementById('private-badge');

            // Önizleme güncellemeleri
            function updatePreview() {
                // Başlık
                previewTitle.textContent = titleInput.value || '{{ $item->original_name }}';

                // Alt metin
                previewAlt.textContent = altInput.value || 'Alt metin';

                // Featured badge
                if (featuredCheck.checked) {
                    featuredBadge.classList.remove('d-none');
                } else {
                    featuredBadge.classList.add('d-none');
                }

                // Public/Private badge
                if (publicCheck.checked) {
                    publicBadge.classList.remove('d-none');
                    privateBadge.classList.add('d-none');
                } else {
                    publicBadge.classList.add('d-none');
                    privateBadge.classList.remove('d-none');
                }
            }

            // Event listeners
            titleInput.addEventListener('input', updatePreview);
            altInput.addEventListener('input', updatePreview);
            featuredCheck.addEventListener('change', updatePreview);
            publicCheck.addEventListener('change', updatePreview);

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

            // Form validation
            document.querySelector('form').addEventListener('submit', function(e) {
                const folderId = document.getElementById('folder_id').value;

                if (!folderId) {
                    e.preventDefault();
                    alert('Lütfen bir klasör seçin.');
                    document.getElementById('folder_id').focus();
                    return false;
                }
            });

            // İlk önizleme
            updatePreview();
        });

        function deleteImage() {
            new bootstrap.Modal(document.getElementById('deleteModal')).show();
        }
    </script>
@endpush

@push('styles')
    <style>
        .required::after {
            content: ' *';
            color: red;
        }

        .form-check-input:checked {
            background-color: #007bff;
            border-color: #007bff;
        }

        .list-group-item-action:hover {
            background-color: #f8f9fa;
        }

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

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