@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.general_settings') => '#',
            __('breadcrumb.pos_accounts') => route('tenant.settings.pos.users.index'),
            __('breadcrumb.add_new') => '#',
        ],
    ])
@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.user_accounts')" link="/settings/pos/users" />
            <h4 class="mb-4">@lang('settings/pos/users/create.add_new_account')</h4>

            <form action="{{ route('tenant.settings.pos.users.store') }}" method="post" id="addNewAccount">
                @csrf

                {{-- 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/create.full_name')</label>
                            <input type="text" class="form-control" name="full_name" id="full_name"
                                placeholder="{{__('settings/general/employees/create.employee_or_account_name')}}" value="{{ request()->old('full_name') }}" required>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="mb-2">
                            <label for="user_name" class="rs">@lang('settings/pos/users/create.user_name')</label>
                            <label><small>@lang('settings/pos/users/create.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/create.user_name')}}" value="{{ request()->old('user_name') }}" required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-2">
                            <label for="email" class="rs">@lang('settings/pos/users/create.email')</label>
                            <input type="text" class="form-control" name="email" id="email" placeholder="{{__('settings/pos/users/create.email')}}"
                                value="{{ request()->old('email') }}" required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-2">
                            <label for="phone" class="rs">@lang('settings/pos/users/create.phone')</label>
                            <input type="text" class="form-control" name="phone" id="phone"
                                placeholder="{{__('settings/pos/users/create.phone')}}" value="{{ request()->old('phone') }}" required>
                        </div>
                    </div>

                    <div class="col-md-5">
                        <div class="mb-2">
                            <label for="password" class="rs">@lang('settings/pos/users/create.password')</label>
                            <input type="password" class="form-control" name="password" id="password"
                                placeholder="{{__('settings/pos/users/create.password')}}" required>
                            <span class="errMsg text-danger"></span>
                        </div>

                    </div>
                    <div class="col-md-3">
                        <div class="mb-2">
                            <label for="re_password" class="rs">@lang('settings/pos/users/create.password_conformation')</label>
                            <input type="password" class="form-control" name="password_confirmation"
                                id="password_confirmation" placeholder="{{__('settings/pos/users/create.password_conformation')}}" required>
                            <span class="errMsg2 text-danger"></span>
                        </div>
                    </div>
                </div>

                {{-- Edit Permissions Section --}}
                <div class="mt-4">
                    <div class="d-flex">
                        <h5>@lang('settings/pos/users/create.all_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)
                            <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/create.all')</label>
                                                <input type="checkbox" name="select_all_{{ $permissions_resource['code'] }}"
                                                    class="select-all-sections-btn disabled-search" id="all-{{ $permissions_resource['code'] }}"
                                                    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 }}"
                                                        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('general.add')</button>
                </div>
            </form>
        </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';

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