@extends('layouts.main')

@include('layouts.form-scripts')

@section('content')
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <x-buttons.back-small name="user" :route="route('user.index')" />
                    {{ $title }}
                </div>
                <form id="form-user" action="{{ $formAction }}" method="POST">
                    @csrf
                    @if(!$isFormCreate)
                        @method('PUT')
                    @endif
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-sm-6 col-md-4">
                                <x-forms.input-text :label="__('validation.attributes.name')" name="name" :value="$user->name ?? ''" required />
                            </div>
                            <div class="col-12 col-sm-6 col-md-4">
                                <x-forms.input-select :label="__('general.role')" name="role_id" :options="$roleOptions" :selected="$user->role_id ?? ''" required />
                            </div>
                            <div class="col-12 col-sm-6 col-md-4">
                                <x-forms.input-switch :label="__('validation.attributes.is_active')" name="is_active" value="1" :checked="$user->is_active ?? true" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-sm-6 col-md-4">
                                <x-forms.input-text :label="__('validation.attributes.email')" name="email" :type="'email'" :value="$user->email ?? ''" required />
                            </div>
                            <div class="col-12 col-sm-6 col-md-4">
                                <x-forms.input-text :label="__('validation.attributes.login')" name="login" :value="$user->login ?? ''" required />
                            </div>
                            @if(auth()->user()->is_central)
                                <div class="col-12 col-sm-6 col-md-4">
                                    <x-forms.input-switch :label="__('validation.attributes.is_central')" name="is_central" value="1" :checked="$user->is_central ?? false" />
                                </div>
                            @endif
                        </div>
                        <hr class="mt-0" />
                        <div class="row">
                            <div class="col-12 col-sm-6">
                                <div class="mb-4">
                                    <div class="input-group">
                                        <div class="form-floating">
                                            <input class="form-control @error('password') is-invalid @enderror" id="input-password" type="text" name="password" value="{{ old('password', '') }}" placeholder="{{ __('validation.attributes.password') }}" />
                                            <label for="input-password">{{ __('validation.attributes.password') }} </label>
                                        </div>
                                        <button type="button" class="btn btn-success" id="btn-generate-password">
                                            <i class="fa fa-refresh"></i>
                                        </button>
                                    </div>
                                    @error('password')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12 col-sm-6">
                                <x-forms.input-text :label="__('validation.attributes.confirm_password')" name="confirm_password" />
                            </div>
                        </div>
                        <hr class="mt-0" />
                        <div class="row">
                             <div class="col-12 col-sm-4" id="company">
                                <x-forms.input-select :label="__('general.company')" name="company_id" :options="$companyOptions" required multiple />
                            </div>
                            <div class="col-12 col-sm-4" id="branches">
                                <x-forms.input-select :label="__('general.branch')" name="branch_id" :options="[]" required multiple />
                            </div>
                            <div class="col-12 col-sm-6 col-md-4">
                                <x-forms.input-text :label="__('validation.attributes.phone')" name="phone" :value="$user->phone ?? ''" />
                            </div>
                        </div>
                        <hr class="mt-0" />
                        <div class="row">
                            <div class="col-12 col-sm-6 col-md-4">
                                <x-forms.input-text :label="__('validation.attributes.credit_limit')" class="inputmask-numeric" name="credit_limit" :value="$user->credit_limit ?? 0" />
                            </div>
                            <div class="col-12 col-sm-6 col-md-4">
                                <x-forms.input-text :label="__('validation.attributes.overdue_limit')" class="inputmask-numeric" name="overdue_limit" :value="$user->overdue_limit ?? 0" />
                            </div>
                             <div class="col-12 col-sm-6 col-md-4">
                                 <div class="mb-4">
                                    <div class="input-group">
                                        <div class="form-floating">
                                            <input class="form-control @error('imei') is-invalid @enderror" id="input-imei" type="text" name="imei" value="{{ old('imei', $user->imei ?? null) }}" placeholder="{{ __('validation.attributes.imei') }}" readonly />
                                            <label for="input-imei">{{ __('validation.attributes.imei') }} </label>
                                        </div>
                                        <button type="button" class="btn btn-danger" id="btn-imei">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-12">
                                <div class="float-end">
                                    <x-buttons.submit-save />
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script type="module">
        function generatePassword(length = 6) {
            // Requirements
            const numberRequired = 1;
            const letterRequired = 1;

            let password = '';
            let numCount = 0;
            let letterCount = 0;

            const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

            for(let i=0; i < length; i++) {

                const randomIndex = Math.floor(Math.random() * chars.length);
                const randomChar = chars.charAt(randomIndex);

                if(randomChar >= '0' && randomChar <= '9') {
                    numCount++;
                } else if(randomChar >= 'a' && randomChar <= 'z') {
                    letterCount++;
                }

                password += randomChar;

                if(length <= 1) {
                    return password;
                }

                // Check if all requirements met AFTER the loop
                if(i >= length - 1) {
                    if(numCount < numberRequired || letterCount < letterRequired) {
                        return generatePassword(length); // Recursively call again
                    }
                }

            }

            return password;

        }

        $(document).ready(function () {
            let selectCompany = $('#select-company-id');
            let selectBranches = $('#select-branch-id');

            selectCompany.on('change', function() {
                $.ajax({
                    url: `{{route('user.list.branch')}}`,
                    method: 'GET',
                    dataType: 'json',
                    data: {
                        company: $(this).val(),
                    },
                    success: function (data) {
                        if (data.status) {
                            selectBranches.empty();
                            selectBranches.select2({
                                placeholder: "{{__('general.select')}}",
                                allowClear: true,
                                data: $.map(data.data, function (val) {
                                    return {
                                        id: val.id,
                                        text: val.name + ' - ' + val.code
                                    }
                                })
                            });
                            selectBranches.val(@json(isset($user) ? $user->branches->pluck('id'):[])).trigger("change");
                        }else{
                            createToast({
                                color: 'warning',
                                icon: 'fa fa-triangle-exclamation me-1',
                                message: `{{ __('validation.required', ['attribute' => __('module.company')]) }}`,
                            });
                        }
                    },
                    error: function (data) {
                        alert(data.responseJSON.message)
                    },
                });
            });

            selectCompany.val(@json(isset($user) ? $user->branches->pluck('company_id')->unique():[])).trigger("change");

            $('#btn-generate-password').on('click', function () {
                const generatedPassword = generatePassword();

                const inputConfirmPassword = document.getElementById('input-confirm-password');
                inputConfirmPassword.value = generatedPassword;
                inputConfirmPassword.focus();

                const inputPassword = document.getElementById('input-password');
                inputPassword.value = generatedPassword;
                inputPassword.focus();
                inputPassword.select();

                document.execCommand('copy');

                createToast({
                    color: 'success',
                    icon: 'fa fa-clipboard me-1',
                    message: '{{ __('messages.hint.copy-to-clipboard') }}'
                });
            })

            $('#btn-imei').on('click', function () {
                document.getElementById('input-imei').value = null;
            })

        })


    </script>
@endpush