@extends('admin.layouts.app')

@section('title', 'Ana səhifə məhsulları')

@section('content')
<div class="admin-header-row">
    <div>
        <h1 class="admin-title">Ana səhifə məhsulları</h1>
        <p class="admin-page-description">Böyük şəkilli kartları və onların yanında görünən 8 kiçik məhsulu buradan seçin.</p>
    </div>
</div>

<form method="POST" action="{{ route('admin.homepage-products.update') }}" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <div class="admin-card">
        <div class="simple-admin-heading">
            <span>1</span>
            <div>
                <h2>Böyük məhsul kartları</h2>
                <p>Ana səhifədə böyük şəkil kimi görünən iki kart.</p>
            </div>
        </div>

        <div class="homepage-large-cards">
            @foreach($largeCards as $index => $card)
                @php
                    $cardFit = old("large_cards.$index.image_fit", $card->settings['image_fit'] ?? 'cover');
                    $cardScale = old("large_cards.$index.image_scale", $card->settings['image_scale'] ?? 1);
                    $cardX = old("large_cards.$index.image_x", $card->settings['image_x'] ?? 0);
                    $cardY = old("large_cards.$index.image_y", $card->settings['image_y'] ?? 0);
                @endphp
                <div class="homepage-large-card">
                    <h3>{{ $index + 1 }}-ci böyük kart</h3>
                    <input type="hidden" name="large_cards[{{ $index }}][id]" value="{{ $card->id }}">

                    <div class="admin-form-group">
                        <label>Başlıq (AZ) *</label>
                        <input name="large_cards[{{ $index }}][title]" class="admin-form-control" required value="{{ old("large_cards.$index.title", $card->title) }}">
                    </div>
                    <details class="admin-details">
                        <summary>İngilis və rus dilində başlıq</summary>
                        <div class="admin-details__content">
                            <div class="admin-form-group">
                                <label>Başlıq (EN)</label>
                                <input name="large_cards[{{ $index }}][title_en]" class="admin-form-control" value="{{ old("large_cards.$index.title_en", $card->title_en) }}">
                            </div>
                            <div class="admin-form-group">
                                <label>Başlıq (RU)</label>
                                <input name="large_cards[{{ $index }}][title_ru]" class="admin-form-control" value="{{ old("large_cards.$index.title_ru", $card->title_ru) }}">
                            </div>
                        </div>
                    </details>
                    <div class="admin-form-group">
                        <label>Kliklənəndə açılsın</label>
                        <input name="large_cards[{{ $index }}][link]" class="admin-form-control" value="{{ old("large_cards.$index.link", $card->link) }}" placeholder="/az/categories/...">
                    </div>
                    <div class="admin-form-group">
                        <label>Şəkil</label>
                        <input type="file" name="large_cards[{{ $index }}][image_file]" accept="image/*" class="admin-form-control" data-large-image-file>
                    </div>

                    <div class="large-card-crop-editor" data-large-card-crop>
                        <p>Şəklin kartda necə görünəcəyini seçin.</p>
                        <p class="admin-help-text">
                            <strong>Tam göstər</strong> — bütün şəkil görünər, boş yer qala bilər.<br>
                            <strong>Sahəni doldur</strong> — şəkil bütün kartı örtər, kənarlar kəsilə bilər.<br>
                            <strong>Böyütmə</strong> — məhsulu daha yaxından göstərmək üçün istifadə edin.
                        </p>
                        <div class="large-card-crop-preview" data-large-crop-preview>
                            <img
                                data-large-crop-image
                                src="{{ $card->image ? asset('images/' . $card->image) : '' }}"
                                alt=""
                                style="object-fit:cover;object-position:center;transform:none"
                            >
                            <span {{ $card->image ? 'hidden' : '' }}>Şəkil seçin</span>
                        </div>
                        <div class="large-card-crop-controls">
                            <div class="home-image-fit-buttons" hidden>
                                <label><input type="radio" name="large_cards[{{ $index }}][image_fit]" value="contain" {{ $cardFit === 'contain' ? 'checked' : '' }}><span>Tam göstər</span></label>
                                <label><input type="radio" name="large_cards[{{ $index }}][image_fit]" value="cover" {{ $cardFit === 'cover' ? 'checked' : '' }}><span>Sahəni doldur</span></label>
                            </div>
                            <label class="home-image-range"><span>Böyütmə</span><input data-large-crop-scale-range type="range" min="1" max="3" step=".05" value="{{ max(1,(float)$cardScale) }}"></label>
                            <label class="home-image-range"><span>Fokus — sola/sağa</span><input data-large-focus-x-range type="range" min="0" max="100" step="1" value="{{ max(0,min(100,50+(float)$cardX)) }}"></label>
                            <label class="home-image-range"><span>Fokus — yuxarı/aşağı</span><input data-large-focus-y-range type="range" min="0" max="100" step="1" value="{{ max(0,min(100,50+(float)$cardY)) }}"></label>
                            <input data-large-crop-scale type="hidden" name="large_cards[{{ $index }}][image_scale]" value="{{ $cardScale }}">
                            <input data-large-focus-x type="hidden" name="large_cards[{{ $index }}][image_x]" value="{{ $cardX }}">
                            <input data-large-focus-y type="hidden" name="large_cards[{{ $index }}][image_y]" value="{{ $cardY }}">
                            <button type="button" class="admin-btn admin-btn-secondary" data-large-crop-reset>Sıfırla</button>
                            <button type="button" class="admin-btn admin-btn-secondary" data-recrop-large-card>Şəkli yenidən kəs</button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="admin-card">
        <div class="simple-admin-heading">
            <span>2</span>
            <div>
                <h2>Kiçik məhsullar</h2>
                <p>Maksimum 8 məhsul seçin. Seçdiyiniz sıra ilə ana səhifədə görünəcək.</p>
            </div>
        </div>

        <div class="featured-product-picker">
            @foreach($products as $product)
                <label class="featured-product-option {{ $product->is_featured ? 'selected' : '' }}">
                    <input type="checkbox" name="featured_products[]" value="{{ $product->id }}" {{ $product->is_featured ? 'checked' : '' }}>
                    <input type="hidden" name="crop[{{ $product->id }}][fit]" value="contain" data-product-crop-fit>
                    <input type="hidden" name="crop[{{ $product->id }}][scale]" value="1" data-product-crop-scale>
                    <input type="hidden" name="crop[{{ $product->id }}][x]" value="0" data-product-crop-x>
                    <input type="hidden" name="crop[{{ $product->id }}][y]" value="0" data-product-crop-y>
                    <span class="featured-product-option__number"></span>
                    <div class="featured-product-option__image">
                        @if($product->image)
                            <img
                                src="{{ asset('images/' . $product->image) }}"
                                alt=""
                                data-product-card-image
                                style="width:100%;height:100%;object-fit:contain;object-position:center;transform:scale(1)"
                            >
                        @endif
                    </div>
                    <strong>{{ $product->name }}</strong>
                    <small>{{ $product->category?->name }} · {{ $product->formattedPrice() }}</small>
                    <button
                        type="button"
                        class="featured-product-crop-button"
                        data-open-product-crop
                        data-product-name="{{ $product->name }}"
                        data-product-image="{{ $product->image ? asset('images/' . $product->image) : '' }}"
                    >Şəkli tənzimlə</button>
                </label>
            @endforeach
        </div>
        <p id="featured-product-warning" class="slider-file-error" hidden>Maksimum 8 məhsul seçə bilərsiniz.</p>
    </div>

    <div class="slider-editor__actions">
        <button class="admin-btn admin-btn-primary">Yadda saxla</button>
    </div>
</form>

<div class="large-upload-crop-modal" data-large-upload-crop-modal hidden>
    <div class="large-upload-crop-modal__dialog">
        <div class="product-crop-modal__header">
            <div>
                <strong>Böyük kart üçün şəkli kəsin</strong>
                <span>Çərçivədə necə görünürsə, ana səhifədə də o formada görünəcək.</span>
            </div>
            <button type="button" data-close-large-upload-crop aria-label="Bağla">×</button>
        </div>
        <div class="large-upload-crop-modal__body">
            <div class="large-upload-crop-frame" data-large-upload-crop-frame>
                <img data-large-upload-crop-image src="" alt="">
            </div>
            <div class="product-crop-modal__controls">
                <label class="home-image-range">
                    <span>Böyüt / kiçilt</span>
                    <input data-large-upload-crop-zoom type="range" min="1" max="4" step=".01" value="1">
                </label>
                <p class="admin-help-text">Şəkli tutub sürüşdürün, lazım olsa böyüdün. Sonra “Kəs və tətbiq et” düyməsini basın.</p>
            </div>
        </div>
        <div class="product-crop-modal__footer">
            <button type="button" class="admin-btn admin-btn-secondary" data-close-large-upload-crop>Ləğv et</button>
            <button type="button" class="admin-btn admin-btn-primary" data-apply-large-upload-crop>Kəs və tətbiq et</button>
        </div>
    </div>
</div>

<div class="product-crop-modal" data-product-crop-modal hidden>
    <div class="product-crop-modal__dialog">
        <div class="product-crop-modal__header">
            <div><strong data-crop-product-name>Məhsul şəkli</strong><span>Ana səhifədə görünüş</span></div>
            <button type="button" data-close-product-crop aria-label="Bağla">×</button>
        </div>
        <div class="product-crop-modal__body">
            <div class="product-crop-modal__preview" data-modal-crop-preview>
                <img data-modal-crop-image src="" alt="">
                <i class="focus-point-marker" data-modal-focus-marker></i>
            </div>
            <div class="product-crop-modal__controls">
                <div class="home-image-fit-buttons">
                    <label><input type="radio" name="modal_crop_fit" value="contain"><span>Tam göstər</span></label>
                    <label><input type="radio" name="modal_crop_fit" value="cover"><span>Sahəni doldur</span></label>
                </div>
                <label class="home-image-range"><span>Böyütmə</span><input data-modal-crop-scale type="range" min="1" max="3" step=".05"></label>
                <label class="home-image-range"><span>Fokus — sola/sağa</span><input data-modal-focus-x type="range" min="0" max="100" step="1"></label>
                <label class="home-image-range"><span>Fokus — yuxarı/aşağı</span><input data-modal-focus-y type="range" min="0" max="100" step="1"></label>
                <p class="admin-help-text">Şəkildə məhsulun əsas yerinə klikləyin. Saytda kəsilmə olsa belə həmin nöqtə görünən hissədə qalacaq.</p>
                <button type="button" class="admin-btn admin-btn-secondary" data-modal-crop-reset>Sıfırla</button>
            </div>
        </div>
        <div class="product-crop-modal__footer">
            <button type="button" class="admin-btn admin-btn-secondary" data-close-product-crop>Bağla</button>
            <button type="button" class="admin-btn admin-btn-primary" data-apply-product-crop>Tətbiq et</button>
        </div>
    </div>
</div>

<script>
    const productOptions = Array.from(document.querySelectorAll('.featured-product-option'));

    function refreshProductOrder() {
        const selected = productOptions.filter(option => option.querySelector('input').checked);
        productOptions.forEach(option => {
            option.classList.toggle('selected', option.querySelector('input').checked);
            option.querySelector('.featured-product-option__number').textContent = '';
        });
        selected.forEach((option, index) => {
            option.querySelector('.featured-product-option__number').textContent = index + 1;
        });
    }

    productOptions.forEach(option => {
        option.querySelector('input').addEventListener('change', function () {
            const selectedCount = productOptions.filter(item => item.querySelector('input').checked).length;
            if (selectedCount > 8) {
                this.checked = false;
                document.getElementById('featured-product-warning').hidden = false;
            } else {
                document.getElementById('featured-product-warning').hidden = true;
            }
            refreshProductOrder();
        });
    });

    refreshProductOrder();

    document.querySelectorAll('[data-large-card-crop]').forEach(editor => {
        const cover = editor.querySelector('input[type="radio"][name*="image_fit"][value="cover"]');
        if (cover) cover.checked = true;
        const scale = editor.querySelector('[data-large-crop-scale]');
        const x = editor.querySelector('[data-large-focus-x]');
        const y = editor.querySelector('[data-large-focus-y]');
        if (scale) scale.value = 1;
        if (x) x.value = 0;
        if (y) y.value = 0;
    });

    const largeCropModal = document.querySelector('[data-large-upload-crop-modal]');
    const largeCropFrame = largeCropModal.querySelector('[data-large-upload-crop-frame]');
    const largeCropImage = largeCropModal.querySelector('[data-large-upload-crop-image]');
    const largeCropZoom = largeCropModal.querySelector('[data-large-upload-crop-zoom]');
    let activeLargeInput = null;
    let activeLargePreview = null;
    let largeCropState = { src: '', fileName: 'homepage-card.jpg', scale: 1, baseWidth: 0, baseHeight: 0, x: 0, y: 0 };
    let largeCropDrag = null;

    function renderLargeUploadCrop() {
        largeCropImage.style.width = `${largeCropState.baseWidth}px`;
        largeCropImage.style.height = `${largeCropState.baseHeight}px`;
        largeCropImage.style.transform = `translate(calc(-50% + ${largeCropState.x}px), calc(-50% + ${largeCropState.y}px)) scale(${largeCropState.scale})`;
        largeCropZoom.value = largeCropState.scale;
    }

    function fitLargeCropImageToFrame() {
        const frame = largeCropFrame.getBoundingClientRect();
        const fillScale = Math.max(frame.width / largeCropImage.naturalWidth, frame.height / largeCropImage.naturalHeight);
        largeCropState.baseWidth = largeCropImage.naturalWidth * fillScale;
        largeCropState.baseHeight = largeCropImage.naturalHeight * fillScale;
        largeCropState.scale = 1;
        largeCropState.x = 0;
        largeCropState.y = 0;
        renderLargeUploadCrop();
    }

    function openLargeUploadCrop(file, input, previewImage) {
        activeLargeInput = input;
        activeLargePreview = previewImage;
        largeCropState = {
            src: URL.createObjectURL(file),
            fileName: file.name.replace(/\.[^.]+$/, '') + '-cropped.jpg',
            scale: 1,
            baseWidth: 0,
            baseHeight: 0,
            x: 0,
            y: 0,
        };
        largeCropImage.onload = () => requestAnimationFrame(fitLargeCropImageToFrame);
        largeCropImage.src = largeCropState.src;
        largeCropModal.hidden = false;
        document.body.style.overflow = 'hidden';
    }

    document.querySelectorAll('[data-large-image-file]').forEach(input => {
        const card = input.closest('.homepage-large-card');
        const previewImage = card.querySelector('[data-large-crop-image]');
        const placeholder = card.querySelector('[data-large-crop-preview] span');
        input.addEventListener('change', () => {
            const file = input.files?.[0];
            if (!file) return;
            placeholder.hidden = true;
            openLargeUploadCrop(file, input, previewImage);
        });
        card.querySelector('[data-recrop-large-card]')?.addEventListener('click', () => input.click());
    });

    largeCropZoom.addEventListener('input', () => {
        largeCropState.scale = Number(largeCropZoom.value);
        renderLargeUploadCrop();
    });

    largeCropFrame.addEventListener('pointerdown', event => {
        largeCropDrag = { clientX: event.clientX, clientY: event.clientY, x: largeCropState.x, y: largeCropState.y };
        largeCropFrame.setPointerCapture(event.pointerId);
        largeCropFrame.classList.add('is-dragging');
    });
    largeCropFrame.addEventListener('pointermove', event => {
        if (!largeCropDrag) return;
        largeCropState.x = largeCropDrag.x + event.clientX - largeCropDrag.clientX;
        largeCropState.y = largeCropDrag.y + event.clientY - largeCropDrag.clientY;
        renderLargeUploadCrop();
    });
    ['pointerup', 'pointercancel'].forEach(type => largeCropFrame.addEventListener(type, () => {
        largeCropDrag = null;
        largeCropFrame.classList.remove('is-dragging');
    }));

    largeCropModal.querySelectorAll('[data-close-large-upload-crop]').forEach(button => button.addEventListener('click', () => {
        largeCropModal.hidden = true;
        document.body.style.overflow = '';
    }));

    largeCropModal.querySelector('[data-apply-large-upload-crop]').addEventListener('click', () => {
        if (!activeLargeInput || !largeCropImage.naturalWidth) return;
        const frame = largeCropFrame.getBoundingClientRect();
        const renderedWidth = largeCropState.baseWidth * largeCropState.scale;
        const renderedHeight = largeCropState.baseHeight * largeCropState.scale;
        const imageLeft = (frame.width - renderedWidth) / 2 + largeCropState.x;
        const imageTop = (frame.height - renderedHeight) / 2 + largeCropState.y;
        const canvas = document.createElement('canvas');
        canvas.width = 1270;
        canvas.height = 1000;
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = '#211c19';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(
            largeCropImage,
            imageLeft * (canvas.width / frame.width),
            imageTop * (canvas.height / frame.height),
            renderedWidth * (canvas.width / frame.width),
            renderedHeight * (canvas.height / frame.height)
        );
        canvas.toBlob(blob => {
            if (!blob) return;
            const croppedFile = new File([blob], largeCropState.fileName, { type: 'image/jpeg' });
            const transfer = new DataTransfer();
            transfer.items.add(croppedFile);
            activeLargeInput.files = transfer.files;
            activeLargePreview.src = URL.createObjectURL(blob);
            activeLargePreview.hidden = false;
            largeCropModal.hidden = true;
            document.body.style.overflow = '';
        }, 'image/jpeg', .92);
    });

    const cropModal = document.querySelector('[data-product-crop-modal]');
    const cropPreview = cropModal.querySelector('[data-modal-crop-preview]');
    const cropImage = cropModal.querySelector('[data-modal-crop-image]');
    const cropMarker = cropModal.querySelector('[data-modal-focus-marker]');
    const cropScale = cropModal.querySelector('[data-modal-crop-scale]');
    const modalFocusX = cropModal.querySelector('[data-modal-focus-x]');
    const modalFocusY = cropModal.querySelector('[data-modal-focus-y]');
    let activeOption = null;
    let cropState = { fit: 'contain', scale: 1, x: 0, y: 0 };

    function renderModalCrop() {
        const focusX = Math.max(0, Math.min(100, 50 + Number(cropState.x || 0)));
        const focusY = Math.max(0, Math.min(100, 50 + Number(cropState.y || 0)));
        cropImage.style.objectFit = cropState.fit;
        cropImage.style.objectPosition = `${focusX}% ${focusY}%`;
        cropImage.style.transform = `scale(${cropState.scale})`;
        cropMarker.style.left = `${focusX}%`;
        cropMarker.style.top = `${focusY}%`;
        cropScale.value = cropState.scale;
        modalFocusX.value = focusX;
        modalFocusY.value = focusY;
        cropModal.querySelector(`input[name="modal_crop_fit"][value="${cropState.fit}"]`).checked = true;
    }

    document.querySelectorAll('[data-open-product-crop]').forEach(button => {
        button.addEventListener('click', event => {
            event.preventDefault();
            event.stopPropagation();
            activeOption = button.closest('.featured-product-option');
            cropState = {
                fit: activeOption.querySelector('[data-product-crop-fit]').value || 'contain',
                scale: Number(activeOption.querySelector('[data-product-crop-scale]').value || 1),
                x: Number(activeOption.querySelector('[data-product-crop-x]').value || 0),
                y: Number(activeOption.querySelector('[data-product-crop-y]').value || 0),
            };
            cropImage.src = button.dataset.productImage;
            cropModal.querySelector('[data-crop-product-name]').textContent = button.dataset.productName;
            cropModal.hidden = false;
            document.body.style.overflow = 'hidden';
            renderModalCrop();
        });
    });

    cropModal.querySelectorAll('[data-close-product-crop]').forEach(button => button.addEventListener('click', () => {
        cropModal.hidden = true;
        document.body.style.overflow = '';
    }));

    cropModal.querySelectorAll('input[name="modal_crop_fit"]').forEach(input => input.addEventListener('change', () => {
        cropState.fit = input.value;
        renderModalCrop();
    }));
    cropScale.addEventListener('input', () => {
        cropState.scale = Number(cropScale.value);
        renderModalCrop();
    });
    modalFocusX.addEventListener('input', () => {
        cropState.x = Number(modalFocusX.value) - 50;
        renderModalCrop();
    });
    modalFocusY.addEventListener('input', () => {
        cropState.y = Number(modalFocusY.value) - 50;
        renderModalCrop();
    });
    cropPreview.addEventListener('pointerdown', event => {
        const rect = cropPreview.getBoundingClientRect();
        const x = Math.max(0, Math.min(100, ((event.clientX - rect.left) / rect.width) * 100));
        const y = Math.max(0, Math.min(100, ((event.clientY - rect.top) / rect.height) * 100));
        cropState.x = x - 50;
        cropState.y = y - 50;
        renderModalCrop();
    });

    cropModal.querySelector('[data-modal-crop-reset]').addEventListener('click', () => {
        cropState = { fit: 'contain', scale: 1, x: 0, y: 0 };
        renderModalCrop();
    });

    cropModal.querySelector('[data-apply-product-crop]').addEventListener('click', () => {
        if (!activeOption) return;
        activeOption.querySelector('[data-product-crop-fit]').value = cropState.fit;
        activeOption.querySelector('[data-product-crop-scale]').value = cropState.scale.toFixed(2);
        activeOption.querySelector('[data-product-crop-x]').value = cropState.x.toFixed(2);
        activeOption.querySelector('[data-product-crop-y]').value = cropState.y.toFixed(2);
        const cardImage = activeOption.querySelector('[data-product-card-image]');
        const focusX = Math.max(0, Math.min(100, 50 + Number(cropState.x || 0)));
        const focusY = Math.max(0, Math.min(100, 50 + Number(cropState.y || 0)));
        cardImage.style.objectFit = cropState.fit;
        cardImage.style.objectPosition = `${focusX}% ${focusY}%`;
        cardImage.style.transform = `scale(${cropState.scale})`;
        cropModal.hidden = true;
        document.body.style.overflow = '';
    });
</script>
@endsection