@extends('layouts.master')

@section('browserTitle')
Button selection
@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">Button selection</li>
@endif
@endsection


@section('title')
Button selection
@endsection

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


@section('body')
<div class="row row-cols-1 row-cols-md-2 g-4">
    <div class="col col-md-4">
        <img src="/img/btnSelEx.png" class="img-thumbnail">
    </div>
    <div class="col col-md-8">
        <p>{{ trans('ex.btnSelExLongDescription') }}</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.btnSelExInput') }}" class="my-btn my-green-btn">{{ trans('menu.addExInput') }}</a>
    </div>
    <div class="row">
        <table class="table">
            <thead>
                <th scope="col">{{ trans('ex.category') }}</th>
                <th scope="col">{{ trans('ex.type') }}</th>
                <th scope="col">{{ trans('ex.level') }}</th>
                <th scope="col">{{ trans('ex.button') }}</th>
                <th scope="col"></th>
            </thead>
            <tbody>
                @foreach($ex_inputs as $input)
                    @if($input->sortable == 0)
                    <tr>
                        <td>{{ $input->category[app()->getLocale()] }}</td>
                        <td>{{ $input->type[app()->getLocale()] }}</td>
                        <td>{{ $input->level }}</td>
                        <td>
                            @if($input->category['en'] == 'letter' || $input->category['en'] == 'number')
                            <button class='ex-button t-button my-rounded-3d-btn my-white-btn'><h1>{{ $input->type[app()->getLocale()] }}</h1></button>
                            @elseif($input->category['en'] == 'color')
                            <button class="{{ $input->type['en'] }}-button ex-button t-button my-rounded-3d-btn"></button>
                            @else
                            <img src="/{{ $input->path }}" class="input-img"><style>
                            img.input-img {
                                max-width: 100px;
                                max-height: 100px;
                            }
                            </style>
                            @endif
                        </td>
                        <td class="text-end">
                            @if($input->path != null)
                            <a href="{{ route('exInputs.edit.btnSelExInput', ['input' => $input->id]) }}" class="my-btn my-blue-btn">{{ trans('btn.edit') }}</a>
                            <a href="{{ route('exInputs.destroy.confirm.btnSelExInput', ['input' => $input->id]) }}" class="my-btn my-red-btn">{{ trans('btn.delete') }}</a>
                            @endif
                        </td> 
                    </tr>
                    @endif
                @endforeach
            </tbody>
        </table>
    </div>

</div>
@endsection