@php
    $variables = \App\Models\Flows\Variables::writableVariables();
@endphp
<div class="col-md-12 regexControls d-none">
    <hr>
    <div class="row">
        <div class="col-md-4">
            <label for="">Variable de almacenamiento:</label>
            <select name="data_name" required class="form-control required_on_block">
                <option value="">Selecciona</option>
                @foreach($variables as $variable)
                    <option @selected($variable == $dataName) value="{{$variable}}">{{$variable}}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-4">
            <label for="">Tipo de dato esperado:</label>
            <select name="data_type" required class="form-control required_on_block">
                <option value="">Selecciona</option>
            </select>
        </div>
        <div class="col-md-4">
            <label for="">Expresión regular:</label>
            <input type="text" class="form-control required_on_block" required name="regex" value="{{$regex}}" placeholder="Expresión regular">
        </div>
        <div class="col-md-4">
            <label for="">Texto de error:</label>
            <input type="text" class="form-control required_on_block" required name="error_text" value="{{$error ?? "El tipo no es correcto"}}" placeholder="Texto de error">
        </div>
    </div>
    <hr>
</div>
@push('js')
    <script>
        let expressions = [
            {
                "regex": "^(.*)$",
                "title": "Texto",
                "key": "text"
            },
            {
                "regex": "^([a-zA-ZáéíóúÁÉÍÓÚñÑ]+)$",
                "title": "Nombre",
                "key": "name"
            },
            {
                "regex": "^([a-zA-ZáéíóúÁÉÍÓÚñÑ\\s]+)$",
                "title": "Nombre y apellido",
                "key": "nameandapat"
            },
            {
                "regex": "^([0-9]+)$",
                "title": "Número",
                "key": "number"
            },
            {
                "regex": "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$",
                "title": "Correo electrónico",
                "key": "email"
            },
            {
                "regex": "^(\\d{4}-\\d{2}-\\d{2})$",
                "title": "Fecha",
                "key": "date"
            },
            {
                "regex": "^(\\d{2}:\\d{2})$",
                "title": "Tiempo",
                "key": "time"
            },
            {
                "regex": "",
                "title": "Expresión regular",
                "key": "regex"
            }
        ];

        let fillExpressions = () => {
            let selected = "{{$type}}";
            expressions.forEach((e) => {
                $("[name=data_type]").append(`<option ${selected === e.key ? "selected" : ""} value="${e.key}">${e.title}</option>`)
            })
            $("[name=data_type]").bind("change", () => {
                let currentValue = $("[name=data_type]").val();
                $("[name=regex]").val(expressions.filter(i => i.key === currentValue).shift().regex)
            })
        }

        let checkForStopOnSendControls = () => {
            let stop_on_send = $("[name=stop_on_send]").val();
            let type = $("[name=sketch_type_id] option:selected").text();

            $(".regexControls").addClass("d-none");
            $(".required_on_block").prop("required",false);
            if(type === "text" && stop_on_send === "1"){
                $(".regexControls").removeClass("d-none");
                $(".required_on_block").prop("required",true);
            }
        }
        $("[name=stop_on_send]").bind("change", () => {
            checkForStopOnSendControls();
        });

        $(() => {
            fillExpressions();
            checkForStopOnSendControls();
        })
    </script>
@endpush