@extends('admin.layouts.app')

@section('title', 'Yeni Slider')
@section('header', 'Yeni Slider')

@section('content')
<div class="card">
    <form action="{{ route('admin.sliders.store') }}" method="POST" enctype="multipart/form-data" id="slider-form">
        @csrf

        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group">
                        <label for="title">Başlık <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('title') is-invalid @enderror"
                               id="title" name="title" value="{{ old('title') }}" required>
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="description">Açıklama</label>
                        <textarea class="form-control ckeditor @error('description') is-invalid @enderror"
                                  id="description" name="description" rows="4">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="image">Görsel <span class="text-danger">*</span></label>
                        <div class="image-upload-container">
                            <div class="upload-area border rounded p-3 text-center bg-light">
                                <input type="file" class="d-none @error('image') is-invalid @enderror"
                                       id="image" name="image" accept="image/jpeg,image/png,image/webp" required>
                                <label for="image" class="mb-0 cursor-pointer">
                                    <div class="upload-icon mb-3">
                                        <i class="fas fa-cloud-upload-alt fa-3x text-primary"></i>
                                    </div>
                                    <h5 class="text-primary">Görsel yüklemek için tıklayın</h5>
                                    <p class="text-muted small">
                                        Önerilen boyut: 1920x1080px<br>
                                        Maximum dosya boyutu: 5MB<br>
                                        JPG, PNG veya WebP formatında
                                    </p>
                                </label>
                            </div>
                            @error('image')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                            <div id="image-preview-container" class="mt-3">
                                <!-- Seçilen görsel burada gösterilecek -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-footer">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save mr-1"></i> Kaydet
            </button>
            <a href="{{ route('admin.sliders.index') }}" class="btn btn-secondary">
                <i class="fas fa-times mr-1"></i> İptal
            </a>
        </div>
    </form>
</div>
@endsection

@push('styles')
<style>
.ck-editor__editable {
    min-height: 200px;
}
.ck-editor__editable_inline {
    padding: 0 15px !important;
}

.upload-area {
    min-height: 200px;
    border: 2px dashed #007bff !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-area:hover {
    border-color: #0056b3 !important;
    background-color: #f8f9fa !important;
}

.image-preview-container img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0.25rem;
}

.cursor-pointer {
    cursor: pointer;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // CKEditor
    initCKEditor('#description');

    // Image upload and preview
    const imageInput = document.getElementById('image');
    const previewContainer = document.getElementById('image-preview-container');
    const maxFileSize = 5 * 1024 * 1024; // 5MB

    imageInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        
        if (!file) {
            previewContainer.innerHTML = '';
            return;
        }

        // Check file size
        if (file.size > maxFileSize) {
            toastr.error('Dosya boyutu çok büyük. Maximum dosya boyutu 5MB olmalıdır.');
            this.value = '';
            previewContainer.innerHTML = '';
            return;
        }

        // Check file type
        if (!file.type.match('image/(jpeg|png|webp)')) {
            toastr.error('Desteklenmeyen dosya formatı. Sadece JPG, PNG ve WebP formatları desteklenir.');
            this.value = '';
            previewContainer.innerHTML = '';
            return;
        }

        // Create preview
        const reader = new FileReader();
        reader.onload = function(e) {
            previewContainer.innerHTML = `
                <img src="${e.target.result}" class="img-fluid shadow-sm" alt="Görsel Önizleme">
            `;
        };
        reader.readAsDataURL(file);
    });

    // Form submit
    document.getElementById('slider-form').addEventListener('submit', function(e) {
        e.preventDefault();
        const form = this;
        const submitButton = form.querySelector('button[type="submit"]');

        submitButton.disabled = true;
        submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Kaydediliyor...';

        const formData = new FormData(form);

        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                toastr.success(data.message);
                setTimeout(() => {
                    window.location.href = data.redirect;
                }, 1000);
            } else {
                toastr.error(data.message || 'Bir hata oluştu');
                submitButton.disabled = false;
                submitButton.innerHTML = '<i class="fas fa-save mr-1"></i> Kaydet';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            toastr.error('Bir hata oluştu. Lütfen tekrar deneyin.');
            submitButton.disabled = false;
            submitButton.innerHTML = '<i class="fas fa-save mr-1"></i> Kaydet';
        });
    });
});
</script>
@endpush