@extends('layouts.app')

@section('content')
<div class="content">

    <div class="col-md-12 ml-auto mr-auto">
        <div class="header bg-gradient-primary py-10 py-lg-2 pt-lg-12">
            <div class="container">
                <div class="header-body text-center mb-7">
                    <div class="row justify-content-center">
                        <div class="col-lg-12 col-md-9">
                            <p class="text-lead text-light mt-3 mb-0">
                                @include('alerts.migrations_check')
                            </p>
                        </div>
                        <div class="col-lg-5 col-md-6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default panel-bg">
                <div class="panel-heading">Profil {{$standard->name}}</div>
                <div class="panel-body">
                    <form>
                        <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                        <div class="form-group">
                            <label for="userName">
                                Name
                            </label>
                            <input type="text"  class="form-control"  id="userName" name="userName" value="{{$standard->name}}" disabled>
                        </div>
                        <div class="form-group">
                            <label for="email">
                                E-Mail
                            </label>
                            <input type="email"   class="form-control"  id="email" name="email" value="{{$standard->email}}">
                            <p  id="error" class="error">Email is not valid</p>
                        </div>

                        <div class="form-group">
                            <label for="menuType">Zeige Menu:</label>
                            <select class="form-control" id="menuType" name="menuType">
                                <option value="0" @if($standard->menuType == 0)selected active @endif>Oben</option>
                                <option value="1" @if($standard->menuType == 1)selected active @endif>Seitlich</option>
                                <option value="2" @if($standard->menuType == 2)selected active @endif>Beides</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="menu_color">Menü Hintergrundfarbe:</label>
                            <input type="color"  class="form-control" id="menu_backgroundcolor" name="menu_backgroundcolor" value="{{ $standard->menu_backgroundcolor ?? '#ec7802'}}">

                            <label for="menu_color">Menü Schriftfarbe:</label>
                            <input type="color"  class="form-control" id="menu_color" name="menu_color" value="{{ $standard->menu_color ?? '#ffffff'}}">

                            <label for="color">Schriftfarbe (Alles außer Menü):</label>
                            <input type="color"  class="form-control" id="color" name="color" value="{{ $standard->color  '#000000'}}">

                            <label for="font_family">Schriftart (gesamte Webseite):</label>
                            <select class="form-control" id="font_family" name="font_family">
                                <option value="Arial, sans-serif" @if($standard->font_family == "Arial, sans-serif")selected @endif>Arial</option>
                                <option value="Arial Black, sans-serif" @if($standard->font_family == "Arial Black, sans-serif")selected @endif>Arial Black</option>
                                <option value="Comic Sans MS, sans-serif" @if($standard->font_family == "Comic Sans MS, sans-serif")selected @endif>Comic Sans MS</option>
                                <option value="Courier New, monospace" @if($standard->font_family == "Courier New, monospace")selected @endif>Courier New</option>
                                <option value="Georgia, serif" @if($standard->font_family == "Georgia, serif")selected @endif>Georgia</option>
                                <option value="Helvetica, sans-serif" @if($standard->font_family == "Helvetica, sans-serif")selected @endif>Helvetica</option>
                                <option value="Impact, sans-serif" @if($standard->font_family == "Impact, sans-serif")selected @endif>Impact</option>
                                <option value="Lucida Console, monospace" @if($standard->font_family == "Lucida Console, monospace")selected @endif>Lucida Console</option>
                                <option value="Lucida Sans Unicode, sans-serif" @if($standard->font_family == "Lucida Sans Unicode, sans-serif")selected @endif>Lucida Sans Unicode</option>
                                <option value="Palatino Linotype, serif" @if($standard->font_family == "Palatino Linotype, serif")selected @endif>Palatino Linotype</option>
                                <option value="Tahoma, sans-serif" @if($standard->font_family == "Tahoma, sans-serif")selected @endif>Tahoma</option>
                                <option value="Times New Roman, serif" @if($standard->font_family == "Times New Roman, serif")selected @endif>Times New Roman</option>
                                <option value="Trebuchet MS, sans-serif" @if($standard->font_family == "Trebuchet MS, sans-serif")selected @endif>Trebuchet MS</option>
                                <option value="Verdana, sans-serif" @if($standard->font_family == "Verdana, sans-serif")selected @endif>Verdana</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <div class="form-group">
                                <button type="submit"  class="form-control"  id="submit">Speichern</button>
                            </div>
                            <div class="error-message"></div>
                        </div>
                    </form>
                    <script>
                        const form = document.querySelector('form');
                        form.addEventListener('submit', (event) => {
                            event.preventDefault();
                            const menu_color = $('#menu_color').val();
                            const menu_backgroundcolor = $('#menu_backgroundcolor').val();
                            const menuType = $('#menuType').val();
                            const email = $('#email').val();
                            const color = $('#color').val();
                            const font_family = $('#font_family').val();
                            const _token = $('#_token').val();
                            errorMessage.textContent = '';
                            $.post('/software/saveConfig', {
                                _token: _token,
                                menu_backgroundcolor: menu_backgroundcolor,
                                menu_color: menu_color,
                                email: email,
                                menuType: menuType,
                                color: color,
                                font_family: font_family
                            }, function(data) {
                                if(data.state === "success"){
                                    window.location.reload();
                                }else{
                                    alert(data);
                                }
                            })
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection