@extends('admin.layouts.app')

@section('title', isset($product) ? 'Məhsulu dəyiş' : 'Yeni məhsul')

@section('content')
@php
    $editingProduct = $product ?? null;
    $productColors = collect(old('color_name') !== null
        ? collect(old('color_name', []))->map(fn ($name, $index) => [
            'name' => $name,
            'hex' => old("color_hex.$index", '#c77d4a'),
        ])->all()
        : ($editingProduct?->color_variants ?? [])
    )->filter(fn ($color) => !empty($color['name']) || !empty($color['hex']))->values();

    if ($productColors->isEmpty()) {
        $productColors = collect([['name' => '', 'hex' => '#c77d4a']]);
    }
@endphp
<div class="admin-header-row">
    <div>
        <h1 class="admin-title">{{ isset($product) ? 'Məhsulu dəyiş' : 'Yeni məhsul' }}</h1>
        <p class="admin-page-description">Məhsulun əsas məlumatlarını daxil edin. Ana səhifədə görünməsi ayrıca “Ana səhifə məhsulları” bölməsindən seçilir.</p>
    </div>
    <a href="{{ route('admin.products.index') }}" class="admin-btn admin-btn-secondary">Siyahıya qayıt</a>
</div>

<form method="POST" action="{{ isset($product) ? route('admin.products.update', $product) : route('admin.products.store') }}" enctype="multipart/form-data" class="simple-admin-form">
    @csrf
    @if(isset($product)) @method('PUT') @endif

    <div class="admin-card">
        <div class="simple-admin-heading"><span>1</span><div><h2>Əsas məlumatlar</h2><p>Məhsulun adı və aid olduğu kateqoriya.</p></div></div>
        <div class="admin-form-group">
            <label>Kateqoriya *</label>
            <select name="category_id" class="admin-form-control" required>
                <option value="">Kateqoriya seçin</option>
                @foreach($categories as $category)
                    <option value="{{ $category->id }}" {{ old('category_id', $product->category_id ?? '') == $category->id ? 'selected' : '' }}>
                        {{ $category->parent_id ? '— ' : '' }}{{ $category->name }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="admin-form-group"><label>Məhsul adı (AZ) *</label><input name="name" class="admin-form-control" required value="{{ old('name', $product->name ?? '') }}"></div>
        <details class="admin-details">
            <summary>İngilis və rus dilində ad</summary>
            <div class="admin-details__content admin-form-grid">
                <div class="admin-form-group"><label>Ad (EN)</label><input name="name_en" class="admin-form-control" value="{{ old('name_en', $product->name_en ?? '') }}"></div>
                <div class="admin-form-group"><label>Ad (RU)</label><input name="name_ru" class="admin-form-control" value="{{ old('name_ru', $product->name_ru ?? '') }}"></div>
            </div>
        </details>
        <div class="admin-form-group"><label>Məhsul haqqında</label><textarea name="description" rows="5" class="admin-form-control">{{ old('description', $product->description ?? '') }}</textarea></div>
    </div>

    <div class="admin-card">
        <div class="simple-admin-heading"><span>2</span><div><h2>Qiymət və şəkil</h2><p>Endirim yoxdursa köhnə qiyməti boş saxlayın.</p></div></div>
        <div class="admin-form-grid">
            <div class="admin-form-group"><label>Qiymət (AZN) *</label><input type="number" step="0.01" min="0" name="price" class="admin-form-control" required value="{{ old('price', $product->price ?? '') }}"></div>
            <div class="admin-form-group"><label>Köhnə qiymət (AZN)</label><input type="number" step="0.01" min="0" name="old_price" class="admin-form-control" value="{{ old('old_price', $product->old_price ?? '') }}"></div>
        </div>
        <div class="admin-form-group">
            <label>Rəng seçimləri</label>
            <div class="product-colors-editor" data-product-colors-editor>
                <div data-product-colors-list>
                    @foreach($productColors as $color)
                        <div class="product-color-row" data-product-color-row>
                            <input name="color_name[]" class="admin-form-control" value="{{ $color['name'] ?? '' }}" placeholder="Məsələn: Qara">
                            <input type="color" name="color_hex[]" value="{{ $color['hex'] ?? '#c77d4a' }}" aria-label="Rəng kodu">
                            <button type="button" class="admin-btn admin-btn-secondary" data-remove-product-color>Sil</button>
                        </div>
                    @endforeach
                </div>
                <button type="button" class="admin-btn admin-btn-secondary" data-add-product-color>+ Rəng əlavə et</button>
            </div>
            <small>Məhsulun bir neçə rəngi varsa burada əlavə edin. Boş saxlasan saytda rəng seçimi görünməyəcək.</small>
        </div>
        <div class="admin-form-group">
            <label>Məhsul şəkli {{ isset($product) ? '' : '*' }}</label>
            <input id="product-image-file" type="file" name="image_file" accept="image/*" class="admin-form-control" {{ isset($product) ? '' : 'required' }}>
            @if(isset($product) && $product->image)<img src="{{ asset('images/' . $product->image) }}" class="admin-image-preview" alt="">@endif
        </div>

        <div class="home-image-editor" data-home-image-editor>
            <div>
                <label class="home-image-editor__label">Ana səhifədə görünüş</label>
                <p>Şəkli siçanla tutub sürüşdürün. Aşağıdakı xətt ilə böyüdüb-kiçildin.</p>
                <div class="home-image-editor__preview" data-crop-preview>
                    <img
                        data-crop-image
                        src="{{ isset($product) && $product->image ? asset('images/' . $product->image) : '' }}"
                        alt=""
                    >
                    <span data-crop-placeholder>Şəkil seçdikdən sonra görünüş burada açılacaq</span>
                </div>
            </div>

            <div class="home-image-editor__controls">
                <div class="home-image-fit-buttons">
                    <label>
                        <input type="radio" name="home_image_fit" value="contain" {{ old('home_image_fit', $product->home_image_fit ?? 'contain') === 'contain' ? 'checked' : '' }}>
                        <span>Tam göstər</span>
                    </label>
                    <label>
                        <input type="radio" name="home_image_fit" value="cover" {{ old('home_image_fit', $product->home_image_fit ?? 'contain') === 'cover' ? 'checked' : '' }}>
                        <span>Sahəni doldur</span>
                    </label>
                </div>

                <label class="home-image-range">
                    <span>Böyütmə</span>
                    <input data-crop-scale type="range" min="0.5" max="3" step="0.05" value="{{ old('home_image_scale', $product->home_image_scale ?? 1) }}">
                </label>

                <input data-crop-scale-value type="hidden" name="home_image_scale" value="{{ old('home_image_scale', $product->home_image_scale ?? 1) }}">
                <input data-crop-x type="hidden" name="home_image_offset_x" value="{{ old('home_image_offset_x', $product->home_image_offset_x ?? 0) }}">
                <input data-crop-y type="hidden" name="home_image_offset_y" value="{{ old('home_image_offset_y', $product->home_image_offset_y ?? 0) }}">

                <button type="button" class="admin-btn admin-btn-secondary" data-crop-reset>Görünüşü sıfırla</button>
            </div>
        </div>
    </div>

    <div class="admin-card">
        <div class="simple-admin-heading"><span>3</span><div><h2>Satış vəziyyəti</h2><p>Məhsul kartında göstəriləcək vəziyyəti seçin.</p></div></div>
        <div class="admin-form-grid">
            <div class="admin-form-group">
                <label>Vəziyyət</label>
                <select name="status" class="admin-form-control">
                    <option value="available" {{ old('status', $product->status ?? 'available') === 'available' ? 'selected' : '' }}>Satışdadır</option>
                    <option value="new" {{ old('status', $product->status ?? '') === 'new' ? 'selected' : '' }}>Yeni məhsul</option>
                    <option value="sale" {{ old('status', $product->status ?? '') === 'sale' ? 'selected' : '' }}>Endirimdədir</option>
                </select>
            </div>
            <div class="admin-form-group"><label>Sıra nömrəsi</label><input type="number" name="sort_order" class="admin-form-control" value="{{ old('sort_order', $product->sort_order ?? 0) }}"></div>
        </div>
        <details class="admin-details">
            <summary>SEO ayarları (istəyə bağlı)</summary>
            <div class="admin-details__content">
                <div class="admin-form-group"><label>SEO başlıq</label><input name="meta_title" class="admin-form-control" value="{{ old('meta_title', $product->meta_title ?? '') }}"></div>
                <div class="admin-form-group"><label>SEO açıqlama</label><textarea name="meta_description" class="admin-form-control">{{ old('meta_description', $product->meta_description ?? '') }}</textarea></div>
            </div>
        </details>
    </div>

    <div class="slider-editor__actions"><button class="admin-btn admin-btn-primary">Yadda saxla</button><a href="{{ route('admin.products.index') }}" class="admin-btn admin-btn-secondary">Ləğv et</a></div>
    <div class="admin-card">
        <div class="simple-admin-heading">
            <span>4</span>
            <div>
                <h2>Məhsul təqdimat səhifəsi</h2>
                <p>Böyük qalereya və məhsul üstünlüklərini premium üslubda göstərin.</p>
            </div>
        </div>

        <div class="admin-form-group">
            <label>Qısa təqdimat mətni</label>
            <textarea name="short_description" rows="3" class="admin-form-control">{{ old('short_description', $product->short_description ?? '') }}</textarea>
        </div>

        <div class="admin-form-group">
            <label>Əlavə qalereya şəkilləri</label>
            <input type="file" name="gallery_files[]" accept="image/*" multiple class="admin-form-control">
            <small>Maksimum 8 şəkil. Mövcud şəkillər saxlanılacaq.</small>
            @if(!empty($editingProduct?->gallery_images))
                <div style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px">
                    @foreach($editingProduct->gallery_images as $galleryImage)
                        <img src="{{ asset('images/' . $galleryImage) }}" class="admin-image-preview" alt="">
                    @endforeach
                </div>
            @endif
        </div>

        <div class="admin-form-group">
            <label>Video linki</label>
            <input
                type="url"
                name="video"
                class="admin-form-control"
                value="{{ old('video', $product->video ?? '') }}"
                placeholder="https://youtube.com/watch?v=... və ya https://site.com/video.mp4"
            >
            <small>YouTube, Vimeo və ya birbaşa MP4/WEBM/OGG video linki əlavə edə bilərsiniz.</small>
        </div>

        <h3 class="admin-section-title" style="margin-top:28px">Üstünlük blokları</h3>
        <p class="admin-page-description">Hər blok üçün böyük şəkil, başlıq və açıqlama əlavə edin.</p>

                    @php $feature = $editingProduct?->feature_sections[$featureIndex] ?? []; @endphp
            <details class="admin-details" {{ $featureIndex === 0 ? 'open' : '' }}>
                <summary>{{ $featureIndex + 1 }}-ci üstünlük</summary>
                <div class="admin-details__content">
                    <input type="hidden" name="existing_feature_image[{{ $featureIndex }}]" value="{{ $feature['image'] ?? '' }}">
                    <div class="admin-form-group"><label>Başlıq</label><input name="feature_title[{{ $featureIndex }}]" class="admin-form-control" value="{{ old("feature_title.$featureIndex", $feature['title'] ?? '') }}"></div>
                    <div class="admin-form-group"><label>Açıqlama</label><textarea name="feature_text[{{ $featureIndex }}]" rows="4" class="admin-form-control">{{ old("feature_text.$featureIndex", $feature['text'] ?? '') }}</textarea></div>
                    <div class="admin-form-group">
                        <label>Böyük şəkil</label>
                        <input type="file" name="feature_image_file[{{ $featureIndex }}]" accept="image/*" class="admin-form-control">
                        @if(!empty($feature['image']))<img src="{{ asset('images/' . $feature['image']) }}" class="admin-image-preview" alt="">@endif
                    </div>
                </div>
            </details>
                    @php $feature = $editingProduct?->feature_sections[$featureIndex] ?? []; @endphp
            <details class="admin-details" {{ $featureIndex === 0 ? 'open' : '' }}>
                <summary>{{ $featureIndex + 1 }}-ci üstünlük</summary>
                <div class="admin-details__content">
                    <input type="hidden" name="existing_feature_image[{{ $featureIndex }}]" value="{{ $feature['image'] ?? '' }}">
                    <div class="admin-form-group"><label>Başlıq</label><input name="feature_title[{{ $featureIndex }}]" class="admin-form-control" value="{{ old("feature_title.$featureIndex", $feature['title'] ?? '') }}"></div>
                    <div class="admin-form-group"><label>Açıqlama</label><textarea name="feature_text[{{ $featureIndex }}]" rows="4" class="admin-form-control">{{ old("feature_text.$featureIndex", $feature['text'] ?? '') }}</textarea></div>
                    <div class="admin-form-group">
                        <label>Böyük şəkil</label>
                        <input type="file" name="feature_image_file[{{ $featureIndex }}]" accept="image/*" class="admin-form-control">
                        @if(!empty($feature['image']))<img src="{{ asset('images/' . $feature['image']) }}" class="admin-image-preview" alt="">@endif
                    </div>
                </div>
            </details>
                    @php $feature = $editingProduct?->feature_sections[$featureIndex] ?? []; @endphp
            <details class="admin-details" {{ $featureIndex === 0 ? 'open' : '' }}>
                <summary>{{ $featureIndex + 1 }}-ci üstünlük</summary>
                <div class="admin-details__content">
                    <input type="hidden" name="existing_feature_image[{{ $featureIndex }}]" value="{{ $feature['image'] ?? '' }}">
                    <div class="admin-form-group"><label>Başlıq</label><input name="feature_title[{{ $featureIndex }}]" class="admin-form-control" value="{{ old("feature_title.$featureIndex", $feature['title'] ?? '') }}"></div>
                    <div class="admin-form-group"><label>Açıqlama</label><textarea name="feature_text[{{ $featureIndex }}]" rows="4" class="admin-form-control">{{ old("feature_text.$featureIndex", $feature['text'] ?? '') }}</textarea></div>
                    <div class="admin-form-group">
                        <label>Böyük şəkil</label>
                        <input type="file" name="feature_image_file[{{ $featureIndex }}]" accept="image/*" class="admin-form-control">
                        @if(!empty($feature['image']))<img src="{{ asset('images/' . $feature['image']) }}" class="admin-image-preview" alt="">@endif
                    </div>
                </div>
            </details>
                    @php $feature = $editingProduct?->feature_sections[$featureIndex] ?? []; @endphp
            <details class="admin-details" {{ $featureIndex === 0 ? 'open' : '' }}>
                <summary>{{ $featureIndex + 1 }}-ci üstünlük</summary>
                <div class="admin-details__content">
                    <input type="hidden" name="existing_feature_image[{{ $featureIndex }}]" value="{{ $feature['image'] ?? '' }}">
                    <div class="admin-form-group"><label>Başlıq</label><input name="feature_title[{{ $featureIndex }}]" class="admin-form-control" value="{{ old("feature_title.$featureIndex", $feature['title'] ?? '') }}"></div>
                    <div class="admin-form-group"><label>Açıqlama</label><textarea name="feature_text[{{ $featureIndex }}]" rows="4" class="admin-form-control">{{ old("feature_text.$featureIndex", $feature['text'] ?? '') }}</textarea></div>
                    <div class="admin-form-group">
                        <label>Böyük şəkil</label>
                        <input type="file" name="feature_image_file[{{ $featureIndex }}]" accept="image/*" class="admin-form-control">
                        @if(!empty($feature['image']))<img src="{{ asset('images/' . $feature['image']) }}" class="admin-image-preview" alt="">@endif
                    </div>
                </div>
            </details>
        
        <details class="admin-details">
            <summary>Əlavə məlumatlar</summary>
            <div class="admin-details__content">
                <div class="admin-form-group"><label>Ətraflı təsvir</label><textarea name="detailed_description" rows="5" class="admin-form-control">{{ old('detailed_description', $product->detailed_description ?? '') }}</textarea></div>
                <div class="admin-form-group"><label>Dəstə daxildir</label><textarea name="kit_contents" rows="3" class="admin-form-control">{{ old('kit_contents', $product->kit_contents ?? '') }}</textarea></div>
                <div class="admin-form-grid">
                    <div class="admin-form-group"><label>Zəmanət məlumatı</label><textarea name="warranty_info" rows="3" class="admin-form-control">{{ old('warranty_info', $product->warranty_info ?? '') }}</textarea></div>
                    <div class="admin-form-group"><label>Çatdırılma məlumatı</label><textarea name="shipping_info" rows="3" class="admin-form-control">{{ old('shipping_info', $product->shipping_info ?? '') }}</textarea></div>
                </div>
            </div>
        </details>
    </div>

    <div class="slider-editor__actions">
        <button class="admin-btn admin-btn-primary">Yadda saxla</button>
        <a href="{{ route('admin.products.index') }}" class="admin-btn admin-btn-secondary">Ləğv et</a>
    </div>
    <style>.simple-admin-form>.slider-editor__actions:not(:last-of-type){display:none}</style>
</form>

<script>
(() => {
    const editor = document.querySelector('[data-product-colors-editor]');
    if (!editor) return;

    const list = editor.querySelector('[data-product-colors-list]');
    const addButton = editor.querySelector('[data-add-product-color]');

    function bindRemoveButtons() {
        list.querySelectorAll('[data-remove-product-color]').forEach((button) => {
            button.onclick = () => {
                const rows = list.querySelectorAll('[data-product-color-row]');
                if (rows.length <= 1) {
                    const row = button.closest('[data-product-color-row]');
                    row.querySelector('input[name="color_name[]"]').value = '';
                    row.querySelector('input[name="color_hex[]"]').value = '#c77d4a';
                    return;
                }
                button.closest('[data-product-color-row]').remove();
            };
        });
    }

    addButton?.addEventListener('click', () => {
        const row = document.createElement('div');
        row.className = 'product-color-row';
        row.setAttribute('data-product-color-row', '');
        row.innerHTML = `
            <input name="color_name[]" class="admin-form-control" value="" placeholder="Məsələn: Qara">
            <input type="color" name="color_hex[]" value="#c77d4a" aria-label="Rəng kodu">
            <button type="button" class="admin-btn admin-btn-secondary" data-remove-product-color>Sil</button>
        `;
        list.appendChild(row);
        bindRemoveButtons();
    });

    bindRemoveButtons();
})();

(() => {
    const editor = document.querySelector('[data-home-image-editor]');
    if (!editor) return;

    const preview = editor.querySelector('[data-crop-preview]');
    const image = editor.querySelector('[data-crop-image]');
    const placeholder = editor.querySelector('[data-crop-placeholder]');
    const scaleRange = editor.querySelector('[data-crop-scale]');
    const scaleValue = editor.querySelector('[data-crop-scale-value]');
    const offsetX = editor.querySelector('[data-crop-x]');
    const offsetY = editor.querySelector('[data-crop-y]');
    const fileInput = document.getElementById('product-image-file');
    let dragging = false;
    let startX = 0;
    let startY = 0;
    let initialX = 0;
    let initialY = 0;

    const currentFit = () => editor.querySelector('input[name="home_image_fit"]:checked')?.value || 'contain';
    const clamp = (value) => Math.max(-60, Math.min(60, value));

    function render() {
        const hasImage = Boolean(image.getAttribute('src'));
        image.hidden = !hasImage;
        placeholder.hidden = hasImage;
        image.style.objectFit = currentFit();
        image.style.transform = `translate(${offsetX.value}%, ${offsetY.value}%) scale(${scaleValue.value})`;
    }

    fileInput?.addEventListener('change', () => {
        const file = fileInput.files?.[0];
        if (!file) return;
        image.src = URL.createObjectURL(file);
        offsetX.value = 0;
        offsetY.value = 0;
        scaleRange.value = 1;
        scaleValue.value = 1;
        render();
    });

    editor.querySelectorAll('input[name="home_image_fit"]').forEach((input) => input.addEventListener('change', render));
    scaleRange.addEventListener('input', () => {
        scaleValue.value = scaleRange.value;
        render();
    });

    preview.addEventListener('pointerdown', (event) => {
        if (!image.src) return;
        dragging = true;
        startX = event.clientX;
        startY = event.clientY;
        initialX = Number(offsetX.value);
        initialY = Number(offsetY.value);
        preview.setPointerCapture(event.pointerId);
        preview.classList.add('is-dragging');
    });

    preview.addEventListener('pointermove', (event) => {
        if (!dragging) return;
        offsetX.value = clamp(initialX + ((event.clientX - startX) / preview.clientWidth) * 100).toFixed(2);
        offsetY.value = clamp(initialY + ((event.clientY - startY) / preview.clientHeight) * 100).toFixed(2);
        render();
    });

    const stopDragging = () => {
        dragging = false;
        preview.classList.remove('is-dragging');
    };
    preview.addEventListener('pointerup', stopDragging);
    preview.addEventListener('pointercancel', stopDragging);

    editor.querySelector('[data-crop-reset]').addEventListener('click', () => {
        offsetX.value = 0;
        offsetY.value = 0;
        scaleRange.value = 1;
        scaleValue.value = 1;
        render();
    });

    render();
})();
</script>
@endsection