@extends('main')
@section('body')
    <div class="container my-0 my-md-5">
        <div class="row">
            <div class="col-12">
                <div class="mb-3">
                    <h3 class="mb-1 fw-bold">{!! __("universal.page.admin_user_group.title") !!}</h3>
                    <p>{!!__("universal.page.admin_user_group.text") !!}</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="border-bottom pb-1 mb-2">
                    <h5 class="mb-1"><i class="fa-solid fa-user-group icon-design-headline me-2"></i>{!! __("universal.page.admin_user_group_name.title") !!}</h5>
                </div>
                <p>
                    {{__("universal.page.admin_user_group_name.text")}}
                </p>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs">
                    @foreach($groups AS $group)
                        <li class="nav-item">
                            <a class="nav-link {{(session("language") == $group->languageCode) ? "active" : ""}}" data-bs-toggle="tab" href="{{"#custom-tabs-".$group->languageCode."-tab"}}">{{__("app.available_languages.".$group->languageCode)}}</a>
                        </li>
                    @endforeach
                </ul>
                <!-- Tab panes -->
                <div class="tab-content py-3">
                    @foreach($groups AS $group)
                        <div class="tab-pane container {{(session("language") == $group->languageCode) ? "active" : ""}}" id="{{"custom-tabs-".$group->languageCode."-tab"}}">
                            <div class="row">
                                <div class="col-12 col-md-6">
                                    @component("components.inputs.input", ["id" => "group_name_".$group->languageCode, "name" => "group_name", "label" => __("universal.name"), "value" => $group->name ?? ""])
                                    @endcomponent
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-12">
                                    @component("components.inputs.textarea", ["id" => "group_description_".$group->languageCode, "name" => "group_description", "label" => __("universal.description"), "value" => $group->description ?? "", "rows" => 5])
                                    @endcomponent
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-12 text-end">
                                    @component("components.links.link", [
                                        "title" => __("universal.link.back"),
                                        "url" => "/admin/groups",
                                        "linkClass" => "btn btn-back",
                                        "style" => "min-width: 8em;"
                                    ])
                                    @endcomponent
                                    @component("components.buttons.button", [
                                         "id" => "btn_change_group_description_".$group->languageCode,
                                         "name" => "btn_change_group_description",
                                         "value" => $group->languageCode,
                                         "title" => __("universal.button.save"),
                                         "buttonClass" => "btn-success",
                                         "style" => "min-width: 8em;"
                                     ])
                                    @endcomponent
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        @if(empty($systemGroup))
            <div class="row">
                <div class="col-12">
                    <div class="border-bottom pb-1 mb-2">
                        <h5 class="mb-1"><i class="fa-solid fa-link icon-design-headline me-2"></i>{!! __("universal.page.admin_user_group_assignment.title") !!}</h5>
                    </div>
                    <p>
                        {{__("universal.page.admin_user_group_assignment.text")}}
                    </p>
                    <div class="row">
                        <div class="col-12">
                            @component("components.checkboxes.checkbox", ["id" => "default_group", "label" => __("universal.default_group"),"name" => "default_group", "value" => 1, "checked" => !empty($defaultGroup) ? "checked" : ""])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row p-2 mb-4">
                        <div class="col-12 text-end">
                            @component("components.links.link", [
                                "title" => __("universal.link.back"),
                                "url" => "/admin/groups",
                                "linkClass" => "btn btn-back",
                                "style" => "min-width: 8em;"
                            ])
                            @endcomponent
                            @component("components.buttons.button", [
                                 "id" => "btn_change_default_status",
                                 "title" => __("universal.button.save"),
                                 "buttonClass" => "btn-success",
                                 "style" => "min-width: 8em;"
                             ])
                            @endcomponent
                        </div>
                    </div>
                </div>
            </div>
        @endif
        <div class="row">
            <div class="col-12">
                <div class="border-bottom pb-1 mb-2">
                    <h5 class="mb-1"><i class="fa-solid fa-door-open icon-design-headline me-2"></i>{!! __("universal.page.admin_user_group_permissions.title") !!}</h5>
                </div>
                <p>
                    {{__("universal.page.admin_user_group_permissions.text")}}
                </p>
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive-sm">
                            <table id="table_group_permissions" class="table table-striped table-sm w-100">
                                <thead>
                                <tr>
                                    <th>{{__("universal.description")}}</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @if(!empty($permissions))
                                    @foreach($permissions AS $permission)
                                        <tr>
                                            <td>
                                                {{$permission->description ?? ""}}
                                            </td>
                                            <td>
                                                @component("components.checkboxes.checkbox", ["id" => $permission->permissionId, "name" => "permissions", "value" => $permission->permissionId, "checked" => $permission->checked])
                                                @endcomponent
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="row p-2">
                    <div class="col-12 text-end">
                        @component("components.links.link", [
                            "title" => __("universal.link.back"),
                            "url" => "/admin/groups",
                            "linkClass" => "btn btn-back",
                            "style" => "min-width: 8em;"
                        ])
                        @endcomponent
                        @component("components.buttons.button", [
                             "id" => "btn_change_group_permissions",
                             "title" => __("universal.button.save"),
                             "buttonClass" => "btn-success",
                             "style" => "min-width: 8em;"
                         ])
                        @endcomponent
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection