@extends('layouts.app')
@section('title', 'Edit App User')

@section('content')
    <div class="fixed-action-bar">
        <div class="fw-semibold fixed-nav-title">Edit 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>

    <div class="row mt-3 mb-5">
        <div class="col-md-6">
            <div class="card">
                <h5 class="card-title">Edit App User</h5>
                <div class="card-body">
                    <form id="EditAppUserForm" action="{{ route('app-users.update', $appUser->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <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" value="{{ old('name', $appUser->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', $appUser->email) }}" oninput="validateEmail(this)" required autocomplete="email" 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', $appUser->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="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 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', $appUser->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', $appUser->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="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>

                        <div class="form-group">
                            <label for="permissions">Permissions</label>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="permission_1" name="permissions[]" value="1-2-1 Survey" {{ in_array('1-2-1 Survey', old('permissions', $appUser->permissions ?? [])) ? 'checked' : '' }}>
                                <label class="form-check-label" for="permission_1">1-2-1 Survey</label>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="permission_2" name="permissions[]" value="Marketing Material Distribution" {{ in_array('Marketing Material Distribution', old('permissions', $appUser->permissions ?? [])) ? 'checked' : '' }}>
                                <label class="form-check-label" for="permission_2">Marketing Material Distribution</label>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="permission_3" name="permissions[]" value="Observation Survey" {{ in_array('Observation Survey', old('permissions', $appUser->permissions ?? [])) ? 'checked' : '' }}>
                                <label class="form-check-label" for="permission_3">Observation Survey</label>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="permission_4" name="permissions[]" value="Corporate Sales" {{ in_array('Corporate Sales', old('permissions', $appUser->permissions ?? [])) ? 'checked' : '' }}>
                                <label class="form-check-label" for="permission_4">Corporate Sales</label>
                            </div>
                            @error('permissions')
                            <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>
        document.getElementById('submitForm').addEventListener('click', function() {
            document.getElementById('EditAppUserForm').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('');
            }
        }

        // Initialize Select2
        $(document).ready(function() {
            $('.select2').select2({
                placeholder: 'Search user...',
                allowClear: true,
                width: '100%',
                dropdownParent: $('#EditAppUserForm')
            });
        });
    </script>
@endpush