@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>branch</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'] }}</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">
                    <input type="text" id="name" class="form-control mb-2" placeholder="Name">
                    <input type="email" id="email" class="form-control mb-2" placeholder="Email">
                    <input type="number" id="contact_number" class="form-control mb-2" placeholder="Contact Number" pattern="[1-9]{1}[0-9]{9}">
                    <input type="password" id="password" class="form-control mb-2" placeholder="Password">
                
                    <input type="hidden" id="role" class="form-control mb-2" value="ADMIN">
                    <input type="hidden" id="branch" class="form-control mb-2" value="0">
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary" onclick="js:createUser('{{ $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