@extends('layouts.main')
@section('title')
    Digital Palika | Users
@endsection
@section('content')

    <div class="card">
        <div class="card-header">


            <a href="{{ route('users.index') }}" style="float:left;"><i class="fas fa-arrow-left arrow"></i></a>
            <span class="card-title">युजर एडित</span>



        </div>

        <div class="card-body">
            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <strong>Whoops!</strong> There were some problems with your input.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {!! Form::model($user, ['method' => 'PATCH', 'route' => ['users.update', $user->id]]) !!}

            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>नाम:</strong>
                        {!! Form::text('first_name', null, ['placeholder' => 'Name', 'class' => 'form-control']) !!}
                    </div>
                </div>
                @error('first_name')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>नाम:</strong>
                        {!! Form::text('mid_name', null, ['placeholder' => 'Name', 'class' => 'form-control']) !!}
                    </div>
                </div>
                @error('mid_name')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>नाम:</strong>
                        {!! Form::text('last_name', null, ['placeholder' => 'Name', 'class' => 'form-control']) !!}
                    </div>
                </div>
                @error('last_name')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>नाम:</strong>
                        {!! Form::text('phone_number', null, ['placeholder' => 'Name', 'class' => 'form-control']) !!}
                    </div>
                </div>
                @error('phone_number')
                    <span class="text-danger">{{ $message }}</span>
                @enderror


                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>इमेल:</strong>
                        {!! Form::text('email', null, ['placeholder' => 'Email', 'class' => 'form-control']) !!}
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>पासवर्ड:</strong>
                        {!! Form::password('password', ['placeholder' => 'Password', 'class' => 'form-control']) !!}
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>पासवर्ड(फेरी पासवर्ड हल्नुहोस ):</strong>
                        {!! Form::password('confirm-password', ['placeholder' => 'Confirm Password', 'class' => 'form-control']) !!}
                    </div>
                </div>
                <div class="form-group">
                    <strong>प्रान्त</strong>
                    {!! Form::select('province', $province, [], ['class' => 'form-control', 'id' => 'province']) !!}
                </div>
                <div class="form-group">
                    <strong>जिल्ला</strong>
                    {!! Form::select('district', [], [], ['class' => 'form-control', 'id' => 'district']) !!}


                </div>
                <div class="form-group">
                    <strong>नगरपालिका</strong>
                    {!! Form::select('muncipality', [], [], ['class' => 'form-control', 'id' => 'muncipality']) !!}

                    </select>

                </div>
                <div class="form-group">
                    <strong>वार्ड</strong>
                    {!! Form::select('ward_id', [], [], ['class' => 'form-control', 'id' => 'ward']) !!}
                </div>
                @error('ward_id')
                    <span class="text-danger">{{ $message }}</span>
                @enderror

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>रोल:</strong>
                        {!! Form::select('roles[]', $roles, $userRole, ['class' => 'form-control', 'id' => 'roles', 'multiple']) !!}
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>समूह:</strong>
                        {!! Form::select('roles[]', $groups, $userGroups, [
                            'class' => 'form-control',
                            'id' => 'group_roles',
                            'multiple',
                        ]) !!}
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>अनुमतिहरू:</strong>
                        @if (!empty($rolePermissions))
                            @foreach ($permission as $value)
                                @foreach ($rolePermissions as $rolePermission)
                                    @if ($rolePermission == $value->id)
                                        <label class="label label-success">
                                            <h5><span class="badge rounded-pill bg-success"
                                                    style="background-color: #44A64B">{{ $value->name }}</span></h5>
                                        </label>
                                    @endif
                                @endforeach
                            @endforeach
                        @endif
                    </div>
                </div>



                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group overflow-auto">
                        <div class="input-group flex-nowrap">
                            <span class="input-group-text" id="addon-wrapping"><i class="fa  fa-search"></i></span>
                            <input type="text" class="form-control search-role-title" placeholder="role title"
                                aria-label="अनुमतिहरू" aria-describedby="addon-wrapping">
                        </div>
                        <div id="role_list_div" style="margin-top: 10px">
                            {{--                                    @foreach ($permission as $value) --}}

                            {{--                                        <div class="role-list"> --}}
                            {{--                                            <label> --}}
                            {{--                                                <input class="role-checkbox" type="checkbox" {{in_array($value->id, $rolePermissions) ? 'checked' : ''}} name="permission[]" value="{{$value->id}}"> {{ $value->name }}</label> --}}
                            {{--                                            <br/> --}}
                            {{--                                        </div> --}}
                            {{--                                    @endforeach --}}
                        </div>
                        {{--                        {{ Form::checkbox('permission[]', $value->id, in_array($value->id, $rolePermissions) ? true : false, array('class' => 'name')) }} --}}

                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12 text-center" style="margin-top: 10px">
                    <button type="submit" class="btn_palika">पेश गर्नुहोस्</button>
                </div>
            </div>
            {!! Form::close() !!}
        </div>
    </div>



@endsection

@section('custom-script')
    <script>
        $('#roles').select2({
            placeholder: 'Select Role'
        });
        $('#group_roles').select2({
            placeholder: 'Select Group'
        });
        const all_role_list = {};
        var all_selected_role_id_list = [];
        @foreach ($permission as $value)
            @if (in_array($value->id, $rolePermissions->toArray()))
                all_selected_role_id_list.push({{ $value->id }});
            @endif
            all_role_list['{{ $value->id }}'] = '{{ $value->name }}';
        @endforeach

        $(document).on('click', '.role-checkbox', function() {

            var click_id = $(this).val();
            all_selected_role_id_list.push(click_id);

        });

        $('.search-role-title').on('input', function() {
            var input_value = $(this).val();
            // alert(input_value)
            var list_view = '';

            if (!input_value == '') {
                $.each(all_role_list, function(key, value) {
                    // console.log(all_selected_role_id_list)
                    if (value.includes(input_value)) {
                        // alert('value')

                        var check_checked = false;
                        $.each(all_selected_role_id_list, function(key_checked, value_checked) {
                            // alert(value_checked+''+key)
                            if (Number(value_checked) === Number(key)) {
                                // alert(key+''+value_checked)
                                check_checked = true;
                                return false;
                            }
                        });


                        if (check_checked == true) {
                            list_view = list_view + '<div class="role-list">' +
                                '<label id="checkbox_label' + key + '">' +
                                '<input type="checkbox" id="' + key +
                                '" class="role-checkbox" name="permission[]" checked value="' + value +
                                '">' + value +
                                ' </label>' +

                                '<br/>' +
                                '</div>';
                        } else {
                            list_view = list_view + '<div class="role-list">' +
                                '<label id="checkbox_label' + key + '">' +
                                '<input type="checkbox" id="' + key + '" class="role-checkbox" name="' +
                                key + '" value="0">' + value + ' </label>' +
                                '<div hidden id="div-hidden_checkbox' + key +
                                '"><input type="checkbox" id="hidden_checkbox' + key +
                                '" class="role-checkbox" name="permission[]" checked value="' + value +
                                '"></div>' +
                                '<br/>' +
                                '</div>';
                        }
                    }
                });
            }

            // console.log(list_view)
            $('#role_list_div').html(list_view)

        })

        $(document).on('change', '.role-checkbox', function() {
            var id = $(this).attr('id');
            if (!this.checked) {

                $('#checkbox_label' + id).append('<div hidden id="div-hidden_checkbox' + id +
                    '"><input type="checkbox" id="hidden_checkbox' + id +
                    '" class="role-checkbox" name="permission[]" checked value="0"></div>');
            } else {
                if ($('#hidden_checkbox' + id).length > 0) {
                    $(this).val('1');
                    // alert('fdsaf')
                    $("#div-hidden_checkbox" + id).remove();
                }
            }

        });

        $(function() {
            $("#permission").dataTable();
        });
    </script>
@endsection