@extends('adminlte::page')

@section('title', 'Edit User')

@section('content')

@push('css')
    <style>
        .iti{
            display: block !important;
        }
        .error {
            color: red;
            font-weight: 400 !important;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('vendor/datepicker/datepicker.min.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/css/intlTelInput.css" integrity="sha512-gxWow8Mo6q6pLa1XH/CcH8JyiSDEtiwJV78E+D+QP0EVasFs8wKXq16G8CLD4CJ2SnonHr4Lm/yY2fSI2+cbmw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endpush
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Edit User</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active">Edit User</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="col-md-12">
        <!-- jquery validation -->
        <div class="card card-primary">
          <div class="card-header">
            <h3 class="card-title">Edit User</small></h3>
          </div>
          <!-- /.card-header -->
          <!-- form start -->
          <form method="POST" id="edit_form" action="{{ route('admin.users.update', $user->username) }}">
            @csrf
            @method('PUT')
            <div class="card-body">
                <div class="form-group">
                    <label for="first-name">First Name</label>
                    <input type="text" name="first_name" value="{{ old('first_name') ?: $user->first_name }}" class="form-control @error('first_name') is-invalid @enderror" id="first-name" placeholder="Enter First Name" >
                    @error('first_name')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="last-name">Last Name</label>
                    <input type="text" name="last_name" value="{{ old('last_name') ?: $user->last_name }}" class="form-control @error('last_name') is-invalid @enderror" id="last-name" placeholder="Enter Last Name" >
                    @error('last_name')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="email-address">Email address</label>
                    <input type="email" name="email" value="{{ old('email') ?: $user->email }}" class="form-control @error('email') is-invalid @enderror" id="email-address" placeholder="Enter email" >
                    @error('email')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="phone_no">Phone No</label>
                    <input id="phone_no" class="form-control" type="text" name="phone_no" value="{{ old('phone_no') ?: $user->phone_no_without_country_code }}" required maxlength="10" oninput="javascript: this.value = this.value.replace(/[^0-9]/g, ''); if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" autocomplete="phone_no" placeholder="{{ __('Phone No') }}" >
                    <input type="hidden" name="country_code" value="{{ old('country_code') ?: $user->country_code }}">
                    @error('phone_no')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="birth_date">Birth Date</label>
                    <input id="birth_date" class="form-control datepicker" type="text" name="birth_date" value="{{ old('birth_date') ?: $user->birth_date }}" required placeholder="{{ __('Birth Date') }}" >
                    @error('birth_date')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="region_id">Region</label>
                    <select name="region_id" id="" class="form-control" @error('region_id') is-invalid @enderror>
                        @foreach($regions as $region)
                            @if($region->id != 1)
                                <option value="{{ $region->id }}" {{ old('region_id') ? (old('region_id') == $region->id ? 'selected' : '') : ($user->region_id == $region->id ? 'selected' : '') }}>{{ $region->name }}</option>
                            @endif
                        @endforeach
                    </select>
                    @error('region_id')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                @php
                $userRoleName = $user->getRoleNames();
                @endphp
                <div class="form-group ">
                    <label for="user-type">User Type</label>
                        <select name="role" id="" class="form-control" @error('role') is-invalid @enderror>
                            <option value="">select role</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->name }}" {{ $userRoleName[0] == $role->name ? 'selected' : '' }}>{{ $role->name }}</option>
                            @endforeach
                        </select>
                    @error('role')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <input type="hidden" name="type" value="2">
                <div class="form-group mb-0">
                    <label for="user-type">Gender</label>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="custom-control custom-radio d-inline">
                                <input class="custom-control-input" type="radio" id="male" name="gender" value="0"  {{ (old('gender') == 0 ? 'checked' : $user->gender == 0) ? 'checked' : '' }}>
                                <label for="male" class="custom-control-label">M</label>
                            </div>
                            <div class="custom-control custom-radio d-inline ml-2">
                                <input class="custom-control-input" type="radio" id="f-male" name="gender" value="1" {{ (old('gender') == 1 ? 'checked' : $user->gender == 1) ? 'checked' : '' }}>
                                <label for="f-male" class="custom-control-label">F</label>
                            </div>
                            <div class="custom-control custom-radio d-inline ml-2">
                                <input class="custom-control-input" type="radio" id="other-male" name="gender" value="2" {{ (old('gender') == 2 ? 'checked' : $user->gender == 2) ? 'checked' : ''  }}>
                                <label for="other-male" class="custom-control-label">Other</label>
                            </div>
                        </div>
                    </div>
                    @error('type')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                {{-- <div class="form-group mb-0">
                    <label for="user-type">User Type</label>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="custom-control custom-radio d-inline">
                                <input class="custom-control-input" type="radio" id="superadmin" name="type" value="4" {{ ((old('type') == 4) || ($user->type == 4)) ? 'checked' : '' }}>
                                <label for="superadmin" class="custom-control-label">Super Admin</label>
                            </div>
                            <div class="custom-control custom-radio d-inline ml-2">
                                <input class="custom-control-input" type="radio" id="admin" name="type" value="3" {{ ((old('type') == 3) || ($user->type == 3)) ? 'checked' : '' }}>
                                <label for="admin" class="custom-control-label">Admin</label>
                            </div>
                            <div class="custom-control custom-radio d-inline ml-2">
                                <input class="custom-control-input" type="radio" id="manager" name="type" value="2" {{ ((old('type') == 2) || ($user->type == 2)) ? 'checked' : '' }}>
                                <label for="manager" class="custom-control-label">Manager</label>
                            </div>
                            <div class="custom-control custom-radio d-inline ml-2">
                                <input class="custom-control-input" type="radio" id="vendor" name="type" value="1" {{ ((old('type') == 1) || ($user->type == 1)) ? 'checked' : '' }}>
                                <label for="vendor" class="custom-control-label">Vendor</label>
                            </div>
                            <div class="custom-control custom-radio d-inline ml-2">
                                <input class="custom-control-input" type="radio" id="user" name="type" value="0" {{ ((old('type') === 0) || ($user->type === 0)) ? 'checked' : '' }}>
                                <label for="user" class="custom-control-label">User</label>
                            </div>
                        </div>
                    </div>
                    @error('type')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div> --}}

            </div>
            <!-- /.card-body -->
            <div class="card-footer">
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </form>
        </div>
        <!-- /.card -->
        </div>
</section>
@push('js')
    <script src="{{ asset('vendor/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('vendor/jquery-validation/additional-methods.min.js') }}"></script>
    <script src="{{ asset('vendor/moment/moment.min.js') }}"></script>
    <script src="{{ asset('vendor/datepicker/datepicker.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/intlTelInput.min.js" integrity="sha512-L3moecKIMM1UtlzYZdiGlge2+bugLObEFLOFscaltlJ82y0my6mTUugiz6fQiSc5MaS7Ce0idFJzabEAl43XHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/utils.min.js" integrity="sha512-LFWtoG1tvcDc6wZLVmditfb3DDPT+qd1NN/KJPQFgo//p5jvYiwcJsm4YjxDvao/JfT1xOzFJqzXOZkhLPpUvQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@endpush
@section('js')
<script>

   $(document).ready(function() {


        var input = document.querySelector("#phone_no");
        window.iti = window.intlTelInput(input, {
            formatOnDisplay : false,
            separateDialCode: true,
        });

        @if(old('phone_no'))
            iti.setNumber("+{{old('country_code')}}{{old('phone_no')}}");
        @else
            iti.setNumber("{{ $user->phone_no }}");
        @endif

        $('.datepicker').datepicker({
            format: "yyyy-mm-dd",
            startDate: moment().subtract(80, 'years').format('y-M-D'),
            endDate: moment().subtract(18, 'years').format('y-M-D'),
            autoclose: true
        })

        $.validator.addMethod("checklower", function(value) {
            return /[a-z]/.test(value);
        });

        $.validator.addMethod("checkupper", function(value) {
            return /[A-Z]/.test(value);
        });

        $.validator.addMethod("checkdigit", function(value) {
            return /[0-9]/.test(value);
        });

        $.validator.addMethod("checkphone", function(value) {
            $("input[name='country_code']").val(window.iti.getSelectedCountryData().dialCode);
            return window.iti.isValidNumber();
        }, "Please Enter Proper Phone No");


        jQuery.validator.addMethod("lettersonly", function(value, element) {
                    return this.optional(element) || /^[a-z\s]+$/i.test(value);
                }, "Only alphabetical characters");

        $("#edit_form").validate({
            rules : {
                errorClass : 'text-danger',
                errorElement: "span",
                onkeyup: true,
                password: {
                    minlength: 8,
                    required: true,
                    //pwcheck: true,
                    checklower: true,
                    checkupper: true,
                    checkdigit: true
                },
                phone_no:{
                    checkphone:true
                },
                first_name : {
                    lettersonly : true
                },
                last_name : {
                    lettersonly : true
                },
            },
            messages: {
                password: {
                    checklower: "Need at least 1 lowercase alphabet",
                    checkupper: "Need at least 1 uppercase alphabet",
                    checkdigit: "Need at least 1 digit"
                },
                password_confirmation: {
                    required: "Confirm password needs to be match"
                }
            },
            errorPlacement: function(error, element) {
                if($(element).attr("id") == 'phone_no') {
                    return $(error).appendTo( $("#phone_no").parents(".form-group"));
                }
                error.appendTo( element.parent() );
            },
        });
    });
</script>
@endsection
@endsection