@extends('layouts.site')

@section('title', 'Panel Administratora - Ustawienia aplikacji')

@section('menu')
    @include('sites.admin.menu_admin')
@endsection

@section('content')
    <style>
        .app-settings-shell {
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
        }

        .app-settings-tab-nav .nav-link {
            font-weight: 600;
            color: #3b4652;
            background: #eef2f6;
            border: 1px solid #c8d2dd;
            border-bottom: none;
            border-radius: .55rem .55rem 0 0;
            margin-right: .35rem;
            padding: .55rem 1rem;
            transition: background-color .15s ease, color .15s ease, border-color .15s ease;
        }

        .app-settings-tab-nav .nav-link:hover,
        .app-settings-tab-nav .nav-link:focus {
            color: #1f2937;
            background: #dde5ee;
            border-color: #b8c4d1;
            text-decoration: none;
        }

        .app-settings-tab-nav .nav-link.active,
        .app-settings-tab-nav .show > .nav-link {
            color: #ffffff;
            background: #2f5f95;
            border-color: #2a5789 #2a5789 #2f5f95;
            font-weight: 700;
            box-shadow: none;
        }

        .app-settings-tab-nav .nav-link.active:hover,
        .app-settings-tab-nav .show > .nav-link:hover {
            color: #ffffff;
            background: #2a5789;
            border-color: #254f7e #254f7e #2a5789;
        }

        .app-settings-pane {
            margin-top: 1rem;
        }

        .app-settings-card {
            height: 100%;
        }

        .app-settings-card .card-body {
            padding: 1rem 1.1rem;
        }

        .app-settings-description p {
            margin-bottom: .65rem;
        }

        .app-settings-description ul {
            margin-bottom: 0;
            padding-left: 1.2rem;
        }

        .app-settings-radio-option {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: .55rem .2rem;
            margin-bottom: .15rem;
            background: transparent;
            border-bottom: 1px dashed #d9e4ef;
        }

        .app-settings-radio-option:last-child {
            margin-bottom: 0;
            border-bottom: none;
        }

        .app-settings-radio-group {
            border: 1px solid #d9e4ef;
            border-radius: .35rem;
            padding: .45rem .75rem;
            background: #fff;
        }

        .app-settings-radio-option input[type="radio"] {
            width: 18px;
            height: 18px;
            margin-left: 1rem;
            flex-shrink: 0;
        }

        .app-settings-radio-option label {
            margin: 5px 20px;
            color: #2f3b46;
        }

        .app-settings-submit-row {
            margin-top: auto;
            padding-top: 1rem;
            text-align: right;
        }

        .app-settings-future .btn {
            margin-right: .4rem;
            margin-bottom: .4rem;
        }

        @media (max-width: 1200px) {
            .app-settings-shell {
                max-width: 70%;
            }
        }

        @media (max-width: 768px) {
            .app-settings-shell {
                max-width: 100%;
            }
        }
    </style>

    <div class="tab-content_2">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="app-settings-shell">
                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <ul class="nav nav-tabs app-settings-tab-nav" id="appSettingsTabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="tab-2fa-link" data-toggle="tab" href="#tab-2fa" role="tab" aria-controls="tab-2fa" aria-selected="true">
                            2FA
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="tab-sms-link" data-toggle="tab" href="#tab-sms" role="tab" aria-controls="tab-sms" aria-selected="false">
                            Bramka SMS
                        </a>
                    </li>
                </ul>

                <div class="tab-content app-settings-pane" id="appSettingsTabContent">
                    <div class="tab-pane fade show active" id="tab-2fa" role="tabpanel" aria-labelledby="tab-2fa-link">
                        <div class="row">
                            <div class="col-lg-6 mb-3 mb-lg-0">
                                <div class="card app-settings-card">
                                    <div class="card-header font-weight-bold">Opis 2FA</div>
                                    <div class="card-body app-settings-description">
                                        <p><strong>2FA (Two-Factor Authentication)</strong> to dodatkowa warstwa zabezpieczenia logowania.</p>
                                        <p>Po wpisaniu hasla uzytkownik musi podac drugi skladnik, najczesciej kod z aplikacji TOTP.</p>
                                        <p>Dzieki temu przejecie samego hasla nie wystarcza do uzyskania dostepu do konta.</p>
                                        <p>Tryby polityki 2FA:</p>
                                        <ul>
                                            <li><strong>disabled</strong> - 2FA jest globalnie wylaczone.</li>
                                            <li><strong>optional</strong> - uzytkownik sam decyduje o wlaczeniu 2FA.</li>
                                            <li><strong>required</strong> - kazdy uzytkownik musi skonfigurowac 2FA.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="card app-settings-card">
                                    <div class="card-header font-weight-bold">Ustawienia 2FA</div>
                                    <div class="card-body d-flex flex-column">
                                        <form method="POST" action="{{ route('admin.app-settings.update') }}" class="d-flex flex-column h-100">
                                            @csrf

                                            <div class="form-group mb-0">
                                                <label class="d-block"><strong>Polityka 2FA</strong></label>

                                                <div class="app-settings-radio-group">
                                                    <div class="app-settings-radio-option">
                                                        <label for="two_factor_policy_disabled">disabled - 2FA wylaczone</label>
                                                        <input
                                                            type="radio"
                                                            id="two_factor_policy_disabled"
                                                            name="two_factor_policy"
                                                            value="disabled"
                                                            {{ $policy === 'disabled' ? 'checked' : '' }}
                                                            required
                                                        >
                                                    </div>

                                                    <div class="app-settings-radio-option">
                                                        <label for="two_factor_policy_optional">optional - 2FA dobrowolne</label>
                                                        <input
                                                            type="radio"
                                                            id="two_factor_policy_optional"
                                                            name="two_factor_policy"
                                                            value="optional"
                                                            {{ $policy === 'optional' ? 'checked' : '' }}
                                                        >
                                                    </div>

                                                    <div class="app-settings-radio-option">
                                                        <label for="two_factor_policy_required"><i>(zalecane)</i> required - 2FA obligatoryjne</label>
                                                        <input
                                                            type="radio"
                                                            id="two_factor_policy_required"
                                                            name="two_factor_policy"
                                                            value="required"
                                                            {{ $policy === 'required' ? 'checked' : '' }}
                                                        >
                                                    </div>
                                                </div>

                                                <small class="form-text text-muted mt-2">
                                                    Zmiana polityki wplywa na caly system.
                                                </small>
                                            </div>

                                            <div class="app-settings-submit-row">
                                                <button type="submit" class="btn btn-primary">Zapisz ustawienia</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="tab-sms" role="tabpanel" aria-labelledby="tab-sms-link">
                        <div class="row">
                            <div class="col-lg-6 mb-3 mb-lg-0">
                                <div class="card app-settings-card">
                                    <div class="card-header">Opis bramki SMS</div>
                                    <div class="card-body app-settings-description">
                                        <p><strong>Bramka SMS</strong> pozwoli w przyszlosci wysylac jednorazowe kody logowania na telefon.</p>
                                        <p>Docelowa integracja zostanie oparta o <strong>SMSAPI</strong>, ale na tym etapie funkcja jest przygotowana tylko architektonicznie.</p>
                                        <p>Po wdrozeniu SMS administrator bedzie mogl okreslic sposob wysylki, nadawce i parametry bezpieczenstwa kodow.</p>
                                        <p>Obecnie widoczne opcje sa zablokowane, aby zachowac spojny interfejs i gotowosc do rozbudowy.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="card app-settings-card">
                                    <div class="card-header">Ustawienia bramki SMS</div>
                                    <div class="card-body app-settings-future">
                                        <div class="mb-2">
                                            <span class="d-block mb-1 text-muted">Domyslna metoda 2FA:</span>
                                            <button type="button" class="btn btn-outline-secondary btn-sm" disabled>TOTP</button>
                                            <button type="button" class="btn btn-outline-secondary btn-sm" disabled>SMS</button>
                                        </div>

                                        <div class="mb-2">
                                            <span class="d-block mb-1 text-muted">Obsluga SMS:</span>
                                            <button type="button" class="btn btn-outline-secondary btn-sm" disabled>Wlacz obsluge SMS</button>
                                            <button type="button" class="btn btn-outline-secondary btn-sm" disabled>Wylacz obsluge SMS</button>
                                        </div>

                                        <div class="mb-2">
                                            <span class="d-block mb-1 text-muted">Konfiguracja bramki SMSAPI:</span>
                                            <button type="button" class="btn btn-outline-secondary btn-sm" disabled>Klucz API</button>
                                            <button type="button" class="btn btn-outline-secondary btn-sm" disabled>Nadpis nadawcy</button>
                                            <button type="button" class="btn btn-outline-secondary btn-sm" disabled>Zapisz konfiguracje SMS</button>
                                        </div>

                                        <button type="button" class="btn btn-primary mt-3" disabled>Zapisz ustawienia SMS</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('navbar')
    @include('sites.admin._navbar_m_admin_site')
    <i class="fas fa-chevron-right separator"></i>
    <span class="navbar_navigate" title="Ustawienia aplikacji">
        Ustawienia aplikacji
    </span>
@endsection