@extends('layouts.master')
@section('page_title', 'Skills & Traits')
@section('content')

    <div class="card">
        <div class="card-header header-elements-inline">
            <h6 class="card-title">Affective Traits &amp; Psychomotor Skills</h6>
            {!! Qs::getPanelOptions() !!}
        </div>

        <div class="card-body">
            <div class="alert alert-info border-0">
                Create the traits and skills <strong>your school</strong> wants on its report cards. Teachers (class teachers) rate each
                one from 1 to 5 for every student, and they appear on every report card in the order listed here.
                Deleting an item removes it from the report cards; the other ratings are not affected.
            </div>

            <div class="row">
                @foreach([['AF', 'Affective Traits', $af, 'bg-danger', 'E.g. PUNCTUALITY'], ['PS', 'Psychomotor Skills', $ps, 'bg-success', 'E.g. HANDWRITING']] as [$type, $title, $list, $bg, $ph])
                    <div class="col-lg-6">
                        <div class="card border">
                            <div class="card-header {{ $bg }} text-white"><h6 class="card-title font-weight-bold">{{ strtoupper($title) }}</h6></div>
                            <div class="card-body">
                                <form method="post" action="{{ route('skills.store') }}" class="mb-3">
                                    @csrf
                                    <input type="hidden" name="skill_type" value="{{ $type }}">
                                    <div class="input-group">
                                        <input name="name" required maxlength="60" type="text" class="form-control text-uppercase" placeholder="{{ $ph }}">
                                        <span class="input-group-append"><button type="submit" class="btn btn-primary"><i class="icon-plus2 mr-1"></i> Add</button></span>
                                    </div>
                                </form>

                                @if($list->isEmpty())
                                    <p class="text-muted mb-0">Nothing added yet.</p>
                                @else
                                    <table class="table table-sm table-bordered">
                                        <tbody>
                                        @foreach($list as $sk)
                                            <tr>
                                                <td style="width:40px" class="text-center">{{ $loop->iteration }}</td>
                                                <td class="font-weight-semibold">{{ $sk->name }}</td>
                                                <td class="text-center" style="width:120px; white-space:nowrap">
                                                    <a href="{{ route('skills.edit', $sk->id) }}" class="btn btn-sm btn-light"><i class="icon-pencil"></i></a>
                                                    <a id="{{ $sk->id }}" onclick="confirmDelete(this.id)" href="#" class="btn btn-sm btn-light text-danger"><i class="icon-trash"></i></a>
                                                    <form method="post" id="item-delete-{{ $sk->id }}" action="{{ route('skills.destroy', $sk->id) }}" class="hidden">@csrf @method('delete')</form>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

@endsection