@extends('layouts.master')

@section('browserTitle')
@if(isset($_SESSION['logged'])&&($_SESSION['logged']==true))
    @if(isset($input))
    {{ trans('menu.editInput') }}
    @else
    {{ trans('menu.addInput') }}
    @endif
@endif
@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" aria-current="page">
    @if(isset($input))
    {{ trans('menu.editInput') }}
    @else
    {{ trans('menu.addInput') }}
    @endif
</li>
@endif
@endsection


@section('title')
Text completion
@endsection


@section('subtitle')
@if(isset($_SESSION['logged'])&&($_SESSION['logged']==true))
    @if(isset($input))
    {{ trans('menu.editInput') }}
    @else
    {{ trans('menu.addInput') }}
    @endif
@endif
@endsection


@section('body')
<script type="text/javascript">
    $(document).ready(function() {
        // Validazione campi
        // $("#TxtComplExInput-create-form").submit(function(e) {
        function validateForm(e) {
            let level = $("select").val();
            let completeStories = $("textarea[name='complete-story']").val();
            let stories = $("textarea[name='stories[]']");
            let targets = $("input[name='targets[]']");
            let distractors = $("input[name='distractors[]']");
            let error = false;

            $(stories).each(function(i){
                if($(this).val().trim() == "") {
                    error = true;
                    if(i==0) {
                        $("#invalid-stories" + (i + 1)).text(__("msg.required"));
                    } else {
                        $("#invalid-stories" + (i + 1)).text(__("msg.required") + " " + __("msg.deleteEmptyFields"));
                    }
                    e.preventDefault();
                    $(this).focus();
                } else {
                    $("#invalid-stories" + (i + 1)).text("");
                }
            });

            $(distractors).each(function(i){
                if($(this).val().trim() == "") {
                    error = true;
                    if(i==0) {
                        $("#invalid-distractor" + (i + 1)).text(__("msg.required"));
                    } else {
                        $("#invalid-distractor" + (i + 1)).text(__("msg.required") + " " + __("msg.deleteEmptyFields"));
                    }
                    e.preventDefault();
                    $(this).focus();
                } else {
                    $("#invalid-distractor" + (i + 1)).text("");
                }
            });

            $(targets).each(function(i){
                if($(this).val().trim() == "") {
                    error = true;
                    if(i==0) {
                        $("#invalid-target" + (i + 1)).text(__("msg.required"));
                    } else {
                        $("#invalid-target" + (i + 1)).text(__("msg.required") + " " + __("msg.deleteEmptyFields"));
                    }
                    e.preventDefault();
                    $(this).focus();
                } else {
                    $("#invalid-target" + (i + 1)).text("");
                }
            });

            if(completeStories.trim() == "") {
                error = true;
                $("#invalid-complete-story").text(__("msg.required"));
                e.preventDefault();
                $("textarea[name='complete-story']").focus();
            } else {
                $("#invalid-complete-story").text("");
            }

            // Controllo numero parole in base al livello (qua per impedire l'invio della form, 
            // sotto controllo continuo mentre scrivi)
            function countWords(text) {
                // Rimuove spazi iniziali e finali, poi divide per uno o più spazi
                let wordsArray = text.trim().split(/\s+/);
                // Filtra eventuali elementi vuoti e conta le parole
                return wordsArray.filter(word => word.length > 0).length;
            }
            
            let wordCount = countWords(completeStories);
            if(level == 1) {
                // 50 72 80 => 50-80
                if(wordCount < 50 || wordCount > 80) {
                    error = true;
                    $("#invalid-complete-story").text(__("msg.wordCount", {min: 50, max: 80, count: wordCount}) + " " + __("msg.changeLevelOrAddWords"));
                    e.preventDefault();
                    $("textarea[name='complete-story']").focus();
                } else {
                    $("#invalid-complete-story").text("");
                }
            } else if(level == 2) {
                // 67 80 97 => 60-130
                if(wordCount < 60 || wordCount > 130) {
                    error = true;
                    $("#invalid-complete-story").text(__("msg.wordCount", {min: 60, max: 130, count: wordCount}) + " " + __("msg.changeLevelOrAddWords"));
                    e.preventDefault();
                    $("textarea[name='complete-story']").focus();
                } else {
                    $("#invalid-complete-story").text("");
                }
            } else if(level == 3) {
                // 80 97 120 => 80-170
                if(wordCount < 80 || wordCount > 170) {
                    error = true;
                    $("#invalid-complete-story").text(__("msg.wordCount", {min: 80, max: 170, count: wordCount}) + " " + __("msg.changeLevelOrAddWords"));
                    e.preventDefault();
                    $("textarea[name='complete-story']").focus();
                } else {
                    $("#invalid-complete-story").text("");
                }
            }

            if(!error) {
                let targetNumber = $("input[name='targets[]']").length;
                console.log("Target number:", targetNumber);
                if(level == 1) {
                    if(targetNumber !=  3 && targetNumber !=  4) {
                        error = true;
                        $("#invalid-target-number").text("Il livello 1 deve avere 3 o 4 target. Aggiungi una nuova sezione o cambia il livello.");
                        e.preventDefault();
                        $("form :input").blur();
                        $("button.add-section").focus();
                    } else {
                        $("#invalid-target-number").text("");
                    }
                } else if(level == 2) {
                    if(targetNumber !=  4 && targetNumber !=  5) {
                        error = true;
                        $("#invalid-target-number").text("Il livello 2 deve avere 4 o 5 target. Aggiungi una nuova sezione o cambia il livello.");
                        e.preventDefault();
                        $("form :input").blur();
                        $("button.add-section").focus();
                    } else {
                        $("#invalid-target-number").text("");
                    }
                } else if(level == 3) {
                    if(targetNumber !=  5 && targetNumber !=  6) {
                        error = true;
                        $("#invalid-target-number").text("Il livello 3 deve avere 5 o 6 target. Aggiungi una nuova sezione o cambia il livello.");
                        e.preventDefault();
                        $("form :input").blur();
                        $("button.add-section").focus();
                    } else {
                        $("#invalid-target-number").text("");
                    }
                }
            }
        // });
        }

        $(document).on('submit', '#TxtComplExInput-create-form, #TxtComplExInput-edit-form', function(e) {
            validateForm(e);
        });


        // Controllo numero parole in base al livello (qua controllo continuo mentre scrivi,
        // sopra controllo per impedire l'invio della form)
        $("textarea[name='complete-story']").on('focus', function() {
            // Funzione per contare le parole
            function countWords(text) {
                // Rimuove spazi iniziali e finali, poi divide per uno o più spazi
                let wordsArray = text.trim().split(/\s+/);
                // Filtra eventuali elementi vuoti e conta le parole
                return wordsArray.filter(word => word.length > 0).length;
            }

            // Variabili per il controllo
            let level = 1; // Imposta qui il livello (1, 2 o 3) oppure recuperalo dinamicamente
            let textarea = $(this);

            // Funzione per controllare il numero di parole
            function checkWordCount() {
                let completeStories = textarea.val();
                let wordCount = countWords(completeStories);
                let error = false;

                if(level == 1) {
                    // 50-80 parole
                    if(wordCount < 50 || wordCount > 80) {
                        error = true;
                        $("#invalid-complete-story").text(__("msg.wordCount", {min: 50, max: 80, count: wordCount})).show();
                    } else {
                        $("#invalid-complete-story").text("").hide();
                    }
                } else if(level == 2) {
                    // 60-100 parole
                    if(wordCount < 60 || wordCount > 130) {
                        error = true;
                        $("#invalid-complete-story").text(__("msg.wordCount", {min: 60, max: 130, count: wordCount})).show();
                    } else {
                        $("#invalid-complete-story").text("").hide();
                    }
                } else if(level == 3) {
                    // 80-110 parole
                    if(wordCount < 80 || wordCount > 170) {
                        error = true;
                        $("#invalid-complete-story").text(__("msg.wordCount", {min: 80, max: 170, count: wordCount})).show();
                    } else {
                        $("#invalid-complete-story").text("").hide();
                    }
                }
            }

            // Esegui subito il controllo quando il focus è acquisito
            checkWordCount();
            // Continua a controllare ogni volta che il contenuto cambia
            textarea.on('input', checkWordCount);
        });


        // Gestione aggiunta sezione
        let newSectionCounter = $(".new-section-container .section").length + 2;

        $(".add-section").click(function() {
            console.log("Section counter:", newSectionCounter);
            let newSection = `
                <div class="section" id="section-${newSectionCounter}">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="target-${newSectionCounter}">{{ trans('ex.target') }} ${newSectionCounter}</label>
                            <input class="form-control" type="text" name="targets[]" id="target-${newSectionCounter}"/>
                            <span class="invalid-input" id="invalid-target${newSectionCounter}"></span>
                        </div>
                        <div class="col-md-6">
                            <label for="distractor-${newSectionCounter}">{{ trans('ex.distractor') }} ${newSectionCounter}</label>
                            <div class="distrctors-container">
                                <input class="form-control" type="text" name="distractors[]" id="distractor-${newSectionCounter + 1}"/>
                                <span class="invalid-input" id="invalid-distractor${newSectionCounter}"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="row">
                                <label for="stories-${newSectionCounter + 1}">{{ trans('ex.storyPart') }} ${newSectionCounter + 1}</label>
                            </div>
                            <textarea class="form-control" name="stories[]" rows="3" id="stories-${newSectionCounter + 1}"></textarea>
                            <span class="invalid-input" id="invalid-stories${newSectionCounter + 1}"></span>
                        </div>
                    </div>
                </div>
            `;

            $(".new-section-container").append(newSection);
            newSectionCounter++;
        });

        $(".remove-section").click(function() {
            console.log("Section counter:", newSectionCounter);
            if ($(".new-section-container .section").length > 0) {
                $(".new-section-container .section").last().remove();
                newSectionCounter--;
            }
        });

    });
</script>



<div class="row">
    <div class="col-md-12">
        <div class="row mb-3 justify-content-center">
            <div class="col-md-10">
                <h3>{{ trans('ex.instructions') }}</h3>
                <p>{{ trans('ex.txtCmplExLongDescription') }}</p>
                <div class="row justify-content-center">
                    <table class="table table-bordered">
                        <tr>
                            <td><p>{!! trans('ex.txtCmplInputInstrL1') !!}</p></td>
                            <td><p>{!! trans('ex.txtCmplInputInstrL2') !!}</p></td>
                            <td><p>{!! trans('ex.txtCmplInputInstrL3') !!}</p></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>


    @if(isset($input)) 
        <form id="TxtComplExInput-edit-form" class="form-horizontal" method="post" action="{{ route('exInputs.update.txtCmplExInput', ['input' => $input->id]) }}" enctype="multipart/form-data">
            @method('PUT') 
    @else
        <form id="TxtComplExInput-create-form" class="form-horizontal" method="post" action="{{ route('exInputs.store.txtCmplExInput') }}" enctype="multipart/form-data">
    @endif
    @csrf

            <div class="form-group row mb-3 justify-content-center">
                <div class="col-md-10">
                    <h3>{{ trans('ex.insertInput') }}</h3>
                </div>
                <div class="col-md-6">
                    <label for="title" style="font-weight: bold;">{{ trans('ex.level') }}</label>
                    @if(isset($input))
                        <select class="form-select" aria-label="Default select example" name="level">
                            @for($i = 1; $i <= 3; $i++)
                                @if($i == $input->level)
                                <option value="{{ $i }}" selected>{{ $i }}</option>
                                @else
                                <option value="{{ $i }}">{{ $i }}</option>
                                @endif
                            @endfor
                        </select>
                    @else
                        <select class="form-select" name="level">
                            @for($i = 1; $i <= 3; $i++)
                            <option value="{{ $i }}">{{ $i }}</option>
                            @endfor
                        </select>
                    @endif
                    <span class="invalid-input" id="invalid-level"></span>
                </div>
                <div class="col-md-4 mb-3">
                    <label for="title" style="font-weight: bold;">{{ trans('ex.existingLevels') }}</label>
                    <div class="list-group">
                        @for($i = 1; $i <= 3; $i++)
                        <button type="button" class="list-group-item list-group-item-action">{{ $i }}</button>
                        @endfor
                    </div>
                </div>
            </div>

            <div class="form-group row mb-3 justify-content-center">
                <div class="col-md-6">
                    <label class="form-label" style="font-weight: bold;">{{ trans('ex.completeStory') }}</label>
                    @if(isset($input))
                        <textarea class="form-control" name="complete-story" rows="3">{{ $input->complete_story }}</textarea>
                    @else                    
                        <textarea class="form-control" name="complete-story" rows="3"></textarea>
                    @endif
                    <span class="invalid-input" id="invalid-complete-story"></span>
                </div>

                <div class="col-md-4">
                    <label class="form-label" style="font-weight: bold;">{{ trans('ex.example') }}</label>
                    <textarea class="form-control" 
                        placeholder="Pierino è andato a comprare la farina e le uova. Arrivato al supermercato si è accorto che era chiuso, quindi è tornato a casa a mani vuote." 
                        rows="3" disabled></textarea>
                </div>
            </div>

            

            <div class="form-group row mb-3 justify-content-center">
                <div class="col-md-6">
                    <div class="row">
                        <label for="title" style="font-weight: bold;">{{ trans('ex.story') }}</label>
                    </div>
                    <div class="row">
                        <label for="title">{{ trans('ex.storyPart') }} 1</label>
                    </div>
                    @if(isset($input))
                        @foreach($input->stories as $story)
                            @if($loop->index == 0)
                                <textarea class="form-control" value="{{ $story }}" name="stories[]" rows="3">{{ $story }}</textarea>
                            @endif
                        @endforeach
                    @else
                        <textarea class="form-control" name="stories[]" rows="3"></textarea>
                    @endif
                    <span class="invalid-input" id="invalid-stories1"></span>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="row">
                        <label for="title" style="font-weight: bold;">{{ trans('ex.example') }}</label>
                    </div>
                    <div class="row">
                        <label for="title">{{ trans('ex.storyPart') }} 1</label>
                    </div>
                    <textarea class="form-control" placeholder="Pierino è andato a comprare" disabled rows="3"></textarea>
                </div>
            </div>

            <div class="form-group row mb-3 justify-content-center">
                <div class="col-md-3">
                    <label for="title">{{ trans('ex.target') }} 1</label>
                    @if(isset($input))
                        @foreach($input->targets as $target)
                            @if($loop->index == 0)
                                <input class="form-control" type="text" name="targets[]" value="{{ $target }}"/>
                            @endif
                        @endforeach
                    @else
                        <input class="form-control" type="text" name="targets[]"/>
                    @endif
                    <span class="invalid-input" id="invalid-target1"></span>
                </div>
                <div class="col-md-3">
                    <label for="title">{{ trans('ex.distractor') }} 1</label>
                    <div class="distrctors-container mb-3">
                        @if(isset($input))
                            @foreach($input->distractors as $distractor)
                                @if($loop->index == 0)
                                    <input class="form-control" type="text" name="distractors[]" value="{{ $distractor }}"/>
                                @endif
                            @endforeach
                        @else
                            <input class="form-control" type="text" name="distractors[]"/>
                        @endif
                        <span class="invalid-input" id="invalid-distractor1"></span>
                    </div>
                </div>

                <div class="col-md-2">
                    <label for="title">{{ trans('ex.target') }} 1</label>
                    <input class="form-control" type="text" value="la farina" disabled/>
                </div>
                <div class="col-md-2">
                    <label for="title">{{ trans('ex.distractor') }} 1</label>
                    <div class="distrctors-container">
                        <input class="form-control mb-3" type="text" value="il latte" disabled/>
                    </div>
                </div>
            </div>

            <div class="form-group row mb-3 justify-content-center">
                <div class="col-md-6">
                    <div class="row">
                        <label for="title">{{ trans('ex.storyPart') }} 2</label>
                    </div>
                    @if(isset($input))
                        @foreach($input->stories as $story)
                            @if($loop->index == 1)
                                <textarea class="form-control" value="{{ $story }}" name="stories[]" rows="3">{{ $story }}</textarea>
                            @endif
                        @endforeach
                    @else
                        <textarea class="form-control" name="stories[]" rows="3"></textarea>
                    @endif
                    <span class="invalid-input" id="invalid-stories2"></span>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="row">
                        <label for="title">{{ trans('ex.storyPart') }} 2</label>
                    </div>
                    <textarea class="form-control" placeholder="e le uova. Arrivato al supermercato si è accorto che era" 
                        disabled rows="3"></textarea>
                </div>
            </div>

            <div class="form-group row mb-3 justify-content-center">
                <div class="col-md-6">
                    <div class="new-section-container">
                        @if(isset($input))
                            @foreach($input->stories as $story)
                                @if($loop->index > 1)
                                <div class="section" id="section-{{ $loop->index }}">
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="title">{{ trans('ex.target') }} {{ $loop->index -1 }}</label>
                                            <input class="form-control" type="text" name="targets[]" value="{{ $input->targets[$loop->index -1] }}"/>
                                            <span class="invalid-input" id="invalid-targeti"></span>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="title">{{ trans('ex.distractor') }} {{ $loop->index -1 }}</label>
                                            <div class="distrctors-container">
                                                <input class="form-control mb-3" type="text" name="distractors[]" value="{{ $input->distractors[$loop->index -1] }}"/>
                                                <span class="invalid-input" id="invalid-distractors"></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <label for="title">{{ trans('ex.storyPart') }} {{ $loop->index }}</label>
                                            </div>
                                            <textarea class="form-control" name="stories[]" rows="3">{{ $input->stories[$loop->index] }}</textarea>
                                            <span class="invalid-input" id="invalid-storyi"></span>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            @endforeach
                        @endif
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="title">{{ trans('ex.target') }} 2</label>
                            <input class="form-control" type="text" value="chiuso" disabled/>
                        </div>
                        <div class="col-md-6">
                            <label for="title">{{ trans('ex.distractor') }} 2</label>
                            <div class="distrctors-container">
                                <input class="form-control mb-3" type="text" value="sparito" disabled/>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="row">
                                <label for="title">{{ trans('ex.storyPart') }} 3</label>
                            </div>
                            <textarea class="form-control" placeholder=", quindi è tornato a casa a mani vuote." disabled rows="3"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group row mb-5">
                <div class="col-md-6 offset-md-1">
                    <div class="row justify-content-center">
                        <span class="invalid-input text-center" id="invalid-target-number"></span>
                    </div>
                    <div class="row justify-content-center">
                        <div class="button-container d-flex gap-2 justify-content-center">
                            @if(isset($input))
                                <button type="button" class="my-btn my-green-btn add-section">{{ trans('btn.addSection') }}</button>
                                <button type="button" class="my-btn my-red-btn remove-section">{{ trans('btn.removeSection') }}</button>
                            @else
                                <button type="button" class="my-btn my-green-btn add-section">{{ trans('btn.addSection') }}</button>
                                <button type="button" class="my-btn my-red-btn remove-section">{{ trans('btn.removeSection') }}</button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>


            <div class="form-group row mb-3">
                <div class="col-md-10 offset-md-1">
                    <label for="mySubmit" class="my-btn my-blue-btn w-100">{{ trans('btn.save') }}</label>
                    <input id="mySubmit" class="d-none" type="submit" value="Save">
                </div>
            </div>
            <div class="form-group row mb-3">
                <div class="col-md-10 offset-md-1">
                    <a class="my-btn my-red-btn w-100 d-block" href="{{ route('exInputs.index') }}">{{ trans('btn.cancel') }}</a>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection