@if($matters->isEmpty())
    <div class="mx-3">
        <x-record-not-found />
    </div>
@else
    <div id="matter-total-count-hidden" style="display: none;">{{$matters->total()}}</div>
    <div class="table-responsive">
        <table class="table table-hover table-bordered fs-10">
            <thead class="sticky-top shadow-sm">
                <tr>
                    <th>{{ __('global.no')}}</th>
                    <th>{{ __('matter.title')}}</th>
                    <th>{{ __('matter.description')}}</th>
                    <th>{{ __('matter.comment')}}</th>
                    <th>{{ __('matter.type.header')}}</th>
                    <th>{{ __('matter.status.header')}}</th>
                    <th>{{ __('matter.specialist')}}</th>
                    <th>{{ __('matter.date')}}</th>
                    <th>{{ __('matter.created_date')}}</th>
                    @if(auth()->user()->hasPermissionTo('Matter - View Matter') || auth()->user()->hasPermissionTo('Matter - Edit Matter') || auth()->user()->hasPermissionTo('Matter - Delete Matter'))
                        <th colspan="4" class="text-center" style="width: 10%;"><i class="bx bx-cog"></i></th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @php $counter = ($matters->currentPage() - 1) * $matters->perPage() + 1; @endphp
                @foreach($matters as $matter)
                    <tr id="tr-{{ $matter->id }}"
                            class="v-align-middle alert 
                            @if($matter->is_approved != 'no')
                                @if($matter->status == 'complete') alert-success
                                @elseif($matter->status == 'inprogress') alert-info
                                @elseif($matter->status == 'archive') alert-warning
                                @endif
                            @else 
                                alert-warning
                            @endif
                            "
                        >
                        <td>
                            <button type="button" class="btn btn-sm text-center btn-primary lh-10">{{$counter++}}</button>
                        </td>
                        <td>{{$matter->title}}</td>
                        <td>{{$matter->description}}</td>
                        <td>{{$matter->comments}}</td>
                        <td>
                            @if($matter->type == 'tarh') {{ __('matter.type.tarh') }}
                            @elseif($matter->type == 'technical') {{ __('matter.type.technical') }}
                            @elseif($matter->type == 'commission') {{ __('matter.type.commission') }}
                            @endif
                        </td>
                        <td>
                            @if($matter->status == 'pending') {{ __('matter.status.pending') }}
                            @elseif($matter->status == 'inprogress') {{ __('matter.status.inprogress') }}
                            @elseif($matter->status == 'complete') {{ __('matter.status.complete') }}
                            @else {{ __('matter.status.archive') }}
                            @endif
                        </td>
                        <td>{{$matter->specialist->name ?? ''}}</td>
                        <td>{{ getHijriDate($matter->date) }}</td>
                        <td>{{ getHijriDate($matter->created_at) }}</td>
                        @if(auth()->user()->hasPermissionTo('Matter - View Matter'))
                            <td style="padding: 5px; text-align:center;">
                                @if($matter->is_approved != 'no')
                                    <a href="{{ route('viewMatter', ['id'=> encryption($matter->id) ]) }}"
                                        data-toggle="tooltip"
                                        title="{{ __('matter.view')}}"
                                        class="btn btn-outline-primary custom-a btn-sm show-edit-btn"
                                        style="font-size: 12px; font-weight: bold;">
                                        <i class="fa fa-eye"></i>
                                    </a>
                                @else 
                                    <i class="fas fa-arrow-{{ app()->getLocale() == 'en' ? 'right' : 'left'}}"></i>
                                @endif
                            </td>
                        @endif
                        <td style="padding: 5px; text-align:center;">
                            @if($matter->is_approved != 'no')
                                @if($matter->followupName->isNotEmpty() && $matter->is_used_agenda != 'no')
                                    <a href="{{ route('followupMatter', ['matter_id'=> encryption($matter->id), 'agenda_id' => encryption($matter->followupName[0]->agenda->id)]) }}"
                                        data-toggle="tooltip"
                                        title="{{ __('agenda.followup')}}"
                                        class="btn btn-outline-info custom-a btn-sm"
                                        style="font-size: 12px; font-weight: bold;">
                                        <i class="fas fa-arrow-{{ app()->getLocale() == 'en' ? 'left' : 'right'}}"></i>
                                    </a>
                                @endif
                            @else 
                                <i class="fas fa-arrow-{{ app()->getLocale() == 'en' ? 'right' : 'left'}}"></i>
                            @endif
                        </td>
                        @if(auth()->user()->hasPermissionTo('Matter - Edit Matter'))
                            <td style="padding: 5px; text-align:center;">
                                @if($matter->is_approved != 'no')
                                    <a @if($matter->status == 'pending') href="{{ route('editMatter', ['id'=> encryption($matter->id) ]) }}" @endif
                                        data-toggle="tooltip"
                                        title="{{ __('matter.edit')}}"
                                        class="btn btn-outline-secondary custom-a btn-sm @if($matter->status == 'pending') show-edit-btn @endif"
                                        style="font-size: 12px; font-weight: bold;" @if($matter->status != 'pending') disabled @endif >
                                        <i class="fa fa-pen"></i>
                                    </a>
                                @else 
                                    <i class="fas fa-arrow-{{ app()->getLocale() == 'en' ? 'right' : 'left'}}"></i>
                                @endif
                            </td>
                        @endif

                        @if(auth()->user()->hasPermissionTo('Matter - Delete Matter'))
                            <td style="padding: 5px;text-align: center;">
                                @if($matter->is_approved != 'no')
                                    <i class="mdi mdi-trash-can-outline text-danger {{ $matter->status == 'pending' ? 'deleteBtn' : '' }} btn btn-outline-danger btn-sm"
                                    @if($matter->status == 'pending')
                                        data-id="{{ encryption($matter->id) }}"
                                        data-url="deletes_matter_route"
                                        data-toggle="tooltip"
                                        title="{{ __('global.delete')}}"
                                    @else
                                        disabled
                                    @endif
                                    ></i>
                                @else 
                                    <i class="mdi mdi-sticker-check-outline text-success approveBtn btn btn-outline-success btn-sm"
                                        data-id="{{ encryption($matter->id) }}"
                                        data-url="approve_reffer_matter_route"
                                        data-toggle="tooltip"
                                        title="{{ __('global.approve')}}"></i>
                                @endif
                            </td>
                        @endif
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="col-lg-12">
        <x-pagination-links :paginator="$matters" />
    </div>
@endif