@extends('admin.layouts.layout')
@section('title')ویرایش دسته‌بندی@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    <div class="d-flex align-items-center mb-4">
        <a href="{{ route('admin.products.categories.index') }}" class="btn btn-outline-secondary btn-sm me-3">
            <i class="ti ti-arrow-right ti-xs"></i>
        </a>
        <div>
            <h4 class="mb-1">ویرایش دسته‌بندی</h4>
            <p class="text-muted mb-0">{{ $category->name }}</p>
        </div>
    </div>

    @if($errors->any())
        @foreach($errors->all() as $error)
            <div class="alert alert-danger alert-dismissible mb-3">
                {{ $error }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endforeach
    @endif

    <div class="card">
        <div class="card-body">
            <form method="POST" action="{{ route('admin.products.categories.update', $category->slug) }}" enctype="multipart/form-data">
                @csrf @method('PUT')
                <input type="hidden" name="image" id="image-data">

                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">نام دسته <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control"
                               value="{{ old('name', $category->name) }}" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Slug</label>
                        <input type="text" name="slug" class="form-control" dir="ltr"
                               value="{{ old('slug', $category->slug) }}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">آیکون <small class="text-muted">(اختیاری)</small></label>
                        <input type="hidden" name="icon" id="cat-icon" value="{{ old('icon', $category->icon) }}">
                        <button type="button" class="btn btn-outline-secondary w-100 d-flex align-items-center gap-2"
                                data-icon-picker data-icon-input="cat-icon" data-icon-preview="icon-preview">
                            <i id="icon-preview" class="ti ti-{{ old('icon', $category->icon) ?: 'folder' }}"></i>
                            <span class="small">{{ old('icon', $category->icon) ?: 'انتخاب آیکون' }}</span>
                        </button>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">دسته والد</label>
                        <select name="parent_id" class="form-select">
                            <option value="">— بدون والد (دسته اصلی) —</option>
                            @foreach($parents as $entry)
                                <option value="{{ $entry['item']->id }}"
                                    {{ old('parent_id', $category->parent_id) == $entry['item']->id ? 'selected' : '' }}>
                                    {{ str_repeat('— ', $entry['depth']) }}{{ $entry['item']->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">ترتیب نمایش</label>
                        <input type="number" name="sort_order" class="form-control" min="0" dir="ltr"
                               value="{{ old('sort_order', $category->sort_order) }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">وضعیت <span class="text-danger">*</span></label>
                        <select name="is_active" class="form-select">
                            <option value="1" {{ $category->is_active ? 'selected' : '' }}>فعال</option>
                            <option value="0" {{ !$category->is_active ? 'selected' : '' }}>غیرفعال</option>
                        </select>
                    </div>

                    {{-- Mega Menu Image --}}
                    <div class="col-12">
                        <label class="form-label">تصویر مگا منو <small class="text-muted">(اختیاری — مستطیلی، مثلاً ۸۰۰×۲۵۰)</small></label>
                        <div id="mega-preview-wrap" class="mb-2 {{ $category->mega_menu_image ? '' : 'd-none' }}">
                            <img id="mega-preview"
                                 src="{{ $category->mega_menu_image ? url('uploads/categories/' . $category->mega_menu_image) : '' }}"
                                 class="rounded img-fluid" style="max-height:150px;">
                        </div>
                        <input type="file" name="mega_menu_image" id="mega-file-input" accept="image/*" class="form-control">
                        @error('mega_menu_image')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Image --}}
                    <div class="col-12">
                        <label class="form-label">تصویر دسته</label>
                        <div id="image-area">
                            <div id="img-preview-wrap" class="mb-2 {{ $category->image ? '' : 'd-none' }}">
                                <img id="img-preview"
                                     src="{{ $category->image ? url('uploads/categories/' . $category->image) : '' }}"
                                     class="rounded" style="max-height:120px; max-width:240px; object-fit:cover;">
                            </div>
                            <div id="no-image-text" class="text-muted small mb-2 {{ $category->image ? 'd-none' : '' }}">
                                تصویری انتخاب نشده
                            </div>
                        </div>
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="select-img-btn">
                            <i class="ti ti-photo me-1"></i> {{ $category->image ? 'تغییر تصویر' : 'انتخاب تصویر' }}
                        </button>
                        <input type="file" id="img-file-input" accept="image/*" class="d-none">
                    </div>
                </div>

                <div class="mt-4 d-flex gap-2">
                    <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
                    <a href="{{ route('admin.products.categories.index') }}" class="btn btn-outline-secondary">انصراف</a>
                </div>
            </form>
        </div>
    </div>

</div>

@include('admin.products._crop-modal')
@include('admin.products._icon-picker')
@endsection

@section('customjs')
@include('admin.products._crop-js')
<script src="{{ url('theme/admin') }}/js/icon-names.js"></script>
<script src="{{ url('theme/admin') }}/js/icon-picker.js"></script>
<script>
document.getElementById('mega-file-input').addEventListener('change', function () {
    if (!this.files || !this.files[0]) return;
    var wrap = document.getElementById('mega-preview-wrap');
    var img  = document.getElementById('mega-preview');
    var reader = new FileReader();
    reader.onload = function (e) {
        img.src = e.target.result;
        wrap.classList.remove('d-none');
    };
    reader.readAsDataURL(this.files[0]);
});
</script>
@endsection
