@extends('layouts.app')

@section('content')
    <div class="page">
        <div class="page-inner">
            <header class="page-title-bar">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ route('tests.index') }}"><i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Tests') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('tests.edit', $test->id) }}">{{ $test->trans('name') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('tests.categories', $test->id) }}">{{ __('Categories') }}</a>
                        </li>
                        <li class="breadcrumb-item active">{{ $category->trans('name') }}</li>
                    </ol>
                </nav>
                <h1 class="page-title">{{ __('Conversion Table') }}: {{ $category->trans('name') }}</h1>
            </header>

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <div class="page-section">
                <section class="card card-fluid">
                    <header class="card-header">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                            @foreach($genders as $gender)
                                <li class="nav-item">
                                    <a class="nav-link {{ (session('active_gender', 'male') === $gender) ? 'active' : '' }}"
                                       id="tab-{{ $gender }}"
                                       data-toggle="tab"
                                       href="#panel-{{ $gender }}"
                                       role="tab">
                                        {{ __($gender === 'male' ? 'Man' : ($gender === 'female' ? 'Vrouw' : 'Anders')) }}
                                        <span class="badge badge-secondary ml-1">{{ isset($conversions[$gender]) ? $conversions[$gender]->count() : 0 }}</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </header>
                    <div class="card-body">
                        <div class="tab-content">
                            @foreach($genders as $gender)
                                <div class="tab-pane fade {{ (session('active_gender', 'male') === $gender) ? 'show active' : '' }}"
                                     id="panel-{{ $gender }}"
                                     role="tabpanel">

                                    <form method="POST" action="{{ route('tests.categories.conversions.save', [$test->id, $category->id]) }}">
                                        @csrf
                                        <input type="hidden" name="gender" value="{{ $gender }}">

                                        <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
                                            <table class="table table-sm table-hover mb-0" id="table-{{ $gender }}">
                                                <thead class="thead-light" style="position: sticky; top: 0; z-index: 1;">
                                                    <tr>
                                                        <th style="width: 120px;">{{ __('Raw Score') }}</th>
                                                        <th style="width: 160px;">{{ __('Converted (0-10)') }}</th>
                                                        <th style="width: 130px;">{{ __('Normalized (0-100)') }}</th>
                                                        <th style="width: 60px;"></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @if(isset($conversions[$gender]))
                                                        @foreach($conversions[$gender] as $index => $entry)
                                                            <tr>
                                                                <td>
                                                                    <input type="number" name="raw_scores[]" value="{{ $entry->raw_score }}"
                                                                           class="form-control form-control-sm" step="1">
                                                                </td>
                                                                <td>
                                                                    <input type="number" name="converted_scores[]" value="{{ $entry->converted_score }}"
                                                                           class="form-control form-control-sm" step="0.01" min="0" max="10"
                                                                           onchange="updateNormalized(this)">
                                                                </td>
                                                                <td>
                                                                    <span class="text-muted normalized-value">{{ number_format($entry->converted_score * 10, 1) }}</span>
                                                                </td>
                                                                <td>
                                                                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeRow(this)" title="{{ __('Remove') }}">
                                                                        <i class="fa fa-times"></i>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>

                                        <div class="mt-3 d-flex justify-content-between">
                                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="addRow('{{ $gender }}')">
                                                <i class="fa fa-plus mr-1"></i> {{ __('Add Row') }}
                                            </button>
                                            <button type="submit" class="btn btn-success">
                                                <i class="fa fa-save mr-1"></i> {{ __('Save') }} {{ __($gender === 'male' ? 'Man' : ($gender === 'female' ? 'Vrouw' : 'Anders')) }}
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
function removeRow(btn) {
    btn.closest('tr').remove();
}

function addRow(gender) {
    var tbody = document.querySelector('#table-' + gender + ' tbody');
    var row = document.createElement('tr');
    row.innerHTML =
        '<td><input type="number" name="raw_scores[]" class="form-control form-control-sm" step="1"></td>' +
        '<td><input type="number" name="converted_scores[]" class="form-control form-control-sm" step="0.01" min="0" max="10" onchange="updateNormalized(this)"></td>' +
        '<td><span class="text-muted normalized-value">-</span></td>' +
        '<td><button type="button" class="btn btn-sm btn-outline-danger" onclick="removeRow(this)" title="{{ __("Remove") }}"><i class="fa fa-times"></i></button></td>';
    tbody.insertBefore(row, tbody.firstChild);
    row.querySelector('input').focus();
}

function updateNormalized(input) {
    var val = parseFloat(input.value);
    var span = input.closest('tr').querySelector('.normalized-value');
    if (!isNaN(val)) {
        span.textContent = (val * 10).toFixed(1);
    } else {
        span.textContent = '-';
    }
}
</script>
@endsection