@extends('layout.index')

@section('users', 'active')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/users.css') }}">
@endsection

@section('contents')
    <div class="content-wrapper mb-3">
        <div class="container-fluid p-2">
            <div class="content-header">
                <div class="">
                    <div>
                        <h4 class="">Users</h4>
                        <p class="text-muted font-weight-light">users maintenance. Manage and perform various transactions
                            related to
                            users here.</p>
                    </div>
                </div>

                <button class="btn btn-primary mr-2 mb-3" id="create-account-btn">Create Account</button>
                
                <hr>

                <div class="mt-2">
                    <table id="datatable" class="table table-hover border table-responsive-sm mt-3 bg-white"
                        style="width: 100%; height: 100%;">
                        <thead>
                            <tr class="bg-white font-weight-light">
                                {{-- <td class="text-muted">ID</td> --}}
                                <td class="text-muted">Profile</td>
                                <td class="text-muted">First Name</td>
                                <td class="text-muted">Last name</td>
                                <td class="text-muted">Email</td>
                                <td class="text-muted">Status</td>
                                <td class="text-muted">Action</td>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="users-form-modal" data-backdrop="static" data-keyboard="false" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body font-weight-light p-3">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-4 col-sm-12 col-xs-12 d-flex justify-content-center">
                                <img class="text-center mb-3" id="image" name="image" src="" alt="noimage"
                                    height="200" width="200">
                            </div>

                            <div class="col-md-8 col-sm-12 col-xs-12">
                                <form id="users-form">
                                    @csrf
                                    <div class="form-row">
                                        <div class="form-group col-md-12" hidden>
                                            <h6 for="">Id</h6>
                                            <input type="text" class="form-control" id="id" name="id">
                                        </div>
                                        <div class="form-group col-md-12">
                                            <h6 for="">First Name</h6>
                                            <input type="text" class="form-control" id="firstname" name="firstname"
                                                required>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <h6 for="">Last Name</h6>
                                            <input type="text" class="form-control" id="lastname" name="lastname"
                                                required>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <h6 for="">Email</h6>
                                            <input type="text" class="form-control" id="email" name="email"
                                                required>
                                            <span class="invalid-feedback" id="email-invalid">
                                                Please enter a valid password.
                                            </span>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <h6 for="">Status</h6>
                                            <select class="form-control" id="status" name="status" required>
                                                <option value="1">Active</option>
                                                <option value="0">Locked</option>
                                            </select>
                                        </div>

                                        <div class="form-group col-md-12">
                                            <h6 for="">Image</h6>
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="image-file"
                                                    name="image-file" accept="image/*">
                                                <label class="custom-file-label" for="image-file">Select
                                                    Image</label>
                                                <span class="invalid-feedback" id="image-file-invalid">
                                                    Please enter a valid password.
                                                </span>
                                            </div>
                                        </div>

                                        <div class="form-group col-md-12">
                                            <h6 for="">Password</h6>
                                            <input type="text" class="form-control" id="password" name="password">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" form="users-form" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
@endsection

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