@extends('layouts.iconbar')

@section('title')
Create Staff
@endsection

@section('breadcrumbs')
{{ Breadcrumbs::render(\Request::route()->getName()) }}
@endsection

@section('content')

<div class="page-content">
    <div class="panel">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                    {!! Form::open(['method' => 'POST', 'route' => ['admin.staff.store'], 'class' => 'needs-validation',
                    'novalidate']) !!}

                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group form-material floating" data-plugin="formMaterial">
                                {!! Form::text('name', old('name'), ['class' => 'form-control', 'placeholder' => '',
                                'required' => '']) !!}
                                {!! Form::label('name', trans('global.users.fields.name').'*', ['class' =>
                                'floating-label']) !!}
                                <p class="invalid-feedback">
                                    Please enter first name
                                </p>
                                @if($errors->has('name'))
                                <p class="error-block">
                                    {{ $errors->first('name') }}
                                </p>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group form-material floating" data-plugin="formMaterial">
                                {!! Form::text('last_name', old('last_name'), ['class' => 'form-control', 'placeholder'
                                => '', 'required' => '']) !!}
                                {!! Form::label('last_name', trans('global.users.fields.last-name').'', ['class' =>
                                'floating-label']) !!}
                                <p class="invalid-feedback">
                                    Please enter last name
                                </p>
                                @if($errors->has('last_name'))
                                <p class="error-block">
                                    {{ $errors->first('last_name') }}
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group form-material floating" data-plugin="formMaterial">
                                {!! Form::email('email', old('email'), ['class' => 'form-control', 'placeholder' => ''])
                                !!}
                                {!! Form::label('email', trans('global.users.fields.email').'', ['class' =>
                                'floating-label']) !!}
                                <p class="error-block"></p>
                                @if($errors->has('email'))
                                <p class="error-block">
                                    {{ $errors->first('email') }}
                                </p>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group form-material floating" data-plugin="formMaterial">
                                {!! Form::text('phone', old('phone'), ['class' => 'form-control', 'placeholder' => '',
                                'required' => '']) !!}
                                {!! Form::label('phone', trans('global.users.fields.phone').'', ['class' =>
                                'floating-label']) !!}
                                <p class="error-block"></p>
                                <p class="invalid-feedback">
                                    Please enter phone number
                                </p>
                                @if($errors->has('phone'))
                                <p class="error-block">
                                    {{ $errors->first('phone') }}
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group form-material floating" data-plugin="formMaterial">
                                {!! Form::select('role[]', $roles, old('role'), ['class' => 'form-control select2', 'id'
                                =>
                                'selectall-role' , 'required' => '', 'id' => 'role']) !!}

                                {!! Form::label('role', trans('global.users.fields.role').'*', ['class' =>
                                'floating-label'])
                                !!}
                                <p class="error-block"></p>
                                <p class="invalid-feedback">
                                    Please select role
                                </p>
                                @if($errors->has('role'))
                                <p class="error-block">
                                    {{ $errors->first('role') }}
                                </p>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-3" id="code-container" style="{{ old('role') ? (in_array(4, old('role')) || in_array(6, old('role')))? 'display:block;': 'display:none;' : 'display:none;' }}">
                            <div class="form-group form-material floating" data-plugin="formMaterial">
                                {!! Form::number('code', old('code'), ['class' => 'form-control', 'id'
                                => 'code' ])
                                !!}
                                {!! Form::label('code', trans('global.users.fields.code').'*', ['class' =>
                                'floating-label']) !!}

                                <p class="error-block"></p>
                                <p class="invalid-feedback">
                                    Please enter code
                                </p>
                                @if($errors->has('code'))
                                <p class="error-block">
                                    {{ $errors->first('code') }}
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group form-material floating" data-plugin="formMaterial">
                                {!! Form::password('password', ['class' => 'form-control', 'id'
                                => 'password', 'required' => '' ])
                                !!}
                                {!! Form::label('password', trans('global.users.fields.password').'*', ['class' =>
                                'floating-label']) !!}

                                <p class="error-block"></p>
                                <p class="invalid-feedback">
                                    Please enter password
                                </p>
                                @if($errors->has('password'))
                                <p class="error-block">
                                    {{ $errors->first('password') }}
                                </p>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group form-material floating" data-plugin="formMaterial">
                                {!! Form::password('password_confirmation', ['class' => 'form-control', 'id'
                                => 'password_confirmation', 'required' => '' ])
                                !!}
                                {!! Form::label('password', trans('global.users.fields.password-confirmed').'*', ['class' =>
                                'floating-label']) !!}

                                <p class="error-block"></p>
                                <p class="invalid-feedback">
                                    Please enter confirm password
                                </p>
                                @if($errors->has('password_confirmation'))
                                <p class="error-block">
                                    {{ $errors->first('password_confirmation') }}
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>
                    <!-- {!! Form::hidden('password', '1122', ['class' => 'form-control' ]) !!} -->

                    <!-- {!! Form::hidden('role[]', 4, old('role'), ['class' => 'form-control', 'required' => '']) !!} -->

                    {!! Form::button(trans('global.app_save'), ['class' => 'btn btn-info', 'type' => 'submit']) !!}
                    {!! Form::close() !!}

                </div>


            </div>

        </div>
    </div>
</div>



@stop

@section('javascript')
@parent
<script src="/adminlte/js/mapInput.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places&callback=initialize" async defer></script>

<script>
    $("#selectbtn-role").click(function() {
        $("#selectall-role > option").prop("selected", "selected");
        $("#selectall-role").trigger("change");
    });
    $("#deselectbtn-role").click(function() {
        $("#selectall-role > option").prop("selected", "");
        $("#selectall-role").trigger("change");
    });

    $(document).on('change', "#role", function() {
        var val = $(this).val();
        $("#code-container").hide();

        if (val == 4 || val == 6) {
            $("#code-container").show();
            document.getElementById("code").setAttribute("required", true);
        } else {
            document.getElementById("code").removeAttribute("required");
        }
    });
</script>
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                        $('.form-control:invalid').filter(":first").focus()
                    } else {
                        event.preventDefault();
                        form.submit();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);

    })();
</script>
@stop