@extends('template.index')
@section('title','Atualizar 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">
                            Editar Mensagem
                        </h2>
                    </div>
                    <form action="{{ route('advice.update', ['advice' => $advice['id']]) }}" method="post">
                        @csrf
                        @method('PUT')
                        <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 id="texto" value="texto" @if($advice->type == "texto") selected @endif>Texto</option>
                                                    <option id="audio" value="audio" @if($advice->type == "audio") selected @endif>Áudio</option>
                                                    <option id="video" value="video" @if($advice->type == "video") selected @endif>Vídeo</option>
                                                    <option id="youtube" value="youtube" @if($advice->type == "youtube") selected @endif>YouTube</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group" id="descricao" @if ($advice->type != 'texto') style="display:none" @endif>
                                        <b>Descrição:</b>
                                        <textarea @if ($advice->type != 'texto') disabled @endif class="form-control" name="description" id="description" cols="30" rows="10">{{ $advice->description }}</textarea>
                                        <span class="error-validate">
                                            <p id="validate-name"></p>
                                        </span>
                                    </div>

                                    <div class="form-group" id="url"  @if ($advice->type == 'texto') style="display:none" @endif>
                                        <b>URL:</b>
                                        <input @if ($advice->type == 'texto') disabled @endif id="teste" type="text" class="form-control" name="description" value="{{ $advice->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">Atualizar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')

<script>

    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