@extends('tenant.layouts.master')

@section('style')
    <link rel="stylesheet" href="{{ asset('css/employees/edit.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'),
            __('breadcrumb.edit_account') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'settings.general.employees'])
@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/general/employees" />

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

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

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

                    {{-- Edit Permissions For Resources Section --}}
                    <div class="mt-4">
                        <div class="d-flex">
                            <h5> @lang('settings/general/employees/edit.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/edit.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'] }}">
                                        <h5 class="my-3 text-wrap">{{ $permissions_resource['name'] }}</h5>

                                        <table class="table table-bordered table-striped table-hover">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <label for="all-resources">@lang('settings/general/employees/edit.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/edit.section')</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($permissions_resource['items'] as $item)
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox"
                                                                name="{{ $permissions_resource['label'] }}-{{ $item->id }}"
                                                                class="resource-checkbox"
                                                                value="{{ $permissions_resource['label'] }}-{{ $item->id }}"
                                                                {{ $employee->hasPermissionTo("{$permissions_resource['label']}-{$item->id}") ? 'checked' : '' }}>
                                                        </td>
                                                        <td>{{ $item->name }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    {{-- Edit Permissions Section --}}
                    <div class="mt-4">
                        <div>
                            <div class="d-flex">
                                <h5> @lang('settings/general/employees/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" 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/edit.all_permissions')
                                        </label>
                                    </li>

                                    @foreach ($modules as $module)
                                        <li class="nav-item">
                                            <label for="module-{{ $module->id }}"
                                                data-filter=".sections-{{ $module->code }}" data-bs-toggle="pill"
                                                class="module-name-label btn nav-link">{{ $module->name }}</label>
                                            <input type="checkbox" name="modules[]" id="module-{{ $module->id }}"
                                                class="module-checkbox" value="{{ $module->code }}" checked
                                                style="visibility: hidden">
                                        </li>
                                    @endforeach
                                </ul>

                                <div class="modules-container col m-auto">
                                    @foreach ($modules as $module)
                                        <div class="module-layout mb-4 mix sections-{{ $module->code }}">
                                            {{-- Sections Of Module -Table --}}
                                            <div class="sections-layout">
                                                <h5 class="my-3 text-wrap">{{ $module->name }}</h5>
                                                <table class="table table-bordered table-striped table-hover ">
                                                    <thead>
                                                        <tr>
                                                            <th class="xs-td">
                                                                <label
                                                                    for="all-sections-{{ $module->code }}">@lang('settings/general/employees/edit.all')</label>
                                                                <input type="checkbox" name="{{ $module->code }}"
                                                                    class="select-all-sections-btn disabled-search"
                                                                    id="all-sections-{{ $module->code }}"
                                                                    {{ $employee->hasAllPermissions($module->permissions) ? 'checked' : '' }}>
                                                            </th>
                                                            <th class="sm-td">@lang('settings/general/employees/edit.section')</th>
                                                            <th class="xl-td">@lang('settings/general/employees/edit.operations')</th>
                                                        </tr>
                                                    </thead>

                                                    <tbody>
                                                        @foreach ($module->available_sections as $section)
                                                            <tr>
                                                                <td class="xs-td">
                                                                    <input type="checkbox"
                                                                        name="sections-{{ $module->code }}[]"
                                                                        id="section-{{ $section->id }}"
                                                                        class="section-checkbox"
                                                                        value="{{ $section->code }}"
                                                                        {{ $employee->hasPermissionTo($section->permission) ? 'checked' : '' }}>
                                                                </td>
                                                                <td class="sm-td">{{ $section->name }}</td>
                                                                <td class="xl-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"
                                                                            title="تحديد/الغاء تحديد الكل">
                                                                            @lang('settings/general/employees/edit.all')</label>
                                                                        <input type="checkbox"
                                                                            id="all-functions-{{ $module->code . '-' . $section->code }}"
                                                                            class="btn select-all-functions-btn mx-1 d-none"
                                                                            {{ $employee->hasAllPermissions($section->permissions) ? '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 }}"
                                                                                        {{ $employee->hasPermissionTo($function->permission) ? '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>

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

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

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

                    <div class="row align-items-end">
                        <div class="col">
                            <label for="password" class="rs">@lang('settings/general/employees/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/general/employees/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('general.change')</button>
                        </div>
                    </div>
                </form>
            </div>
        </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';

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

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