@extends("vendor.template.layout")
@section('header')

@stop
@section('content')
    <div class="card mb-5">
        <div class="card-body">
            <div class="col-xs-12">
                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <div class="alert alert-danger" id="errors" style="display: none">
                    jsldjflds
                </div>

                <form method="post" id="form" action="{{ route('vendor_users.store') }}"
                      enctype="multipart/form-data"
                      data-parsley-validate="true">
                    @csrf()
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 individual">
                            <label class="form-label" for="bs-validation-name">First Name<span
                                        class="text-danger">*</span> </label>
                            <input
                                    type="text"
                                    class="form-control-plaintext" data-jqv-required="true"
                                    id="first_name"
                                    name="first_name"
                                    value="{{$first_name ?? ''}}"
                            />
                            <span id='first_name-message'></span>

                        </div>

                        <div class="col-xs-12 col-sm-6 individual">
                            <label class="form-label" for="bs-validation-name">Last Name<span
                                        class="text-danger">*</span> </label>
                            <input
                                    type="text"
                                    class="form-control-plaintext" data-jqv-required="true"
                                    id="last_name"
                                    name="last_name"
                                    value="{{$last_name ?? ''}}"
                            />
                            <span id='last_name-message'></span>

                        </div>
                        <div class="col-xs-4 col-sm-2 mb-3 mt-2">
                            <label class="form-label">Phone</label>
                            <select class="form-control-plaintext select2" name = "dial_code" data-jqv-required="true">
                                <option value = "">Dial Code</option>
                                @foreach(dial_codes() as $key => $country)
                                    <option value = "{{$key}}" >{{$country}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-xs-8 col-sm-4 mb-3 mt-2">
                            <label class="form-label">Number</label>
                            <input type = "text" class="form-control-plaintext" name = "phone" value = "{{ $phone ?? '' }}" data-jqv-required="true">
                        </div>
                        <div class="col-xs-12 col-sm-6 mb-3 mt-2">
                            <label class="form-label">Email</label>
                            <input type = "email" class="form-control-plaintext" name = "email" value="" data-jqv-required="true">
                            <span id='email-message'></span>
                        </div>
                        <div class="col-xs-12 col-sm-6 mb-3">
                            <label class="form-label">Password</label>
                            <input type = "password" class="form-control-plaintext" name = "password" value = "" id = "password" data-jqv-required="true">
                            <span id='password-message'></span>
                        </div>
                        <div class="col-xs-12 col-sm-6 mb-3">
                            <label class="form-label">Confirm Password</label>
                            <input type = "password" class="form-control-plaintext" name = "confirm_password" value = "" id = "confirm_password" data-jqv-required="true">
                            <span id='confirm_password-message'></span>
                        </div>

                        <div class="col-xs-12 col-sm-6 mb-3">
                            <label class="form-label">Permissions</label>

                            <ul class="list-group">
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    Dashboard
                                    <span class="badge badge-primary badge-pill">
                                        <input type="checkbox" value="dashboard" name="permissions[]">
                                    </span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    Requests
                                    <span class="badge badge-primary badge-pill">
                                        <input type="checkbox" value="requests" name="permissions[]">
                                    </span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    Earnings
                                    <span class="badge badge-primary badge-pill">
                                        <input type="checkbox" value="earnings" name="permissions[]">
                                    </span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    Bank Cards
                                    <span class="badge badge-primary badge-pill">
                                        <input type="checkbox" value="bank_cards" name="permissions[]">
                                    </span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    Users
                                    <span class="badge badge-primary badge-pill">
                                        <input type="checkbox" value="users" name="permissions[]">
                                    </span>
                                </li>

                            </ul>

                        </div>


                    </div>

                    <div class="col-md-12 mt-2">
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
            </form>
        </div>
        <div class="col-xs-12 col-sm-6">
        </div>
    </div>
    </div>
@stop
@section('script')
    <script>

        $form = $('#form');

        $form.validate({
            rules: {

                first_name:{
                    required:true,
                },
                last_name:{
                    required:true,
                },
                email:{
                    required:true,
                    email:true
                },
                password:{
                    required:true,
                },
                confirm_password:{
                    required:true,
                    equalTo:"#password"
                },
                dial_code:{
                    required:true
                },
                phone:{
                    required:true
                },
            },
            errorElement: 'div',
            errorPlacement: function(error, element) {
                element.addClass('is-invalid');
                error.addClass('error');
                error.insertAfter(element);
            }
        });


    </script>
@stop