@extends('layouts.app')

@section('styles')
<style>
.sortable-ghost {
    opacity: 0.4;
    background-color: #f8f9fa;
}
</style>
@endsection

@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="/questions"><i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Profiles') }}</a>
                        </li>
                        <li class="breadcrumb-item active">{{ $profile->trans('profilename') }}</li>
                    </ol>
                </nav>
                <div class="d-md-flex align-items-md-start">
                    <h1 class="page-title mr-sm-auto">{{ __('Link Tests to Profile') }}: {{ $profile->trans('profilename') }}</h1>
                </div>
            </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

            <div class="page-section">
                <div class="row">
                    <div class="col-md-8">
                        <section class="card card-fluid">
                            <header class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>{{ __('Available Tests') }}</span>
                                    <span class="badge badge-info">{{ __('Drag to reorder') }}</span>
                                </div>
                            </header>
                            <div class="card-body">
                                <form method="POST" action="{{ route('questions.tests.update', $profile->id) }}" id="tests-form">
                                    @csrf
                                    
                                    <div class="alert alert-info">
                                        <i class="fa fa-info-circle"></i>
                                        {{ __('Select the tests that should be part of this profile. Users will complete these tests in the order shown below.') }}
                                    </div>

                                    @if($allTests->count() > 0)
                                        <ul class="list-group" id="tests-list">
                                            @foreach($allTests as $test)
                                                <li class="list-group-item" data-id="{{ $test->id }}">
                                                    <div class="d-flex align-items-center">
                                                        <i class="fa fa-bars text-muted mr-3" style="cursor: move;"></i>
                                                        <div class="custom-control custom-checkbox">
                                                            <input type="checkbox" name="tests[]" value="{{ $test->id }}" 
                                                                   id="test-{{ $test->id }}" class="custom-control-input test-checkbox"
                                                                   {{ in_array($test->id, $linkedTestIds) ? 'checked' : '' }}>
                                                            <label class="custom-control-label" for="test-{{ $test->id }}">
                                                                <strong>{{ $test->trans('name') }}</strong>
                                                            </label>
                                                        </div>
                                                        <span class="badge badge-secondary ml-auto">{{ $test->questions()->count() }} {{ __('questions') }}</span>
                                                    </div>
                                                    @if($test->description)
                                                        <small class="text-muted ml-4 pl-3">
                                                            {{ \Illuminate\Support\Str::limit($test->trans('description'), 100) }}
                                                        </small>
                                                    @endif
                                                </li>
                                            @endforeach
                                        </ul>
                                    @else
                                        <p class="text-muted">{{ __('No tests available. Create tests first in the Tests section.') }}</p>
                                        <a href="/tests" class="btn btn-primary">{{ __('Go to Tests') }}</a>
                                    @endif

                                    <hr>
                                    <button type="submit" class="btn btn-primary">{{ __('Save Changes') }}</button>
                                    <a href="/questions" class="btn btn-secondary">{{ __('Back to Profiles') }}</a>
                                </form>
                            </div>
                        </section>
                    </div>

                    <div class="col-md-4">
                        <section class="card card-fluid">
                            <header class="card-header">{{ __('Profile Summary') }}</header>
                            <div class="card-body">
                                <p>
                                    <strong>{{ __('Profile') }}:</strong> {{ $profile->trans('profilename') }}
                                </p>
                                <p>
                                    <strong>{{ __('Linked Tests') }}:</strong> {{ count($linkedTestIds) }}
                                </p>
                                @if(count($linkedTestIds) > 0)
                                    <p>
                                        <strong>{{ __('Total Questions') }}:</strong> 
                                        {{ $profile->getAllQuestionsCount() }}
                                    </p>
                                @endif
                                <hr>
                                <a href="{{ route('questions.edit', $profile->id) }}" class="btn btn-sm btn-secondary">
                                    <i class="fa fa-pencil"></i> {{ __('Edit Profile') }}
                                </a>
                            </div>
                        </section>

                        <section class="card card-fluid mt-3">
                            <header class="card-header">{{ __('How it works') }}</header>
                            <div class="card-body">
                                <ol class="pl-3 mb-0">
                                    <li class="mb-2">{{ __('Select which tests to include in this profile') }}</li>
                                    <li class="mb-2">{{ __('Drag to set the order in which users complete them') }}</li>
                                    <li class="mb-2">{{ __('Click "Save Changes" to apply your selection') }}</li>
                                    <li>{{ __('Users will answer the test questions when completing this profile') }}</li>
                                </ol>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var el = document.getElementById('tests-list');
    if (el) {
        Sortable.create(el, {
            animation: 150,
            handle: '.fa-bars',
            ghostClass: 'sortable-ghost'
        });
    }
});
</script>
@endpush