@extends('base')
@section('content')

    <h1 class="mt-5">Tags</h1>
    <div class="graph-card px-4 py-3 my-3" style="max-width: 600px;">
        <h2 class="d-inline-block" style="color: #727E88;">Edit Tag</h2>
        <div class="d-inline-block float-end">
            <img src="{{secure_asset('images/flag.svg')}}" alt="...">
        </div>
        <form class="my-3 text-end"  method="POST" action="{{ secure_url('/add-tags/update', $tag->id )}}">
            @csrf
            <label class="d-inline-block">Name:</label>
            <input type="text" name="tag" class="d-inline-block form-control px-3 py-2 audit-name mb-3" id="TextInput" style="width: 83%">
            <label class="">Description:</label>
            <input type="text" name="description" class="d-inline-block form-control px-3 py-2 audit-name mb-3" style="width: 83%">

            <input type="text" name="theme_input" id="theme_input" hidden>
            <div id="appendTo" style="display: inline;"></div>
            <br>
            <label>Theme:</label>
            <select name="search" class="d-inline-block form-control px-3 py-2 audit-name mb-3" id="search-input" style="width: 83%">
                @foreach($getThemes as $getTheme)
                    <option value="{{ $getTheme->id }}" id="{{ $getTheme->name }}" >{{ $getTheme->name }}</option>
                @endforeach
            </select>
            <button type="submit" class="btn btn-primary vl-btn-small">Save & Exit</button>
        </form>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript">

        $('#search-input').change(function(){
            var getValue  = $('#search-input').val();
            var getName   = $('#search-input option:selected').attr('id');
            console.log(getValue);
            console.log(getName);
            arr.push(getValue);
            $('#theme_input').val(JSON.stringify(arr));
            $( "#appendTo" ).append('<span class="badge bg-dark mx-2">'+getName+'</span>');
            count++;
        });

    </script>
@endsection