@extends('layouts.master')

@section('browserTitle')
Text completion
@endsection


@section('breadcrumb')
@if(isset($_SESSION['logged'])&&($_SESSION['logged']==true))
<li class="breadcrumb-item"><a href="{{ route('clinicianIndex') }}">{{ trans('menu.home') }}</a></li>
<li class="breadcrumb-item"><a href="{{ route('exInputs.index') }}">{{ trans('menu.availEx') }}</a></li>
<li class="breadcrumb-item active" aria-current="page">Text completion</li>
@endif
@endsection


@section('title')
Text completion
@endsection

@section('subtitle')
{{ trans('ex.inputs') }}
@endsection


<!-- complete story, target, distractors -->

@section('body')
<div class="row row-cols-1 row-cols-md-2 g-4">
    <div class="col col-md-4">
        <img src="/img/txtCmplEx.png" class="img-thumbnail">
    </div>
    <div class="col col-md-8">
        <p>{{ trans('ex.txtCmplExLongDescription') }}</p>
        <p>{{ trans('ex.txtCmplV2ExLongDescription') }}</p>
        <p>{{ trans('ex.txtCmplV1V2InputInstr') }}</p>
    </div>
</div>

<div class="row">
    <div class="col-6 d-flex justify-content-start">
        <h2>{{ trans('ex.availInputs') }}</h2>
    </div>
    <div class="col-6 d-flex justify-content-end">
        <a href="{{ route('exInputs.create.txtCmplExInput') }}" class="my-btn my-green-btn">{{ trans('menu.addExInput') }}</a>
    </div>
    <div class="row">
        <table class="table">
            <thead>
                <th scope="col" class="col-sm-6">{{ trans('ex.story') }}</th>
                <th scope="col">{{ trans('ex.level') }}</th>
                <th scope="col">{{ trans('ex.target') }}</th>
                <th scope="col">{{ trans('ex.distractors') }}</th>
                <th scope="col" class="col-sm-2"></th>
            </thead>
            <tbody>
                @foreach($ex_inputs as $input)
                    @if($input->sortable == 0)
                    <tr>
                        <td>{{ $input->complete_story }}</td>
                        <td>{{ $input->level }}</td>
                        <!-- <td>{{ $input->target }}</td> -->
                        <td><ul>
                            @foreach($input->targets as $target)
                            <li>{{ $target }}</li>
                            @endforeach
                        </ul></td>
                        <td><ul>
                            @foreach($input->distractors as $distractor)
                            <li>{{ $distractor }}</li>
                            @endforeach
                        </ul></td>
            
                        <td class="text-end">
                            <a href="{{ route('exInputs.edit.txtCmplExInput', ['input' => $input->id]) }}" class="my-btn my-blue-btn">{{ trans('btn.edit') }}</a>
                            <a href="{{ route('exInputs.destroy.confirm.txtCmplExInput', ['input' => $input->id]) }}" class="my-btn my-red-btn">{{ trans('btn.delete') }}</a>
                        </td> 
                    </tr>
                    @endif
                @endforeach
            </tbody>
        </table>
    </div>

</div>
@endsection