@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">
            @if(Auth::user()->role == "SUPER_ADMIN" || Auth::user()->role == "ADMIN")
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#Add-New-User">Add New User</button>
            @endif
        </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>Branch</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>{{ $user['branch_city'] }}</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="email" id="email" class="form-control mb-2" placeholder="Email" name="email">
                        <span id="email_error"></span>
                        <input type="text" id="passwrd" 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="BRANCH_CASHIER" name="role">
                        <select class="form-control mb-2 branch-dropdown" id="branch" name="branch">
                            <option value="">Select Branch</option>
                        </select>
                        
                    </div>
                    <div class="modal-footer">
                      <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>
@endsection