@extends('tenant.layouts.master')

@section('style')
    <link rel="stylesheet" href="{{ asset('css/pos/users-functions.css') }}">
@endsection

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.pos_settings') => '#',
            __('breadcrumb.pos_accounts') => route('tenant.settings.pos.users.index'),
            __('breadcrumb.edit_account') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'settings.pos.users'])
@endsection

@section('content')
    <div class="row justify-content-center py-5 bg-white">
        <div class="col-10 position-relative">
            <x-tenant.shared.backward-component :direct-to="__('breadcrumb.users')" link="/settings/pos/users" />

            <div>
                <h4 class="mb-4">@lang('settings/pos/users/edit.update_account') ( {{ $user->user_name }} )</h4>
                <form action="{{ route('tenant.settings.pos.users.update', ['user' => $user->id]) }}"
                    method="post" id="updateAccount">
                    @csrf
                    @method('put')

                    {{-- Edit Pos User Info --}}
                    <div class="row">
                        <div class="col-md-3">
                            <div class="mb-2">
                                <label for="full_name" class="rs"> @lang('settings/pos/users/edit.full_name')</label>
                                <input type="text" class="form-control pl-2" name="full_name" id="full_name"
                                    placeholder="{{__('settings/pos/users/edit.full_name')}}" value="{{ $user->full_name }}" required>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="mb-2">
                                <label for="user_name" class="rs">@lang('settings/pos/users/edit.user_name')</label>
                                <label><small>@lang('settings/pos/users/edit.it_will_enable_access_to_the_system')</small></label>
                                <input type="text" class="form-control" name="user_name" id="user_name"
                                    placeholder="{{__('settings/pos/users/edit.user_name')}}" value="{{ $user->user_name }}" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-2">
                                <label for="email" class="rs">@lang('settings/pos/users/edit.email')</label>
                                <input type="text" class="form-control" name="email" id="email"
                                    placeholder="{{__('settings/pos/users/edit.email')}}" value="{{ $user->email }}" required>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="mb-2">
                                <label for="phone" class="rs">@lang('settings/pos/users/edit.phone')</label>
                                <input type="text" class="form-control" name="phone" id="phone"
                                    placeholder="{{__('settings/pos/users/edit.phone')}}" value="{{ $user->phone }}" required>
                            </div>
                        </div>
                    </div>

                    {{-- Edit Permissions Section --}}
                    <div class="mt-4">
                        <div class="d-flex">
                            <h5> @lang('settings/pos/users/edit.select_permissions')</h5>
                            <button type="button" class="btn btn-sm orange-btn mx-2 toggle-permissions-btn"
                                data-nextStatus="down">
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>

                        <div class="permissions-layout">
                            @php
                            $permissions_resources = [
                                [
                                    'code' => 'branches',
                                    'label' => 'branch',
                                    'name' => __('settings/general/employees/create.branches'),
                                    'input_name' => 'selected_branches[]',
                                    'items' => $branches,
                                ],
                                [
                                    'code' => 'operations',
                                    'label' => 'operation',
                                    'name' => __('settings/pos/users/create.operations'),
                                    'input_name' => 'selected_functions[]',
                                    'items' => $pos_desktop_functions,
                                ],
                            ];
                            @endphp
                            <div class="col m-auto">
                                @foreach ($permissions_resources as $permissions_resource)
                                @php
                                    if ($permissions_resource['label'] === 'branch') {
                                        $count_permissions = count($branch_permissions);
                                    } else {
                                        $count_permissions = count($selected_permissions) - count($branch_permissions);
                                    }
                                @endphp
                                <div class="mb-4">
                                    <table class="table table-bordered table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <label for="all-{{ $permissions_resource['code'] }}">@lang('settings/pos/users/edit.all')</label>
                                                    <input type="checkbox" name="select_all_{{ $permissions_resource['code'] }}"
                                                        class="select-all-sections-btn disabled-search" id="all-{{ $permissions_resource['code'] }}"
                                                        {{ ($count_permissions) == count($permissions_resource['items']) ? 'checked' : '' }}>
                                                </th>
                                                <th>{{ $permissions_resource['name'] }}</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            @foreach ($permissions_resource['items'] as $item)
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" name="{{ $permissions_resource['input_name'] }}"
                                                            id="function-{{ $permissions_resource['code'] }}-{{ $item->id }}"
                                                            class="function-checkbox" value="{{ $permissions_resource['label'] === 'branch' ? $item->id : $item->code }}"
                                                            {{ in_array(($permissions_resource['label'] === 'branch' ? 'branch-' . $item->id : 'pos-desktopApp-' . $item->code),
                                                                $selected_permissions) ? 'checked' : '' }}>
                                                    </td>
                                                    <td>{{ $item->name }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div class="text-center">
                        <button class="btn orange-btn">@lang('settings/pos/users/edit.edit')</button>
                    </div>
                </form>
            </div>

            {{-- Change Password --}}
            <div class="mt-4">
                <hr>
                <h4>@lang('settings/pos/users/edit.change_password')</h4>

                <form
                    action="{{ route('tenant.settings.pos.users.changePassword', ['user' => $user->id]) }}"
                    method="post" id="changePassword">
                    @csrf

                    <div class="row align-items-end">
                        <div class="col">
                            <label for="password" class="rs">@lang('settings/pos/users/edit.new_password')</label>
                            <input type="password" name="password" id="password" class="form-control" required>
                        </div>

                        <div class="col">
                            <label for="password_confirmation" class="rs">@lang('settings/pos/users/edit.password_conformation')</label>
                            <input type="password" name="password_confirmation" id="password_confirmation"
                                class="form-control" required>
                        </div>

                        <div class="col">
                            <button class="btn orange-btn">@lang('settings/pos/users/edit.change')</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="{{ asset('js/pos/users/functions.js') }}"></script>

    <script type="module">
        import {
            confirmAndSubmit
        } from '/tenancy/assets/js/helpers.js';

        $(() => {
            $('#updateAccount').on('submit', function(e) {
                e.preventDefault();
                confirmAndSubmit('updateAccount', {
                    type: 'green'
                });
            });

            $('#changePassword').on('submit', function(e) {
                e.preventDefault();
                confirmAndSubmit('changePassword', {
                    type: 'green'
                });
            });
        });
    </script>
@endpush