@php
    $isEdit = isset($product);
    $route = $isEdit ? route('admin.products.update', $product) : route('admin.products.store');
@endphp

<form action="{{ $route }}" method="POST" enctype="multipart/form-data" id="productForm">
    @csrf
    @if($isEdit)
        @method('PUT')
    @endif

    <div class="row">
        <div class="col-md-8">
            <!-- Ana Bilgiler -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Ürün Bilgileri</h3>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="category_id">Kategori</label>
                        <select name="category_id" id="category_id" class="form-control @error('category_id') is-invalid @enderror" required>
                            <option value="">Kategori Seçin</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id', $product->category_id ?? '') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="name">Ürün Adı</label>
                        <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name', $product->name ?? '') }}" required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

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

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

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="price">Fiyat</label>
                                <input type="number" name="price" id="price" class="form-control @error('price') is-invalid @enderror"
                                       value="{{ old('price', $product->price ?? '') }}" step="0.01" required>
                                @error('price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Ağırlık Seçenekleri -->
                    <div class="card mt-4">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <h3 class="card-title mb-0">Ağırlık Seçenekleri</h3>
                                <button type="button" class="btn btn-sm btn-primary" id="addWeightBtn" title="Yeni Ağırlık Ekle">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                            
                        </div>
                        <div class="card-body">
                            <p class="text-muted mb-3">Bu ürün için müşterilere sunulacak ağırlık seçeneklerini belirleyin. En az bir ağırlık seçeneği tanımlanmalıdır.</p>
                            
                            <div id="weightOptionsContainer">
                                @if($isEdit && $product->weights->count() > 0)
                                    @foreach($product->weights as $weightOption)
                                        <div class="weight-option-item mb-3 border rounded p-3 position-relative">
                                            <div class="row align-items-center">
                                                <div class="col-md-3">
                                                    <div class="form-group mb-0">
                                                        <label>Ağırlık (kg)</label>
                                                        <input type="number" 
                                                               name="weights[{{ $loop->index }}][weight]" 
                                                               class="form-control"
                                                               value="{{ $weightOption->weight }}" 
                                                               step="0.1" 
                                                               min="0.1" 
                                                               required>
                                                        <input type="hidden" 
                                                               name="weights[{{ $loop->index }}][id]" 
                                                               value="{{ $weightOption->id }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group mb-0">
                                                        <label>Varsayılan</label>
                                                        <div class="custom-control custom-radio">
                                                            <input type="radio" 
                                                                   id="default_{{ $loop->index }}" 
                                                                   name="default_weight" 
                                                                   class="custom-control-input"
                                                                   value="{{ $loop->index }}" 
                                                                   {{ $weightOption->is_default ? 'checked' : '' }}>
                                                            <label class="custom-control-label" for="default_{{ $loop->index }}">Varsayılan Olarak Ayarla</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group mb-0">
                                                        <label>Durum</label>
                                                        <div class="custom-control custom-switch">
                                                            <input type="checkbox" 
                                                                   class="custom-control-input" 
                                                                   id="active_{{ $loop->index }}"
                                                                   name="weights[{{ $loop->index }}][is_active]" 
                                                                   value="1"
                                                                   {{ $weightOption->is_active ? 'checked' : '' }}>
                                                            <label class="custom-control-label" for="active_{{ $loop->index }}">Aktif</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-1 text-right">
                                                    <button type="button" class="btn btn-sm btn-danger remove-weight-btn" title="Kaldır">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="weight-option-item mb-3 border rounded p-3 position-relative">
                                        <div class="row align-items-center">
                                            <div class="col-md-3">
                                                <div class="form-group mb-0">
                                                    <label>Ağırlık (kg)</label>
                                                    <input type="number" 
                                                           name="weights[0][weight]" 
                                                           class="form-control"
                                                           value="1" 
                                                           step="0.1" 
                                                           min="0.1" 
                                                           required>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group mb-0">
                                                    <label>Varsayılan</label>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" 
                                                               id="default_0" 
                                                               name="default_weight" 
                                                               class="custom-control-input"
                                                               value="0" 
                                                               checked>
                                                        <label class="custom-control-label" for="default_0">Varsayılan Olarak Ayarla</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group mb-0">
                                                    <label>Durum</label>
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" 
                                                               class="custom-control-input" 
                                                               id="active_0"
                                                               name="weights[0][is_active]" 
                                                               value="1"
                                                               checked>
                                                        <label class="custom-control-label" for="active_0">Aktif</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-1 text-right">
                                                <button type="button" class="btn btn-sm btn-danger remove-weight-btn" title="Kaldır">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            
                            <script type="text/template" id="weightOptionsTemplate">
                                <div class="weight-option-item mb-3 border rounded p-3 position-relative">
                                    <div class="row align-items-center">
                                        <div class="col-md-3">
                                            <div class="form-group mb-0">
                                                <label>Ağırlık (kg)</label>
                                                <input type="number" 
                                                       name="weights[__INDEX__][weight]" 
                                                       class="form-control"
                                                       value="" 
                                                       step="0.1" 
                                                       min="0.1" 
                                                       required>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group mb-0">
                                                <label>Varsayılan</label>
                                                <div class="custom-control custom-radio">
                                                    <input type="radio" 
                                                           id="default___INDEX__" 
                                                           name="default_weight" 
                                                           class="custom-control-input"
                                                           value="__INDEX__">
                                                    <label class="custom-control-label" for="default___INDEX__">Varsayılan Olarak Ayarla</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group mb-0">
                                                <label>Durum</label>
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox" 
                                                           class="custom-control-input" 
                                                           id="active___INDEX__"
                                                           name="weights[__INDEX__][is_active]" 
                                                           value="1"
                                                           checked>
                                                    <label class="custom-control-label" for="active___INDEX__">Aktif</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-1 text-right">
                                            <button type="button" class="btn btn-sm btn-danger remove-weight-btn" title="Kaldır">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </script>
                        </div>
                    </div>
                </div>
            </div>

            <!-- İçindekiler -->
            <div class="card mt-4">
                <div class="card-header">
                    <h3 class="card-title">İçindekiler</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        @foreach($allergens as $allergen)
                            <div class="col-md-3 col-sm-4 col-6">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input"
                                           id="allergen_{{ $allergen->id }}"
                                           name="allergens[]"
                                           value="{{ $allergen->id }}"
                                           {{ in_array($allergen->id, old('allergens', $isEdit ? $product->allergens->pluck('id')->toArray() : [])) ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="allergen_{{ $allergen->id }}">{{ $allergen->name }}</label>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @error('allergens')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <!-- Ürün Durumu -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Ürün Durumu</h3>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="hidden" name="is_available" value="0">
                            <input type="checkbox" class="custom-control-input" id="is_available" name="is_available" value="1"
                                {{ old('is_available', $product->is_available ?? true) ? 'checked' : '' }}>
                            <label class="custom-control-label" for="is_available">Ürün Aktif</label>
                        </div>
                        <small class="form-text text-muted">Ürünün sitede görünüp görünmeyeceğini belirler.</small>
                    </div>

                    <div class="form-group mt-3">
                        <div class="custom-control custom-switch">
                            <input type="hidden" name="is_featured" value="0">
                            <input type="checkbox" class="custom-control-input" id="is_featured" name="is_featured" value="1"
                                {{ old('is_featured', $product->is_featured ?? false) ? 'checked' : '' }}>
                            <label class="custom-control-label" for="is_featured">Öne Çıkan Ürün</label>
                        </div>
                        <small class="form-text text-muted">Ürünün ana sayfada öne çıkan ürünler bölümünde gösterilip gösterilmeyeceğini belirler.</small>
                    </div>

                    <div class="form-group mt-3">
                        <div class="custom-control custom-switch">
                            <input type="hidden" name="is_online_orderable" value="0">
                            <input type="checkbox" class="custom-control-input" id="is_online_orderable" name="is_online_orderable" value="1"
                                {{ old('is_online_orderable', $product->is_online_orderable ?? true) ? 'checked' : '' }}>
                            <label class="custom-control-label" for="is_online_orderable">Online Sipariş Verilebilir</label>
                        </div>
                        <small class="form-text text-muted">Ürünün online sipariş verilebilir olup olmadığını belirler. Kapalı ise ürün sitede görünür ancak sepete eklenemez.</small>
                    </div>

                    <div class="form-group mt-3">
                        <div class="custom-control custom-switch">
                            <input type="hidden" name="has_free_delivery" value="0">
                            <input type="checkbox" class="custom-control-input" id="has_free_delivery" name="has_free_delivery" value="1"
                                {{ old('has_free_delivery', $product->has_free_delivery ?? false) ? 'checked' : '' }}>
                            <label class="custom-control-label" for="has_free_delivery">Ücretsiz Teslimat</label>
                        </div>
                        <small class="form-text text-muted">Bu ürün sepete eklendiğinde teslimat ücreti ücretsiz olacaktır.</small>
                    </div>
                </div>
            </div>

            <!-- Ürün Görselleri -->
            <div class="card mt-4">
                <div class="card-header">
                    <h3 class="card-title">Ürün Görselleri</h3>
                </div>
                <div class="card-body">
                    @if($isEdit && $product->images->count() > 0)
                        <div class="existing-images mb-4">
                            <h5 class="mb-3">Mevcut Görseller</h5>
                            <div class="row">
                                @foreach($product->images as $image)
                                    <div class="col-md-6 mb-3">
                                        <div class="position-relative">
                                            <img src="{{ asset('storage/' . $image->image_path) }}" class="img-fluid rounded" alt="{{ $product->name }}">
                                            <div class="position-absolute" style="top: 5px; right: 5px;">
                                                <div class="btn-group">
                                                    <form action="{{ route('admin.product-images.set-cover', $image) }}" method="POST" class="d-inline">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="submit" class="btn btn-sm {{ $image->is_cover ? 'btn-warning' : 'btn-light' }}">
                                                            <i class="fas {{ $image->is_cover ? 'fa-star' : 'fa-star-o' }}"></i>
                                                        </button>
                                                    </form>
                                                    <form action="{{ route('admin.product-images.destroy', $image) }}" method="POST" class="d-inline delete-image-form">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-danger">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <div class="form-group">
                        <label for="images">Yeni Görseller</label>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="images" name="images[]" multiple accept="image/*">
                            <label class="custom-file-label" for="images">Dosya seçin...</label>
                        </div>
                        <small class="form-text text-muted">
                            Birden fazla görsel seçebilirsiniz. İzin verilen formatlar: JPG, PNG, WebP. Maksimum dosya boyutu: 10MB.
                        </small>
                        <div id="file-size-warning" class="text-danger mt-2" style="display: none;">
                            Uyarı: Seçilen dosyalardan bazıları 10MB'dan büyük. Büyük dosyalar yüklenirken hata oluşabilir.
                        </div>
                    </div>
                </div>
            </div>

            <!-- Kaydet -->
            <div class="card mt-4">
                <div class="card-body">
                    <button type="submit" class="btn btn-success btn-block" form="productForm">
                        <i class="fas fa-save mr-1"></i> {{ $isEdit ? 'Güncelle' : 'Kaydet' }}
                    </button>
                    <a href="{{ route('admin.products.index') }}" class="btn btn-secondary btn-block">
                        <i class="fas fa-arrow-left mr-1"></i> Geri
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>

@push('styles')
<style>
.upload-area {
    min-height: 200px;
    border: 2px dashed #007bff !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

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

.image-preview {
    position: relative;
    margin-bottom: 1rem;
}

.image-preview img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
}

.image-preview .remove-image {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
    color: #dc3545;
    padding: 0;
}

.image-preview .remove-image:hover {
    background: #fff;
    color: #bd2130;
}
</style>
@endpush

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

    // Image Upload Handler
    const imageUpload = document.getElementById('imageUpload');
    const previewContainer = document.getElementById('imagePreviewContainer');
    const maxFiles = 10;
    const maxFileSize = 5 * 1024 * 1024; // 5MB
    let selectedFiles = [];

    imageUpload.addEventListener('change', function(e) {
        const files = Array.from(e.target.files);
        
        // Dosya sayısı kontrolü
        if (selectedFiles.length + files.length > maxFiles) {
            alert(`En fazla ${maxFiles} adet görsel yükleyebilirsiniz.`);
            return;
        }

        files.forEach(file => {
            // Dosya boyutu kontrolü
            if (file.size > maxFileSize) {
                alert(`${file.name} dosyası çok büyük. Maximum dosya boyutu 5MB olmalıdır.`);
                return;
            }

            // Dosya tipi kontrolü
            if (!file.type.match('image/(jpeg|png|webp)')) {
                alert(`${file.name} desteklenmeyen dosya formatı. Sadece JPG, PNG ve WebP formatları desteklenir.`);
                return;
            }

            // Önizleme oluştur
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.createElement('div');
                preview.className = 'col-md-6 col-lg-4 image-preview';
                preview.innerHTML = `
                    <div class="position-relative">
                        <img src="${e.target.result}" class="img-fluid" alt="Preview">
                        <button type="button" class="remove-image">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                `;

                // Silme butonu işlevselliği
                const removeBtn = preview.querySelector('.remove-image');
                removeBtn.addEventListener('click', function() {
                    preview.remove();
                    selectedFiles = selectedFiles.filter(f => f !== file);
                });

                previewContainer.appendChild(preview);
                selectedFiles.push(file);
            };
            reader.readAsDataURL(file);
        });
    });

    // Mevcut görsellerin silinmesi
    document.querySelectorAll('.delete-image-form').forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (confirm('Bu görseli silmek istediğinizden emin misiniz?')) {
                this.submit();
            }
        });
    });

    // Dosya boyutu kontrolü
    const imagesInput = document.getElementById('images');
    const fileSizeWarning = document.getElementById('file-size-warning');
    const maxFileSize = 10 * 1024 * 1024; // 10MB
    
    imagesInput.addEventListener('change', function() {
        let hasLargeFile = false;
        
        for (let i = 0; i < this.files.length; i++) {
            if (this.files[i].size > maxFileSize) {
                hasLargeFile = true;
                break;
            }
        }
        
        fileSizeWarning.style.display = hasLargeFile ? 'block' : 'none';
    });
    
    // Form gönderilmeden önce kontrol
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        if (imagesInput.files.length > 0) {
            for (let i = 0; i < imagesInput.files.length; i++) {
                if (imagesInput.files[i].size > maxFileSize) {
                    if (!confirm('Bazı dosyalar 10MB\'dan büyük. Bu, yükleme hatalarına neden olabilir. Devam etmek istiyor musunuz?')) {
                        e.preventDefault();
                        return false;
                    }
                    break;
                }
            }
        }
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Weight options management
    const addWeightBtn = document.getElementById('addWeightBtn');
    const weightOptionsContainer = document.getElementById('weightOptionsContainer');
    const weightOptionsTemplate = document.getElementById('weightOptionsTemplate').innerHTML;
    
    // Add new weight option
    addWeightBtn.addEventListener('click', function() {
        const weightOptionItems = document.querySelectorAll('.weight-option-item');
        const newIndex = weightOptionItems.length;
        
        // Replace the template placeholders with the actual index
        let newWeightOption = weightOptionsTemplate.replace(/__INDEX__/g, newIndex);
        
        // Create a temporary container to convert the string to DOM elements
        const tempContainer = document.createElement('div');
        tempContainer.innerHTML = newWeightOption;
        
        // Append to the container
        weightOptionsContainer.appendChild(tempContainer.firstElementChild);
        
        // Initialize event listeners for the new item
        initWeightOptionEvents();
    });
    
    // Initialize event listeners for weight option items
    function initWeightOptionEvents() {
        // Remove weight option
        document.querySelectorAll('.remove-weight-btn').forEach(button => {
            button.removeEventListener('click', removeWeightOption);
            button.addEventListener('click', removeWeightOption);
        });
    }
    
    // Remove weight option handler
    function removeWeightOption() {
        const weightOptionItem = this.closest('.weight-option-item');
        
        // Check if there's more than one weight option
        const weightOptionItems = document.querySelectorAll('.weight-option-item');
        if (weightOptionItems.length > 1) {
            weightOptionItem.remove();
            
            // If the removed item was the default, set the first item as default
            const defaultInput = document.querySelector('input[name="default_weight"]:checked');
            if (!defaultInput) {
                const firstDefaultInput = document.querySelector('input[name="default_weight"]');
                if (firstDefaultInput) {
                    firstDefaultInput.checked = true;
                }
            }
            
            // Update indices for all weights
            updateWeightIndices();
        } else {
            alert('En az bir ağırlık seçeneği olmalıdır.');
        }
    }
    
    // Update weight indices after removing an item
    function updateWeightIndices() {
        const weightOptionItems = document.querySelectorAll('.weight-option-item');
        
        weightOptionItems.forEach((item, index) => {
            // Update all input names and ids with new index
            item.querySelectorAll('input[name^="weights["]').forEach(input => {
                const name = input.name;
                const newName = name.replace(/weights\[\d+\]/, `weights[${index}]`);
                input.name = newName;
            });
            
            // Update default radio buttons
            const defaultRadio = item.querySelector('input[name="default_weight"]');
            if (defaultRadio) {
                defaultRadio.id = `default_${index}`;
                defaultRadio.value = index.toString();
                
                const label = item.querySelector(`label[for^="default_"]`);
                if (label) {
                    label.setAttribute('for', `default_${index}`);
                }
            }
            
            // Update active switch
            const activeSwitch = item.querySelector('input[id^="active_"]');
            if (activeSwitch) {
                activeSwitch.id = `active_${index}`;
                activeSwitch.name = `weights[${index}][is_active]`;
                
                const label = item.querySelector(`label[for^="active_"]`);
                if (label) {
                    label.setAttribute('for', `active_${index}`);
                }
            }
        });
    }
    
    // Initialize events for existing weight options
    initWeightOptionEvents();
});
</script>
@endpush