@extends('layouts.app')
@section('title', 'Create App User')
@php
    use Modules\Warehouses\Models\AppUser;
@endphp
@section('content')
    <div class="fixed-action-bar">
        <div class="fw-semibold fixed-nav-title">Create App User</div>
        <div>
            <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center"
                data-toggle="tooltip" title="Add"></i>
            <i id="submitForm"
                class="fa-regular fa-save fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Save"></i>
            <i class="fa-regular fa-edit fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Edit"></i>
            <i class="fa-regular fa-trash-can fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Delete"></i>
            <a href="{{ route('app-users.index') }}">
                <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center ms-1"
                    data-toggle="tooltip" title="Close"></i>
            </a>
        </div>
    </div>
    {{-- @if ($errors->any())
    @foreach ($errors->all() as $error)
    <div>{{$error}}</div>
    @endforeach
    @endif --}}
    <div class="row mt-3 mb-5">
        <div class="col-md-6">
            <div class="card">
                <h5 class="card-title">Create App User</h5>
                <div class="card-body">
                    <form id="CreateAppUserForm" action="{{ route('app-users.store') }}" method="POST">
                        @csrf

                        <div class="form-group">
                            <label for="name">Name&nbsp;<span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror"
                                oninput="validateText(this)" id="name" name="name" placeholder="Enter your Name"
                                maxlength="50" value="{{ old('name') }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="email">Email&nbsp;<span class="text-danger">*</span></label>
                            <input type="email" id="email" name="email"
                                class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}"
                                oninput="validateEmail(this)" required autocomplete="email" maxlength="50"
                                placeholder="Enter your email address">
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="contact_number">Contact Number&nbsp;<span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('contact_number') is-invalid @enderror"
                                id="contact_number" name="contact_number" value="{{ old('contact_number') }}" required
                                placeholder="Enter your Contact Number" maxlength="10"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
                            @error('contact_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="hierarchy_id">Hierarchy Selection</label>
                            <select class="form-control select2 @error('hierarchy_id') is-invalid @enderror"
                                id="hierarchy_id" name="hierarchy_id">
                                <option value="">Select Hierarchy Node...</option>
                                @foreach($hierarchies as $hierarchy)
                                    <option value="{{ $hierarchy->id }}" {{ old('hierarchy_id') == $hierarchy->id ? 'selected' : '' }}>{{ $hierarchy->name }} (Level {{ $hierarchy->level }})</option>
                                @endforeach
                            </select>
                            @error('hierarchy_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="reported_to_id">Reported to</label>
                            <select class="form-control select2 @error('reported_to_id') is-invalid @enderror"
                                id="reported_to_id" name="reported_to_id">
                                <option value="">Search User...</option>
                                @if(isset($enabledUsers) && count($enabledUsers) > 0)
                                    @foreach($enabledUsers as $user)
                                        <option value="{{ $user->id }}" {{ old('reported_to_id') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            @error('reported_to_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="assigned_warehouse_id">Assigned Warehouse</label>
                            <select class="form-control @error('assigned_warehouse_id') is-invalid @enderror"
                                id="assigned_warehouse_id" name="assigned_warehouse_id">
                                <option value="">Select Warehouse</option>
                                @foreach($warehouses as $warehouse)
                                    <option value="{{ $warehouse->id }}" {{ old('assigned_warehouse_id') == $warehouse->id ? 'selected' : '' }}>{{ $warehouse->name }}</option>
                                @endforeach
                            </select>
                            @error('assigned_warehouse_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="password">Password&nbsp;<span class="text-danger">*</span></label>
                            <div class="input-group mb-3">
                                <input type="password" class="form-control @error('password') is-invalid @enderror"
                                    id="password" name="password" required maxlength="50" value="{{ old('password') }}">
                                <div class="input-group-append">
                                    <span class="input-group-text" id="togglePassword"><i class="fas fa-eye"
                                            id="eyeIcon"></i></span>
                                </div>
                                @error('password')
                                    <div class="invalid-feedback" style="display: block;">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Permissions</label>
                            <div class="form-check">
                                @foreach(AppUser::PERMISSIONS as $permission)
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" name="permissions[]"
                                            value="{{ $permission }}" @if(in_array($permission, old('permissions', $appUser->permissions ?? []))) checked @endif>
                                        <label class="form-check-label">{{ $permission }}</label>
                                    </div>
                                @endforeach
                            </div>
                            @error('permissions')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="allow_system_admin_login"
                                    name="allow_system_admin_login" value="1" {{ old('allow_system_admin_login') ? 'checked' : '' }}>
                                <label class="form-check-label" for="allow_system_admin_login">Allow System Admin
                                    Login</label>
                            </div>
                        </div>

                        <div class="form-group" id="role_selection_section"
                            style="{{ old('allow_system_admin_login') ? '' : 'display: none;' }}">
                            <label for="role_id">Role Selection&nbsp;<span class="text-danger">*</span></label>
                            <select class="form-control @error('role_id') is-invalid @enderror" id="role_id" name="role_id">
                                <option value="">Select Role</option>
                                @foreach($roles as $role)
                                    <option value="{{ $role->id }}" {{ old('role_id') == $role->id ? 'selected' : '' }}>
                                        {{ $role->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('role_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="status">Status&nbsp;<span class="text-danger">*</span></label>
                            <select class="form-control @error('status') is-invalid @enderror" id="status" name="status"
                                required>
                                <option value="enabled" {{ old('status') == 'enabled' ? 'selected' : '' }}>Enabled</option>
                                <option value="disabled" {{ old('status') == 'disabled' ? 'selected' : '' }}>Disabled</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .select2-container .select2-selection--single {
            height: 38px !important;
            padding: 5px 0;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }
    </style>
@endpush

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        // Initialize Select2
        $(document).ready(function () {
            $('.select2').select2({
                placeholder: 'Search user...',
                allowClear: true,
                width: '100%',
                dropdownParent: $('#CreateAppUserForm')
            });

            // Toggle Role Selection Section
            $('#allow_system_admin_login').on('change', function () {
                if ($(this).is(':checked')) {
                    $('#role_selection_section').show();
                    $('#role_id').prop('required', true);
                } else {
                    $('#role_selection_section').hide();
                    $('#role_id').prop('required', false);
                    $('#role_id').val('');
                }
            });
        });

        document.getElementById('submitForm').addEventListener('click', function () {
            document.getElementById('CreateAppUserForm').submit();
        });

        document.getElementById('togglePassword').addEventListener('click', function () {
            const passwordInput = document.getElementById('password');
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
        });

        function validateText(input) {
            input.value = input.value.replace(/[^a-zA-Z\s]/g, '');
        }

        function validateEmail(input) {
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
            if (!emailPattern.test(input.value)) {
                input.setCustomValidity('Please enter a valid email address.');
            } else {
                input.setCustomValidity('');
            }
        }
    </script>
@endpush