@extends('agency.layouts.app')

@section('title', 'Yeni Klasör Oluştur')

@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">Yeni Klasör Oluştur</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 active">Yeni Klasör</li>
                    </ol>
                </nav>
            </div>
            <div>
                <a href="{{ route('agency.disk.folders.index') }}" 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 Bilgileri</h6>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('agency.disk.folders.store') }}" method="POST">
                            @csrf

                            <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') }}"
                                               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') == 'general' ? 'selected' : '' }}>
                                                Genel
                                            </option>
                                            <option value="tour" {{ old('folder_type') == 'tour' ? 'selected' : '' }}>
                                                Tur
                                            </option>
                                            <option value="hotel" {{ old('folder_type') == 'hotel' ? 'selected' : '' }}>
                                                Otel
                                            </option>
                                            <option
                                                value="transport" {{ old('folder_type') == 'transport' ? 'selected' : '' }}>
                                                Ulaşım
                                            </option>
                                            <option
                                                value="activity" {{ old('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 $folder)
                                                <option
                                                    value="{{ $folder->id }}" {{ old('parent_id') == $folder->id ? 'selected' : '' }}>
                                                    {{ str_repeat('└── ', $folder->level) }}{{ $folder->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', '#6c757d') }}">
                                            <input type="text" class="form-control" id="color_text"
                                                   value="{{ old('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') == 'camera' ? 'selected' : '' }}>📷
                                                Kamera
                                            </option>
                                            <option value="map" {{ old('icon') == 'map' ? 'selected' : '' }}>🗺️ Harita
                                            </option>
                                            <option value="plane" {{ old('icon') == 'plane' ? 'selected' : '' }}>✈️
                                                Uçak
                                            </option>
                                            <option value="bus" {{ old('icon') == 'bus' ? 'selected' : '' }}>🚌 Otobüs
                                            </option>
                                            <option value="hotel" {{ old('icon') == 'hotel' ? 'selected' : '' }}>🏨
                                                Otel
                                            </option>
                                            <option value="mountain" {{ old('icon') == 'mountain' ? 'selected' : '' }}>
                                                🏔️ Dağ
                                            </option>
                                            <option
                                                value="beach-ball" {{ old('icon') == 'beach-ball' ? 'selected' : '' }}>
                                                🏖️ Plaj
                                            </option>
                                            <option value="utensils" {{ old('icon') == 'utensils' ? 'selected' : '' }}>
                                                🍴 Yemek
                                            </option>
                                            <option value="star" {{ old('icon') == 'star' ? 'selected' : '' }}>⭐
                                                Yıldız
                                            </option>
                                            <option value="heart" {{ old('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') ? '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') }}</textarea>
                                @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ route('agency.disk.folders.index') }}" 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> Klasör Oluştur
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Önizleme -->
            <div class="col-lg-4">
                <div class="card shadow">
                    <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: #6c757d;"></i>
                            <i class="fas fa-camera position-absolute" id="preview-icon"
                               style="top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 1.2rem; display: none;"></i>
                        </div>
                        <h6 id="preview-name" class="text-muted">Klasör Adı</h6>
                        <p id="preview-type" class="small text-muted mb-1">Tür</p>
                        <p id="preview-parent" class="small text-muted">Ana Klasör</p>
                        <div id="preview-public" class="mt-2" style="display: none;">
                            <span class="badge bg-success">Herkese Açık</span>
                        </div>
                    </div>
                </div>

                <!-- Yardım -->
                <div class="card shadow mt-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-info">💡 İpuçları</h6>
                    </div>
                    <div class="card-body">
                        <div class="small">
                            <div class="mb-2">
                                <strong>Klasör Türleri:</strong>
                                <ul class="mb-2">
                                    <li><strong>Genel:</strong> Genel amaçlı Dosyalar</li>
                                    <li><strong>Tur:</strong> Tur programlarına ait Dosyalar</li>
                                    <li><strong>Otel:</strong> Otel ve konaklama Dosyalari</li>
                                    <li><strong>Ulaşım:</strong> Araç ve ulaşım Dosyalari</li>
                                    <li><strong>Aktivite:</strong> Etkinlik Dosyalari</li>
                                </ul>
                            </div>
                            <div class="mb-2">
                                <strong>Hiyerarşi:</strong> Ana klasör seçerek alt klasörler oluşturabilirsiniz.
                            </div>
                            <div class="mb-2">
                                <strong>Renk Kodları:</strong> Klasörleri ayırt etmek için farklı renkler kullanın.
                            </div>
                        </div>
                    </div>
                </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 = parentSelect.value ? parentText : 'Ana Klasör: 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();
            });

            // 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;
                }
            });

            // İlk önizleme
            updatePreview();
        });
    </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