@extends('template.index')
@section('title','Adicionar Mensagem')
@section('content')
    <div class="content-fluid">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-5">
            <div class="card">
                <div class="card-body">
                    <div class="row ml-1 mt-5 mb-3">
                        <h2 class="bold">
                            Adicionar Mensagem
                        </h2>
                    </div>
                    <form action="{{ route('advice.store') }}" method="post">
                        @csrf
                        <div class="group">
                            <div class="row">
                                <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                    <div class="row">
                                        <div class="col-12 col-md-5">
                                            <div class="form-group">
                                                <b>Tipo:</b>
                                                <select class="form-control" name="type" id="type" onchange="changeView()";>
                                                    <option value="texto">Texto</option>
                                                    <option value="audio">Áudio</option>
                                                    <option value="video">Vídeo</option>
                                                    <option value="youtube">YouTube</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group" id="descricao">
                                        <b>Descrição:</b>
                                        <textarea class="form-control" name="description" id="description" cols="30" rows="10">{{ old('description') }}</textarea>
                                        <span class="error-validate">
                                            <p id="validate-name"></p>
                                        </span>
                                    </div>

                                    <div class="form-group" id="url">
                                        <b>URL:</b>
                                        <input id="teste" type="text" class="form-control" name="description" value="{{ old('description') }}">
                                        <span class="error-validate">
                                            <p id="validate-name"></p>
                                        </span>
                                    </div>

                                    <div class="col-12 col-md-3">
                                        <button class="btn btn-primary" type="submit">Adicionar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')

<script>

    let descricao = document.getElementById("descricao").style.display = "none";
    let url = document.getElementById("url").style.display = "block";
    let typeList = document.getElementById("type");

    function changeView() {
        if(typeList.value == "audio") {
            document.getElementById("url").style.display = "block";
            document.getElementById("url").children[1].removeAttribute("disabled");

            document.getElementById("descricao").style.display = "none";
            document.getElementById("descricao").children[1].setAttribute("disabled", "true");

        } else if(typeList.value == "video") {
            document.getElementById("url").style.display = "block";
            document.getElementById("url").children[1].removeAttribute("disabled");

            document.getElementById("descricao").style.display = "none";
            document.getElementById("descricao").children[1].setAttribute("disabled", "true");

        } else if(typeList.value == "youtube"){
            document.getElementById("url").style.display = "block";
            document.getElementById("url").children[1].removeAttribute("disabled");

            document.getElementById("descricao").style.display = "none";
            document.getElementById("descricao").children[1].setAttribute("disabled", "true");

        } else if(typeList.value == "texto") {
            document.getElementById("descricao").style.display = "block";
            document.getElementById("descricao").children[1].removeAttribute("disabled");

            document.getElementById("url").style.display = "none";
            document.getElementById("url").children[1].setAttribute("disabled", "true");
        }
    }

</script>
@endsection