@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>

                                        

                                        <div class="col-md-4  px-4">                                           
                                            <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>
                                    </div>


                                    <div class="row geog_table_row">
                                        <div class="col-md-12 mb-3">
                                            <div class="table-responsive oxygen-infrastructure-table-1">
                                                
                                                <table class="table mobile-view-tble geog_table">
                                                    <thead>
                                                        <tr>
                                                            <th>State <span class="red">*</span></th>
                                                            <th>District</th>
                                                            <th class="text-center" style=" width: 60px; "><button
                                                                    type="button" class="btn btn-width btn-success "
                                                                    onclick="add_state_district(this);">+</button></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @php
                                                            $count = 0;
                                                        @endphp

                                                        @if(!$user_state_list->isEmpty())
                                                            @foreach($user_state_list as $key=>$data)
                                                            <tr>
                                                                <input type="hidden" name="geographical_list[{{ $count }}][id]"
                                                                class="id" value="{{ $data->id }}">

                                                                <td>
                                                                    <select name="geographical_list[{{ $count }}][StateCode]"
                                                                        class="form-control StateCode">
                                                                        <option value="">--Select--</option>
                                                                        @foreach ($t_Master_State as $state)
                                                                            <option value="{{ $state->StateCode }}"
                                                                                {{ $data->StateCode == $state->StateCode ? 'selected' : '' }}>
                                                                                {{ $state->StateName }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </td>

                                                                <td>
                                                                    <input type="hidden" class="h_DistrictCode" value="{{$data->DistrictCode}}">
                                                                    <select name="geographical_list[{{ $count }}][DistrictCode][]"
                                                                        class="form-control issue_type DistrictCode js-example-basic-multiple select2 select2-hidden-accessible"
                                                                        tabindex="-1" aria-hidden="true" multiple required1>
        
                                                                    </select>
                                                                </td>

                                                                <td>
                                                                    <button class="delete-btn" type="button"
                                                                        onclick="delete_psa(this);">
                                                                        <img class="img-fluid"
                                                                            src="{{ asset('assets\images\auth/delete.svg') }}" alt="">
                                                                    </button>
                                                                </td>
                                                                @php $count ++; @endphp
                                                            @endforeach

                                                        @else
                                                        <tr>
                                                            <input type="hidden" name="geographical_list[0][id]"
                                                                class="id">
    
                                                            <td>
                                                                <select name="geographical_list[0][StateCode]"
                                                                    class="form-control StateCode">
                                                                    <option value="">--Select--</option>
                                                                    @foreach ($t_Master_State as $state)
                                                                        <option value="{{ $state->StateCode }}"
                                                                            {{ old('StateCode') == $state->StateCode ? 'selected' : '' }}>
                                                                            {{ $state->StateName }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </td>
    
                                                            <td>
                                                                <select name="geographical_list[0][DistrictCode][]"
                                                                    class="form-control issue_type DistrictCode js-example-basic-multiple select2 select2-hidden-accessible"
                                                                    tabindex="-1" aria-hidden="true" multiple required1>
    
                                                                </select>
                                                            </td>
    
                                                            <td>
                                                                <button class="delete-btn" type="button"
                                                                    onclick="delete_psa(this);">
                                                                    <img class="img-fluid"
                                                                        src="{{ asset('assets\images\auth/delete.svg') }}" alt="">
                                                                </button>
                                                            </td>
    
                                                        </tr>
                                                        @endif
    
                                                    </tbody>
                                                </table>
                                            </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;
        }

        .delete-btn img {
            width: 15px;
        }

        .delete-btn {
            background: transparent;
            border: 0 !important;
            outline: none !important;
            cursor: pointer;
        }
    </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]);
            });


            $('#RoleID').on('change', function(e) {
                var role_id = $(this).val();
                $("#StateCode").val('');
                // $("#StateCodeMultiple").multiselect("clearSelection");
                // $("#StateCodeMultiple").multiselect( 'refresh' );
                $("#DistrictCode").val('');

                if (role_id == 1) {
                    $('.geog_table_row').hide();

                    $(".StateCode").prop('required', false);
                    $(".DistrictCode").prop('required', false);
                } else if (role_id == 2) {
                    $('.geog_table_row').show();

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

            $('.StateCode').bind('change', function(){
                var fieldValue  = $(this).val();
                if(fieldValue > 0)
                {
                    var fieldName = $(this).attr('name');
                    var curObj = $(this);
                    $('.StateCode').each(function() {
                        //alert($(this).attr('name')+'--'+fieldName);
                        //alert($(this).val()+'--'+fieldValue);
                        if(($(this).attr('name') != fieldName) && ($(this).val() == fieldValue))
                        {
                            curObj.prop('selectedIndex', 0);
                            // $(".js-example-basic-single").select2();
                            bootbox.alert('State Already Selected');
                        }
                    });
                }
            });

            $('.StateCode').on('change', function(e) {
                var advObj = $(this);
                var StateCode = $(this).val();
                var DistrictCode = '';
                var DistrictCode = advObj.parents('tr').find('.h_DistrictCode').val();
                /* @if (old('DistrictCode') !== null)
                    DistrictCode = "{{ old('DistrictCode') }}";
                @endif */
                // alert(DistrictCode);

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