@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')
Image-word
@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')
@if(isset($input))
<script type="text/javascript">
    $(document).ready(function() {
        // Validazione campi
        $("#imgWrdExInput-edit-form").submit(function(e) {
            let newTargetIT = $("input[name='target-it']").val();
            let newTargetEN = $("input[name='target-en']").val();
            let newDistractorsIT = $("input[name='distractors[it][]']");
            let newDistractorsEN = $("input[name='distractors[en][]']");
            let imageInput = document.querySelector("input[name='image']");
            let level = $("select").val();
            let inputId = {{ $input->id }};
            let error = false;

            $(newDistractorsEN).each(function() {
                if ($(this).val().trim() == "") {
                    error = true;
                    const distr = __("ex.distractors");
                    $("#invalid-distractors-en").text(__("msg.requiredField", {field: distr}));
                    event.preventDefault();
                    $(this).focus();
                    return false; // Equivalente a 'break' in un ciclo jQuery .each()
                }
            });
            $(newDistractorsIT).each(function() {
                if ($(this).val().trim() == "") {
                    error = true;
                    const distr = __("ex.distractors");
                    $("#invalid-distractors-it").text(__("msg.requiredField", {field: distr}));
                    event.preventDefault();
                    $(this).focus();
                    return false; // Equivalente a 'break' in un ciclo jQuery .each()
                }
            });
            
            if(newTargetEN.trim() == "") {
                error = true;
                const target = __("ex.target");
                $("#invalid-target-en").text(__("msg.requiredField", {field: target}));
                event.preventDefault();
                $("input[name='target-en']").focus();
            } else {
                $("#invalid-target-en").text("");
            }
            if(newTargetIT.trim() == "") {
                error = true;
                const target = __("ex.target");
                $("#invalid-target-it").text(__("msg.requiredField", {field: target}));
                event.preventDefault();
                $("input[name='target-it']").focus();
            } else {
                $("#invalid-target-it").text("");
            }

            if(!error) {
                if(newDistractorsEN.length == 0) {
                    const distr = __("ex.distractors");
                    $("#invalid-distractors-en").text(__("msg.oneRequired", {field: distr}));
                    e.preventDefault();
                    $("input[name='distractors[en][]']").focus();
                } else {
                    $("#invalid-distractors-en").text("");
                }
                if(newDistractorsIT.length == 0) {
                    const distr = __("ex.distractors");
                    $("#invalid-distractors-it").text(__("msg.oneRequired", {field: distr}));
                    e.preventDefault();
                    $("input[name='distractors[it][]']").focus();
                } else {
                    $("#invalid-distractors-it").text("");
                }

                event.preventDefault();
                $.ajax({
                    type: 'GET',

                    url: '/exInputs/ajaxImgWordEx',

                    data: {targetIT: newTargetIT.trim().toLowerCase(), 
                        targetEN: newTargetEN.trim().toLowerCase(),
                        level: level},

                    success: function (data) {
                        if (data.exists && data.id != inputId)
                        {
                            error = true;
                            $("#invalid-target-it").text(__("msg.alreadyExistTraget"));
                            $("#invalid-target-en").text(__("msg.alreadyExistTraget"));
                            $("input[name='target-it']").focus();
                        } else {
                            $("#imgWrdExInput-edit-form")[0].submit();
                        }
                    }
                });
            }
        });
    });
</script>
@endif

<script type="text/javascript">
    $(document).ready(function() {
        // Validazione campi
        $("#imgWrdExInput-create-form").submit(function(e) {
            let newTargetIT = $("input[name='target-it']").val();
            let newTargetEN = $("input[name='target-en']").val();
            let newDistractorsIT = $("input[name='distractors[it][]']");
            let newDistractorsEN = $("input[name='distractors[en][]']");
            let imageInput = document.querySelector("input[name='image']");
            let level = $("select").val();
            let error = false;

            $(newDistractorsEN).each(function() {
                if ($(this).val().trim() == "") {
                    error = true;
                    $("#invalid-distractors-en").text(__("msg.deleteEmptyFields"));
                    event.preventDefault();
                    $(this).focus();
                    return false; // Equivalente a 'break' in un ciclo jQuery .each()
                }
            });
            $(newDistractorsIT).each(function() {
                if ($(this).val().trim() == "") {
                    error = true;
                    $("#invalid-distractors-it").text(__("msg.deleteEmptyFields"));
                    event.preventDefault();
                    $(this).focus();
                    return false; // Equivalente a 'break' in un ciclo jQuery .each()
                }
            });

            if (newTargetEN.trim() == "") {
                error = true;
                const target = __("ex.target");
                $("#invalid-target-en").text(__("msg.requiredField", {field: target}));
                event.preventDefault();
                $("input[name='target-en']").focus();
            } else {
                $("#invalid-target-en").text("");
            }
            if (newTargetIT.trim() == "") {
                error = true;
                const target = __("ex.target");
                $("#invalid-target-it").text(__("msg.requiredField", {field: target}));
                event.preventDefault();
                $("input[name='target-it']").focus();
            } else {
                $("#invalid-target-it").text("");
            }

            if (!imageInput.files || imageInput.files.length === 0) {
                error = true;
                const img = __("ex.img");
                $("#invalid-img").text(__("msg.requiredField", {field: img}));
                e.preventDefault();
                $("input[name='image']").focus();
            } else {
                $("#invalid-img").text("");
            }

            if(!error) {
                if(newDistractorsEN.length == 0) {
                    $("#invalid-distractors-en").text(__("msg.oneRequired", {field: __("ex.distractors")}));
                    e.preventDefault();
                    $("input[name='distractors[en][]']").focus();
                } else {
                    $("#invalid-distractors-en").text("");
                }
                if(newDistractorsIT.length == 0) {
                    $("#invalid-distractors-it").text(__("msg.oneRequired", {field: __("ex.distractors")}));
                    e.preventDefault();
                    $("input[name='distractors[it][]']").focus();
                } else {
                    $("#invalid-distractors-it").text("");
                }

                event.preventDefault();
                $.ajax({
                    type: 'GET',

                    url: '/exInputs/ajaxImgWordEx',

                    data: {targetIT: newTargetIT.trim().toLowerCase(),
                        targetEN: newTargetEN.trim().toLowerCase(),
                        level: level},

                    success: function (data) {
                        if (data.exists)
                        {
                            error = true;
                            $("#invalid-target-it").text(__("msg.alreadyExistTraget"));
                            $("#invalid-target-en").text(__("msg.alreadyExistTraget"));
                            $("input[name='target-it']").focus();
                        } else {
                            $("#imgWrdExInput-create-form")[0].submit();
                        }
                    }
                });
            }
        });

        // Funzione per gestire l'anteprima
        function showPreview() {
            const fileInput = document.getElementById('formFile');
            const preview = document.getElementById('preview');
            const file = fileInput.files[0];
            
            if (file) {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                }
                
                reader.readAsDataURL(file);
            } else {
                alert(__('msg.noFileSelected'));
                preview.src = '';
                preview.style.display = 'none';
            }
        }

        // Event listener per il bottone di anteprima
        document.getElementById('previewBtn').addEventListener('click', showPreview);
        // Nascondo l'anteprima quando viene selezionato un nuovo file
        document.getElementById('formFile').addEventListener('change', function() {
            document.getElementById('preview').style.display = 'none';
        });

        $(".add-distractor").click(function() {
            let distractorIT = '<input class="form-control mb-3" type="text" name="distractors[it][]"/>'; 
            let distractorEN = '<input class="form-control mb-3" type="text" name="distractors[en][]"/>';
            $(".distrctors-container-it").append(distractorIT);
            $(".distrctors-container-en").append(distractorEN);
        });

        $(".remove-distractor").click(function() {
            $(".distrctors-container-it input:last-child").remove();
            $(".distrctors-container-en input:last-child").remove();
        });

        // Gestione scelta da target esistenti
        $(".list-group-item").click(function() {
            $(this).parent().find(".list-group-item").removeClass("active");
            $(this).addClass("active");
            let text = $(this).text();
            let input = $(this).parent().parent().parent().find("input");
            $(input).val(text);
        });
        $("input").on("input", function() {
            let listItems = $(this).parent().parent().find(".list-group-item");
            listItems.removeClass("active");
        });
    });
</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.imgWrdExLongDescription') }}</p>
                <div class="row justify-content-center">
                    <table class="table table-bordered">
                        <tr>
                            <td><p>{!! trans('ex.imgWrdInputInstrL1') !!}</p></td>
                            <td><p>{!! trans('ex.imgWrdInputInstrL2') !!}</p></td>
                            <td><p>{!! trans('ex.imgWrdInputInstrL3') !!}</p></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    @if(isset($input)) 
        <form id="imgWrdExInput-edit-form" class="form-horizontal" method="post" action="{{ route('exInputs.update.imgWrdExInput', ['input' => $input->id]) }}" enctype="multipart/form-data">
            @method('PUT') 
    @else
        <form id="imgWrdExInput-create-form" class="form-horizontal" method="post" action="{{ route('exInputs.store.imgWrdExInput') }}" enctype="multipart/form-data">
    @endif
    @csrf

            <div class="form-group row mb-3 justify-content-center">
                <div class="col-md-6">
                    <label for="formFile" style="font-weight: bold;">{{ trans('ex.img') }}</label>
                    <div class="mb-3">
                        <input class="form-control" type="file" id="formFile" name="image" accept="image/*">
                    </div>
                    <span class="invalid-input" id="invalid-img"></span>
                    <div class="mb-3">
                        <button type="button" id="previewBtn" class="my-btn my-blue-btn">{{ trans('btn.showPreview') }}</button>
                    </div>
                </div>
                <div class="col-md-4">
                    <label for="title" style="font-weight: bold;">{{ trans('ex.preview') }}</label>
                    <div class="row">
                        @if(isset($input) && $input->path)
                        <img id="preview" src="/{{ $input->path }}" alt="Anteprima immagine" style="max-width: 500px">
                        @else
                        <img id="preview" src="" alt="Anteprima immagine" style="max-width: 500px; display: none;">
                        @endif
                    </div>
                </div>
            </div>

            <div class="form-group row mb-3 justify-content-center">
                <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" aria-label="Default select example" 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-3">
                    <label for="title" style="font-weight: bold;">{{ trans('ex.target') }} ({{ trans('ex.it') }})</label>
                    @if(isset($input))
                        <input class="form-control" type="text" name="target-it" value="{{ $input->target['it'] }}"/>
                    @else
                        <input class="form-control" type="text" name="target-it"/>
                    @endif
                    <span class="invalid-input" id="invalid-target-it"></span>
                </div>
                <div class="col-md-3">
                    <label for="title" style="font-weight: bold;">{{ trans('ex.target') }} ({{ trans('ex.en') }})</label>
                    @if(isset($input))
                        <input class="form-control" type="text" name="target-en" value="{{ $input->target['en'] }}"/>
                    @else
                        <input class="form-control" type="text" name="target-en"/>
                    @endif
                    <span class="invalid-input" id="invalid-target-en"></span>
                </div>
                <div class="col-md-4 mb-3">
                    <label for="title" style="font-weight: bold;">{{ trans('ex.existingTargets') }}</label>
                    <div class="list-group">
                        @foreach($ex_targets as $target)
                        <!-- <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
                            The current button
                        </button> -->
                        <button type="button" class="list-group-item list-group-item-action">{{ $target[app()->getLocale()] }}</button>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="form-group row mb-3 justify-content-center">
                <div class="col-md-3">
                    <label for="title" style="font-weight: bold;">{{ trans('ex.distractors') }} ({{ trans('ex.it') }})</label>
                    <div class="distrctors-container-it">
                        @if(isset($input))
                            <button type="button" class="my-btn my-green-btn add-distractor">+</button>
                            <button type="button" class="my-btn my-red-btn remove-distractor">-</button>
                            @foreach($input->distractors['it'] as $distractor)
                                <input class="form-control mb-3" type="text" name="distractors[it][]" value="{{ $distractor }}"/>
                            @endforeach
                        @else
                            <button type="button" class="my-btn my-green-btn add-distractor">+</button>
                            <button type="button" class="my-btn my-red-btn remove-distractor">-</button>
                            <input class="form-control mb-3" type="text" name="distractors[it][]"/>
                        @endif
                        <span class="invalid-input" id="invalid-distractors-it"></span>
                    </div>
                </div>
                <div class="col-md-3">
                    <label for="title" style="font-weight: bold;">{{ trans('ex.distractors') }} ({{ trans('ex.en') }})</label>
                    <div class="distrctors-container-en">
                        @if(isset($input))
                            <button type="button" class="my-btn my-green-btn add-distractor">+</button>
                            <button type="button" class="my-btn my-red-btn remove-distractor">-</button>
                            @foreach($input->distractors['en'] as $distractor)
                                <input class="form-control mb-3" type="text" name="distractors[en][]" value="{{ $distractor }}"/>
                            @endforeach
                        @else
                            <button type="button" class="my-btn my-green-btn add-distractor">+</button>
                            <button type="button" class="my-btn my-red-btn remove-distractor">-</button>
                            <input class="form-control mb-3" type="text" name="distractors[en][]"/>
                        @endif
                    </div>
                    <span class="invalid-input" id="invalid-distractors-en"></span>
                </div>
                <div class="col-md-4 mb-3">
                    <label for="title" style="font-weight: bold;">{{ trans('ex.existingDistractors') }}</label>
                    <div class="list-group">
                    @foreach($ex_inputs as $input)
                    {{ trans('ex.with') }} target = {{ $input->target[app()->getLocale()] }}
                    <ul>
                        @foreach($input->distractors[app()->getLocale()] as $distractor)
                        <li>{{ $distractor }}</li>
                        @endforeach
                    </ul>
                        <!-- <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
                            The current button
                        </button> -->
                        <!-- <button type="button" class="list-group-item list-group-item-action">{{ $distractor }}</button> -->
                    @endforeach
                    </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