@extends('backend.settings.competency-ratings.layout')

@section('title','Competency Ratings Setting')

@section('competency-ratings-content')


    @if ($errors->any())
        <div class="alert alert-danger">
            @foreach ($errors->all() as $error)
                <p class="mb-0">{{ $error }}</p>
            @endforeach
        </div>
    @endif


    <div class="mb-3 text-end">
        @can(\App\Models\Permission::PERM_COMPETENCY_RATING_SETTING_CREATE)
            <a href="{{ route('app.settings.competency-ratings.create') }}" class="btn-shadow btn btn-info">
                    <span class="btn-icon-wrapper pr-2 opacity-7">
                        <i class="fas fa-plus-circle fa-w-20"></i>
                    </span>
                {{ __('Create New Competency Rating') }}
            </a>
        @endcan
    </div>


    <div class="main-card card pb-2">

        <div class="table-responsive">
            <table id="datatable" class="align-middle mb-0 table table-borderless table-striped table-hover left-sort-icon">
                <thead>
                <tr>
                    <th style="width:40%;">Name</th>
                    <th style="width:15%;">Rating</th>
                    <th style="width:15%;">Background</th>
                    <th style="width:15%;">Status</th>
                    <th class="text-end" style="width:15%;">Action</th>
                </tr>
                </thead>
                <tbody>
                @foreach($ratings as $key => $item)
                    <tr class="cursor-pointer" onclick="document.location.href='{{ route('app.settings.competency-ratings.edit',$item->id) }}'">
                        <td>{{ $item->name }}</td>
                        <td class="">{{ $item->rating }}</td>
                        <td style="{{ _style('background-color', $item->background_color) }}"></td>
                        <td class="">{{ $item->status }}</td>
                        <td class="text-end">
                            <i class="fas fa-ellipsis-v dropdown-toggle me-3"
                               id="page-dropdown-{{ $item->id }}"
                               data-bs-toggle="dropdown"
                               aria-expanded="false" onclick="event.stopPropagation()">
                            </i>
                            <ul class="dropdown-menu" aria-labelledby="page-dropdown-{{ $item->id }}">

                                @can(\App\Models\Permission::PERM_COMPETENCY_RATING_SETTING_UPDATE)
                                    <li>
                                        <a class="dropdown-item" href="{{ route('app.settings.competency-ratings.edit',$item->id) }}">
                                            <span>Edit</span>
                                        </a>
                                    </li>
                                @endcan

                                @can(\App\Models\Permission::PERM_COMPETENCY_RATING_SETTING_DELETE)
                                    @if(!$item->trainings_count)
                                        <li>
                                            <button class="dropdown-item" type="button"
                                                    onclick="AppHelper.deleteData({{ $item->id }})">
                                                <span>Delete</span>
                                            </button>
                                            <form id="delete-form-{{ $item->id }}"
                                                  action="{{ route('app.settings.competency-ratings.destroy',$item->id) }}" method="POST"
                                                  style="display: none;">
                                                @csrf()
                                                @method('DELETE')
                                            </form>
                                        </li>
                                    @endif
                                @endcan

                            </ul>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection