@extends('layouts.app')

@section('title', trans('system_settings.page.title'))

@push('styles')
    <style>
        table#holiday-table tbody tr.tr-bg-danger {
            background-color: #fceae9 !important;
        }

        #holiday-table tr.tr-bg-danger td,
        #holiday-table tr.tr-bg-danger td span,
        #holiday-table tr.tr-bg-danger td a em {
            color: #c3463c !important;
        }

        .delete-button-alignment {
            margin-bottom: 0px;
        }
    </style>
@endpush

@section('content')
    <div class="nk-content-inner">
        <div class="nk-content-body">
            <div class="nk-block">
                <div class="card card-bordered">
                    <div class="card-aside-wrap">

                        <div class="card-aside card-aside-left user-aside toggle-slide toggle-slide-left toggle-break-lg toggle-screen-lg" data-content="userAside"
                            data-toggle-screen="lg" data-toggle-overlay="true">
                            <div class="card-inner-group" data-simplebar="init">
                                <div class="simplebar-wrapper" style="margin: 0px;">
                                    <div class="simplebar-height-auto-observer-wrapper">
                                        <div class="simplebar-height-auto-observer"></div>
                                    </div>
                                    <div class="simplebar-mask">
                                        <div class="simplebar-offset" style="right: 0px; bottom: 0px;">
                                            <div class="simplebar-content-wrapper" tabindex="0" role="region" aria-label="scrollable content"
                                                style="height: auto; overflow: hidden;">

                                                <div class="card-inner">
                                                    <div class="user-card">
                                                        <div class="user-avatar auth-avatar">{!! getAvatarHtml() !!}</div>
                                                        <div class="user-info">
                                                            <span class="lead-text auth-name">{{ auth()->user()->full_name }}</span>
                                                            <span class="sub-text">{{ auth()->user()->email }}</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="card-inner p-0">
                                                    <ul class="link-list-menu">
                                                        @if (auth()->user()->can('mail_setting.view'))
                                                            <li>
                                                                <a class="nav-link active" data-toggle="tab" href="#mail-settings-tab" role="tab">
                                                                    <em class="icon ni ni-mail-fill"></em>
                                                                    <span>@lang('system_settings.page.sidebar.mail_settings')</span>
                                                                </a>
                                                            </li>
                                                        @endif
                                                    </ul>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="simplebar-placeholder" style="width: auto; height: 504px;"></div>
                                </div>
                                <div class="simplebar-track simplebar-horizontal" style="visibility: hidden;">
                                    <div class="simplebar-scrollbar simplebar-visible" style="width: 0px; display: none;"></div>
                                </div>
                                <div class="simplebar-track simplebar-vertical" style="visibility: hidden;">
                                    <div class="simplebar-scrollbar simplebar-visible" style="height: 0px; display: none;"></div>
                                </div>
                            </div>
                        </div>

                        <div class="card-inner card-inner-lg">

                            <div class="tab-content">
                                @if (auth()->user()->can('mail_setting.view'))
                                    <div class="tab-pane fade show active" id="mail-settings-tab" role="tabpanel"></div>
                                @endif
                            </div>
                        </div>

                    </div><!-- .card-aside-wrap -->
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $('.nav-link').on('click', function() {
            $('.nav-link').removeClass('active');
            $('.tab-pane').removeClass('active');
        });

        let spinner = `<div class="d-flex justify-content-center mt-5">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden"></span>
                    </div>
                </div>`;
    </script>

    @if (auth()->user()->can('mail_setting.view'))
        <script src="{{ asset('assets/js/settings/mail.js') }}"></script>
    @endif
@endpush