@extends('Frontend.partials.layout')
@section('styles')
    <!-- boostrap select css -->
    <link rel="stylesheet" href="{{ asset('/vendor/libs/bootstrap-select/bootstrap-select.css') }}">
    <!-- select2 css -->
    <link rel="stylesheet" href="{{ asset('/vendor/libs/select2/select2.css') }}">

    <style>
         #group_list + .select2-container.select2-container--default{
            width: 297px !important;
         }
    </style>
@endsection


@section('content')
{{-- user list section --}}
<section class="user-list">
    {{-- analysis content header--}}
    <div class="row">
        <div class="col-md-6">
            <div class="analysis-content-header d-flex align-items-center">
                <div class="logo">
                    <i class="fas fa-home primary-color"></i>
                </div>
                <div class="heading primary-color">
                    <h2>{{ trans('action.page_heading1_user_list') }}</h2>
                    <p>{{ brandName() }} {{  trans('action.users')}}</p>
                </div>
            </div>
        </div>
    </div>
    {{-- /analysis content header--}}

    {{-- user list table --}}
    <div class="row">
        <div class="col-md-12">
            <div class="add-user-group-button">
                <div class="button-demo">
                    <div class="row justify-content-between align-items-center mx-0">
                        <div class="">
                            <div class="dropdown show ">
                                @php
                                    $groupIDS = getCollectionArrayForStaff(Auth::user()->staffInGorup);
                                @endphp
                               <div class="form-inline pl-0">

                                    <select class="form-control m-0" name="groupchecked" id="group_list">
                                        <option selected value="all" @if(request()->group_id == "") selected @endif data-url="{{ route('users.users') }}">{{ trans('action.all_user_groups')}}</option>
                                        @if(Auth::user()->user_type != 4)
                                            <option value="staff" @if(request()->group_id == "staff") selected @endif data-url="{{ route('users.users').'?group_id='.'staff' }}">{{trans('action.staff')}}</option>
                                        @endif
                                        @forelse ($groups as $item)
                                            @continue(!in_array($item->id,$groupIDS) && Auth::user()->user_type == 4)
                                            <option value="{{$item->id}}" @if(request()->group_id == $item->id) selected @endif data-url="{{ route('users.users').'?group_id='.$item->id }}">{{$item->group_name}}</option>
                                        @empty
                                            {{-- <option selected value="null"><span class="text-danger">{{ trans('action.no_data_found')}}</span></option> --}}
                                        @endforelse
                                    </select>
                                </div>
                            </div>


                        </div>
                         
                        <div class="">
                            <a href="{{ route("users.feedback")}}">
                                <button class="btn btn-warning ladda-button m-0"  data-style="expand-right">
                                    <span class="ladda-label"><i class="fas fa-comments"></i> {{ trans('action.feedback') }} </span>
                                    <span class="ladda-spinner"></span>
                                    <div class="ladda-progress" style="width: 121px;"></div>
                                </button>
                            </a>
                            <a href="{{ route('users.export') }}">
                                <button class="btn btn-primary ladda-button m-0"  data-style="expand-right">
                                    <span class="ladda-label"><i class="fas fa-file-export"></i> {{trans('action.export')}} </span>
                                    <span class="ladda-spinner"></span>
                                    <div class="ladda-progress" style="width: 121px;"></div>
                                </button>
                            </a>
                        </div>
                    </div>
                </div>

            </div>
            <div class="card mt-2">
                <div class="card-datatable table-responsive" id="card-datatable">
                    <table id="user-list" class="datatables-userList table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>{{ trans('action.user_name') }}</th>
                                <th>{{ trans('action.user_registered') }}</th>
                                <th>{{ trans('action.edit_at') }}</th>
                                <th>{{ trans('action.user_language') }}</th>
                                <th>{{ trans('action.user_groups') }}</th>
                                <th>{{ trans('action.account_type') }}</th>
                                <th>{{ trans('action.day_left') }}</th>
                                <th>{{ trans('action.action') }}</th>
                            </tr>
                        </thead>
                        <tbody>

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

        </div>
    </div>
    {{-- /user list table --}}
    {{-- /Share user Modal  --}}
    <div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="share-modal-show" aria-hidden="true">
        <div class="modal-dialog bd-example-modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header  d-flex flex-column">
                    <h5 class="modal-title" id="share-modal-show">{{ trans('action.user_setting') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <p class="modal-notice mt-3"></p>
                </div>
                <!-- Data will be inserted here -->
                <form class="" id="update_form" action="{{ route('users.shareUserLimit')}}" method="post">
                    <div class="modal-body">
                        @csrf
                        <input type="hidden" name="user_id" id="user_id" class="userID" value="">
                        <div class="form-group form-inline">
                            <label class="control-label mb-2">{{ trans('action.allow_login') }}</label>
                            <select class="form-control lg m-0" name="allow_day" id="allow_day">
                                <option value="" selected>{{   trans('action.select_release_time') }}</option>
                                @if (!empty($accessDays))
                                    <option value="0">{{   trans('action.stop_sharing')}}</option>
                                    @foreach ($accessDays as $day)
                                        <option value="{{ $day->access_time }}">@if($day->access_time == 0) {{ trans('action.stop_sharing')}} @else {{ $day->access_time }} {{  trans('action.cron_days')}} @endif</option>
                                    @endforeach
                                @endif

                            </select>
                            <div class="text-danger">
                            {{$errors->has("allow_day") ? $errors->first("allow_day"):""}}
                            </div>
                        </div>

                        <div class="form-group " id="form-group-list_product">
                            <label class="control-label mb-2">{{   trans('action.select_sub_menu') }}</label>

                            <select class="selectpicker select-all m-0" id="sub_product_id" name="sub_product_id[]" multiple data-live-search="true" title="{{trans('action.nothingSelected')}}" data-count-selected-text= "{0} {{trans('action.selectedsubmenus')}}" data-selected-text-format="count > 1">
                                @if(!empty($products))
                                    @foreach($products as $pro)
                                        @if(!empty($pro['submenu'][0]))
                                        <option value="{{$pro['proId']}}" class="bg-secondary text-white mainmenu_{{$pro['proId']}}" data-id="{{$pro['proId']}}" data-option="main" id="mainmenu_{{$pro['proId']}}">{{ $pro['proName'] }}</option>
                                            @foreach($pro['submenu'] as $sub)
                                                @if($pro['ownmenu'])
                                                    <option value="{{ $sub->id.'-own' }}" id="{{ $sub->id.'-own' }}" data-id="s_{{$pro['proId']}}" class="submenu_{{$pro['proId']}}">{{ $sub->name }}</option>
                                                @else
                                                    <option value="{{ $sub->id.'-sys' }}" id="{{ $sub->id.'-sys' }}" data-id="s_{{$pro['proId']}}" class="submenu_{{$pro['proId']}}">{{ $sub->menu_name }}</option>
                                                @endif
                                            @endforeach
                                        @endif
                                    @endforeach
                                @endif
                            </select>

                            <div class="text-danger">
                                {{$errors->has("sub_product_id") ? $errors->first("sub_product_id"):""}}
                            </div>
                            <p class="help-block"></p>
                        </div>



                        <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="demo_mode" name="demo">
                            <span class="custom-control-label">{{  trans('action.demo_mode') }}</span>
                        </label>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">{{   trans('action.save') }}</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">{{  trans('action.close') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
</section>
{{-- /user list section --}}

@endsection


@section('scripts')
 <!-- Dependencies -->
 <script src="{{ asset('/vendor/libs/bootstrap-select/bootstrap-select.js') }}"></script>
 <!-- select2 js -->
 <script src="{{ asset('/vendor/libs/select2/select2.js') }}"></script>

 <script>
     var products_id = []
     var submenus_id = []
     $(document).ready(function(){

         $(".selectpicker.select-all").on('changed.bs.select', function(e, clickedIndex, isSelected, previousValue) {

             var selectpicker  = $(this)
             let product_id    = selectpicker.find('option:selected').data('id')
             let selected_on   = selectpicker.find('option:selected').data('option')

             if(clickedIndex) {
                 product_id  = $(`#sub_product_id option:eq(${clickedIndex})`).data('id');
                 selected_on = $(`#sub_product_id option:eq(${clickedIndex})`).data('option')
             }

             if(selected_on != "main") {
                 return 0
             }

             let proOptionValues = selectpicker.find(`option[value!=""][data-id="${product_id}"]`)
                 proOptionValues.prop('selected', false).parent().selectpicker('refresh');
             let submenus = selectpicker.find(`option.submenu_${product_id}`)

             if(products_id.includes(product_id)) {

                 if(products_id.length > 0) {
                     $.each(products_id, function(index, element) {
                         var optionValues = selectpicker.find(`option[value!=""][data-id="s_${product_id}"]`)
                         optionValues.prop('selected', false).parent().selectpicker('refresh');
                     })
                 }
                 products_id.pop(product_id)

             } else {

                 products_id.push(product_id)
                 if(products_id.length > 0) {
                     $.each(products_id, function(index, element) {
                         var optionValues = selectpicker.find(`option[value!=""][data-id="s_${element}"]`)
                         optionValues.prop('selected', true).parent().selectpicker('refresh');
                     })
                 }
             }
         }).trigger('change');
         
        // return console.log( $('#group_list').val());
        $('#group_list').select2()

        $('#group_list').change(function() {
            window.location = $(':selected',this).data('url')
        });

        var dataTable = $('.datatables-userList').DataTable({
            language: {
                sEmptyTable: `{{ trans('action.table_norecord')}}`,
                sInfo: "_START_ bis _END_ von _TOTAL_ Einträgen",
                sInfoEmpty: "0 bis 0 von 0 Einträgen",
                sInfoFiltered: "(gefiltert von _MAX_ Einträgen)",
                sInfoPostFix: "",
                sInfoThousands: ".",
                sLengthMenu: "_MENU_"+`{{  trans('action.table_showdata')}}`,
                sLoadingRecords: `{{   trans('action.table_loading')}}`,
                sProcessing: `{{   trans('action.table_pleasewait')}}`,
                sSearch: `{{   trans('action.search')}}`,
                sZeroRecords: `{{  trans('action.table_nodata')}}`,
                oPaginate: {
                    sFirst: `{{trans('action.table_first')}}`,
                    sPrevious:  `{{trans('action.table_back')}}`,
                    sNext:  `{{trans('action.table_next')}}`,
                    sLast: `{{ trans('action.table_latest')}}`,
                },
                oAria: {
                    sSortAscending:
                        ": aktivieren, um Spalte aufsteigend zu sortieren",
                    sSortDescending:
                        ": aktivieren, um Spalte absteigend zu sortieren",
                },
            },
            search: {
                return: true
            },
            serverSide: true,
            ajax:{
                url:'{{ route("users.users")}}',
                type: 'GET',
                pages: 20,
                data:{'group_id' : $('#group_list').val()}
            },
            columnDefs: [
                { orderable: false,searchable: false,targets: [0],width: '25%' },
                { targets: [1],type: 'date' },
                { orderable: false,targets: [2,3,4,5,6] },
                { orderable: false,targets: [7],width: '8%' },
            ],
            order: [[1, 'asc']],
            button: false,
            searching: true,
            scrollY: true,
            scrollX: true,
            scrollCollapse: true,
            processing: true,
            columns:[
                {data:'first_name', name:'first_name', searchable: false},
                {data:'created_at', name:'created_at'},
                {data:'updated_at', name:'updated_at'},
                {data:'language', name:'language_id'},
                {data:'group', name:'group', searchable: false},
                {data:'status', name:'status', searchable: false},
                {data:'dayLeft', name:'dayLeft', searchable: false},
                {data:'action', name:'action'},
            ],drawCallback: function( settings ) {
                // Image Preview
                $('img').click(function () {
                    if($(this).data('view') === true){
                        let imgSource = $(this).attr('src');
                        let name = $(this).data('name');
                        let email = $(this).data('email');
                        Swal.fire({
                            title: name,
                            text: email,
                            imageUrl: imgSource,
                            showConfirmButton: false,
                            imageWidth: 300,
                            imageHeight: 300,
                            imageAlt: name,
                        })
                    }else return;

                });
            }

        });

        // Function to open the custom modal with data
        function openCustomModal(data) {
            console.log(data);
            var modal = $('#shareModal');
            modal.find('.modal-title').text(data.title);
            modal.find('.modal-notice').text(data.notice);
            modal.find('.userID').val(data.userId);
            modal.find("#sub_product_id").val(data.lists).trigger('change');
            // modal.find(`#sub_product_id option[value='${data.lists}']`).attr('selected', true).trigger('change')
            if(data.limit) modal.find(`#allow_day option[value='${data.limit.access_day}']`).attr('selected', true)
            if(data.limit) modal.find("[name=demo]").prop('checked', data.limit.status)
            modal.modal('show');
        }

        // Event handler for the "View" button
        $('.datatables-userList').on('click', '.shareUser', function () {
            var rowData = dataTable.row($(this).closest('tr')).data(); // Get the data for the clicked row

            // Assuming you have a user_id available from rowData or elsewhere
            var user_id = $(this).data('id'); // Adjust this based on your data structure

            // AJAX request to fetch additional data
            $.ajax({
                type: 'get',
                url: window.location.origin + '/users/get-user-limit/' + user_id,
                dataType: "json",
                success: function (data) {
                    if (data.success) {
                        let submenu_id = [];
                        $.each(data.lists, function(key,value){
                            submenu_id.push(value);
                        });
                        // Build the content for the custom modal
                        // Open the custom modal with the fetched data
                        openCustomModal({
                            title: data.title + rowData.user_full_name,
                            notice: data.notice,
                            lists: submenu_id,
                            limit: data.limitations,
                            userId: user_id
                        });
                    } else {
                        console.log('Data retrieval failed.');
                    }
                },
                error: function (data) {
                    console.log(data);
                }
            });
        });

       
    });
    function _warning() {
        toastr.warning('{{trans("action.share_menu_error")}}')
    }
</script>

@endsection