@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="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">
                            <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')
            });
        });

        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