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

            if (newTypeEN.trim() == "") {
                error = true;
                const type = __("ex.type");
                $(`#invalid-type-en`).text(__("msg.requiredField", {field: type}));
                event.preventDefault();
                $(`input[name='type-en']`).focus();
            } else {
                $(`#invalid-type-en`).text("");
            }
            if (newTypeIT.trim() == "") {
                error = true;
                const type = __("ex.type");
                $(`#invalid-type-it`).text(__("msg.requiredField", {field: type}));
                event.preventDefault();
                $(`input[name='type-it']`).focus();
            } else {
                $(`#invalid-type-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/ajaxBtnSelEx',

                    data: {categoryIT: newCategoryIT.trim().toLowerCase(),
                        categoryEN: newCategoryEN.trim().toLowerCase(),
                        typeIT: newTypeIT.trim().toLowerCase(),
                        typeEN: newTypeEN.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='type-it']").focus();
                        } else {
                            $("#btnSelExInput-edit-form")[0].submit();
                        }
                    }
                });
            }
        });
    });
</script>
@endif


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

            // L'immagine e' sempre obbligatoria perche' bottoni gnerici sono semplicemente immagini,
            // gli unici bottoni senza immagini sono quelli fatti a mano da me (numeri, lettere, colori) ma impedisco modifica e 
            // cancellazione
            if (!imageInput.files || imageInput.files.length === 0) {
                error = true;
                const img = __("ex.img");
                $("#invalid-img").text(__("msg.requiredField", {field: img}));
                event.preventDefault();
                $("input[name='image']").focus();
            } else {
                $("#invalid-img").text("");
            }
            if (newTypeEN.trim() == "") {
                error = true;
                const type = __("ex.type");
                $(`#invalid-type-en`).text(__("msg.requiredField", {field: type}));
                event.preventDefault();
                $(`input[name='type-en']`).focus();
            } else {
                $(`#invalid-type-en`).text("");
            }
            if (newTypeIT.trim() == "") {
                error = true;
                const type = __("ex.type");
                $(`#invalid-type-it`).text(__("msg.requiredField", {field: type}));
                event.preventDefault();
                $(`input[name='type-it']`).focus();
            } else {
                $(`#invalid-type-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/ajaxBtnSelEx',

                    data: { categoryEN: newCategoryEN.trim().toLowerCase(),
                        categoryIT: newCategoryIT.trim().toLowerCase(),
                        typeEN: newTypeEN.trim().toLowerCase(),
                        typeIT: newTypeIT.trim().toLowerCase()
                    },

                    success: function (data) {
                        if (data.exists)
                        {
                            error = true;
                            $("#invalid-type-en").text(__("msg.alreadyExistType"));
                            $("#invalid-type-it").text(__("msg.alreadyExistType"));
                            $("input[name='type-it']").focus();
                        } else {
                            $("#btnSelExInput-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 type 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">
    @if(isset($input)) 
        <form id="btnSelExInput-edit-form" class="form-horizontal" name="btnSelExInput" method="post" action="{{ route('exInputs.update.btnSelExInput', ['input' => $input->id]) }}" enctype="multipart/form-data">
            @method('PUT') 
    @else
        <form id="btnSelExInput-create-form" class="form-horizontal" name="btnSelExInput" method="post" action="{{ route('exInputs.store.btnSelExInput') }}" 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)
                        @if($category == "color" || $category == "letter" || $category == "number")
                        <button type="button" class="list-group-item list-group-item-action disabled">{{ $category }}</button>
                        @else
                        <!-- <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">{{ $category[app()->getLocale()] }}</button>
                        @endif
                    @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.type') }} ({{ trans('ex.it') }})</label>
                @if(isset($input))
                    <input class="form-control" type="text" name="type-it" value="{{ $input->type['it'] }}"/>
                @else
                    <input class="form-control" type="text" name="type-it"/>
                @endif
                <span class="invalid-input" id="invalid-type-it"></span>
            </div>
            <div class="col-md-3">
                <label for="title" style="font-weight: bold;">{{ trans('ex.type') }} ({{ trans('ex.en') }})</label>
                @if(isset($input))
                    <input class="form-control" type="text" name="type-en" value="{{ $input->type['en'] }}"/>
                @else
                    <input class="form-control" type="text" name="type-en"/>
                @endif
                <span class="invalid-input" id="invalid-type-en"></span>
            </div>
            <div class="col-md-4 mb-3">
                <label for="title" style="font-weight: bold;">{{ trans('ex.existingTypes') }}</label>
                <div class="list-group">
                    @foreach($ex_types as $type)
                    <!-- <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">{{ $type[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 mb-3">
                <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