@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 reaction
@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 edit-form
        $("#imgReactExInput-edit-form").submit(function(event) {
            let newCategoryIT = $("input[name='category-it']").val();
            let newCategoryEN = $("input[name='category-en']").val();
            let newNameIT = $("input[name='name-it']").val();
            let newNameEN = $("input[name='name-en']").val();
            let imageInput = document.querySelector("input[name='image']");
            let inputId = {{ $input->id }};
            let error = false;

            if (newNameEN.trim() == "") {
                error = true;
                const type = __("ex.type");
                $(`#invalid-type-en`).text(__("msg.requiredField", {field: type}));
                event.preventDefault();
                $("input[name='name-en']").focus();
            } else {
                $("#invalid-name-en").text("");
            }
            if(newNameIT.trim() == "") {
                error = true;
                const type = __("ex.type");
                $(`#invalid-type-it`).text(__("msg.requiredField", {field: type}));
                event.preventDefault();
                $("input[name='name-it']").focus();
            } else {
                $("#invalid-name-it").text("");
            }
            if (newCategoryEN.trim() == "") {
                error = true;
                const category = __("ex.category");
                $(`#invalid-category-en`).text(__("msg.requiredField", {field: category}));
                event.preventDefault();
                $("input[name='category-en']").focus();
            } else {
                $("#invalid-category-en").text("");
            }
            if(newCategoryIT.trim() == "") {
                error = true;
                const category = __("ex.category");
                $(`#invalid-category-it`).text(__("msg.requiredField", {field: category}));
                event.preventDefault();
                $("input[name='category-it']").focus();
            } else {
                $("#invalid-category-it").text("");
            }

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

                    url: '/exInputs/ajaxImgReactEx',

                    data: {categoryIT: newCategoryIT.trim().toLowerCase(), 
                        categoryEN: newCategoryEN.trim().toLowerCase(),
                        nameIT: newNameIT.trim().toLowerCase(),
                        nameEN: newNameEN.trim().toLowerCase()},

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


<script type="text/javascript">
    $(document).ready(function() {
        // Validazione campi create-form
        $("#imgReactExInput-create-form").submit(function(event) {
            let newCategoryEN = $("input[name='category-en']").val();
            let newCategoryIT = $("input[name='category-it']").val();
            let newNameEN = $("input[name='name-en']").val();
            let newNameIT = $("input[name='name-it']").val();
            let imageInput = document.querySelector("input[name='image']");
            let error = false;

            if (!imageInput.files || imageInput.files.length === 0) {
                error = true;
                const image = __("ex.image");
                $(`#invalid-img`).text(__("msg.requiredField", {field: image}));
                event.preventDefault();
                $("input[name='image']").focus();
            } else {
                $("#invalid-img").text("");
            }
            if (newNameEN.trim() == "") {
                error = true;
                const type = __("ex.type");
                $(`#invalid-name-en`).text(__("msg.requiredField", {field: type}));
                event.preventDefault();
                $("input[name='name-en']").focus();
            } else {
                $("#invalid-name-en").text("");
            }
            if(newNameIT.trim() == "") {
                error = true;
                const type = __("ex.type");
                $(`#invalid-name-it`).text(__("msg.requiredField", {field: type}));
                event.preventDefault();
                $("input[name='name-it']").focus();
            } else {
                $("#invalid-name-it").text("");
            }
            if (newCategoryEN.trim() == "") {
                error = true;
                const category = __("ex.category");
                $(`#invalid-category-en`).text(__("msg.requiredField", {field: category}));
                event.preventDefault();
                $("input[name='category-en']").focus();
            } else {
                $("#invalid-category-en").text("");
            }
            if(newCategoryIT.trim() == "") {
                error = true;
                const category = __("ex.category");
                $(`#invalid-category-it`).text(__("msg.requiredField", {field: category}));
                event.preventDefault();
                $("input[name='category-it']").focus();
            } else {
                $("#invalid-category-it").text("");
            }

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

                    url: '/exInputs/ajaxImgReactEx',

                    data: {categoryIT: newCategoryIT.trim().toLowerCase(), 
                        categoryEN: newCategoryEN.trim().toLowerCase(),
                        nameIT: newNameIT.trim().toLowerCase(),
                        nameEN: newNameEN.trim().toLowerCase()},

                    success: function (data) {
                        if (data.exists)
                        {
                            error = true;
                            $("#invalid-type-en").text(__("msg.alreadyExistType"));
                            $("#invalid-type-it").text(__("msg.alreadyExistType"));
                            $("input[name='name-it']").focus();
                        } else {
                            $("#imgReactExInput-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';
        });

        // Gestione scelta da category e name 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.imgReactExLongDescription') }}</p>
                    <div class="row justify-content-center">
                        <table class="table table-bordered">
                            <tr>
                                <td><p>{!! trans('ex.imgReactInputInstrL1') !!}</p></td>
                                <td><p>{!! trans('ex.imgReactInputInstrL2') !!}</p></td>
                                <td><p>{!! trans('ex.imgReactInputInstrL3') !!}</p></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

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

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