@extends('layouts.app')

@section('content')
    <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>Add User</h4>
                    </div>
                </div>
            </div>

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

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

                            <form class="" method="POST" id="needs-validation" autocomplete="off"
                                enctype="multipart/form-data">
                                @csrf

                                <input type="hidden" name="id"
                                    value="{{ !empty($user_details->id) ? $user_details->id : '' }}">

                                <input type="hidden" class="form-control username" name="username"
                                    value="{{ old('username') }}" autocomplete="off">

                                <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" type="text"
                                                    value="{{ old('UserName') }}" required>
                                                <label class="isAvl"
                                                    style="height:0px;display: none; margin-bottom:2px; font-style:italic;"></label>
                                            </div>
                                        </div>

                                        <div class="row form-group">
                                            <label class="control-label col-md-3" for="Name">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="{{ old('Name') }}" required>
                                            </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') }}" required>
                                            </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') }}" required>
                                            </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="{{ old('EmailID') }}" required>
                                            </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="{{ old('MobileNo') }}" required>
                                            </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" required>
                                                    <option value="">--Select--</option>
                                                    @foreach ($roles as $role)
                                                        <option value="{{ $role->RoleID }}"
                                                            {{ old('RoleID') == $role->RoleID ? 'selected' : '' }}>
                                                            {{ $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 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 id="ImgPreview" src="#"
                                                        style="height:135px;width:130px; border-width: 1px;
                                                    border-color: Black;">
                                                </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="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

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

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <div class="border-top pt-3">
                                    <button class="btn btn-primary btn_submit 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>




    <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>
        $('.toggle-password').click(function() {
            $(this).children().toggleClass('mdi-eye-outline mdi-eye-off-outline');
            let input = $(this).prev();
            input.attr('type', input.attr('type') === 'password' ? 'text' : 'password');
        });
    </script>


    <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('');
                // $("#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 = '';
                @if (old('DistrictCode') !== null)
                    DistrictCode = "{{ old('DistrictCode') }}";
                @endif

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