@extends('layouts.master')

@section('title') تصنيفات المنتجات @stop

@section('page-header')
<div class="main-parent"><div class="breadcrumb-header justify-content-between mb-3">
    <div><h4 class="content-title mb-1 font-weight-bold">تصنيفات المنتجات</h4><span class="text-muted">إدارة تصنيفات مستقلة عن مجموعات المنتجات</span></div>
    <button class="btn btn-primary" data-toggle="modal" data-target="#categoryModal" onclick="resetCategoryForm()"><i class="fa fa-plus ml-1"></i> إضافة تصنيف</button>
</div></div>
@endsection

@section('content')
<div class="card"><div class="card-body table-responsive">
    <table class="table table-bordered table-hover text-center">
        <thead><tr><th>#</th><th>التصنيف بالعربية</th><th>التصنيف بالإنجليزية</th><th>الإجراء</th></tr></thead>
        <tbody>
        @forelse($categories as $category)
            <tr><td>{{ $category->id }}</td><td>{{ $category->name_ar }}</td><td dir="ltr">{{ $category->name_en }}</td>
                <td><button type="button" class="btn btn-sm btn-outline-primary edit-category" data-id="{{ $category->id }}" data-ar="{{ $category->name_ar }}" data-en="{{ $category->name_en }}">تعديل</button></td></tr>
        @empty
            <tr><td colspan="4" class="text-muted">لا توجد تصنيفات بعد</td></tr>
        @endforelse
        </tbody>
    </table>
</div></div>

<div class="modal fade" id="categoryModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content">
        <div class="modal-header"><h5 class="modal-title" id="categoryModalTitle">إضافة تصنيف</h5><button type="button" class="close" data-dismiss="modal"><span>&times;</span></button></div>
        <div class="modal-body">
            <input type="hidden" id="category_id">
            <label for="category_name_ar">اسم التصنيف بالعربية</label><input class="form-control mb-3" id="category_name_ar" maxlength="255" required>
            <label for="category_name_en">اسم التصنيف بالإنجليزية</label><input class="form-control" id="category_name_en" maxlength="255" dir="ltr">
            <div class="text-danger mt-2" id="category_error" role="alert"></div>
        </div>
        <div class="modal-footer"><button class="btn btn-secondary" data-dismiss="modal">إلغاء</button><button class="btn btn-primary" id="save_category">حفظ</button></div>
    </div></div>
</div>
@endsection

@section('js')
<script>
    function resetCategoryForm() {
        $('#category_id, #category_name_ar, #category_name_en').val('');
        $('#category_error').text('');
        $('#categoryModalTitle').text('إضافة تصنيف');
    }
    $(document).on('click', '.edit-category', function () {
        $('#category_id').val($(this).data('id'));
        $('#category_name_ar').val($(this).attr('data-ar'));
        $('#category_name_en').val($(this).attr('data-en'));
        $('#category_error').text('');
        $('#categoryModalTitle').text('تعديل تصنيف');
        $('#categoryModal').modal('show');
    });
    $('#save_category').on('click', function () {
        var id = $('#category_id').val();
        var payload = {
            _token: '{{ csrf_token() }}',
            name_ar: $('#category_name_ar').val(),
            name_en: $('#category_name_en').val()
        };
        if (!payload.name_ar.trim()) {
            $('#category_error').text('يرجى إدخال اسم التصنيف بالعربية');
            return;
        }
        if (id) payload.id = id;
        $.ajax({
            url: id ? '{{ url('/update_product_category') }}' : '{{ url('/create_product_category') }}',
            type: 'POST', data: payload,
            success: function () { window.location.reload(); },
            error: function (xhr) {
                var errors = xhr.responseJSON && xhr.responseJSON.errors;
                $('#category_error').text(errors ? Object.values(errors).flat().join(' ') : 'تعذر حفظ التصنيف');
            }
        });
    });
</script>
@endsection