@php
/**
* Component : User
* Controller : UserController
* File : User.list.blade.php
* ----------------------------------------------------------------------------- */
@endphp
@extends('layouts.app', ['title' => __tr('Team Members')])
@section('content')
@include('users.partials.header', [
'title' => __tr('Team Members'),
'description' => '',
'class' => 'col-lg-7'
])
<style>
    .custom-badge {
        line-height: 1;
    }
</style>
<div class="container-fluid container-fluid-padding p-1">
    <div class="row">
        <!-- button -->
        <div class="col-xl-12 mb-3">
            <button type="button" class="lw-btn btn btn-primary float-right" data-toggle="modal"
                data-target="#lwAddNewUser"> {{ __tr('Add New User') }}</button>
        </div>
        <!--/ button -->
        <!-- Add New User Modal -->
        <x-lw.modal id="lwAddNewUser" :header="__tr('Add New User')" :hasForm="true">
            <!--  Add New User Form -->
            <x-lw.form id="lwAddNewUserForm" :action="route('vendor.user.write.create')"
                :data-callback-params="['modalId' => '#lwAddNewUser', 'datatableId' => '#lwUserList']"
                data-callback="appFuncs.modelSuccessCallback">
                <!-- form body -->
                <div class="lw-form-modal-body">
                    <!-- form fields form fields -->
                    <div class="row">
                        <div class="col-md-6">
                            <!-- First_Name -->
                            <x-lw.input-field type="text" id="lwFirstNameField" data-form-group-class=""
                                :label="__tr('First Name')" placeholder="First Name" name="first_name" required="true" />
                            <!-- /First_Name -->
                        </div>
                        <div class="col-md-6">
                            <!-- Last_Name -->
                            <x-lw.input-field type="text" id="lwLastNameField" data-form-group-class=""
                                :label="__tr('Last Name')" placeholder="Last Name" name="last_name" required="true" />
                            <!-- /Last_Name -->
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <x-lw.input-field type="number" id="lwMobileNumberField" data-form-group-class=""
                                :label="__tr('Mobile Number')" name="mobile_number" required="true" minlength="9" placeholder="Mobile Number" />
                            <h5><span class="text-muted">{{__tr("Mobile number should be with country code without 0 or +")}}</span></h5>
                        </div>
                        <div class="col-md-6">
                            <!-- Username -->
                            <x-lw.input-field type="text" id="lwUsernameField" data-form-group-class=""
                                :label="__tr('Username')" name="username" placeholder="Username" required="true" minlength="3" />
                            <!-- /Username -->
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <x-lw.input-field type="text" id="lwEmailField" data-form-group-class="" :label="__tr('Email')"
                                name="email" required="true" minlength="3" placeholder="Email" />
                        </div>
                        <div class="col-md-6">
                            <!-- Password -->
                            <x-lw.input-field type="password" id="lwPasswordField" data-form-group-class=""
                                :label="__tr('Password')" name="password" required="true" minlength="8" placeholder="Password" />
                            <!-- /Password -->
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <x-lw.input-field type="selectize" data-form-group-class="" name="current_phone_number_id" :label="__tr('Select Assigen Phone Number')" data-selected="{{ getVendorSettings('current_phone_number_id') }}">
                                <x-slot name="selectOptions">
                                    @if(!empty(getVendorSettings('whatsapp_phone_numbers')))
                                    @foreach (getVendorSettings('whatsapp_phone_numbers') as $whatsappPhoneNumber)
                                    <option value="{{ $whatsappPhoneNumber['id'] }}">{{ $whatsappPhoneNumber['display_phone_number'] }}</option>
                                    @endforeach
                                    @elseif(getVendorSettings('current_phone_number_id'))
                                    <option value="{{ getVendorSettings('current_phone_number_id') }}">{{ getVendorSettings('current_phone_number_number') }}</option>
                                    @endif
                                </x-slot>
                            </x-lw.input-field>
                        </div>

                    </div>
                    <label class="h3 mt-3 mb-3">{{ __tr('Permissions') }}</label>
                    <div class="row">
                        @foreach (getListOfPermissions() as $permissionKey => $permission)
                        <div class="col-sm-6 col-md-4 mb-4">
                            <div class="border rounded p-3 h-100 d-flex flex-column shadow-sm permission-card">
                                <div class="d-flex justify-content-between">
                                    <div class="me-2">
                                        <span class="badge bg-primary rounded-circle p-2 custom-badge">
                                            <i class="mdi mdi-lock fs-15  text-white"></i>
                                        </span>
                                    </div>
                                    <div>
                                        <x-lw.checkbox
                                            id="lw{{ $permissionKey }}Item"
                                            name="permissions[{{ $permissionKey }}]"
                                            data-lw-plugin="lwSwitchery"
                                            :label="''" />
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <h3 class="mb-1">{{ $permission['title'] }}</h3>
                                    @if (!empty($permission['description']))
                                    <p class="text-muted small mb-0">{{ $permission['description'] }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    {{-- <fieldset>
                        <legend>{{ __tr('Permissions') }}</legend>
                    @foreach (getListOfPermissions() as $permissionKey => $permission)
                    <div class="d-block my-3">
                        <x-lw.checkbox id="lw{{ $permissionKey }}Item" name="permissions[{{ $permissionKey }}]"
                            data-lw-plugin="lwSwitchery" :label="$permission['title']" />
                        @if (isset($permission['description']) and $permission['description'])
                        <p class="text-muted mt-1 fs-1">{{ $permission['description'] }}</p>
                        <hr class="my-1">
                        @endif
                    </div>
                    @endforeach
                    </fieldset> --}}
                </div>
                <!-- form footer -->
                <div class="modal-footer">
                    <!-- Submit Button -->
                    <button type="submit" class="btn btn-primary">{{ __tr('Submit') }}</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __tr('Close') }}</button>
                </div>
            </x-lw.form>
            <!--/  Add New User Form -->
        </x-lw.modal>
        <!--/ Add New User Modal -->
        <!--/ Edit User Modal -->

        <!-- Edit User Modal -->
        <x-lw.modal id="lwEditUser" :header="__tr('Edit User & Permissions')" :hasForm="true">
            <!--  Edit User Form -->
            <x-lw.form id="lwEditUserForm" :action="route('vendor.user.write.update')"
                :data-callback-params="['modalId' => '#lwEditUser', 'datatableId' => '#lwUserList']"
                data-callback="appFuncs.modelSuccessCallback">
                <!-- form body -->
                <div id="lwEditUserBody" class="lw-form-modal-body"></div>
                <script type="text/template" id="lwEditUserBody-template">

                    <input type="hidden" name="userIdOrUid" value="<%- __tData._uid %>" />
                        <!-- form fields -->
                        <div class="row">
                            <div class="col-md-6">
                                <!-- First_Name -->
                                <x-lw.input-field type="text" id="lwFirstNameEditField" data-form-group-class="" :label="__tr('First Name')" value="<%- __tData.first_name %>" name="first_name"  required="true"/>
                                <!-- /First_Name -->
                            </div>
                            <div class="col-md-6">
                                <x-lw.input-field type="text" id="lwLastNameEditField" data-form-group-class="" :label="__tr('Last Name')" value="<%- __tData.last_name %>" name="last_name"  required="true"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <x-lw.input-field type="text" id="lwMobileNumberEditField" data-form-group-class="" :label="__tr('Mobile Number')" value="<%- __tData.mobile_number %>" name="mobile_number"  />
                                <h5><span class="text-muted">{{__tr("Mobile number should be with country code without 0 or +")}}</span></h5>
                            </div>
                            <div class="col-md-6">
                                <x-lw.input-field type="text" id="lwEmailEditField" data-form-group-class="" :label="__tr('Email')" value="<%- __tData.email %>" name="email"  />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <x-lw.input-field type="password" id="lwPasswordEditField" data-form-group-class="" :label="__tr('Password')"  name="password"/>
                            </div>
                            <div class="col-md-6">
                                <x-lw.input-field 
                                    type="selectize" 
                                    data-form-group-class="" 
                                    name="current_phone_number_id" 
                                    :label="__tr('Select Assigned Phone Number')" 
                                    data-selected="<%- __tData.vendor_user_details.access_number %>">

                                    <x-slot name="selectOptions">
                                        {{-- Default empty option --}}
                                        <option value="">{{ __tr('Select Phone Number') }}</option>

                                        @foreach (getVendorSettings('whatsapp_phone_numbers') as $whatsappPhoneNumber)
                                            <option 
                                                value="{{ $whatsappPhoneNumber['id'] }}"
                                                @if(($__tData['vendor_user_details']['access_number'] ?? '') == $whatsappPhoneNumber['id']) 
                                                    selected 
                                                @endif>
                                                {{ $whatsappPhoneNumber['display_phone_number'] }}
                                            </option>
                                        @endforeach
                                    </x-slot>
                                </x-lw.input-field>
                            </div>


                        </div>

                <!-- STATUS -->
                <div class="form-group pt-3">
                    <label for="lwIsMemberActiveEditField">{{  __tr('Status') }}</label>
                    <input type="checkbox" id="lwIsMemberActiveEditField" <%- __tData.status == 1 ? 'checked' : '' %> data-lw-plugin="lwSwitchery" name="status">
                </div>
                <!-- /STATUS -->
                <label class="h3 mt-3 mb-3">{{ __tr('Permissions') }}</label>
                <div class="row">
                    @foreach (getListOfPermissions() as $permissionKey => $permission)
                        <div class="col-sm-6 col-md-4 mb-4">
                            <div class="border rounded p-3 h-100 d-flex flex-column shadow-sm permission-card">
                                <div class="d-flex justify-content-between">
                                    <div class="me-2">
                                        <span class="badge bg-primary rounded-circle p-2 custom-badge">
                                            <i class="mdi mdi-lock fs-15  text-white"></i>
                                        </span>
                                    </div>
                                    <div>
                                        <input id="lwEdit{{ $permissionKey }}Permission" type="checkbox"
                                     <%- (__tData.vendor_user_details?.__data?.permissions?.{{ $permissionKey }} == 'allow') ? 'checked' : '' %> name="permissions[{{ $permissionKey }}]" 
                                     class="form-checkbox" data-lw-plugin="lwSwitchery">
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <h3 class="mb-1">{{ $permission['title'] }}</h3>
                                    @if (isset($permission['description']) and $permission['description'])
                                        <p class="text-muted small mb-0">{{ $permission['description'] }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                {{-- <fieldset>
                    <legend>{{  __tr('Permissions') }}</legend>
                    @foreach(getListOfPermissions() as $permissionKey => $permission)
                            <span class="d-block my-3">
                                <label for="lwEdit{{ $permissionKey }}Permission" class="flex items-center">
                                    <input id="lwEdit{{ $permissionKey }}Permission" type="checkbox"
                                     <%- (__tData.vendor_user_details?.__data?.permissions?.{{ $permissionKey }} == 'allow') ? 'checked' : '' %> name="permissions[{{ $permissionKey }}]" 
                                     class="form-checkbox" data-lw-plugin="lwSwitchery">
                                    <span class="ml-2 text-gray-600">{{ $permission['title'] }}</span>
                                </label>
                                @if (isset($permission['description']) and $permission['description'])
                                <p class="text-muted mt-1 fs-1">{{ $permission['description'] }}</p>
                                <hr class="my-1">
                                @endif
                            </span>
                    @endforeach
                </fieldset> --}}
                  
                     </script>
                <!-- form footer -->
                <div class="modal-footer">
                    <!-- Submit Button -->
                    <button type="submit" class="btn btn-primary">{{ __tr('Submit') }}</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __tr('Close') }}</button>
                </div>
            </x-lw.form>
            <!--/  Edit User Form -->
        </x-lw.modal>
        <!--/ Edit User Modal -->
        <div class="col-xl-12">
            <div
                id="lwUserList_table"
                data-url="{{ route('vendor.user.read.list') }}"
                is_btn="true"
                is_filter="true"
                is_column="first_name,last_name,username,email,mobile_number,created_at,status,action"
                is_column_name="First Name,Last Name,Username,Email,Mobile Number,Created At,Status,Action"
                data-btn-route-1="{{ route('vendor.user.read.update.data', ['userIdOrUid' => 'userIdOrUid']) }}, [Edit]"
                data-btn-route-2="{{ route('vendor.user.write.delete', ['userIdOrUid' => 'userIdOrUid']) }}, [Delete]"
                data-btn-route-3="{{ route('vendor.user.write.login_as', ['userIdOrUid' => 'userIdOrUid']) }}, [Login as]"
                data-current-userid="{{ getUserUid() }}"
            ></div>
            {{-- <x-lw.datatable id="lwUserList" class="fulll-table-border" :url="route('vendor.user.read.list')">
                <th data-orderable="true" data-name="first_name">{{ __tr('First Name') }}</th>
                <th data-orderable="true" data-name="last_name">{{ __tr('Last Name') }}</th>
                <th data-orderable="true" data-name="username">{{ __tr('Username') }}</th>
                <th data-orderable="true" data-name="email">{{ __tr('Email') }}</th>
                <th data-orderable="true" data-name="mobile_number">{{ __tr('Mobile Number') }}</th>
                <th data-orderable="true" data-name="created_at">{{ __tr('Created At') }}</th>
                <th data-orderable="true" data-template="#userStatusColumnTemplate">{{ __tr('Status') }}</th>
                <th data-template="#userActionColumnTemplate" name="null">{{ __tr('Action') }}</th>
            </x-lw.datatable> --}}
        </div>
        <script type="text/template" id="userStatusColumnTemplate">
            <% if(__tData.status === 'Active') { %>
                <span class="badge badge-success"><%= __tData.status %></span>
            <% } else { %>
                <span class="badge badge-danger"><%= __tData.status %></span>
            <% } %>
        </script>
        <!-- action template -->
        <script type="text/template" id="userActionColumnTemplate">
            <a data-pre-callback="appFuncs.clearContainer" title="{!! __tr('Edit User & Permissions') !!}" class="lw-btn btn btn-sm btn-default lw-ajax-link-action" data-response-template="#lwEditUserBody" href="<%= __Utils.apiURL("{{ route('vendor.user.read.update.data', [ 'userIdOrUid']) }}", {'userIdOrUid': __tData._uid}) %>"  data-toggle="modal" data-target="#lwEditUser"><i class="mdi mdi-pencil-box-multiple-outline fs-15 "></i> {!! __tr('Edit User & Permissions') !!}</a>
<!--  Delete Action -->
<a data-method="post" href="<%= __Utils.apiURL("{{ route('vendor.user.write.delete', [ 'userIdOrUid']) }}", {'userIdOrUid': __tData._uid}) %>" class="btn btn-default btn-sm lw-ajax-link-action" data-confirm="#lwDeleteUser-template" title="{{ __tr('Delete') }}" data-callback-params="{{ json_encode(['datatableId' => '#lwUserList']) }}" data-callback="appFuncs.modelSuccessCallback"><i class="mdi mdi-trash-can fs-15 "></i></a>
{{-- login as  --}}
<!-- login as button -->

<% if(__tData.status=='Active') { %>
<% if(__tData._uid != '{{ getUserUid() }}') { %>
<a data-method="post" href="<%= __Utils.apiURL("{{ route('vendor.user.write.login_as', [ 'userIdOrUid']) }}", {'userIdOrUid': __tData._uid}) %>" class="btn btn-primary btn-sm lw-ajax-link-action" data-confirm="#lwLoginAs-template" title="{{ __tr('Login as') }}"><i class="mdi mdi-login fs-15"></i> {{  __tr('Login as') }}</a>
<% } %>
<% } %>
<!-- /login as button -->

    </script>
        <!-- /action template -->

        <!-- User delete template -->
        <script type="text/template" id="lwDeleteUser-template">
            <h2>{{ __tr('Are You Sure!') }}</h2>
            <p>{{ __tr('You want to delete this User?') }}</p>
    </script>
        <!-- /User delete template -->
        <script type="text/template" id="lwLoginAs-template">
            <h2>{{ __tr('Are You Sure!') }}</h2>
        <p>{{ __tr('You want login to this user account?') }}</p>
</script>
    </div>
</div>
@push('appScripts')
    <script>
        window.appFuncs = window.appFuncs || {};
        appFuncs.modelSuccessCallback = function(responseData, callbackParams) {
            if (responseData && responseData.reaction == 1) {

                if (typeof callbackParams === "string") {
                    try {
                        callbackParams = JSON.parse(callbackParams);
                    } catch (e) {
                        callbackParams = {};
                    }
                }

                if (callbackParams) {
                    if (callbackParams.modalId) {
                        $(callbackParams.modalId).modal('hide');
                    }                               
                }

                if (responseData.data && responseData.data.message) {
                    const tableElement = document.getElementById('lwUserList_table');
                    if (tableElement) {
                        if (window.__lwUserList_tableReload) {
                            window.__lwUserList_tableReload();
                        }
                    }
                }
            }
        };
    </script>
@endpush
@viteReactRefresh
@vite('resources/js/datatable.jsx')
@endsection()