@extends('admin.layouts.app')

@section('title', 'Yeni Blok Ekle')

@section('content')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Yeni Blok Ekle</h1>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <form action="{{ route('admin.blocks.store') }}" method="POST" enctype="multipart/form-data" id="block-form">
            @csrf
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="form-group">
                                <label for="name">İsim <span class="text-danger">*</span></label>
                                <input type="text"
                                       class="form-control @error('name') is-invalid @enderror"
                                       id="name"
                                       name="name"
                                       value="{{ old('name') }}"
                                       required>
                                @error('name')
                                <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                                <small class="form-text text-muted">Bu isim sadece yönetim panelinde görünecektir.</small>
                            </div>

                            <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')
                                <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="content">İçerik <span class="text-danger">*</span></label>
                                <textarea class="form-control @error('content') is-invalid @enderror"
                                          id="content"
                                          name="content"
                                          rows="5"
                                          required>{{ old('content') }}</textarea>
                                @error('content')
                                <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="image">Görsel</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">
                                        <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">
                                                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 class="card-footer">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save mr-1"></i> Kaydet
                            </button>
                            <a href="{{ route('admin.blocks.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times mr-1"></i> İptal
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('styles')
<style>
.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%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 0.25rem;
}

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

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 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('block-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