@extends('backend.layouts.app')
@section('content')
    <style type="text/css">
        
        .custom-control-input:disabled~.custom-control-label {
            color: #32325d;
        }

    </style>
    <div class="container-fluid">
       
        <div class="row" style="margin-top: 2%;">
            <div class="col-4">
                <div class="">
                    <div class="card shadow">
                        <div class="card-header border-0">
                            <div class="row align-items-between">
                                <div class="col-10">
                                    <h3 class="mb-0">Create a User</h3>
                                </div>
                                
                            </div>
                        </div>
                        <div class="card-body">
                            <form class="create-user" id="create-user" role="form">
                                <div class="container">
                                    <input type="hidden" id="is_allow_add" {{ auth()->user()->checkUserCount(auth()->user()->plan_id) == 1 ? 'value=Yes' : 'value=No' }}>
                                    <div class="form-group">
                                        <label>First Name</label>
                                        <input type="text" class="form-control form-control-sm" id="first-name" name="first_name">
                                    </div>

                                    <div class="form-group">
                                        <label>Last Name</label>
                                        <input type="text" class="form-control form-control-sm" id="last-name" name="last_name">
                                    </div>

                                    <div class="form-group">
                                        <label>Email Address</label>
                                        <input type="email" class="form-control form-control-sm"  name="email_add" required="">
                                    </div>

                                    <div class="form-group">
                                        <label>Contact Number (Optional)</label>
                                        <input type="text" class="form-control form-control-sm"  name="mobile_number" required="">
                                    </div>

                                    <div class="form-group">
                                        <label>User Type</label>
                                        <select class="form-control form-control-sm" id="user-type" name="user_type">
                                            <option value="">--Select--</option>
                                            @foreach($user_types as $user_type)
                                                <option value="{{$user_type->id}}">{{$user_type->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group div-brand" style="display: none;">
                                        <label>Assign Brand</label>
                                        <select class="form-control form-control-sm" id="brand-id" name="brand_id">
                                            <option value="">--Select--</option>
                                            @foreach($brands as $brand)
                                                <option value="{{$brand->id}}">{{$brand->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group div-store" style="display: none;">
                                        <label>Assign Store</label>
                                        <select class="form-control form-control-sm" id="store-id" name="store_id">
                                        </select>
                                    </div>

                                    <label class="control-label"><b>Review Access Rights</b></label>

                                    <div class="div-rights">
                                        
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="card-footer">
                            <div class="align-right" style="">
                                <div class="row ">
                                    <button type="button" class="btn btn-success btn-sm btn-create-user">Create User</button>
                                    <button type="button" class="btn btn-danger btn-sm btn-cancel">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-8">
                <div class="">
                    <div class="card shadow">
                        <div class="card-header border-0">
                            <div class="row align-items-between">
                                <div class="col-8">
                                    <h3 class="mb-0">User Lists</h3>
                                </div>
                                <div class="col-4">
                                    <div class="row align-right">
                                        <form class="file-import-form" id="file-import-form" width="100%" role="form" enctype="multipart/form-data" files="true">
                                            {{ csrf_field() }}
                                        
                                            <button type="button" class="btn btn-primary btn-sm import_user" id="import_user" value="import_user">Import User</button>

                                            <input type="file" class="import_user_file" id="import_user_file" name="import_user_file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" style="display: none" />
                                        </form>

                                        <button type="button" class="btn btn-success btn-sm btn-submit">Sort</button>
                                        <button type="button" class="btn btn-primary btn-sm btn-export">Filter</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="data-lists">
                               @include('backend.user-management.lists')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        
    </div>

    @include('backend.user-management.modal-edit')
    @include('backend.user-management.loading-modal')
@endsection
@section('after-scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
    <script src="{{ asset('js/user-management/index.js') }}" type="text/javascript"></script>
@endsection