@extends('admin.layouts.master')

@section('title', __('admin.categories'))
@section('page_title', __('admin.categories'))

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('admin.dashboard') }}</a></li>
    <li class="breadcrumb-item active">{{ __('admin.categories') }}</li>
@endsection

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-th-large"></i> {{ __('admin.categories') }}</h3>
                <div class="card-tools">
                    @can('categories.create')
                        <button type="button" class="btn btn-primary btn-sm" id="addCategoryBtn">
                            <i class="fas fa-plus"></i> {{ __('admin.add') }}
                        </button>
                    @endcan
                </div>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <select class="form-control form-control-sm filter-input" id="filter_status">
                            <option value="">— {{ __('admin.status') }} —</option>
                            <option value="active">{{ __('admin.active') }}</option>
                            <option value="inactive">{{ __('admin.inactive') }}</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select class="form-control form-control-sm filter-input" id="filter_parent_id">
                            <option value="">— القسم الأب —</option>
                            @foreach($parents as $p)
                                <option value="{{ $p->id }}">{{ $p->name_ar }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <table id="categoriesTable" class="table table-bordered table-striped table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>صورة</th>
                            <th>الاسم</th>
                            <th>القسم الأب</th>
                            <th>منتجات</th>
                            <th>{{ __('admin.status') }}</th>
                            <th>{{ __('admin.actions') }}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-sitemap"></i> شجرة التصنيفات</h3>
            </div>
            <div class="card-body p-0" style="max-height:600px;overflow-y:auto">
                @if(empty($tree))
                    <p class="text-center text-muted p-4">{{ __('admin.no_data') }}</p>
                @else
                    <ul class="list-group list-group-flush small">
                        @include('admin.categories._tree_node', ['nodes' => $tree, 'depth' => 0])
                    </ul>
                @endif
            </div>
        </div>
    </div>
</div>

@include('admin.categories._modal', ['parents' => $parents])
@endsection

@push('scripts')
@include('admin._partials.crud_scripts')
<script>
$(function () {
    const table = $('#categoriesTable').DataTable({
        processing: true, serverSide: true, responsive: true, order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.categories.data') }}',
            data: d => {
                d.status    = $('#filter_status').val();
                d.parent_id = $('#filter_parent_id').val();
            }
        },
        language: { url: OFP.dtLanguage },
        columns: [
            { data: 'id',                   name: 'id', width: '60px' },
            { data: 'image',                name: 'image', orderable: false, searchable: false },
            { data: 'name_ar',              name: 'name_ar' },
            { data: 'parent_name',          name: 'parent.name_ar', orderable: false },
            { data: 'products_count_badge', name: 'products_count', orderable: false, searchable: false },
            { data: 'status',               name: 'status' },
            { data: 'actions',              name: 'actions', orderable: false, searchable: false }
        ]
    });

    $('.filter-input').on('change', () => table.ajax.reload());

    $('#addCategoryBtn').on('click', function () {
        $('#categoryForm').trigger('reset')[0].action = '{{ route('admin.categories.store') }}';
        $('#categoryMethod').val('POST');
        $('#categoryImagePreview').attr('src', 'https://placehold.co/120x120/eee/666?text=?');
        $('#categoryModalLabel').text('{{ __('admin.add') }}');
        $('#categoryModal').modal('show');
    });

    $('#categoriesTable tbody').on('click', '.edit-category-btn', function () {
        const id = $(this).data('id');
        $.get('{{ url('admin/categories') }}/' + id, function (c) {
            OFP.populateForm($('#categoryForm'), c);
            $('#categoryForm')[0].action = '{{ url('admin/categories') }}/' + c.id;
            $('#categoryMethod').val('PUT');
            $('#categoryImagePreview').attr('src', c.image_url || 'https://placehold.co/120x120/eee/666?text=?');
            $('#categoryModalLabel').text('{{ __('admin.edit') }} — ' + c.name_ar);
            $('#categoryModal').modal('show');
        });
    });

    $('input[name=image]').on('change', function () {
        const f = this.files && this.files[0];
        if (!f) return;
        const r = new FileReader();
        r.onload = e => $('#categoryImagePreview').attr('src', e.target.result);
        r.readAsDataURL(f);
    });

    @if($errors->any()) $('#categoryModal').modal('show'); @endif
});
</script>
@endpush