@extends('../backend/layout/' . $layout)

@section('subhead')
    <title>Users</title>
@endsection

@section('subcontent')
    <div class="grid grid-cols-12 gap-6 mt-5">
        <div class="intro-y col-span-12 lg:col-span-12">
            <div class="intro-y box">
                <div
                    class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Add User</h2>
                </div>
                <form class="validate-form p-5" id="user-form" action="javascript:;">
                    @csrf
                    <div class="grid grid-cols-2 gap-4">
                        <div class="input-form mb-4">
                            <label for="crud-form-1" class="form-label ">First Name <span
                                    class="text-danger">*</span></label>
                            <input id="first_name" type="text" class="form-control w-full"
                                placeholder="Enter your first name" name="first_name" required
                                data-pristine-required-message="Please enter your name">
                            {{-- <div id="error-first_name" class="form__input-error text-danger mt-1"></div> --}}
                        </div>
                        <div class="input-form mb-4">
                            <label for="crud-form-2" class="form-label">Last Name <span class="text-danger">*</span></label>
                            <input id="last_name" type="text" class="form-control" placeholder="Enter your last name"
                                id="last_name" name="last_name" required
                                data-pristine-required-message="Please enter your last name">

                            {{-- <div id="error-last_name" class="form__input-error text-danger mt-1"></div> --}}
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="input-form mb-4">
                            <label for="crud-form-3" class="form-label">Email <span class="text-danger">*</span></label>
                            <input id="email" type="email" class="form-control" name="email"
                                placeholder="Enter your email" required
                                data-pristine-required-message="Please enter your email">
                            {{-- <div id="error-email" class="form__input-error text-danger mt-1"></div> --}}
                        </div>
                        <div class="input-form mb-4">
                            <label for="crud-form-4" class="form-label">Phone</label>
                            <input id="phone" type="number" class="form-control" placeholder="Enter your phone no."
                                name="phone" digits="10" aria-describedby="input-form-2">
                            {{-- <div id="error-phone" class="form__input-error text-danger mt-1"></div> --}}
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="input-form mb-4">
                            <label for="crud-form-4" class="form-label">Password <span class="text-danger">*</span></label>
                            <input id="password" type="password" class="form-control" placeholder="Enter your password."
                                name="password" aria-describedby="input-group-2" required
                                data-pristine-required-message="Please choose a password" data-pristine-minlength="6">
                            {{-- <div id="error-password" class="form__input-error text-danger mt-1"></div> --}}
                        </div>
                        <div class="input-form mb-4">
                            <label for="crud-form-4" class="form-label">Confirm Password<span
                                    class="text-danger">*</span></label>
                            <input type="password" id="confirm-password" class="form-control"
                                placeholder="Re-enter your password." name="confirm-password"
                                aria-describedby="input-group-2" data-pristine-equals="#password"
                                data-pristine-equals-message="Passwords don't match">
                            {{-- <div id="error-password" class="form__input-error text-danger mt-1"></div> --}}
                        </div>
                    </div>
                    <div class="input-form mb-4">
                        <label class="form-label w-full flex flex-col sm:flex-row">Profile picture</label>
                        <div class="intro-y col-span-12">
                            <div class="intro-y">
                                <div class="preview pb-5">
                                    <div class="flex">
                                        <div id="image_preview">
                                        </div>
                                        <div class="flex items-center justify-center w-24 h-24 relative image-fit mb-5 mr-5 cursor-pointer border-dashed border-2"
                                            id="lfm" data-input="photo" data-preview="image_preview">
                                            <div class="rounded-md">
                                                <i data-lucide="image"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="photo" id="photo">
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="submit" id="btn-submit" class="btn btn-primary w-24 mr-1">Submit</button>
                    <button type="reset" id="btn-clear" class="btn btn-outline-secondary w-24 mr-1">Cancel</button>
                    <div class="mt-4">
                        <h6 class="font-medium text-base">
                            <span>Permissions</span>
                        </h6>
                        <table class="table table-striped">
                            <thead class="thead-light">
                            </thead>
                            <tbody>
                                @php $i = 1; @endphp
                                <tr>
                                    @foreach ($permissions as $permission)
                                        <td>
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input"
                                                    id="{{ $permission->name }}" name="permissions[]"
                                                    value="{{ $permission->name }}" />
                                                <label class="form-check-label"
                                                    for="{{ $permission->name }}">{{ $permission->name }}</label>
                                            </div>
                                        </td>
                                        @if ($i == 4)
                                </tr>
                                <tr>
                                    @php
                                        $i = 0;
                                    @endphp
                                    @endif
                                    @php
                                        $i++;
                                    @endphp
                                    @endforeach
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
            <!-- BEGIN: Form Layout -->
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ mix('dist/backend/js/ckeditor-classic.js') }}"></script>
    <script src="{{ asset(mix('js/backend/pages/file-manager/others-file-manager.js')) }}"></script>
    <script src="{{ asset(mix('js/backend/pages/users/add.js')) }}"></script>
    <script>
        const store_user_route = '{{ route('users.store') }}';
        others_lfm('lfm', 'image')
    </script>
@endsection