@extends('layouts.app')

@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')

@section('page_title') Create Email Account @endsection
<div class="container">
    <div class="row">
        <div class="col-10 offset-md-1">
            <div class="card">
                <div class="card-header">
                    <h4>Create Email Account
                        @can('hasViewPermission')
                        <a class="btn  btn-sm pull-right btn-dark" href="{{url('emailAccounts')}}">Email Account List</a>
                        @endcan
                    </h4>
                </div>
                <div class="card-body">
                    <form method="post" action="{{route('saveEmailAccount')}}" enctype="" autocomplete="off">
                        {{ csrf_field() }}
                        <div class="form-group row ">
                            <label for="organization" class="col-sm-3 col-form-label">Organization</label>
                            <div class="col-sm-9">
                                <select class="form-control" name="organization" id="organization" data-live-search="true">
                                    <option value="">Select Organization</option>
                                    @foreach($account_names as $account_name)
                                    <option value={{$account_name->id}} > {{$account_name->account_name}} ({{$account_name->email}})</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group row ">
                            <label for="email_server" class="col-sm-3 col-form-label">Mail Server</label>
                            <div class="col-sm-9">
                                <select class="form-control" name="email_server" id="email_server">
                                    <option value="">Select Server</option>
                                    @foreach($getServerToEmail as $server_name)
                                    <option value={{$server_name->id}} > {{$server_name->alias_server_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="email_server" class="col-sm-3 col-form-label">Email Account</label>
                            <div class="col-sm-9">
                            <input id='email_account_name' type="text" name="email_account_name" class="form-control" required />
                            </div>
                        </div>
                        <div class="form-group row ">
                            <label for="email_server" class="col-sm-3 col-form-label">Email Token</label>
                            <div class="col-sm-9">
                            <input id='email_token' type="text" name="email_token" class="form-control" required />
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="offset-sm-3 col-sm-9">
                                <button type="submit" id="#addemailaccount" class="btn btn-sm btn-block btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $('#organization').multiselect({
        enableFiltering: true,
        selectAllJustVisible: false,
        includeSelectAllOption: true,
        allSelectedText: 'All Accounts selected',
        nonSelectedText: 'No  Account selected',
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth: '100%',
        templates: {
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button">Clear</button></span>',
            },
            enableCaseInsensitiveFiltering: true
    });
</script>
@endsection