@extends('admin.layouts.master')

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

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

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-couch"></i> {{ __('admin.products') }}</h3>
        <div class="card-tools">
            @can('products.create')
                <a href="{{ route('admin.products.create') }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus"></i> {{ __('admin.add') }}
                </a>
            @endcan
            @can('products.export')
                <button type="button" class="btn btn-success btn-sm" disabled title="Coming soon">
                    <i class="fas fa-file-excel"></i> {{ __('admin.export') }}
                </button>
            @endcan
            @can('products.import')
                <button type="button" class="btn btn-warning btn-sm" disabled title="Coming soon">
                    <i class="fas fa-file-import"></i> {{ __('admin.import') }}
                </button>
            @endcan
        </div>
    </div>
    <div class="card-body">
        {{-- Advanced filters --}}
        <div class="row mb-3">
            <div class="col-md-3">
                <label class="small mb-1">{{ __('admin.categories') }}</label>
                <select class="form-control form-control-sm filter-input" id="filter_category_id">
                    <option value="">—</option>
                    @foreach($categories as $c)
                        <option value="{{ $c->id }}">{{ $c->name_ar }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="small mb-1">{{ __('admin.brands') }}</label>
                <select class="form-control form-control-sm filter-input" id="filter_brand_id">
                    <option value="">—</option>
                    @foreach($brands as $b)
                        <option value="{{ $b->id }}">{{ $b->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="small mb-1">النوع</label>
                <select class="form-control form-control-sm filter-input" id="filter_type">
                    <option value="">—</option>
                    <option value="finished">جاهز</option>
                    <option value="manufactured">تصنيع</option>
                    <option value="service">خدمة</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="small mb-1">{{ __('admin.status') }}</label>
                <select class="form-control form-control-sm filter-input" id="filter_status">
                    <option value="">—</option>
                    <option value="active">{{ __('admin.active') }}</option>
                    <option value="inactive">{{ __('admin.inactive') }}</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="small mb-1">نطاق السعر</label>
                <div class="input-group input-group-sm">
                    <input type="number" min="0" class="form-control filter-input" id="filter_price_min" placeholder="من">
                    <input type="number" min="0" class="form-control filter-input" id="filter_price_max" placeholder="إلى">
                </div>
            </div>
        </div>

        <table id="productsTable" class="table table-bordered table-striped table-hover" style="width:100%">
            <thead>
                <tr>
                    <th>#</th>
                    <th>صورة</th>
                    <th>SKU</th>
                    <th>{{ __('admin.name') }}</th>
                    <th>{{ __('admin.categories') }}</th>
                    <th>{{ __('admin.brands') }}</th>
                    <th>تكلفة</th>
                    <th>بيع</th>
                    <th>variants</th>
                    <th>مميز</th>
                    <th>{{ __('admin.status') }}</th>
                    <th>{{ __('admin.actions') }}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
@include('admin._partials.crud_scripts')
<script>
$(function () {
    const table = $('#productsTable').DataTable({
        processing: true, serverSide: true, responsive: true, order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.products.data') }}',
            data: d => {
                d.category_id = $('#filter_category_id').val();
                d.brand_id    = $('#filter_brand_id').val();
                d.type        = $('#filter_type').val();
                d.status      = $('#filter_status').val();
                d.price_min   = $('#filter_price_min').val();
                d.price_max   = $('#filter_price_max').val();
            }
        },
        language: { url: OFP.dtLanguage },
        columns: [
            { data: 'id',                   name: 'id', width: '50px' },
            { data: 'main_image_url',       name: 'main_image_url', orderable: false, searchable: false },
            { data: 'sku',                  name: 'sku' },
            { data: 'name_ar',              name: 'name_ar' },
            { data: 'category_name',        name: 'category.name_ar', orderable: false },
            { data: 'brand_name',           name: 'brand.name', orderable: false },
            { data: 'cost_price',           name: 'cost_price' },
            { data: 'sale_price',           name: 'sale_price' },
            { data: 'variants_count_badge', name: 'variants_count', orderable: false, searchable: false },
            { data: 'is_featured',          name: 'is_featured' },
            { data: 'status',               name: 'status' },
            { data: 'actions',              name: 'actions', orderable: false, searchable: false }
        ]
    });

    $('.filter-input').on('change input', () => table.ajax.reload());
});
</script>
@endpush