@extends('agency.layouts.app')

@section('title', 'Klasör Düzenle - ' . $folder->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">Klasör 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.folders.index') }}">Klasörler</a>
                        </li>
                        <li class="breadcrumb-item"><a
                                href="{{ route('agency.disk.folders.show', $folder) }}">{{ $folder->name }}</a></li>
                        <li class="breadcrumb-item active">Düzenle</li>
                    </ol>
                </nav>
            </div>
            <div>
                <a href="{{ route('agency.disk.folders.show', $folder) }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Geri Dön
                </a>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-8">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Klasör Bilgilerini Düzenle</h6>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('agency.disk.folders.update', $folder) }}" method="POST">
                            @csrf
                            @method('PUT')

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="name" class="form-label required">Klasör Adı</label>
                                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                                               id="name" name="name" value="{{ old('name', $folder->name) }}"
                                               placeholder="Klasör adını giriniz" required>
                                        @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="folder_type" class="form-label required">Klasör Türü</label>
                                        <select class="form-select @error('folder_type') is-invalid @enderror"
                                                id="folder_type" name="folder_type" required>
                                            <option value="">Klasör türünü seçiniz</option>
                                            <option
                                                value="general" {{ old('folder_type', $folder->folder_type) == 'general' ? 'selected' : '' }}>
                                                Genel
                                            </option>
                                            <option
                                                value="tour" {{ old('folder_type', $folder->folder_type) == 'tour' ? 'selected' : '' }}>
                                                Tur
                                            </option>
                                            <option
                                                value="hotel" {{ old('folder_type', $folder->folder_type) == 'hotel' ? 'selected' : '' }}>
                                                Otel
                                            </option>
                                            <option
                                                value="transport" {{ old('folder_type', $folder->folder_type) == 'transport' ? 'selected' : '' }}>
                                                Ulaşım
                                            </option>
                                            <option
                                                value="activity" {{ old('folder_type', $folder->folder_type) == 'activity' ? 'selected' : '' }}>
                                                Aktivite
                                            </option>
                                        </select>
                                        @error('folder_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="parent_id" class="form-label">Ana Klasör</label>
                                        <select class="form-select @error('parent_id') is-invalid @enderror"
                                                id="parent_id" name="parent_id">
                                            <option value="">Kök klasör (Ana klasör yok)</option>
                                            @foreach($parentFolders as $parentFolder)
                                                <option value="{{ $parentFolder->id }}"
                                                    {{ old('parent_id', $folder->parent_id) == $parentFolder->id ? 'selected' : '' }}>
                                                    {{ str_repeat('└── ', $parentFolder->level) }}{{ $parentFolder->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('parent_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div class="form-text">Bu klasörün altında oluşturulacak ana klasörü seçiniz.
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="color_code" class="form-label">Renk Kodu</label>
                                        <div class="input-group">
                                            <input type="color"
                                                   class="form-control form-control-color @error('color_code') is-invalid @enderror"
                                                   id="color_code" name="color_code"
                                                   value="{{ old('color_code', $folder->color_code ?? '#6c757d') }}">
                                            <input type="text" class="form-control" id="color_text"
                                                   value="{{ old('color_code', $folder->color_code ?? '#6c757d') }}"
                                                   readonly>
                                        </div>
                                        @error('color_code')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div class="form-text">Klasörün dosya rengi</div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="icon" class="form-label">İkon</label>
                                        <select class="form-select @error('icon') is-invalid @enderror"
                                                id="icon" name="icon">
                                            <option value="">İkon seçiniz (opsiyonel)</option>
                                            <option
                                                value="camera" {{ old('icon', $folder->icon) == 'camera' ? 'selected' : '' }}>
                                                📷 Kamera
                                            </option>
                                            <option
                                                value="map" {{ old('icon', $folder->icon) == 'map' ? 'selected' : '' }}>
                                                🗺️ Harita
                                            </option>
                                            <option
                                                value="plane" {{ old('icon', $folder->icon) == 'plane' ? 'selected' : '' }}>
                                                ✈️ Uçak
                                            </option>
                                            <option
                                                value="bus" {{ old('icon', $folder->icon) == 'bus' ? 'selected' : '' }}>
                                                🚌 Otobüs
                                            </option>
                                            <option
                                                value="hotel" {{ old('icon', $folder->icon) == 'hotel' ? 'selected' : '' }}>
                                                🏨 Otel
                                            </option>
                                            <option
                                                value="mountain" {{ old('icon', $folder->icon) == 'mountain' ? 'selected' : '' }}>
                                                🏔️ Dağ
                                            </option>
                                            <option
                                                value="beach-ball" {{ old('icon', $folder->icon) == 'beach-ball' ? 'selected' : '' }}>
                                                🏖️ Plaj
                                            </option>
                                            <option
                                                value="utensils" {{ old('icon', $folder->icon) == 'utensils' ? 'selected' : '' }}>
                                                🍴 Yemek
                                            </option>
                                            <option
                                                value="star" {{ old('icon', $folder->icon) == 'star' ? 'selected' : '' }}>
                                                ⭐ Yıldız
                                            </option>
                                            <option
                                                value="heart" {{ old('icon', $folder->icon) == 'heart' ? 'selected' : '' }}>
                                                ❤️ Kalp
                                            </option>
                                        </select>
                                        @error('icon')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Görünürlük</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', $folder->is_public) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="is_public">
                                                Herkese Açık
                                            </label>
                                            <div class="form-text">Bu klasör herkese açık olacak mı?</div>
                                        </div>
                                        @error('is_public')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </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="3"
                                          placeholder="Klasör hakkında açıklama yazınız...">{{ old('description', $folder->description) }}</textarea>
                                @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="d-flex justify-content-between">
                                <div>
                                    <button type="button" class="btn btn-danger" onclick="deleteFolder()">
                                        <i class="fas fa-trash"></i> Klasörü Sil
                                    </button>
                                </div>
                                <div class="d-flex gap-2">
                                    <a href="{{ route('agency.disk.folders.show', $folder) }}"
                                       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>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Önizleme ve Bilgiler -->
            <div class="col-lg-4">
                <!-- Ö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 id="folder-preview" class="mb-3">
                            <i class="fas fa-folder fa-4x mb-2" id="preview-folder"
                               style="color: {{ $folder->color_code ?? '#6c757d' }};"></i>
                            <i class="fas fa-{{ $folder->icon ?? 'camera' }} position-absolute" id="preview-icon"
                               style="top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 1.2rem; {{ $folder->icon ? '' : 'display: none;' }}"></i>
                        </div>
                        <h6 id="preview-name" class="text-gray-800">{{ $folder->name }}</h6>
                        <p id="preview-type" class="small text-muted mb-1">{{ ucfirst($folder->folder_type) }}</p>
                        <p id="preview-parent" class="small text-muted">
                            Ana Klasör: {{ $folder->parent?->name ?? 'Yok' }}
                        </p>
                        <div id="preview-public" class="mt-2" style="{{ $folder->is_public ? '' : 'display: none;' }}">
                            <span class="badge bg-success">Herkese Açık</span>
                        </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-4">
                                <div class="text-muted small">Dosyalar</div>
                                <div class="h5 mb-0">{{ $folder->item_count }}</div>
                            </div>
                            <div class="col-4">
                                <div class="text-muted small">Boyut</div>
                                <div class="h5 mb-0">{{ number_format($folder->total_size_kb / 1024, 1) }} MB</div>
                            </div>
                            <div class="col-4">
                                <div class="text-muted small">Alt Klasör</div>
                                <div class="h5 mb-0">{{ $folder->children->count() }}</div>
                            </div>
                        </div>

                        <div class="small">
                            <div class="mb-2">
                                <strong>Oluşturulma:</strong> {{ $folder->created_at->format('d.m.Y H:i') }}
                            </div>
                            <div class="mb-2">
                                <strong>Son Güncelleme:</strong> {{ $folder->updated_at->format('d.m.Y H:i') }}
                            </div>
                            @if($folder->creator)
                                <div class="mb-2">
                                    <strong>Oluşturan:</strong> {{ $folder->creator->full_name }}
                                </div>
                            @endif
                            <div class="mb-2">
                                <strong>Path:</strong> <code>{{ $folder->path }}</code>
                            </div>
                            <div class="mb-2">
                                <strong>Seviye:</strong> {{ $folder->level }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Uyarılar -->
                @if($folder->item_count > 0 || $folder->children->count() > 0)
                    <div class="card shadow border-warning">
                        <div class="card-header py-3 bg-warning">
                            <h6 class="m-0 font-weight-bold text-dark">⚠️ Uyarı</h6>
                        </div>
                        <div class="card-body">
                            <div class="small">
                                @if($folder->item_count > 0)
                                    <div class="mb-2">
                                        Bu klasörde <strong>{{ $folder->item_count }} dosya</strong> bulunuyor.
                                    </div>
                                @endif
                                @if($folder->children->count() > 0)
                                    <div class="mb-2">
                                        Bu klasörde <strong>{{ $folder->children->count() }} alt klasör</strong>
                                        bulunuyor.
                                    </div>
                                @endif
                                <div class="text-danger">
                                    <strong>Klasörü silerseniz tüm içerik kalıcı olarak silinecektir!</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </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">Klasörü Sil</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger">
                        <h6><i class="fas fa-exclamation-triangle"></i> Dikkat!</h6>
                        <p class="mb-2">Bu işlem geri alınamaz ve aşağıdaki içerikler kalıcı olarak silinecektir:</p>
                        <ul class="mb-2">
                            @if($folder->item_count > 0)
                                <li>{{ $folder->item_count }} dosya dosyası</li>
                            @endif
                            @if($folder->children->count() > 0)
                                <li>{{ $folder->children->count() }} alt klasör ve içerikleri</li>
                            @endif
                            <li>Tüm klasör ayarları ve izinleri</li>
                        </ul>
                    </div>

                    <p><strong>Silmek istediğiniz klasör:</strong> {{ $folder->name }}</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 klasörü 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.folders.destroy', $folder) }}"
                          style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger" id="deleteBtn" disabled>
                            <i class="fas fa-trash"></i> Klasörü Sil
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const nameInput = document.getElementById('name');
            const typeSelect = document.getElementById('folder_type');
            const parentSelect = document.getElementById('parent_id');
            const colorInput = document.getElementById('color_code');
            const colorText = document.getElementById('color_text');
            const iconSelect = document.getElementById('icon');
            const publicCheck = document.getElementById('is_public');

            const previewName = document.getElementById('preview-name');
            const previewType = document.getElementById('preview-type');
            const previewParent = document.getElementById('preview-parent');
            const previewFolder = document.getElementById('preview-folder');
            const previewIcon = document.getElementById('preview-icon');
            const previewPublic = document.getElementById('preview-public');

            // Önizleme güncellemeleri
            function updatePreview() {
                // İsim
                previewName.textContent = nameInput.value || 'Klasör Adı';

                // Tür
                const typeText = typeSelect.options[typeSelect.selectedIndex].text;
                previewType.textContent = typeSelect.value ? typeText : 'Tür';

                // Ana klasör
                const parentText = parentSelect.options[parentSelect.selectedIndex].text;
                previewParent.textContent = 'Ana Klasör: ' + (parentSelect.value ? parentText : 'Yok');

                // Renk
                previewFolder.style.color = colorInput.value;
                colorText.value = colorInput.value;

                // İkon
                if (iconSelect.value) {
                    previewIcon.className = `fas fa-${iconSelect.value} position-absolute`;
                    previewIcon.style.display = 'block';
                } else {
                    previewIcon.style.display = 'none';
                }

                // Public
                if (publicCheck.checked) {
                    previewPublic.style.display = 'block';
                } else {
                    previewPublic.style.display = 'none';
                }
            }

            // Event listeners
            nameInput.addEventListener('input', updatePreview);
            typeSelect.addEventListener('change', updatePreview);
            parentSelect.addEventListener('change', updatePreview);
            colorInput.addEventListener('change', updatePreview);
            iconSelect.addEventListener('change', updatePreview);
            publicCheck.addEventListener('change', updatePreview);

            // Renk input sync
            colorInput.addEventListener('input', function () {
                colorText.value = this.value;
                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 name = nameInput.value.trim();
                const type = typeSelect.value;

                if (!name) {
                    e.preventDefault();
                    nameInput.focus();
                    alert('Lütfen klasör adını giriniz.');
                    return false;
                }

                if (!type) {
                    e.preventDefault();
                    typeSelect.focus();
                    alert('Lütfen klasör türünü seçiniz.');
                    return false;
                }
            });
        });

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

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

        #folder-preview {
            position: relative;
            display: inline-block;
        }

        .form-control-color {
            width: 3rem;
            height: calc(2.25rem + 2px);
            padding: 0.375rem;
        }

        .invalid-feedback {
            display: block;
        }
    </style>
@endpush