@extends('admin.layouts.app')

@section('title', isset($homeBlock) ? 'Blok redaktə et' : 'Yeni blok')

@php
$locales = ['az' => 'Azərbaycanca', 'en' => 'English', 'ru' => 'Русский'];
$types = [
    'collection_tile' => 'Ana səhifə kolleksiya kafeli (böyük kafel)',
    'category_banner' => 'Kateqoriya banneri',
    'video' => 'Video blok',
    'image_banner' => 'Şəkil banner',
    'text' => 'Mətn blok',
    'two_column' => 'İki sütunlu blok',
    'premium_story' => 'Premium story blok',
    'new_products' => 'Yeni məhsullar',
    'gift_ideas' => 'Hədiyyə ideyaları',
    'bestseller' => 'Bestseller',
    'campaign' => 'Kampaniya məhsulları',
];
@endphp

@section('content')
<div class="admin-header-row">
    <h1 class="admin-title">{{ isset($homeBlock) ? 'Blok redaktə et' : 'Yeni blok' }}</h1>
</div>

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

        <div class="admin-form-grid">
            <div class="admin-form-group">
                <label for="type">Blok tipi</label>
                <select id="type" name="type" class="admin-form-control" required>
                    @foreach($types as $key => $label)
                        <option value="{{ $key }}" {{ old('type', $homeBlock->type ?? '') === $key ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="admin-form-group">
                <label for="sort_order">Sıra</label>
                <input type="number" id="sort_order" name="sort_order" class="admin-form-control" value="{{ old('sort_order', $homeBlock->sort_order ?? 0) }}">
            </div>
        </div>

        <div class="admin-tabs">
            @foreach($locales as $code => $label)
                <button type="button" class="admin-tab {{ $loop->first ? 'active' : '' }}" data-locale="{{ $code }}">{{ $label }}</button>
            @endforeach
        </div>

        @foreach($locales as $code => $label)
            @php $suffix = $code === 'az' ? '' : '_' . $code; @endphp
            <div class="admin-tab-panel {{ $loop->first ? 'active' : '' }}" data-locale="{{ $code }}">
                <div class="admin-form-group">
                    <label for="title{{ $suffix }}">Başlıq ({{ $label }})</label>
                    <input type="text" id="title{{ $suffix }}" name="title{{ $suffix }}" class="admin-form-control" value="{{ old('title' . $suffix, $homeBlock->{'title' . $suffix} ?? '') }}">
                </div>
                <div class="admin-form-group">
                    <label for="subtitle{{ $suffix }}">Alt başlıq ({{ $label }})</label>
                    <input type="text" id="subtitle{{ $suffix }}" name="subtitle{{ $suffix }}" class="admin-form-control" value="{{ old('subtitle' . $suffix, $homeBlock->{'subtitle' . $suffix} ?? '') }}">
                </div>
            </div>
        @endforeach

        <div class="admin-form-grid">
            <div class="admin-form-group">
                <label for="image_file">Əsas şəkil</label>
                <input type="file" id="image_file" name="image_file" accept="image/*" class="admin-form-control" onchange="previewImage(this, 'image-preview')">
                <p class="admin-help-text">Hər ölçü üçün əsas şəkil. JPG, PNG, WEBP. Maksimum 5 MB.</p>
                <div id="image-preview" class="admin-image-preview-wrap">
                    @if(isset($homeBlock) && $homeBlock->image)
                        <img src="{{ asset('images/' . $homeBlock->image) }}" alt="" class="admin-image-preview">
                    @endif
                </div>
            </div>
            <div class="admin-form-group">
                <label for="big_image_file">Böyük şəkil</label>
                <input type="file" id="big_image_file" name="big_image_file" accept="image/*" class="admin-form-control" onchange="previewImage(this, 'big-preview')">
                <p class="admin-help-text">Desktop / böyük kafel üçün. JPG, PNG, WEBP. Maksimum 5 MB.</p>
                <div id="big-preview" class="admin-image-preview-wrap">
                    @if(isset($homeBlock) && $homeBlock->big_image)
                        <img src="{{ asset('images/' . $homeBlock->big_image) }}" alt="" class="admin-image-preview">
                    @endif
                </div>
            </div>
            <div class="admin-form-group">
                <label for="small_image_file">Balaca şəkil</label>
                <input type="file" id="small_image_file" name="small_image_file" accept="image/*" class="admin-form-control" onchange="previewImage(this, 'small-preview')">
                <p class="admin-help-text">Mobil / kiçik kafel üçün. JPG, PNG, WEBP. Maksimum 5 MB.</p>
                <div id="small-preview" class="admin-image-preview-wrap">
                    @if(isset($homeBlock) && $homeBlock->small_image)
                        <img src="{{ asset('images/' . $homeBlock->small_image) }}" alt="" class="admin-image-preview">
                    @endif
                </div>
            </div>
        </div>

        <div class="admin-form-grid">
            <div class="admin-form-group">
                <label for="video_file">Video</label>
                <input type="file" id="video_file" name="video_file" accept="video/*" class="admin-form-control">
                <p class="admin-help-text">MP4, WEBM. Maksimum 20 MB.</p>
                @if(isset($homeBlock) && $homeBlock->video)
                    <p class="admin-help-text mt-2"><strong>Mövcud video:</strong> {{ $homeBlock->video }}</p>
                @endif
            </div>
            <div class="admin-form-group">
                <label for="link">Link</label>
                <input type="text" id="link" name="link" class="admin-form-control" value="{{ old('link', $homeBlock->link ?? '') }}">
                <p class="admin-help-text">Kafelə klikləndikdə hara getsin. Məsələn: /az/products</p>
            </div>
        </div>

        <h3 class="admin-section-title">Əlavə parametrlər (JSON) — İstəyə bağlı</h3>
        <div class="admin-form-group">
            <textarea name="settings" class="admin-form-control" rows="4">{{ old('settings', isset($homeBlock) ? json_encode($homeBlock->settings, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) : '') }}</textarea>
            <p class="admin-help-text">Adətən boş qala bilər. Yalnız xüsusi bloklar üçün proqramist tərəfindən verilən JSON yazılır.</p>
        </div>

        <div class="admin-form-grid">
            <div class="admin-form-group">
                <label class="admin-form-check">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', $homeBlock->is_active ?? true) ? 'checked' : '' }}>
                    <span>Aktiv</span>
                </label>
            </div>
            <div class="admin-form-group">
                <label class="admin-form-check">
                    <input type="checkbox" name="show_desktop" value="1" {{ old('show_desktop', $homeBlock->show_desktop ?? true) ? 'checked' : '' }}>
                    <span>Desktop göstər</span>
                </label>
            </div>
            <div class="admin-form-group">
                <label class="admin-form-check">
                    <input type="checkbox" name="show_mobile" value="1" {{ old('show_mobile', $homeBlock->show_mobile ?? true) ? 'checked' : '' }}>
                    <span>Mobil göstər</span>
                </label>
            </div>
        </div>

        <div style="display: flex; gap: 12px; margin-top: 12px;">
            <button type="submit" class="admin-btn admin-btn-primary">Yadda saxla</button>
            <a href="{{ route('admin.home-blocks.index') }}" class="admin-btn admin-btn-secondary">Ləğv et</a>
        </div>
    </form>
</div>

<script>
    document.querySelectorAll('.admin-tab').forEach(function (tab) {
        tab.addEventListener('click', function () {
            var locale = this.dataset.locale;
            document.querySelectorAll('.admin-tab').forEach(function (t) { t.classList.remove('active'); });
            document.querySelectorAll('.admin-tab-panel').forEach(function (p) { p.classList.remove('active'); });
            this.classList.add('active');
            document.querySelector('.admin-tab-panel[data-locale="' + locale + '"]').classList.add('active');
        });
    });

    function previewImage(input, previewId) {
        var preview = document.getElementById(previewId);
        preview.innerHTML = '';
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = document.createElement('img');
                img.src = e.target.result;
                img.className = 'admin-image-preview';
                preview.appendChild(img);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@endsection