@extends ('layouts.diseño')
@section('contenido')
    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-md-offset-2">
        <div class="box box-primary">
            <div class="panel-heading">
                <center>
                    <h4><strong>Nuevo Período</strong></h4>
                </center>
            </div>


            <div class="panel-body">
                {!! Form::open(['route' => 'periodo.store']) !!}
                @include('Periodo.fragment.form')

                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            const cohorteInput = document.getElementById('corte');
            const periodoInput = document.getElementById('periodo');
            let isLinked = true;

            function formatInput(value) {
                let formatted = value.toUpperCase();

                let digits = formatted.match(/\d/g) || [];
                let hyphens = formatted.match(/-/g) || [];
                let letters = formatted.match(/I/g) || [];

                digits = digits.slice(0, 4);
                hyphens = hyphens.slice(0, 1);
                letters = letters.slice(0, 2);

                let result = digits.join('');

                if (digits.length === 4) {
                    result += '-';
                } else if (hyphens.length > 0 && digits.length < 4) {
                    result += '-';
                }

                result += letters.join('');

                return result;
            }

            function handleInput(currentInput, otherInput) {
                return function(e) {
                    let cursorPos = e.target.selectionStart;
                    let oldValue = e.target.value;
                    let newValue = formatInput(e.target.value);

                    if (e.inputType === 'deleteContentBackward' &&
                        cursorPos === 5 && oldValue.charAt(4) === '-') {
                        newValue = oldValue.substring(0, 3);
                    }

                    e.target.value = newValue;

                    if (isLinked) {
                        otherInput.value = newValue;
                    }
                };
            }

            function handleBlur() {
                return function() {
                    isLinked = false;
                };
            }

            cohorteInput.addEventListener('input', handleInput(cohorteInput, periodoInput));
            periodoInput.addEventListener('input', handleInput(periodoInput, cohorteInput));

            cohorteInput.addEventListener('blur', handleBlur());
            periodoInput.addEventListener('blur', handleBlur());
        });
    </script>
@endsection