@extends('admin.layouts.master')

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

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

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-exchange-alt"></i> سجل حركة المخزون</h3>
    </div>
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-3"><label class="small mb-1">{{ __('admin.warehouses') }}</label>
                <select class="form-control form-control-sm filter-input" id="filter_warehouse_id">
                    <option value="">—</option>
                    @foreach($warehouses as $w)<option value="{{ $w->id }}">{{ $w->name }}</option>@endforeach
                </select></div>
            <div class="col-md-3"><label class="small mb-1">نوع الحركة</label>
                <select class="form-control form-control-sm filter-input" id="filter_type">
                    <option value="">—</option>
                    @foreach($types as $t)<option value="{{ $t }}">{{ $t }}</option>@endforeach
                </select></div>
            <div class="col-md-2"><label class="small mb-1">من</label>
                <input type="date" class="form-control form-control-sm filter-input" id="filter_date_from"></div>
            <div class="col-md-2"><label class="small mb-1">إلى</label>
                <input type="date" class="form-control form-control-sm filter-input" id="filter_date_to"></div>
            <div class="col-md-2"><label class="small mb-1">رقم منتج</label>
                <input type="number" class="form-control form-control-sm filter-input" id="filter_product_id" placeholder="ID"></div>
        </div>

        <table id="movementsTable" class="table table-bordered table-striped table-hover" style="width:100%">
            <thead><tr>
                <th>#</th><th>الوقت</th><th>النوع</th><th>المنتج</th>
                <th>{{ __('admin.warehouses') }}</th>
                <th>الكمية</th><th>الرصيد بعد</th><th>المرجع</th><th>المستخدم</th>
            </tr></thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
@include('admin._partials.crud_scripts')
<script>
$(function () {
    const t = $('#movementsTable').DataTable({
        processing: true, serverSide: true, responsive: true, order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.stock.movements.data') }}',
            data: d => {
                d.warehouse_id = $('#filter_warehouse_id').val();
                d.type         = $('#filter_type').val();
                d.date_from    = $('#filter_date_from').val();
                d.date_to      = $('#filter_date_to').val();
                d.product_id   = $('#filter_product_id').val();
            }
        },
        language: { url: OFP.dtLanguage },
        dom: 'Bfrtip',
        buttons: ['excel', 'print', 'pdf'],
        columns: [
            { data: 'id',             name: 'id', width: '60px' },
            { data: 'moved_at',       name: 'moved_at' },
            { data: 'type',           name: 'type' },
            { data: 'product_name',   name: 'product.name_ar', orderable: false },
            { data: 'warehouse_name', name: 'warehouse.name', orderable: false },
            { data: 'quantity',       name: 'quantity' },
            { data: 'balance_after',  name: 'balance_after' },
            { data: 'reference',      name: 'reference', orderable: false, searchable: false },
            { data: 'user_name',      name: 'user.name', orderable: false }
        ]
    });
    $('.filter-input').on('change', () => t.ajax.reload());
});
</script>
@endpush