@extends('layouts.main')
@section('title')
    Digital Palika | Users
@endsection
@section('content')
    {{-- <livewire:role-permissions role="Admin" /> --}}

    <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>
                        {{-- {{ dd($errors) }} --}}
                        @foreach ($errors as $key => $error)
                            <li>{{ dd($error) }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {!! Form::open(['route' => 'users.store', 'method' => 'POST']) !!}
            <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>
                @error('email')
                    <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::password('password', ['placeholder' => 'Password', 'class' => 'form-control']) !!}
                    </div>
                </div>
                @error('password')
                    <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::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, [], ['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, [], ['class' => 'form-control', 'id' => 'group_roles', 'multiple']) !!}
                    </div>
                </div>



                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group overflow-auto">
                        <strong>युजरको विशेष अनुमतिहरू:</strong>
                        <br />
                        <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="role title" aria-describedby="addon-wrapping">
                            </div>
                            <div id="role_list_div" style="margin-top: 10px;overflow-y:scroll;height:200px">
                                @foreach ($permission as $value)
                                    <div class="role-list ">
                                        <label>
                                            <input type="checkbox" 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>

                <div class="col-xs-12 col-sm-12 col-md-12 text-center " style="margin-top: 15px">
                    <button type="submit" class="btn_palika">पेश गर्नुहोस्</button>
                </div>
            </div>
            <br>
            <br>

            {!! Form::close() !!}
        </div>\
    </div>
@endsection

@section('custom-script')
    <script>
        $('#province').change(function(e) {
            e.preventDefault();
            console.log('fds', e.target.value);
            let provicne_id = e.target.value
            let url = "{{ url('api/province') }}" + "/" + provicne_id + "/districts"
            // let url = "{{ route('province-district', 1) }}",
            $.ajax({
                type: "get",
                url: url,
                success: function(response) {
                    console.log(response);
                    let html = response.map(function(res) {
                        return `
                            <option value="${res.id}">${res.en_name}(${res.np_name})</option>
                        `
                    })
                    console.log(html);
                    html += `<option value="" selected>---Select from option---</option>`

                    $('#district').html(html);
                }
            });
        });
        $('#district').change(function(e) {
            e.preventDefault();
            console.log('fds', e.target.value);
            let id = e.target.value
            let url = "{{ url('api/district') }}" + "/" + id + "/muncipalities"
            // let url = "{{ route('province-district', 1) }}",
            $.ajax({
                type: "get",
                url: url,
                success: function(response) {
                    console.log(response);
                    let html = response.map(function(res) {
                        return `
                            <option value="${res.id}">${res.en_name}(${res.np_name})</option>
                        `
                    })
                    console.log(html);
                    html += `<option value="" selected>---Select from option---</option>`

                    $('#muncipality').html(html);
                }
            });
        });
        $('#muncipality').change(function(e) {
            e.preventDefault();
            console.log('fds', e.target.value);
            let id = e.target.value
            let url = "{{ url('api/muncipality') }}" + "/" + id + "/wards"
            // let url = "{{ route('province-district', 1) }}",
            $.ajax({
                type: "get",
                url: url,
                success: function(response) {
                    // console.log(response);
                    let html = response.map(function(res) {
                        return `
                            <option value="${res.id}">${res.en_name}(${res.np_name})</option>
                        `
                    })
                    html += `<option value="" selected>---Select from option---</option>`
                    console.log("ward");
                    console.log(html);
                    $('#ward').html(html);
                }
            });
        });
        $('#roles').select2({
            placeholder: 'Select Role'
        });
        $('#group_roles').select2({
            placeholder: 'Select Group'
        });
        // $(document).ready(function() {
        //     $('select[name=roles]').select2();
        // });
        const all_fole_list = {};

        @foreach ($permission as $value)

            // all_fole_list['{{ $value->id }}'] = '{{ $value->name }}';
            all_fole_list['{{ $value->name }}'] = '{{ $value->name }}';
        @endforeach
        console.log(all_fole_list);
        $('.search-role-title').on('input', function() {
            var input_value = $(this).val();
            // alert(input_value)
            var list_view = '';
            $.each(all_fole_list, function(key, value) {
                console.log(key)
                if (value.includes(input_value)) {
                    // alert('value')


                    list_view = list_view + '<div class="role-list">' +
                        '<label>' +
                        '<input type="checkbox" name="permission[]" value="' + value + '">' + value +
                        '</label>' +
                        '<br/>' +
                        '</div>';

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

        })

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