@extends('layouts.app',['title'=>ucwords($title)])
@section('content')
<div class="main-content" id="result">
    
    <div class="page-content">
        <div class="container-fluid">
            @include("partials.tabs.user_profile_tab",["id"=>$id,"tab"=>"profile","prompts_count"=>$prompts_count ? $prompts_count :0 ])
            <form id="profile-form"  method="post" action="{{route('users.update', $user->id)}}" autocomplete="off" class="needs-validation">
                @csrf   
                @method('PUT')

                <div class="row mt-4">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">  
                                
                                <div class="mb-3">
                                    <label for="name" class="form-label">Name</label>
                                    
                                    <input id="projectname-input" value="{{old('name', $user->name)}}" name="name" type="text" class="form-control" placeholder="Enter name" required="">
                                    @error('name')
                                        <div class="text-danger mt-2">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email</label>
                                    <input id="email" value="{{$user->email}}" readonly name="email" type="email" class="form-control" placeholder="Enter email" required="">
                                    
                                </div>
                                <div class="mb-3">
                                    <label for="phone" class="form-label">Phone</label><br/>
                                    <input id="phone"  value="{{old('phone', $user->phone)}}" name="phone" type="text" class="form-control" placeholder="Enter phone" >
                                    <input class="form-control" type="hidden" name="phone_full" id="phone_full"  value="{{ old('phone_full') }}" >
                                    @error('phone')
                                        <div class="text-danger mt-2">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3 user-role-field">
                                    <label for="role" class="form-label">Role</label><br/>
                                    <select name="role" class="form-control">
                                        <option @if(old("agency", $user->role)=="agency") selected @endif  value="agency">Sub Admin</option>
                                    </select>
                                    @error('role')
                                        <div class="text-danger mt-2">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <!-- end card body -->
                        </div>
                        <!-- end card -->
                        
                    </div>
                    

                    <div class="col-lg-12">
                        <div class="text-end mb-4">
                            <a href="{{route('users.list')}}" class="btn btn-secondary mx-2">Cancel</a>    
                            <button type="submit" id="submitBtn" class="btn btn-primary button-text">Update User</button>
                        </div>
                    </div>
                </div>
                <!-- end row -->
            </form>
            
        </div> <!-- container-fluid -->
    </div>
</div>
@endsection
@push('topcss')
 <link href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.1/build/css/intlTelInput.css"/>
@endpush
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.1/build/js/intlTelInput.min.js"></script>
<script>
     var input = document.querySelector("#phone");
    var iti = window.intlTelInput(input, {
        separateDialCode: true,
        strictMode: true,
        countryOrder: ["us", "in", "gb"], // USA, India, UK
        loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.1/build/js/utils.js"),
    });

    // On submit, get the full international number
    $('form').on('submit', function(e) {
        //e.preventDefault();
        let phoneNumber = iti.getNumber(); // e.g., +919812345678
       
        $('#phone_full').val(phoneNumber); // overwrite input value with full number

        //document.getElementById('submitBtn').disabled = true;
    });
    
</script>
<script>
    $(document).ready(function() {
        $(".toggle-password").click(function() {
            let input = $(this).closest(".pass_field").find("input");
            let icon =  $(this).closest(".pass_field").find("i");

            if (input.attr("type") === "password") {
                input.attr("type", "text");
                icon.removeClass("mdi-eye-outline").addClass("mdi-eye-off-outline");
            } else {
                input.attr("type", "password");
                
                icon.removeClass("mdi-eye-off-outline").addClass("mdi-eye-outline");
            }
        });
    });

    // On submit, get the full international number
    /*$('form').on('submit', function(e) {
        let phoneNumber = iti.getNumber(); // e.g., +919812345678
        $('#phone').val(phoneNumber); // overwrite input value with full number
        document.getElementById('submitBtn').disabled = true;
    });*/
</script>
<script src="{{ asset('assets/validate/jquery.validate.min.js')}}"></script>
<script type="text/javascript">
    $(function() {
		
        jQuery.validator.addMethod("fullname", function(value, element) {
            return this.optional(element) || /^[A-Za-z]+(?:\s[A-Za-z]+)?$/.test(value);
        }, "Please enter a valid name.");

		$("#profile-form").validate({
            submitHandler: function(form) {
                // Disable button to prevent duplicate submissions
                $("#submitBtn").prop("disabled", true);
                
                form.submit(); // submit the form after disabling
            },
            rules: {
                name: {
                    required: true,
                    fullname: true,
                    minlength: 3
                }

            },
            messages: {
                name: {
                    required: "This field is required.",
                    minlength: "Full name must be at least 3 characters."
                }
            }
        })
	});
</script>
@endpush