@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">Edit User</h2>
                </div>
                <form class="validate-form p-5" id="user_update" action="javascript:;">
                    @csrf
                    @method('PUT')
                    <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" value="{{ $user->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 first name">
                        <div id="error-first_name" class="form__input-error text-danger mt-2"></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" value="{{ $user->last_name }}" class="form-control"
                            placeholder="Enter your last name" aria-describedby="input-form-1" id="last_name"
                            required data-pristine-required-message="Please enter your last name"
                            name="last_name">

                        <div id="error-last_name" class="form__input-error text-danger mt-2"></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="text" value={{ $user->email }} class="form-control" name="email"
                            placeholder="Enter your mail" aria-describedby="input-form-1"
                            required data-pristine-required-message="Please enter your email">
                        <div id="error-email" class="form__input-error text-danger mt-2"></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" value="{{ $user->phone }}"
                            placeholder="Enter your phone no." name="phone" aria-describedby="input-form-2">
                        <div id="error-phone" class="form__input-error text-danger mt-2"></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">Status</label>
                        <select id="status" name="status" data-search="true" class="tom-select w-full">
                            <option value="1" {{ $user->status == 1 ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ $user->status == 0 ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </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">
                                            @if (!empty(Helper::LMFThums($user->photo)))
                                                <div class="w-24 h-24 relative image-fit mb-5 mr-5 cursor-pointer zoom-in">
                                                    <img class="rounded-md"
                                                        src="{{ Helper::LMFThums($user->photo) ?? config('constant.default_image') }}">
                                                    <div title="Remove this image?"
                                                        class="tooltip w-5 h-5 flex items-center justify-center absolute rounded-full text-white bg-danger right-0 top-0 -mr-2 -mt-2">
                                                        <i data-lucide="x" class="w-4 h-4"
                                                            onclick="deleteImage('lfm')"></i>
                                                    </div>
                                                </div>
                                            @endif
                                        </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" value="{{ $user->photo }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="submit" id="btn-submit" class="btn btn-primary w-24 mr-1 mb-2">Update</button>
                    <a href="{{ route('users.index') }}"
                        class="btn btn-outline-secondary w-24 inline-block mr-1 mb-2">Back</a>
                    <div class="mt-4">
                        <div class="table-responsive border rounded mt-1">
                            <h6 class="font-medium text-base">
                                <span>Permissions</span>
                            </h6>
                            <table class="table table-striped table-borderless">
                                <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 }}"
                                                        @checked($user->can($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>
                    </div>
                </form>
            </div>
            <!-- END: Form Layout -->
        </div>
    </div>
@endsection

@section('script')
<script src="{{ asset(mix('js/backend/pages/file-manager/others-file-manager.js')) }}"></script>
<script src="{{ asset(mix('js/backend/pages/users/edit.js')) }}"></script>
    <script>
        const path = '{{ asset(config('constant.upload_paths.user_photo')) }}'
        const update_user_route = '{{ route('users.update', $user->id) }}'
        others_lfm('lfm', 'image')
    </script>
@endsection