@extends('layouts.adminlte.adminlte')

@section('title')
    Blacklist - Add user
@endsection

@section('content_header')
    @parent
        <div>
            @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                @if(Session::has('alert-' . $msg))
                    <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}</p>
                @endif
            @endforeach
        </div>
    <h1 id="title" class="center">Blacklist - Add user</h1>
@endsection

@section('content')
    <br>
    <div align="center">
        {!! Form::open(['action' => 'App\Http\Controllers\BlacklistController@store', 'method' => 'POST']) !!}

        <div class="form-group">
            <select onchange="update_desc()" name="blacklist_type" id="blacklist_type" class="col-md-4 custom-select form-select">
                <option disabled="disabled" selected="selected">Insert by</option>
                @foreach(['email', 'amazon', 'facebook', 'telegram', 'wechat'] as $blacklist_type)
                    <option {{$blacklist_type=="email" ? 'selected':''}} value="{{$blacklist_type}}">{{ucfirst($blacklist_type)}}</option>
                @endforeach
            </select>
        </div>

        <div class="form-group">
            {{Form::label('value', 'Please enter the email', ['id' => 'value-label'])}}
            {{Form::email('value', '', ['class' => 'col-md-4 form-control form-textbox', 'placeholder' => 'email'])}}
        </div>

        <div class="form-group">
            {{Form::label('reason', 'Please enter the reason', ['id' => 'value-label'])}}
            {{Form::text('reason', '', ['class' => 'col-md-4 form-control form-textbox', 'placeholder' => 'reason'])}}
        </div>

        {{Form::submit('Add to the blacklist', ['class' => 'btn btn-primary'])}}
        {!! Form::close() !!}
        <br><br>
    </div>
@endsection

@section('js')
    @parent
    <script>
        function update_desc() {
            var val = $( "#blacklist_type option:selected" ).val();
            switch (val) {
                case 'email':
                    document.querySelector("#value-label").innerText = 'Please enter the e-mail address';
                    document.querySelector("#value").placeholder = 'e-mail address';
                    break;
                case 'amazon':
                    document.querySelector("#value-label").innerText = 'Please enter the amazon profile URL';
                    document.querySelector("#value").placeholder = 'amazon profile URL';
                    break;
                case 'facebook':
                    document.querySelector("#value-label").innerText = 'Please enter the Facebook profile URL';
                    document.querySelector("#value").placeholder = 'facebook profile URL';
                    break;
                case 'telegram':
                    document.querySelector("#value-label").innerText = 'Please enter the telegram username or ID';
                    document.querySelector("#value").placeholder = 'telegram username/ID';
                    break;
                case 'wechat':
                    document.querySelector("#value-label").innerText = 'Please enter the wechat ID';
                    document.querySelector("#value").placeholder = 'wechat ID';
                    break;
            }
            document.querySelector("#value").type = val == 'email' ? 'email' : 'text';
        }
    </script>
@stop

@section('css')
    @parent
    <style>
        .form-select {
            text-align-last: center;
        }
        .center {
            margin-left: auto;
            margin-right: auto;
            text-align:center;
        }
        .chkbox {
            width: 40px;
            height: 40px;
            margin-right: 20px;
        }
        .form-textbox {
            width: 100%;
            text-align: center;
        }
        .sbs {
            display: inline-block;
        }
    </style>
@stop