@extends('admin.layouts.master')

@section('page_title')
    Users - New User
@endsection

@push('styles')
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
@endpush

@section('page_content')
    <div class="page-content container-fluid" style="color: #000;">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel" id="exampleWizardForm">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h3>Users - New User</h3>
                        </div>
                    </div>
                    <div class="panel-body">
                        <form class="form-horizontal" method="POST">
                            @if(count($errors)>0)
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach($errors->all() as $error)
                                            <li>{{$error}}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            @if (\Session::has('success'))
                                <div class="alert alert-success">
                                    <ul>
                                        <li>{!! \Session::get('success') !!}</li>
                                    </ul>
                                </div>
                            @endif
                            {{csrf_field()}}

                        <div class="row" >
                            <div class="col-md-6">
                            <div class="form-group">
                                <label for="organisation" class="col-sm-3 control-label form-label">Organisation<span
                                            style="color: red;"></span> </label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="organisation" id="organisation" placeholder="Enter Organisation" value="{{old('organisation')}}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="username" class="col-sm-3 control-label form-label">Username<span
                                            style="color: red;">*</span> </label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="username" id="username" placeholder="Enter Username" value="{{old('username')}}">
                                </div>
                            </div>
                                <div class="form-group">
                                    <label for="password" class="col-sm-3 control-label form-label">Password<span
                                                style="color: red;">*</span> </label>
                                    <div class="col-sm-8">
                                        <input type="password" class="form-control" name="password" id="password" placeholder="Enter Password" value="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="password_confirmation" class="col-sm-3 control-label form-label">Confirm Password<span
                                                style="color: red;">*</span> </label>
                                    <div class="col-sm-8">
                                        <input type="password" class="form-control" name="password_confirmation" id="password_confirmation" placeholder="Confirm your password" value="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="username" class="col-sm-3 control-label form-label">Currency<span
                                                style="color: red;">*</span> </label>
                                    <div class="col-sm-8">
                                        <select id="currency_id" name="currency_id"  class="form-control">
                                            <option value="">--Select One--</option>
                                            @foreach($currencies as $currency)
                                                <option value="{{$currency->id}}" {!! old('currency_id')==$currency->id ? 'selected="selected"':'' !!}>{{$currency->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="username" class="col-sm-3 control-label form-label">Role<span
                                                style="color: red;">*</span> </label>
                                    <div class="col-sm-8">
                                        <select name="role" id="role" class="form-control">
                                            <option value="">--Select One--</option>
                                            <option value="user" {!! old('role')=='user' ? 'selected="selected"':'' !!}>Client</option>
                                            <option value="reseller" {!! old('role')=='reseller' ? 'selected="selected"':'' !!}>Reseller</option>
                                        </select>
                                    </div>
                                </div>
                                <div id="resellerDiv" style="display: none">
                                    <div class="form-group">
                                        <label for="username" class="col-sm-3 control-label form-label">Reseller<span
                                                    style="color: red;">*</span> </label>
                                        <div class="col-sm-8">
                                            <select name="reseller_id"  class="form-control">
                                                <option value="">--Select One--</option>
                                                @foreach($resellers as $reseller)
                                                    <option value="{{$reseller->id}}" {!! old('reseller_id')==$reseller->id ? 'selected="selected"':'' !!}>{{$reseller->full_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="username" class="col-sm-3 control-label form-label">Email<span
                                                style="color: red;">*</span> </label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="email" id="email" placeholder="Enter Email" value="{{old('email')}}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="username" class="col-sm-3 control-label form-label">Phone Number<span
                                                style="color: red;">*</span> </label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="phone_number" id="phone_number" placeholder="Enter Phone Number" value="{{old('phone_number')}}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="price" class="col-sm-3 control-label form-label">SMS Price <span class="currAbbr"></span><span
                                                style="color: red;">*</span> </label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="price" id="price" placeholder="Enter SMS Price" value="{{empty( old('price')) ? '0.03' : old('price')}}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="price" class="col-sm-3 control-label form-label">Email Price <span class="currAbbr"></span><span
                                                style="color: red;">*</span> </label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="email_price" id="email_price" placeholder="Enter Email Price" value="{{empty( old('email_price')) ? '0.00332' : old('email_price')}}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="credited" class="col-sm-3 control-label form-label">Credit to Add <span class="currAbbr"></span><span
                                                style="color: red;">*</span> </label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="credited" id="credited" placeholder="Enter Amount" value="{{old('credited')}}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="contact_person" class="col-sm-3 control-label form-label">Contact Person<span
                                                style="color: red;">*</span> </label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="contact_person" id="contact_person" placeholder="Enter Contact Person" value="{{old('contact_person')}}">
                                    </div>
                                </div>
                        </div>
                        </div>
                            <div class="col-md-offset-5">
                                <button type="submit" id="saveBtn" class="btn btn-primary" style="background-color: #ffcb05; color: #000;">Save</button>
                                <a id="cancelBtn" href="{{route('admin.users')}}" class="btn btn-default" style="background-color: #000; color: #ffcb05;">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    $('#currency_id').on('change', function() {
        var val = this.value;
        $.ajax({
            url: "{{route('admin.get_currency_abbr')}}",
            type: 'POST',
            data: {
                _token: token,
                id: val
            },
            dataType: "json",
            success: function (result, status, xhr) {
                $('.currAbbr').text("("+result.value+")");
            },
            error: function (result, status, xhr) {
                alert('An error occurred while fetching log details!');
                console.log(result);
            }
        });
    })
    $('#role').on('change', function() {
        var val = this.value;
        if(val == 'user') {
            $('#resellerDiv').slideDown();
        } else {
            $('#resellerDiv').slideUp();
        }
    })
    @if(old('role')=='user')
        $('#resellerDiv').slideDown();
    @else
        $('#resellerDiv').slideUp();
    @endif
</script>
@endpush