@extends('layouts.admin', ['title' => 'User Roles'])

@push('stylesheets')

    <!--datatable css-->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
    <!--datatable responsive css-->
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />

    <meta name="csrf-token" content="{{ csrf_token() }}">

@endpush

@section('content')
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Users</h5>
                                {{--<button type="button" class="btn btn-primary" data-tippy-content="Add user">
                                    New User
                                </button>--}}
                            </div>
                            <div class="card-body">
                                <table id="users" class="table table-bordered dt-responsive nowrap table-striped align-middle" style="width:100%">
                                    <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Phone number</th>
                                        <th>Roles</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>

                                </table>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div>
            <!-- container-fluid -->
        </div>

        {{--modals--}}
        <!-- Modal -->
        <div class="modal modal-lg fade" id="role_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <form action="/users/assign-roles" method="post">
                    @csrf
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">Assign Role(s)</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row" id="roleDiv"></div>
                            <input type="text" name="id" id="form_id" class="d-none">
                            <div class="form-group d-none">
                                <input type="text" class="form-control" name="roles" id="form_roles">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="modal fade" id="jurisdiction_modal" tabindex="-1" aria-labelledby="jurisdiction_modallabel" aria-hidden="true">
            <div class="modal-dialog">
                <form action="api/test" method="post">
                    @csrf
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">Assign Jurisdiction</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label>Location Type</label>
                                <select id="lt_select" class="form-control" name="location_type">
                                    <option value=""></option>
                                    @foreach(Config::get('constants.location_types') as $item)
                                        <option value="{{$item}}">{{$item}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group mt-3" id="district_div" style="display: none;">
                                <label>Districts</label>
                                <select class="form-control" id="district_select">
                                    <option value=""></option>
                                    @foreach($districts as $item)
                                        @if(request()->get('district') == $item->id)
                                            <option value="{{$item->id}}" selected>{{$item->district}}</option>
                                        @else
                                            <option value="{{$item->id}}">{{$item->district}}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group mt-3" id="subcounty_div" style="display: none;">
                                <label>Subcounties</label>
                                <select class="form-control" id="subcounty_select">
                                    <option value=""></option>
                                </select>
                            </div>
                            <div class="form-group mt-3" id="parish_div" style="display: none;">
                                <label>Parishes</label>
                                <select class="form-control" id="parish_select">
                                    <option value=""></option>
                                </select>
                            </div>
                            <div class="form-group mt-3" id="village_div" style="display: none;">
                                <label>Villages</label>
                                <select class="form-control" id="village_select">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- End Page-content -->

        @endsection

        @push('scripts')

            <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
            <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
            <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
            <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

            <script>

                // tippy('[data-tippy-content]');
                /*tippy('.assign-role', {
                    content: 'Manage Roles',
                });*/

                const roleForm = document.getElementById("roleForm");
                let user = {};

                function select_user(index) {
                    const users = {{\Illuminate\Support\Js::from($users)}};
                    const roles = {{\Illuminate\Support\Js::from($roles)}};
                    user = users.filter((i) => i.id === index)[0];
                    document.getElementById("form_roles").value = user.roles_array;
                    document.getElementById("form_id").value = user.id;

                    const roleDiv = document.getElementById('roleDiv');
                    roles.forEach((role) => {
                        const checkboxDiv = document.createElement('div');
                        checkboxDiv.classList.add('input-group-text');

                        const checkbox = document.createElement('input');
                        checkbox.type = 'checkbox';
                        checkbox.value = role.id;
                        checkbox.classList.add('form-check-input');
                        checkbox.checked = user.roles_array.includes(role.id);
                        checkbox.addEventListener('click', togglePermission.bind(null, role.id));

                        checkboxDiv.appendChild(checkbox);

                        const textInput = document.createElement('input');
                        textInput.type = 'text';
                        textInput.value = role.role;
                        textInput.classList.add('form-control')
                        textInput.disabled = true;

                        const inputGroup = document.createElement('div');
                        inputGroup.classList.add('input-group');
                        inputGroup.classList.add('mb-3');

                        inputGroup.appendChild(checkboxDiv);
                        inputGroup.appendChild(textInput);

                        const containerDiv = document.createElement('div');
                        containerDiv.classList.add('col-6');
                        // containerDiv.classList.add('col-md-4');
                        containerDiv.appendChild(inputGroup);

                        if (roleDiv.children.length == roles.length) {
                            document.getElementById("roleDiv").innerHTML = '';
                        }
                        document.getElementById("roleDiv").appendChild(containerDiv);
                    });
                }

                function togglePermission(id) {
                    let selected_permissions = user.roles_array;
                    if (selected_permissions.includes(id)) {
                        let pos = selected_permissions.indexOf(id);
                        selected_permissions.splice(pos,1);
                    } else {
                        selected_permissions.push(id);
                    }

                    document.getElementById("form_roles").value = selected_permissions;
                }

                ////////////////////////////////INITIALISATION OF DATATABLE ///////////////////////////
                $(document).ready(function(){

                    ///////////////////////////AJAX CSRF SET UP //////////////////////////////////////////////

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });


                    var table = $('#users').DataTable({
                        processing: true,
                        serverSide: true,
                        ajax: "/users",
                        columns: [
                            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable:false, searchable:false},
                            { data: 'name', name: 'name'},
                            { data: 'email', name: 'email'},
                            { data: 'phone_number', name: 'phone_number'},
                            { data: 'roles', name: 'roles'},
                            { data: 'actions', name: 'actions'},
                        ]
                    });

                    $(document).on('click', '.btn-delete', function() {

                        var id = $(this).attr('id');

                        Swal.fire({
                            title: 'Are you sure?',
                            text: "This Role will be deleted",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Yes, delete it!'
                        }).then((result) => {

                            if (result.isConfirmed) {

                                $.ajax({
                                    type:'post',
                                    url: '/delete-village-agent/'+id,
                                    success:function(response){
                                        Swal.fire(
                                            'Deleted!',
                                            'Village agent has been deleted.',
                                            'success'
                                        )
                                        table.ajax.reload();
                                    }
                                });
                            }

                        });

                    });

                    // handle jurisdiction
                    const district_div = $('#district_div');
                    const district_select = $('#district_select');
                    const subcounty_div = $('#subcounty_div');
                    const subcounty_select = $('#subcounty_select');
                    const parish_div = $('#parish_div');
                    const parish_select = $('#parish_select');
                    const village_div = $('#village_div');
                    const village_select = $('#village_select');

                    const districts = {{Js::from($districts)}};
                    let subcounties = [];
                    let parishes = [];
                    let villages = [];
                    let location_type = '';

                    $('#lt_select').select2({placeholder: 'Select location type'})
                        .change(function(){
                            console.log('Type changed ::', $(this).val())
                            location_type = $(this).val();
                            switch (location_type) {
                                case "district":
                                    village_select.empty().attr('disabled',true);
                                    parish_select.empty().attr('disabled',true);
                                    subcounty_select.empty().attr('disabled',true);
                                    district_div.show();
                                    district_select
                                        .attr('multiple',true)
                                        .attr('name','location_ids[]')
                                        .select2({placeholder: 'Select district(s)'});
                                    break;
                                case "subcounty":
                                    district_div.show();
                                    district_select.empty()
                                        .attr('multiple',false)
                                        .attr('name','district_id');
                                    re_populate_districts();
                                    subcounty_div.show();
                                    subcounty_select
                                        .attr('disabled', false)
                                        .attr('multiple',true)
                                        .attr('name','location_ids[]')
                                        .select2({placeholder: 'Select subcounties'})
                                    break;
                                case "parish":
                                    district_div.show();
                                    subcounty_div.show();
                                    parish_div.show();
                                    district_select.empty()
                                        .attr('multiple',false)
                                        .attr('name','district_id');
                                    re_populate_districts();
                                    subcounty_select.empty()
                                        .attr('disabled',false)
                                        .attr('multiple',false)
                                        .attr('name','subcounty_id');
                                    parish_select
                                        .attr('disabled', false)
                                        .attr('multiple',true)
                                        .attr('name','location_ids[]')
                                        .select2({placeholder: 'Select parishes'})
                                    break;
                                case "village":
                                    district_div.show();
                                    subcounty_div.show();
                                    parish_div.show();
                                    village_div.show();
                                    district_select.empty()
                                        .attr('multiple',false)
                                        .attr('name','district_id');
                                    re_populate_districts();
                                    subcounty_select.empty()
                                        .attr('disabled',false)
                                        .attr('multiple',false)
                                        .attr('name','subcounty_id')
                                    parish_select.empty()
                                        .attr('disabled',false)
                                        .attr('multiple',false)
                                        .attr('name','parish_id');
                                    village_select
                                        .attr('disabled', false)
                                        .attr('multiple',true)
                                        .attr('name','location_ids[]')
                                        .select2({placeholder: 'Select parishes'})
                                    break;
                                default:
                                    console.log("default case selected")
                            }
                        });

                    district_select.change(async function(){
                        if (location_type !== 'district') {
                            //fetch subscounties
                            const resp = await http_get(`/subcounties-by-district/${$(this).val()}`,{});
                            console.log('The subcounty response ::', resp);
                            subcounty_select.empty();
                            subcounties = resp.items;

                            var first_option_line = '<option value ="">Select a subcounty</option>'
                            subcounty_select.append(first_option_line);
                            for (var i = 0; i < subcounties.length; i++) {
                                var id = subcounties[i].id;
                                var name = subcounties[i].text;

                                option = "<option value='" + id + "'>" + name + "</option>";

                                subcounty_select.append(option).select2({placeholder: 'Select a subcounty'});
                            }
                        }
                    })

                    function re_populate_districts(){
                        var first_option_line = '<option value ="">Select a district</option>'
                        district_select.append(first_option_line);
                        for (var i = 0; i < districts.length; i++) {
                            var id = districts[i].id;
                            var name = districts[i].district;

                            // var option = '';
                            var option = "<option value='" + id + "'>" + name + "</option>";

                            district_select.append(option).select2({placeholder: 'Select a district'});
                        }
                    }

                    subcounty_select.change(async function(){
                        if(['parish','village'].includes(location_type)) {
                            //fetch parishes
                            const resp = await http_get(`/parishes-by-subcounty/${$(this).val()}`,{});
                            console.log('The parish response ::', resp);
                            parish_select.empty();
                            parishes = resp.items;

                            var first_option_line = '<option value ="">Select a parish</option>'
                            parish_select.append(first_option_line);
                            for (var i = 0; i < parishes.length; i++) {
                                var id = parishes[i].id;
                                var name = parishes[i].text;

                                option = "<option value='" + id + "'>" + name + "</option>";

                                parish_select.append(option).select2({placeholder: 'Select parishes'});
                            }
                        }
                    })

                    parish_select.change(async function(){
                        console.log('parish changed')
                        if(location_type === 'village') {
                            //fetch villages
                            const resp = await http_get(`/villages-by-parish/${$(this).val()}`,{});
                            console.log('The villge response ::', resp);
                            village_select.empty();
                            villages = resp.items;

                            var first_option_line = '<option value ="">Select a village</option>'
                            village_select.append(first_option_line);
                            for (var i = 0; i < villages.length; i++) {
                                var id = villages[i].id;
                                var name = villages[i].text;

                                option = "<option value='" + id + "'>" + name + "</option>";

                                village_select.append(option).select2({placeholder: 'Select villages'});
                            }
                        }
                    })

                });
            </script>


    @endpush