@extends('layouts.app')

@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('modern/app-assets/vendors/css/forms/selects/select2.min.css')}}">
    <style>

    </style>
@endsection

@section('content')

    <div class="row">
        <div class="col-lg-12">

            <div class="card">
                <div class="card-header separator">
                    <h4 class="card-title" id="heading-buttons1">Add Users</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">

                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <form role="form" action="{{url('user')}}" method="POST"
                              class="add form-validations">

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-style required">
                                        <label>Name <span class="red">*</span></label>
                                        <input type="text" class="form-control validate[required]" name="name">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-style required">
                                        <label>User Name <span class="red">*</span></label>
                                        <input type="text" class="form-control validate[required, custom[email]]"
                                               name="email" id="email"
                                               placeholder="jeny@pragicts.com">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-style form-group-style-select2 required">
                                        <label>User Role <span class="red">*</span></label>
                                        <select class="select2 form-control full-w validate[required]"  name="role">
                                            <option value="">Please select</option>
                                            @foreach($roles as $val)
                                                @role('Super Admin')
                                                <option value="{{$val->name}}">{{$val->name}}</option>
                                                @else
                                                    @if($val->name != 'Super Admin')
                                                        <option value="{{$val->name}}">{{$val->name}}</option>
                                                    @endif
                                                    @endrole

                                                    @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-style required">
                                        <label>Phone Number <span class="red">*</span></label>
                                        <input type="number" class="form-control validate[required]"
                                               name="phone" id="phone" >
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-style required">
                                        <label>Password <span class="red">*</span></label>
                                        <input type="password" class="form-control validate[required, minSize[6]]"
                                               name="password" id="password" min="6">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-style required">
                                        <label>Confirm Password <span class="red">*</span></label>
                                        <input type="password" class="form-control validate[required, equals[password]]"
                                               name="password_confirmation">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group form-group-style">
                                        <label>Mac Address</label>
                                        <input type="text" class="form-control" name="mac_address">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group form-group-style">
                                        <label>Ip Address</label>
                                        <input type="text" class="form-control validate[custom[ipv4]]"
                                               name="ip_address">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group form-group-style">
                                        <label>Profile Image <small>(70px * 70px)</small></label>
                                        <input type="file" class="form-control" name="image_url">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    {{--<div class="form-group form-group-default">--}}
                                    {{--<label>Ip Address</label>--}}
                                    {{--<input type="text" class="form-control validate[custom[ipv4]]"--}}
                                    {{--name="ip_address">--}}
                                    {{--</div>--}}
                                </div>
                            </div>

                            <div class="clearfix">
                                <div class="float-right">
                                    <button class="btn btn-warning btn-min-width cancel-btn" type="button"
                                            data-redirect_url="{{url('user')}}">
                                        <i class="ft-x"></i>Cancel
                                    </button>
                                    <button class="btn btn-info btn-min-width image-form-save" type="button"
                                            data-formname="add"
                                            data-posttype="POST">
                                        <i class="la la-check-square-o"></i> Save
                                    </button>
                                </div>
                            </div>

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

        </div>
    </div>

@endsection

@section('script')

    <script src="{{ asset('modern/app-assets/vendors/js/forms/select/select2.full.min.js')}}"></script>

    <script>
        $(document).ready(function () {
            $(".select2").select2();
            $('#email').on('blur', function (evt) {
                var checkExistUrl = '