@extends('layouts.app')

@section('content')
    <div class="page-wrapper">
        <!-- Page-header start -->
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">

                    <div class="page-header-title">
                        <div class="d-inline">
                            <h4>Update user</h4>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- Page-header end -->

        <!-- Page-body start -->
        <div class="page-body">
            <div class="row">
                <div class="col-sm-12">
                    <!-- Zero config.table start -->
                    <div class="card bg-light">
                        <div class="card-block">
                            <div class="mT-30">
                                @include('common.error')
                                {{-- @php $user = \Auth::user(); @endphp --}}

                                <form class="" method="POST" id="needs-validation" enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="id" value="{{ $user->id }}">

                                    <div class="row mt-4">
                                        <div class="col-md-4 px-4">
                                            <div class="row form-group">
                                                <label class="control-label col-md-3" for="UserName">User-ID<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <input autocomplete="off"
                                                        class="form-control clsUserName txt_OnlyAlpha text-box single-line"
                                                        data-val="true" data-val-required="The UserName field is required."
                                                        id="UserName" maxlength="30" name="UserName" readonly
                                                        type="text" value="{{ $user->username }}">

                                                </div>
                                            </div>

                                            <div class="row form-group">
                                                <label class="control-label col-md-3" for="Name">User Name<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <input autocomplete="off"
                                                        class="form-control txt_OnlyAlphaSpace text-box single-line"
                                                        data-val="true" data-val-required="The Name field is required."
                                                        id="Name" maxlength="30" name="Name" type="text"
                                                        value="{{ $user->name }}">
                                                </div>
                                            </div>

                                            <div class="row form-group">
                                                <label class="control-label col-md-3" for="Password">Password<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <input autocomplete="off"
                                                        class="form-control Set_OnlyAlpha text-box single-line" id="password"
                                                        maxlength="30" name="password" 
                                                        type="password" value="{{ old('password') }}">
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <label class="control-label col-md-3 pr-0" for="Password">Confirm Password<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <input class="form-control Set_OnlyAlpha" id="password_confirmation"
                                                        name="password_confirmation" type="password" autocomplete="off"
                                                        value="{{ old('password_confirmation') }}">
                                                </div>
                                            </div>

                                            <div class="row form-group">
                                                <label class="control-label col-md-3" for="EmailID">Email-ID<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <input autocomplete="off"
                                                        class="form-control txt_IsEmailIDs text-box single-line"
                                                        data-val="true" data-val-required="The EmailID field is required."
                                                        id="EmailID" maxlength="30" name="EmailID" type="text"
                                                        value="{{ $user->email }}">
                                                </div>
                                            </div>

                                            <div class="row form-group">
                                                <label class="control-label col-md-3" for="MobileNo">MobileNo.<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <input autocomplete="off"
                                                        class="form-control txt_OnlyNumeric txt_Mobilescls text-box single-line"
                                                        data-val="true" data-val-required="The MobileNo field is required."
                                                        id="MobileNo" maxlength="11" name="MobileNo" type="text"
                                                        value="{{ $user->MobileNo }}">
                                                </div>
                                            </div>

                                            <div class="row form-group">
                                                <label class="control-label col-md-3" for="RoleID">Role<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <select class="form-control" data-val="true"
                                                        data-val-number="The field RoleID must be a number."
                                                        data-val-required="The RoleID field is required." id="RoleID"
                                                        name="RoleID">
                                                        <option value="">--Select--</option>
                                                        @foreach ($roles as $role)
                                                            <option value="{{ $role->RoleID }}"
                                                                @if ($role->RoleID == $user->RoleID) selected="selected" @endif>
                                                                {{ $role->RoleName }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>


                                        </div>

                                        @php 
                                        $StateCode = '';                                 
                                        if(old('StateCode') !== null){
                                            $StateCode = old('StateCode'); 
                                        } else if(isset($user->StateCode)) { 
                                            $StateCode = $user->StateCode ; 
                                        }
                                        @endphp 

                                        <div class="col-md-4  px-4">

                                            <div class="row form-group state_id_div">
                                                <label class="control-label col-md-3" for="StateCode">State<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <select class="form-control clsSt" data-val="true"
                                                        data-val-required="The StateCode field is required."
                                                        id="StateCode" name="StateCode">
                                                        <option value="">--Select--</option>
                                                        @foreach ($t_Master_State as $state)
                                                        <option value="{{ $state->StateCode }}"
                                                            {{ $StateCode == $state->StateCode ? 'selected' : '' }}>
                                                            {{ $state->StateName }}</option>
                                                    @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="row form-group district_id_div">
                                                <label class="control-label col-md-3" for="DistrictCode">District<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <select class="form-control clsDist" data-val="true"
                                                        data-val-required="The DistrictCode field is required."
                                                        id="DistrictCode" name="DistrictCode">
                                                        <option value="">--Select--</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row form-group border">
                                                <div class="col-md-12" style="height:30px; line-height:30px; color:red;">
                                                    Password Instructions-
                                                </div>
                                                <p>
                                                </p>
                                                <ul>
                                                    <li>
                                                        At least one Upper Case character
                                                    </li>
                                                    <li>
                                                        At least one Lower Case character
                                                    </li>
                                                    <li>
                                                        At least one Numeric character
                                                    </li>
                                                    <li>
                                                        Password must be between 8 to 20 digit.
                                                    </li>
                                                </ul>
                                                <p></p>
                                            </div>
                                            <div class="d-none">

                                            </div>
                                        </div>
                                        <div class="col-md-4 px-4">

                                            <div class="row form-group border pt-3">
                                                <div class="col-md-5 col-sm-12  pb-3">
                                                    <div id="divImgPreview">
                                                        <img src="{{ asset('storage/profile_images/' . $user->profile_image) }}"
                                                            style="height:135px;width:130px;" id="ImgPreview1">
                                                            {{-- <img src="{{ asset('storage/profile_images/' . $user->profile_image) }}" /> --}}
                                                    </div>
                                                </div>

                                                <div class="col-md-7 col-sm-12 pb-3">
                                                    <div class="custom-file">                                                        
                                                        <label class="custom-file-label" for="customFile">Choose
                                                            file</label>
                                                        <input type="file" name="profile_image" id="image-input" class="form-control" accept="image/png, image/gif, image/jpeg">
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- <div class="row form-group">
                                                <div class="col-md-12">
                                                    <label>
                                                        <input checked="checked" class="" htmlattributes="{ }"
                                                            id="IsActive" name="IsActive" type="checkbox"
                                                            value="true" autocomplete="off"><input name="IsActive"
                                                            type="hidden" value="false" autocomplete="off">
                                                        <span style="position: relative;bottom: 5px;">
                                                            IsActive
                                                        </span>
                                                    </label>
                                                </div>
                                            </div> --}}

                                            <!-- <div class="row form-group">
                                    <div class="col-md-offset-2 col-md-9">
                                            <input type="submit" value="Save" class="btn btn-success" autocomplete="off">
                                    </div>
                                </div> -->
                                        </div>
                                    </div>

                                    <div class="border-top pt-3">
                                        <button class="btn  btn-primary  mr-2" type="submit">Save</button>
                                        <a href="{{ url('Account/ManageUsers') }}"
                                            class="btn  btn-outline-primary">Back</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page-body end -->
    </div>

    
    <style>
        #ImgPreview {
            display: none;
            width: 300px;
            height: auto;
        }
    </style>

    <script>
        $(document).ready(function() {

            $('#image-input').change(function() {
                let reader = new FileReader();
                reader.onload = function(e) {
                    $('#ImgPreview').attr('src', e.target.result).show();
                }
                reader.readAsDataURL(this.files[0]);
            });

            $('.state_id_div').hide();
            $('.state_id_multiple_div').hide();
            $('.district_id_div').hide();    


            $('#RoleID').on('change', function(e) {
                var role_id = $(this).val();
                

                // $("#StateCode").val('');
                // $("#DistrictCode").val('');

                if(role_id == 99 || role_id == 40 || role_id == 75 || role_id == 1){
                    $('.state_id_div').hide();
                    $('.state_id_multiple_div').hide();
                    $('.district_id_div').hide();                   

                    $("#StateCode").prop('required', false);
                    $("#StateCodeMultiple").removeAttr('required');
                    $("#DistrictCode").prop('required', false);
                }
                else if (role_id == 3) { // regional user
                    $('.state_id_div').hide();
                    $('.state_id_multiple_div').show();
                    $('.district_id_div').hide();

                    $("#StateCode").prop('required', false);
                    $("#StateCodeMultiple").prop('required',true);
                    $("#DistrictCode").prop('required', false);

                } else if(role_id == 2) {
                    $('.state_id_div').show();
                    $('.state_id_multiple_div').hide();
                    $('.district_id_div').hide();                   

                    $("#StateCode").prop('required', true);
                    $("#StateCodeMultiple").removeAttr('required');
                    $("#DistrictCode").prop('required', false);
                }
                else if(role_id == 30) {
                    $('.state_id_div').show();
                    $('.state_id_multiple_div').hide();
                    $('.district_id_div').show();                   

                    $("#StateCode").prop('required', true);
                    $("#StateCodeMultiple").removeAttr('required');
                    $("#DistrictCode").prop('required', true);
                }


            });

            $('#StateCode').on('change', function(e) {
                var StateCode = $(this).val();
                
                var DistrictCode = '';
                @if ($user->DistrictCode !== null)
                    DistrictCode = "{{ $user->DistrictCode }}";
                @endif

                $.ajax({
                    type: 'GET',
                    url: "/getDistrict",
                    // data: 'StateCode=' + StateCode,
                    data: '_token =