@extends('layouts.app')
@section('content')

@include('layouts.top-header', [
    'title' => __('Employee Commission'),
    'class' => 'col-lg-7'
])

<div class="container-fluid mt--6 mb-5">
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header border-0">
                    <span class="h3">{{__('Employee Commission')}}</span>
                </div>
                <form action="{{ route('owner.employee-commission') }}" method="get" class="ml-4" id="filter_employee_commission_form">
                    <div class="row rtl-date-filter-row">
                        <div class="form-group col-3">
                            <input type="month" id="filter_month" name="month" class="form-control" value="{{ $yearMonth }}" required>
                        </div>
                        <div class="form-group col-3">
                            <button type="submit" class="btn btn-primary rtl-date-filter-btn">{{ __('Apply') }}</button>
                        </div>
                    </div>
                </form>
                <div class="table-responsive">
                    <table class="table align-items-center table-flush" id="dataTable">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col" class="sort">{{__('Image')}}</th>
                                <th scope="col" class="sort">{{__('Employee Name')}}</th>
                                <th scope="col" class="sort">{{__('Year-Month')}}</th>
                                <th scope="col" class="sort">{{__('Commission Amount')}}</th>
                            </tr>
                        </thead>
                        <tbody class="list">
                            @foreach ($employeesCommission as $emp)
                            <tr>
                                <td>
                                    <img src="{{ $emp['employee']->imagePath . $emp['employee']->image }}" class="avatar rounded-circle mr-3">
                                </td>
                                <td>{{ $emp['employee']->name }}</td>
                                <td>{{ $emp['month'] }}</td>
                                <td>{{ $emp['commission'] }}</td>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    $(document).ready(function() {
        $('#dataTable').DataTable({
            language: {
                paginate: {
                    previous: "<i class='fas fa-angle-left'>",
                    next: "<i class='fas fa-angle-right'>"
                }
            }
        });
    });
</script>
@endsection