@include('Admin.Includes.header')
@php
    use Illuminate\Support\Facades\Auth;
    $logged_in_user = Auth::user();
@endphp
<!-- Page Inner Start -->
<!--================================-->
<div class="page-inner">
    <!--================================-->
    <!-- Breadcrumb Start -->
    <!--================================-->
    <div class="pageheader pd-t-25 pd-b-35">
        <div class="d-flex justify-content-between">
            <div class="clearfix">
                <div class="pd-t-5 pd-b-5">
                    <h1 class="pd-0 mg-0 tx-20 tx-dark">{{ __('Create User') }}</h1>
                </div>
                <div class="breadcrumb pd-0 mg-0">
                    <a class="breadcrumb-item" href="{{ url('/') }}/admin"><i class="icon ion-ios-home-outline"></i>
                        Dashboard</a>
                    <a class="breadcrumb-item" href="{{ url('/') }}/admin/users">Users</a>
                    <span class="breadcrumb-item active">Create</span>
                </div>
            </div>
             @if (Session::has('permissions') && in_array('User List', Session::get('permissions')))
            <div class="d-flex align-items-center">
                <button type="button" onclick="window.location = '{{ url('/') }}/admin/users'"
                    class="btn btn-default mb-2 mb-md-0 d-none d-lg-block pd-t-6-force pd-b-5-force">
                    <i data-feather="user" class="wd-16 mr-2"></i>User List</button>

            </div>
        @endif
        </div>
    </div>
    <!--/ Breadcrumb End -->
    <!--================================-->
    <div class="row clearfix">
        <!--================================-->
        <!-- Top Label Layout Start -->
        <!--================================-->
        <div class="col-md-12 col-lg-12">
            <div class="fullfilled-request my-2"></div>
            <div class="card mg-b-30">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-header-title tx-13 mb-0">Create New User</h6>
                        </div>
                        <div class="text-right">
                            <div class="d-flex">
                                <a href="" class=""><i class="ti-reload"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <form id="create_user_account">
                        @csrf
                        <input type="hidden" name="created_by" value="{{ $logged_in_user->id }}">
                        <div class="form-layout form-layout-1">
                            <h4>Account Info</h4>
                            <div class="row mg-b-25">
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label active">User Name: <span
                                                class="tx-danger">*</span></label>
                                        <input class="form-control" type="text" name="name"
                                            placeholder="Enter User Name" required>
                                    </div>
                                </div>
                                <!-- col-4 -->
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label active">User Email: <span
                                                class="tx-danger">*</span></label>
                                        <input class="form-control" type="email" name="email"
                                            placeholder="Enter email address" required>
                                    </div>
                                </div>
                                <!-- col-4 -->
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label">User Password: <span
                                                class="tx-danger">*</span></label>
                                        <input class="form-control" type="password" name="password"
                                            placeholder="Enter Password" required>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label">User Phone: <span
                                                class="tx-danger">*</span></label>
                                        <input class="form-control" type="tel" name="phone"
                                            placeholder="Enter Phone Number" required>
                                    </div>
                                </div>
                                <!-- col-4 -->
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label">User Role: <span
                                                class="tx-danger">*</span></label>
                                        <select class="form-control" required name="role_id"
                                            data-placeholder="Select User Role" tabindex="-1" aria-hidden="true">
                                            <option label="Choose User Role" value=""></option>
                                            @foreach ($roles as $role)
                                                @if ($role->id == 1)
                                                    @if ($logged_in_user->role_id == 1)
                                                        <option value="{{ $role->id }}">{{ $role->title }}</option>
                                                    @endif
                                                @elseif($role->id != 1)
                                                    <option value="{{ $role->id }}">{{ $role->title }}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <!-- col-4 -->
                            </div>
                            <hr>
                            <h4>Business Info</h4>
                            <div class="row mg-b-25">
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label active">Business Name:</label>
                                        <input class="form-control" type="text" name="business_name"
                                            placeholder="WareHub Inc">
                                    </div>
                                </div>
                                <!-- col-4 -->
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label active">Business Email:</label>
                                        <input class="form-control" type="email" name="business_email"
                                            placeholder="stock@business.com.au">
                                    </div>
                                </div>
                                <!-- col-4 -->
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Business Phone:</label>
                                        <input class="form-control" type="tel" name="business_phone"
                                            placeholder="6123456789">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Business Street Address: <span
                                                class="tx-danger"></span></label>
                                        <input class="form-control address-input" type="address" name="business_street_address"
                                            placeholder="123 Main Street, Sydney, NSW 2000">
                                            <div class="suggestions" style="background:white;"></div>
                                              <div class="details"></div>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Business Area: <span
                                                class="tx-danger"></span></label>
                                        <input class="form-control address-input" type="address" name="area_address"
                                            placeholder="Sydney, Australia">
                                            <div class="suggestions" style="background:white;"></div>
                                              <div class="details"></div>
                                    </div>
                                </div>
                            </div>

                            <!-- row -->
                            <div class="form-layout-footer">
                                <hr>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input"
                                        name="confirmation_email_sending" id="customCheck2">
                                    <label class="custom-control-label" for="customCheck2"> Would you like to send
                                        login details email to user?</label>
                                </div>
                                <hr>
                                <button class="btn btn-primary" type="submit">Submit Form</button>
                                <button class="btn btn-secondary"
                                    onclick="window.location = '{{ url('/') }}/admin/users'"
                                    type="button">Cancel</button>
                                <div class="response_section"></div>
                            </div>
                            <!-- form-layout-footer -->
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--/ Top Label Layout End -->
    </div>
</div>
<!--/ Page Inner End -->
@include('Admin.Includes.footer')
<script>
    $('#create_user_account').on('submit', function(e) {
        e.preventDefault();
        $('.response_section').html(`<div class="alert alert-info mt-1">Processing...</div>`);
        var formData = $(this).serialize();
        $.ajax({
            url: "{{ route('users.store') }}",
            type: "POST",
            data: formData,
            success: function(response) {
                $('.response_section').html(``);
                switch (response.status) {
                    case 200:
                        $('.fullfilled-request').html(
                            `<div class="alert alert-success mt-1">${response.message}</div>`);
                        $('input[name=password_confirmation], input[name=password], input[name=name], input[name=phone],input[name=_b_name],input[name=_b_email],input[name=_b_number],input[name=_b_street_address],input[name=_b_area_address]')
                            .val('');
                        break;
                    case 500:
                        $('.fullfilled-request').html(
                            `<div class="alert alert-danger mt-1">${response.message}</div>`);
                        break;
                }
            },
            error: function(xhr, status, error) {
                $('.response_section').html(``);
                // handle error response
                if (xhr.status == 422) {
                    let errors = xhr.responseJSON.errors;
                    let errorList = '<ul>';
                    for (let field in errors) {
                        errorList += '<li>' + errors[field][0] + '</li>';
                    }
                    errorList += '</ul>';
                    $('.fullfilled-request').html('<div class="alert alert-danger mt-1">' +
                        errorList + '</div>');
                } else {
                    $('.fullfilled-request').html(
                        '<div class="alert alert-danger mt-1">Server Error, Try Again Later!</div>'
                        );
                }
            }
        });
    });
</script>