@extends('tenant.layouts.master')

@section('style')
    <link rel="stylesheet" href="{{ asset('css/employees/edit.css') }}">
    <link rel="stylesheet" href="{{ asset('css/layouts/tabs.css') }}">
@endsection

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.general_settings') =>route('tenant.settings.general.show-page', ['type' => 'company-information']),
            __('breadcrumb.users') => route('tenant.settings.general.employees.index'),
            __('settings/general/employees/create.add_new_account') => '#',
        ],
    ])
@endsection

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

@section('content')
    <div class="inner-content-layout form-bg-color p-4 rounded-form">
        <div class="col-10 position-relative">
            <x-tenant.shared.backward-component :direct-to="__('breadcrumb.users')" link="/settings/general/employees" />
            <h4 class="mb-4">@lang('settings/general/employees/create.add_new_account')</h4>

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

                {{-- Edit General Employee Info --}}
                <div class="row">
                    <div class="col-md-3">
                        <div class="mb-2">
                            <label for="full_name" class="rs"> @lang('settings/general/employees/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/general/employees/create.user_name') </label>
                            <label><small> @lang('settings/general/employees/create.it_will_enable_access_to_the_system')</small></label>
                            <input type="text" class="form-control" name="user_name" id="user_name"
                                placeholder="{{ __('settings/general/employees/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/general/employees/create.email')</label>
                            <input type="text" class="form-control" name="email" id="email"
                                placeholder="{{ __('settings/general/employees/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/general/employees/create.phone')</label>
                            <input type="text" class="form-control" name="phone" id="phone"
                                placeholder="{{ __('settings/general/employees/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/general/employees/create.password')</label>
                            <input type="password" class="form-control" name="password" id="password"
                                placeholder="{{ __('settings/general/employees/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/general/employees/create.password_conformation')</label>
                            <input type="password" class="form-control" name="password_confirmation"
                                id="password_confirmation"
                                placeholder="{{ __('settings/general/employees/create.password_conformation') }} "
                                required>
                            <span class="errMsg2 text-danger"></span>
                        </div>
                    </div>
                </div>

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

                    <div class="general-permissions-layout" style="display: none;">
                        @php
                            $permissions_resources = [
                                [
                                    'code' => 'branches',
                                    'label' => 'branch',
                                    'name' => __('settings/general/employees/create.branches'),
                                    'items' => $branches,
                                ],
                                [
                                    'code' => 'categories',
                                    'label' => 'category',
                                    'name' => __('settings/general/employees/create.families'),
                                    'items' => $categories,
                                ],
                                [
                                    'code' => 'suppliers',
                                    'label' => 'supplier',
                                    'name' => __('settings/general/employees/create.suppliers'),
                                    'items' => $suppliers,
                                ],
                                [
                                    'code' => 'classifications',
                                    'label' => 'classification',
                                    'name' => __('settings/general/employees/create.general_items_categories'),
                                    'items' => $classifications,
                                ],
                            ];
                        @endphp

                        <ul class="nav nav-pills mb-3 justify-content-center general-permissions-names" id="pills-tab"
                            role="tablist">
                            <li class="nav-item">
                                <label class="nav-link active" data-filter="all" data-bs-toggle="pill">
                                    @lang('settings/general/employees/create.all_permissions')
                                </label>
                            </li>

                            @foreach ($permissions_resources as $permissions_resource)
                                <li class="nav-item">
                                    <span data-filter=".resource-{{ $permissions_resource['code'] }}" data-bs-toggle="pill"
                                        class="module-name-label btn nav-link">{{ $permissions_resource['name'] }}</span>
                                </li>
                            @endforeach
                        </ul>

                        <div class="general-permissions-container col m-auto">
                            @foreach ($permissions_resources as $permissions_resource)
                                <div class="resources-layout mb-4 mix resource-{{ $permissions_resource['code'] }}"
                                    data-resource-code="{{ $permissions_resource['code'] }}">
                                    <h5 class="my-3 text-wrap">{{ $permissions_resource['name'] }}</h5>
                                    @if ($permissions_resource['code'] === 'suppliers')
                                        <ul class="nav nav-tabs" id="myTabs" role="tablist">
                                            <li class="nav-item" data-filter="all" role="presentation">
                                                <a class="nav-link active" id="tab-all" data-bs-toggle="tab"
                                                    href="#tab-content-all" role="tab"
                                                    aria-controls="tab-content-all" aria-selected="true">
                                                    @lang('settings/general/employees/create.all')</th>
                                                </a>
                                            </li>
                                            @foreach ($receivable_types as $index => $receivable_type)
                                                <li class="nav-item" data-filter="{{ $receivable_type->id }}"
                                                    role="presentation">
                                                    <a class="nav-link {{ $loop->first ? '' : '' }}"
                                                        id="tab-{{ $receivable_type->id }}" data-bs-toggle="tab"
                                                        href="#tab-content-{{ $receivable_type->id }}" role="tab"
                                                        aria-controls="tab-content-{{ $receivable_type->id }}"
                                                        aria-selected="false">
                                                        {{ $receivable_type->name }}
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @endif
                                    <table class="table table-bordered table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <label for="all-resources">@lang('settings/general/employees/create.all')</label>
                                                    <input type="checkbox" name="{{ $permissions_resource['code'] }}"
                                                        class="select-all-resources-btn disabled-search"
                                                        id="all-{{ $permissions_resource['code'] }}" checked>
                                                </th>
                                                <th>@lang('settings/general/employees/create.section')</th>
                                            </tr>
                                        </thead>
                                        <tbody id="supplier-table-body">
                                            @foreach ($permissions_resource['items'] as $item)
                                                <tr class="supplier-row"
                                                    data-receivable-type="{{ $item->receivable_type_id }}">
                                                    <td>
                                                        <input type="checkbox"
                                                            name="{{ $permissions_resource['label'] }}-{{ $item->id }}"
                                                            class="resource-checkbox"
                                                            value="{{ $permissions_resource['label'] }}-{{ $item->id }}"
                                                            checked>
                                                    </td>
                                                    <td class="supplier-name">{{ $item->name }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>


                {{-- Edit Permissions Section --}}
                <div class="mt-4">
                    <div class="d-flex">
                        <h5> @lang('settings/general/employees/create.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" style="display: none;">
                        <ul class="nav nav-pills mb-3 justify-content-center permissions-names" id="pills-tab"
                            role="tablist">
                            <li class="nav-item">
                                <label class="nav-link active" data-filter="all" data-bs-toggle="pill">
                                    @lang('settings/general/employees/create.all_permissions')
                                </label>
                            </li>
                            @foreach ($modules as $module)
                                <li class="nav-item">
                                    <span data-filter=".sections-{{ $module->code }}" data-bs-toggle="pill"
                                        class="module-name-label btn nav-link">{{ $module->name }}</span>
                                </li>
                            @endforeach
                        </ul>

                        <div class="modules-container col m-auto">
                            @foreach ($modules as $module)
                                <div class="module-layout mb-4 mix sections-{{ $module->code }}">
                                    <h5 class="my-3 text-wrap">{{ $module->name }}</h5>

                                    {{-- Sections Of Module - Table --}}
                                    <div class="sections-layout">
                                        <table class="table table-bordered table-striped table-hover">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <label
                                                            for="all-sections-{{ $module->code }}">@lang('general.all')</label>
                                                        <input type="checkbox" name="{{ $module->code }}"
                                                            class="select-all-sections-btn disabled-search"
                                                            id="all-sections-{{ $module->code }}" checked>
                                                    </th>
                                                    <th>@lang('settings/general/employees/create.section')</th>
                                                    <th>@lang('settings/general/employees/create.operations')</th>
                                                </tr>
                                            </thead>

                                            <tbody>
                                                @foreach ($module->available_sections as $section)
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" name="sections-{{ $module->code }}[]"
                                                                id="section-{{ $section->id }}" class="section-checkbox"
                                                                value="{{ $section->code }}" checked>
                                                        </td>
                                                        <td>{{ $section->name }}</td>
                                                        <td>
                                                            {{-- Functions Of Section --}}
                                                            <div class="functions-layout d-flex align-items-center">
                                                                <label
                                                                    for="all-functions-{{ $module->code . '-' . $section->code }}"
                                                                    class="select-all-functions mx-4 btn"
                                                                    title="تحديد/الغاء تحديد الكل">
                                                                    @lang('settings/general/employees/create.all')</label>
                                                                <input type="checkbox"
                                                                    id="all-functions-{{ $module->code . '-' . $section->code }}"
                                                                    class="btn select-all-functions-btn mx-1 d-none"
                                                                    checked>

                                                                <div class="d-flex flex-wrap">
                                                                    @foreach ($section->functions as $function)
                                                                        <div class="code-function mx-1">
                                                                            <input type="checkbox"
                                                                                name="functions-{{ $module->code . '-' . $section->code }}[]"
                                                                                id="function-{{ $function->id }}"
                                                                                class="function-checkbox"
                                                                                value="{{ $function->code }}" checked>
                                                                            <label
                                                                                for="function-{{ $function->id }}">{{ $function->name }}</label>
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="text-center">
                    <button class="btn orange-btn">@lang('settings/general/employees/create.add')</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('prepend-script')
    <script src="{{ asset('js/libraries/mixitup.min.js') }}"></script>
@endpush

@push('script')
    <script src="{{ asset('js/employees/edit.js') }}"></script>
    <script type="module">
        import {
            confirmAndSubmit
        } from '/tenancy/assets/js/helpers.js';

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

            $(document).on('click', '.nav-item', function() {
                let filter = $(this).data("filter");
                let resourceCode = $(this).closest('.resources-layout').data('resource-code');

                if (resourceCode === 'suppliers') {
                    if (filter === "all") {
                        $(this).closest('.resources-layout').find(".supplier-row").show();
                    } else {
                        $(this).closest('.resources-layout').find(".supplier-row").each(function() {
                            let receivableType = $(this).data("receivable-type");
                            $(this).toggle(receivableType == filter);
                        });
                    }
                }
            });
        });
    </script>
@endpush