@extends('layouts/contentLayoutMaster')

@section('title', 'User')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
@endsection
@section('page-style')
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
@endsection

@section('content')
    <div class="card">
        <div class="card-header">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#Add-New-User">Add New User</button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Contact Number</th>
                            <th>Role</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($userList as $user)
                            <tr>
                                <td>{{ $user['name'] }}</td>
                                <td>{{ $user['email'] }}</td>
                                <td>{{ $user['contact_number'] }}</td>
                                <td>{{ $user['role'] }}</td>
                                <td><button type="button" class="btn btn-success " data-bs-toggle="modal" data-bs-target="#edit-user-detail" id="edit-user-detail_{{ $user['user_id'] }}" onclick="js:userDetail('{{$token}}',{{$user['user_id']}})">Edit</button></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    
    
    <div class="modal fade text-start" id="Add-New-User" tabindex="-1" aria-labelledby="myModalLabel17" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <form id="register">
                <div class="modal-header">
                  <h4 class="modal-title" id="myModalLabel17">Add New User</h4>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <lable><i>Email Id, Phone Number can not be duplicate!</i></lable>
                        </div>
                    </div>
                    <input type="text" id="name" class="form-control mb-2" placeholder="Name" name="name">
                    <span id="name_error"></span>
                    <input type="text" id="code" class="form-control mb-2" placeholder="Vendor Code" name="code">
                    <span id="code_error"></span>
                    <input type="email" id="email" class="form-control mb-2" placeholder="Email" email="email" name="email">
                    <span id="email_error"></span>
                    <input type="text" id="password" class="form-control mb-2" placeholder="Password" name="password">
                    <span id="password_error"></span>
                    <input type="number" id="contact_number" class="form-control mb-2" placeholder="Contact Number" name="contact_number">
                    <span id="contact_number_error"></span>
                    <input type="hidden" id="role" class="form-control mb-2" value="NORMAL_VENDOR" name="role">
                    <span id="role_error"></span>
                    <input type="hidden" id="branch" class="form-control mb-2" value="0" name="branch">
                    <span id="branch_error"></span>
                </div>
                <div class="modal-footer">
                 <!-- <button type="button" class="btn btn-primary" onclick="js:createUser('{{ $token }}')">Save</button>-->
                  <button type="button" class="btn btn-primary" onclick="js:createUsers('{{ $token }}')">Save</button>
                </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade text-start" id="edit-user-detail" tabindex="-1" aria-labelledby="myModalLabel17" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <form id="edit-user">
                    <div class="modal-header">
                      <h4 class="modal-title" id="myModalLabel17">Edit User</h4>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                           <input type="hidden" id="id" class="form-control mb-2" placeholder="Name"  name="id">
                            <input type="text" id="name" class="form-control mb-2" placeholder="Name"  name="name">
                            
                            <input type="email" id="email" class="form-control mb-2" placeholder="Email" name="email" readonly>
                            
                            <input type="text" id="password" class="form-control mb-2" placeholder="Password" name="password">
                            
                            <input type="number" id="contact_number" class="form-control mb-2" placeholder="Contact Number" name="contact_number">
                            
                            
                        </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary" onclick="js:editUsers('{{ $token }}')">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset(mix('js/scripts/custom/common.js')) }}"></script>
    <script>
        function createUsers(token){
    try{
        //var formdata = new formData();
        //console.log(formdata);
        $.ajax({
            url: "/api/user/registerUser",
            type: "post",
            dataType: 'json',
            headers: {
                'Authorization': 'Bearer '+token
            },
            data:$('form').serialize(),
            success: function(response){
               // alert('success');
                //console.log('response = '+$.parseJSON(response));
                console.log(JSON.stringify(response));
                if(response.status == true){
                    setTimeout(function () {
                        toastr["success"](
                            "",
                            response.msg,
                            {
                                closeButton: false,
                                tapToDismiss: false,
                                rtl: "rtl",
                            }
                        );
                    }, 2000);
                //location.reload();
                }
                else{
                    console.log(response.error);
                    $.each(response.error, function (key, val) {
                            console.log('key = '+key+'val = '+val);
                            $('#'+key+'_error').text(val[0]);
                        });
                    setTimeout(function () {
                        toastr["success"](
                            "",
                            response.msg,
                            {
                                closeButton: false,
                                tapToDismiss: false,
                                rtl: "rtl",
                            }
                        );
                    }, 2000);
                }
                
            },
            fail:function(response){
              
                console.log('in fail = '+response);
                var errors = $.parseJSON(response.responseText);
                        $.each(errors, function (key, val) {
                            console.log('key = '+key+'val = '+val[0]);
                            $('#'+key+'_error').text(val[0]);
                        });
                
            }
        });
    }catch(e){
        console.log(e);
    }
}  
    </script>
@endsection