{{-- <form id="staffEditUpdateForm" action="{{ route('staffs.update', $staff->id) }}" method="POST"> --}}
<form id="staffEditUpdateForm" action="{{ route('staffs.update', $staff->id) }}" method="POST">
    <input name="_method" type="hidden" value="PATCH">
    @csrf
    <div class="">
        <div class="form-group">
            <label class="col-from-label labelstyle" for="name">{{translate('Name')}}</label>
            <div class="">
                <input type="text" placeholder="{{translate('Name')}}" name="name" value="{{ $staff->user->name ?? '' }}" class="form-control" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-from-label labelstyle" for="email">{{translate('Enter Email')}}</label>
            <div class="">
                <input type="email" placeholder="{{translate('Email')}}" name="email" value="{{ $staff->user->email ?? '' }}" class="form-control" readonly>
            </div>
        </div>

        <div class="form-group">
            <label class="col-from-label labelstyle" for="mobile">{{translate('Phone')}}</label>
            <div class="">
                <input type="text" placeholder="{{translate('Phone')}}" value="{{ $staff->user->phone ?? '' }}" name="phone" id="edit_phone_code" class="form-control" required>
                <span class="invalid-feedback showphoneerror" role="alert">
                    <strong>Phone Number Not Valid.</strong>
                </span>
            </div>
        </div>

        <input type="text" name="country_code" id="country_code_edit" value="{{ $staff->user->phone_code ?? '' }}" style="display:none;">
        <input type="text" name="country_name" id="country_name_edit" value="{{ $staff->user->country ?? '' }}" style="display:none;">

        <div class="form-group">
            <label class="col-from-label labelstyle" for="password">{{translate('Set Password')}}</label>
            <div class="position-relative">
                <input type="password" placeholder="{{translate('Password')}}" name="password" id="edit_password" value="" class="form-control">
                <span class="invalid-feedback passValueerror" role="alert">
                    <strong>Password should be 6-15 in length with 1 upercase , 1 lowercase and 1 special character.</strong>
                </span>
                <div class="position-absolute" id="editTogglePassword" style="right:10px;top:25%">
                    <i class="icons icon-hide" data-toggle="tooltip" data-placement="top" title="" data-original-title="Hide Password" style="font-size: 22px;"></i>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-from-label labelstyle" for="name">{{translate('Role')}}</label>
            <div class="">
                <select name="role_id" required class="form-control aiz-selectpicker">
                    @foreach($roles as $role)
                        <option value="{{ $role->id ?? '' }}" @php if($staff->role_id == $role->id) echo "selected"; @endphp >{{$role->name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
</form>

<script type="text/javascript">
// Function to toggle password visibility
    $(document).ready(function () {
        $('#editTogglePassword').click(function () {
            const passwordField = $('#edit_password');
            const type = passwordField.attr('type') === 'password' ? 'text' : 'password';
            passwordField.attr('type', type);
            $(this).find('i.icons').toggleClass('icon-show icon-hide');
            const icon = $(this).find('i.icons');
            icon.attr('data-original-title', icon.hasClass('icon-hide') ? 'Show Password' : 'Hide Password');
        });


        var input = document.querySelector("#edit_phone_code");
        var iti = window.intlTelInput(input, {
            initialCountry: "{{ strtolower($staff->user->country ?? 'in') }}",
            separateDialCode: true,
            validationNumberType: 'MOBILE',
            nationalMode: true,
            strictMode: false,
            showSelectedDialCode: false,
            showFlags: true,
        });

        function updateCountryStaffData() {
            var countryData = iti.getSelectedCountryData();
            document.getElementById('country_code_edit').value = countryData.dialCode;
            document.getElementById('country_name_edit').value = countryData.iso2;
        }

        input.addEventListener('countrychange', function() {
            updateCountryStaffData();
        });

        $(input).on("countrychange", function() {
            var countryData = iti.getSelectedCountryData();
            $(document).find('#country_code_edit').val(countryData.dialCode);
            $(document).find('#country_name_edit').val(countryData.iso2);
        });

        updateCountryStaffData();

    });

</script>