@extends('layouts.retail')

@section('users-active', 'active')

@section('contents')
    <div class="content-wrapper" id="content-wrapper" style="min-height: 440px;">
        <section class="container col content p-2 p-xl-4 p-lg-4">
            <section class="content-header">
                <h5 class="font-weight-bold mb-4">
                    <i class="nav-icon fas fa-users mr-3" style="color: #F9D339"></i>
                    User Maintenance
                </h5>

                <div class="mt-2 bg-white border" style="border-radius: 5px; min-height: 300px;">
                    {{-- <div class="p-4 d-flex justify-content-between align-items-center"> --}}
                    {{-- <h2 class="font-weight-bold">User Maintenance</h2> --}}
                    {{-- <button class="btn btn-white border text-sm py-2" id="addBtn">Add User</button> --}}
                    {{-- </div> --}}
                    <div class="p-3 d-flex mt-2">
                        <input type="text" class="form-control text-sm mr-2" placeholder="Search"
                            style="max-width: 250px;" id="searchInput">

                        <button class="btn text-sm mr-2 border special-button" id="searchBtn">Search</button>

                        <button class="btn btn-white border text-sm py-2" id="addBtn">Add User</button>
                    </div>
                    <div id="datatable_wrapper" style="width: 100%; overflow-x: scroll;">
                        <table class="table table-hover text-sm" id="datatable" style="width: 100%"></table>
                    </div>
                </div>
            </section>
        </section>
    </div>

    {{-- Modal  --}}
    <div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="userModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <div class="px-3 pt-3 d-flex w-100 justify-content-between">
                        <h5 class="modal-title font-weight-bold" id="">
                            <i class="nav-icon fas fa-users mr-3 special-text"></i>
                            <span>Add User</span>
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <div class="modal-body">
                    <!-- Modal body content -->
                    <form id="" class="userForm px-3">
                        <input type="text" name="id" id="id" hidden>
                        <input type="text" name="_token" value="{{ csrf_token() }}" hidden>
                        <div class="row">
                            <div class="col-lg-7">
                                <div class="form-group">
                                    <label for="name">Name</label>
                                    <input type="text" class="form-control text-sm" id="name" name="name"
                                        placeholder="Enter name">
                                </div>
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input type="email" class="form-control text-sm" id="email" name="email"
                                        placeholder="Enter email">
                                </div>
                                <div class="form-group">
                                    <label for="username">Username</label>
                                    <input type="text" class="form-control text-sm" id="username" name="username"
                                        placeholder="Enter username">
                                </div>
                                <div class="form-group">
                                    <label for="status">Status</label>
                                    <select class="form-control  text-sm" id="status" name="status">
                                        <option value="1">Active</option>
                                        <option value="0">Inactive</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="status">Role</label>
                                    <select class="form-control  text-sm" id="role" name="role">
                                        <option value="USER">User</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="password">Password</label>
                                    <input type="password" class="form-control text-sm" id="password" name="password"
                                        placeholder="Enter password">
                                </div>
                                <div class="form-group">
                                    <label for="password_confirmation">Confirm Password</label>
                                    <input type="password" class="form-control text-sm" id="password_confirmation"
                                        name="password_confirmation" placeholder="Confirm password">
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="form-group ml-4">
                                    <label for="permissions">Permissions</label>
                                    <div id="permissions">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="dashboard"
                                                id="dashboard" name="permissions[]">
                                            <label class="form-check-label" for="Dashboard">
                                                Dashboard
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="products"
                                                id="products" name="permissions[]">
                                            <label class="form-check-label" for="products">
                                                Products
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="sales"
                                                id="sales" name="permissions[]">
                                            <label class="form-check-label" for="sales">
                                                Sales
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="traffic"
                                                id="traffic" name="permissions[]">
                                            <label class="form-check-label" for="traffic">
                                                Traffic
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="stocks"
                                                id="stocks" name="permissions[]">
                                            <label class="form-check-label" for="stocks">
                                                Stocks
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="invoices"
                                                id="invoices" name="permissions[]">
                                            <label class="form-check-label" for="invoices">
                                                Invoices
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="users"
                                                id="users" name="permissions[]">
                                            <label class="form-check-label" for="users">
                                                Users
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="stores"
                                                id="stores" name="permissions[]">
                                            <label class="form-check-label" for="stores">
                                                Stores
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="logs"
                                                id="logs" name="permissions[]">
                                            <label class="form-check-label" for="logs">
                                                Logs
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="jobs"
                                                id="jobs" name="permissions[]">
                                            <label class="form-check-label" for="jobs">
                                                Triggers
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="printing"
                                                id="printing" name="permissions[]">
                                            <label class="form-check-label" for="printing">
                                                Barcode Printing
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="alert alert-light d-none" role="alert" id="errorAlert">
                            <div id="errorAlertMessage"></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-light border text-sm py-2" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn text-sm py-2 submitUserForm special-button"
                        form="updateUserForm">Save changes</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script type="module" src="{{ asset('/js/manage/users.js') }}"></script>
@endsection