@extends('layouts/layoutMaster')

@section('title', 'Security')

@section('page-style')
    <style>
        .security-icon {
            width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
        }
    </style>
@endsection

@section('content')
    {{-- Page Header: Title + Breadcrumb --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h4 class="fw-bold mb-1">Security</h4>
                    <p class="text-muted mb-0">Manage your password, two-factor authentication, and active sessions.</p>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Profile</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Security</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    {{-- Nav Pills --}}
    @include('profile._nav', ['activePage' => 'security'])

    {{-- ============================================================ --}}
    {{-- Change Password --}}
    {{-- ============================================================ --}}
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title mb-0">Change Password</h5>
            <small class="text-muted">Update your password regularly to keep your account secure</small>
        </div>
        <div class="card-body">
            <form onsubmit="return false;">
                <div class="row">
                    <div class="mb-3 col-md-6 form-password-toggle">
                        <label class="form-label" for="currentPassword">Current Password</label>
                        <div class="input-group input-group-merge">
                            <input class="form-control" type="password" id="currentPassword"
                                placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
                            <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="mb-3 col-md-6 form-password-toggle">
                        <label class="form-label" for="newPassword">New Password</label>
                        <div class="input-group input-group-merge">
                            <input class="form-control" type="password" id="newPassword"
                                placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
                            <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
                        </div>
                    </div>
                    <div class="mb-3 col-md-6 form-password-toggle">
                        <label class="form-label" for="confirmPassword">Confirm New Password</label>
                        <div class="input-group input-group-merge">
                            <input class="form-control" type="password" id="confirmPassword"
                                placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
                            <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
                        </div>
                    </div>
                </div>
                <div class="mb-3">
                    <h6 class="mb-2">Password Requirements:</h6>
                    <ul class="ps-3 mb-0">
                        <li class="mb-1 text-muted">Minimum 8 characters long — the more, the better</li>
                        <li class="mb-1 text-muted">At least one lowercase & one uppercase character</li>
                        <li class="text-muted">At least one number or symbol</li>
                    </ul>
                </div>
                <div class="text-end">
                    <button type="submit" class="btn btn-primary">
                        <i class="ti ti-device-floppy me-1"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- ============================================================ --}}
    {{-- Two-Factor Authentication --}}
    {{-- ============================================================ --}}
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title mb-0">Two-Factor Authentication</h5>
            <small class="text-muted">Add an extra layer of security to your account</small>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-start gap-3 mb-4 pb-4 border-bottom">
                <div class="security-icon bg-label-warning">
                    <i class="ti ti-shield-lock ti-md"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div>
                            <h6 class="mb-1">Authenticator App</h6>
                            <p class="mb-0 text-muted">Use an authenticator app to generate one-time codes.</p>
                        </div>
                        <span class="badge bg-label-secondary">Not configured</span>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-primary mt-2" data-bs-toggle="modal" data-bs-target="#authenticatorSetupModal">
                        <i class="ti ti-plus me-1"></i> Set Up
                    </button>
                </div>
            </div>

            <div class="d-flex align-items-start gap-3">
                <div class="security-icon bg-label-info">
                    <i class="ti ti-mail ti-md"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div>
                            <h6 class="mb-1">Email Verification</h6>
                            <p class="mb-0 text-muted">Receive a verification code to your email on login.</p>
                        </div>
                        <span class="badge bg-success">Enabled</span>
                    </div>
                    <small class="text-muted mt-1 d-block">Codes are sent to a]h***@salihin.com.my</small>
                </div>
            </div>
        </div>
    </div>

    {{-- ============================================================ --}}
    {{-- Connected Accounts (SSO) --}}
    {{-- ============================================================ --}}
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title mb-0">Connected Accounts</h5>
            <small class="text-muted">Manage your linked single sign-on (SSO) accounts</small>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom">
                <div class="d-flex align-items-center gap-3">
                    <div class="security-icon bg-label-danger">
                        <i class="ti ti-brand-google ti-md"></i>
                    </div>
                    <div>
                        <h6 class="mb-0">Google</h6>
                        <small class="text-muted">ahmad.razali@salihin.com.my</small>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge bg-success">Connected</span>
                    <button type="button" class="btn btn-sm btn-outline-danger">Disconnect</button>
                </div>
            </div>

            <div class="d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom">
                <div class="d-flex align-items-center gap-3">
                    <div class="security-icon bg-label-info">
                        <i class="ti ti-brand-windows ti-md"></i>
                    </div>
                    <div>
                        <h6 class="mb-0">Microsoft</h6>
                        <small class="text-muted">ahmad.razali@salihin.onmicrosoft.com</small>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge bg-success">Connected</span>
                    <button type="button" class="btn btn-sm btn-outline-danger">Disconnect</button>
                </div>
            </div>

            <div class="d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center gap-3">
                    <div class="security-icon bg-label-warning">
                        <i class="ti ti-database ti-md"></i>
                    </div>
                    <div>
                        <h6 class="mb-0">SPSERP</h6>
                        <small class="text-muted">Linked via ERP system</small>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge bg-success">Connected</span>
                </div>
            </div>
        </div>
    </div>

    {{-- ============================================================ --}}
    {{-- Recent Devices / Sessions --}}
    {{-- ============================================================ --}}
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <h5 class="card-title mb-0">Recent Devices</h5>
                <small class="text-muted">Devices that have logged into your account</small>
            </div>
            <button type="button" class="btn btn-sm btn-outline-danger">
                <i class="ti ti-logout me-1"></i> Sign Out All Other Sessions
            </button>
        </div>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-light">
                    <tr>
                        <th>Browser</th>
                        <th>Device</th>
                        <th>Location</th>
                        <th>Recent Activity</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                <i class="ti ti-brand-chrome me-2 text-danger"></i>
                                <span>Chrome 121</span>
                            </div>
                        </td>
                        <td>macOS Sonoma &middot; Desktop</td>
                        <td>Kuala Lumpur, MY</td>
                        <td>11 Feb 2026, 09:14 AM</td>
                        <td><span class="badge bg-success">Current session</span></td>
                    </tr>
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                <i class="ti ti-brand-edge me-2 text-info"></i>
                                <span>Edge 120</span>
                            </div>
                        </td>
                        <td>Windows 11 &middot; Desktop</td>
                        <td>Kuala Lumpur, MY</td>
                        <td>9 Feb 2026, 02:15 PM</td>
                        <td><span class="badge bg-secondary">Expired</span></td>
                    </tr>
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                <i class="ti ti-brand-safari me-2 text-primary"></i>
                                <span>Safari</span>
                            </div>
                        </td>
                        <td>iOS 17 &middot; iPhone 15</td>
                        <td>Petaling Jaya, MY</td>
                        <td>8 Feb 2026, 10:42 AM</td>
                        <td><span class="badge bg-secondary">Expired</span></td>
                    </tr>
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                <i class="ti ti-brand-firefox me-2 text-warning"></i>
                                <span>Firefox 122</span>
                            </div>
                        </td>
                        <td>Windows 11 &middot; Desktop</td>
                        <td>Kuala Lumpur, MY</td>
                        <td>7 Feb 2026, 09:00 AM</td>
                        <td><span class="badge bg-secondary">Expired</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    {{-- Authenticator Setup Modal --}}
    @include('profile._modal-authenticator-setup')
@endsection