@extends('layouts.adminlte.adminlte')

@section('title')
    Add user
@endsection

@section('content_header')
    @parent
    <span align="center"><h1>Add user</h1></span>
@endsection

@section('content')
<div align="center">
    {!! Form::open(['action' => 'App\Http\Controllers\CustomUsersController@store', 'method' => 'POST']) !!}
        <div class="form-group">
            {{Form::label('name', 'Name *')}}
            {{Form::text('name', '', ['class' => 'col-md-4 form-control form-textbox', 'placeholder' => 'Name'])}}
        </div>

        @if (auth()->user()->user_type == 'admin')
            <div style="display:none;" id="manager_select">
                <label for="manager_name">Manager *</label>
                <div class="col-md-4 form-group" id="manager_name">
                    <input class="typeahead" type="text" placeholder="Type the manager name">
                </div>
                <input style="display:none;" id="manager" name="manager" type="text" value="">
            </div>
        @endif

        {{Form::label('user_type', 'User type *')}}
        <div class="form-group">
            <select name="user_type" id="user_type" class="form-select col-md-4 custom-select">
                <option disabled="disabled" selected="selected">Select the user type</option>
                @switch(auth()->user()->user_type)
                    @case('admin')
                        <option value='admin'>Admin</option>
                        <option value='manager'>Manager</option>
                        <option value='seller'>Seller</option>
                        <option value='agent'>Agent</option>
                        @break
                    @case('manager')
                        <option value='seller'>Seller</option>
                        <option value='agent'>Agent</option>
                        @break
                @endswitch
            </select>
        </div>

        <div class="form-group">
            {{Form::label('email', 'E-mail *')}}
            {{Form::email('email', '', ['class' => 'col-md-4 form-control form-textbox', 'placeholder' => 'E-mail'])}}
        </div>

        <div class="form-group">
            {{Form::label('password', 'Password')}}
            {{Form::password('password', ['class' => 'col-md-4 form-control form-textbox', 'placeholder' => 'Password'])}}
        </div>

        <div id="wechat_div" style="display:none;" class="form-group">
            {{Form::label('wechat', 'Wechat')}}
            {{Form::text('wechat', '', ['class' => 'col-md-4 form-control form-textbox', 'placeholder' => 'Wechat'])}}
        </div>

        @if (in_array(auth()->user()->user_type, ["admin", "manager"]))
            <div class="form-group" id="tg_username_div">
                {{Form::label('telegram_username', 'Telegram username')}}
                <div class="col-md-4 form-row">
                    <div class="input-group mb-2">
                        <div class="input-group-prepend">
                            <div class="justify-content-center input-group-text">@</div>
                        </div>
                        {{Form::text('telegram_username', '', ['style' => 'max-width:100%;', 'class' => 'col-md-4 form-control form-textbox', 'placeholder' => 'tg username ("@" optional)'])}}
                    </div>
                </div>
            </div>
            <div class="form-group" style="display:none;" id="paypal_email_div">
                {{Form::label('paypal_email', 'Paypal e-mail')}}
                {{Form::email('paypal_email', '', ['class' => 'col-md-4 form-control form-textbox', 'placeholder' => 'Paypal e-mail'])}}
            </div>
        @endif

        <div id="perc_div">
            <hr>
            <div class="form-group">
                {{Form::label('perc_refund_feedback', '% Refund Feedback')}}
                {{Form::text('perc_refund_feedback', '70-100%', ['class' => 'col-md-4 form-control form-textbox', 'placeholder' => '% Refund Feedback'])}}
            </div>
            <div class="form-group">
                {{Form::label('perc_refund_rating', '% Refund Rating')}}
                {{Form::text('perc_refund_rating', '70-100%', ['class' => 'col-md-4 form-control form-textbox', 'placeholder' => '% Refund Rating'])}}
            </div>
            <div class="form-group">
                {{Form::label('perc_refund_purchase_only', '% Refund Purchase Only')}}
                {{Form::text('perc_refund_purchase_only', '70-100%', ['class' => 'col-md-4 form-control form-textbox', 'placeholder' => '% Refund Purchase Only'])}}
            </div>
            <hr>
        </div>

        <div style="display:none;" id="feedback_select">
            {{Form::label('feedback', 'Feedback')}}
            <div class="form-group">
                <select name="feedback" id="feedback" class="form-select col-md-4 custom-select">
                    <option disabled>Select an option</option>
                    <option value='yes'>Yes</option>
                    <option value='no'>No</option>
                    <option value='ask'>Ask</option>
                </select>
            </div>
        </div>

        <div style="display:none;" id="feedback_comm_textboxes">
            <div class="form-group">
                {{Form::label('feedback_agent_comm', 'Feedback Agent Commission')}}
                {{Form::text('feedback_agent_comm', '0', ['class' => 'col-md-4 form-control form-textbox', 'placeholder' => 'Feedback Agent Commission'])}}
            </div>
            <div class="form-group">
                {{Form::label('feedback_total_comm', 'Feedback Total Commission')}}
                {{Form::text('feedback_total_comm', '', ['class' => 'col-md-4 form-control form-textbox', 'placeholder' => 'Feedback Total Commission'])}}
            </div>
        </div>

        <div style="display:none;" class="form-group" id="comm_table_div">
            <h3>Commissions</h3>
            <table>
                <thead>
                <tr>
                    <th>Country</th>
                    <th>Agent Commission</th>
                    <th>Total Commission</th>
                </tr>
                </thead>
                <tbody>
                @foreach (getCountries() as $country)
                    <tr>
                        <div class="form-group">
                            <td><i class="flag-icon flag-icon-{{$country}}"></i></td>
                            <td>{{Form::text("agent_comm[$country]", $user->agent_comm[$country] ?? '', ['class' => 'sbs ac form-control form-textbox', 'placeholder' => 'Agent Commission'])}}</td>
                            <td>{{Form::text("total_comm[$country]", $user->total_comm[$country] ?? '', ['class' => 'sbs ac form-control form-textbox', 'placeholder' => 'Total Commission'])}}</td>
                        </div>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        {{Form::submit('Add user', ['class' => 'btn btn-primary'])}}

    {!! Form::close() !!}
    <br><br>
</div>
@endsection

@section('js')
    @parent
    @if (auth()->user()->user_type == 'admin')
        <script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/bloodhound.js"></script>
        <script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.jquery.js"></script>
        <script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
        <script src="/js/jquery-ui-1.12.0.js"></script>
        <script src="/js/users/typeahead.js"></script>
    @endif

    <script>
        $(document).ready(function() {
            $('#user_type').on('change', function() {
                $('#paypal_email_div').attr('style', ['manager', 'agent'].includes($('#user_type').val()) ? '' : 'display:none;');
                $('#manager_select, #comm_table_div, #feedback_select, #feedback_comm_textboxes').attr('style', $('#user_type').val() == 'seller' ? '' : 'display:none;');
                $('#wechat_div').attr('style', ['manager', 'seller'].includes($('#user_type').val()) ? '' : 'display:none;');
                $('#perc_div').attr('style', ['seller'].includes($('#user_type').val()) ? '' : 'display:none;');

                $('input[name^="perc_"]').on('keyup', function(e) {
                    let id = e.currentTarget.id;
                    let value = e.currentTarget.value;

                    if (! value) {
                        $(`input#${id}`).css('border-color', 'red');
                        $(`input#${id}`).effect('shake');
                        $(`#incorrect_${id}`).remove();
                        $(`<p style="color:red;" id="incorrect_${id}">Mandatory! (0-9.-% allowed)</p>`).insertBefore(`input#${id}`);
                    } else if (value.match(/^[0-9\.\-%]+$/)) {
                        $(`input#${id}`).css('border-color', '');
                        $(`#incorrect_${id}`).remove();
                    } else {
                        $(`input#${id}`).css('border-color', 'red');
                        $(`input#${id}`).effect('shake');
                        $(`#incorrect_${id}`).remove();
                        $(`<p style="color:red;" id="incorrect_${id}">Only 0-9.-% allowed!</p>`).insertBefore(`input#${id}`);
                    }
                });
            });
        });
    </script>
@endsection

@section('css')
    @parent
    <style>
        @if (auth()->user()->user_type == 'admin')
        #manager_name {
            font-family: sans-serif;
            position: relative;
            padding: 0;
        }
        .twitter-typeahead {
            width:100%;
        }
        .typeahead, .tt-query, .tt-hint {
            outline: medium none;
            padding: 8px 12px;
            width: 100%;
        }
        .typeahead {
            background-color: #FFFFFF;
        }
        .tt-query {
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        }
        .tt-hint {
            color: #999999;
        }
        .tt-menu {
            background-color: #FFFFFF;
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            margin-top: 0px;
            padding: 8px 0;
            width: 100%;
            max-height: 150px;
            overflow-y: auto;
        }
        .tt-suggestion {
            font-size: 18px;
            padding: 3px 20px;
        }
        .tt-suggestion:hover {
            cursor: pointer;
            background-color: #0097CF;
            color: #FFFFFF;
        }
        .tt-suggestion p {
            margin: 0;
        }
        @endif
        .form-select {
            text-align-last:center;
        }
        .form-checkbox {
            width: 100%;
            height: 40px;
            margin-right: 10px;
        }
        .form-textbox {
            width: 100%;
            text-align: center;
        }
        thead,td {
            text-align: center;
        }
    </style>
@stop