@extends('admin.layouts.app')

@section('title', isset($productAttribute) ? 'Xüsusiyyəti redaktə et' : 'Yeni xüsusiyyət')

@php
$locales = ['az' => 'Azərbaycanca', 'en' => 'English', 'ru' => 'Русский'];
@endphp

@section('content')
<div class="admin-header-row">
    <h1 class="admin-title">{{ isset($productAttribute) ? 'Xüsusiyyəti redaktə et' : 'Yeni xüsusiyyət' }}</h1>
</div>

<div class="admin-card">
    <form method="POST" action="{{ isset($productAttribute) ? route('admin.product-attributes.update', $productAttribute) : route('admin.product-attributes.store') }}">
        @csrf
        @if(isset($productAttribute)) @method('PUT') @endif

        <div class="admin-form-grid">
            <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', $productAttribute->sort_order ?? 0) }}">
            </div>
            <div class="admin-form-group" style="display: flex; align-items: flex-end; padding-bottom: 8px;">
                <label class="admin-form-check">
                    <input type="checkbox" name="is_filter" value="1" {{ old('is_filter', $productAttribute->is_filter ?? false) ? 'checked' : '' }}>
                    <span>Filtrdə göstər</span>
                </label>
            </div>
            <div class="admin-form-group" style="display: flex; align-items: flex-end; padding-bottom: 8px;">
                <label class="admin-form-check">
                    <input type="checkbox" name="show_on_product" value="1" {{ old('show_on_product', $productAttribute->show_on_product ?? true) ? 'checked' : '' }}>
                    <span>Məhsul səhifəsində göstər</span>
                </label>
            </div>
            <div class="admin-form-group" style="display: flex; align-items: flex-end; padding-bottom: 8px;">
                <label class="admin-form-check">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', $productAttribute->is_active ?? true) ? 'checked' : '' }}>
                    <span>Aktiv</span>
                </label>
            </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-grid">
                    <div class="admin-form-group">
                        <label for="name{{ $suffix }}">Ad ({{ $label }})</label>
                        <input type="text" id="name{{ $suffix }}" name="name{{ $suffix }}" class="admin-form-control" value="{{ old('name' . $suffix, $productAttribute->{'name' . $suffix} ?? '') }}" {{ $code === 'az' ? 'required' : '' }}>
                    </div>
                    <div class="admin-form-group">
                        <label for="group_name{{ $suffix }}">Qrup ({{ $label }})</label>
                        <input type="text" id="group_name{{ $suffix }}" name="group_name{{ $suffix }}" class="admin-form-control" value="{{ old('group_name' . $suffix, $productAttribute->{'group_name' . $suffix} ?? '') }}">
                    </div>
                </div>
            </div>
        @endforeach

        <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.product-attributes.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');
        });
    });
</script>
@endsection