@extends('admin.layouts.app')
@section('style')
<link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/page-account-settings.css') }}" />
@endsection
@section('content')
<h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Account Settings /</span> Security</h4>

<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-pills flex-column flex-md-row mb-4">
            <li class="nav-item">
                <a class="nav-link" href="{{ route('admin.profile.setting') }}"><i class="ti-xs ti ti-users me-1"></i> Account</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="{{ route('admin.profile.security') }}"><i class="ti-xs ti ti-lock me-1"></i> Security</a>
            </li>
        </ul>
        <!-- Change Password -->
        <div class="card mb-4">
            <h5 class="card-header">Change Password</h5>
            <div class="card-body">
                <form id="formAccountSettings" method="POST" action="{{ route('admin.profile.change-password') }}">
                    @csrf
                    <div class="row">
                        <div class="mb-3 col-md-6 form-password-toggle">
                            <label class="form-label" for="current_password">Current Password</label>
                            <div class="input-group input-group-merge">
                                <input class="form-control @error('current_password') is-invalid @enderror" type="password" name="current_password" id="current_password" 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>
                                @error('current_password')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-md-6 form-password-toggle">
                            <label class="form-label" for="new_password">New Password</label>
                            <div class="input-group input-group-merge">
                                <input class="form-control @error('new_password') is-invalid @enderror" type="password" id="new_password" name="new_password" 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>
                                @error('new_password')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3 col-md-6 form-password-toggle">
                            <label class="form-label" for="new_password_confirmation">Confirm New Password</label>
                            <div class="input-group input-group-merge">
                                <input class="form-control @error('new_password_confirmation') is-invalid @enderror" type="password" name="new_password_confirmation" id="new_password_confirmation" 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>
                                @error('new_password_confirmation')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 mb-4">
                            <h6>Password Requirements:</h6>
                            <ul class="ps-3 mb-0">
                                <li class="mb-1">Minimum 8 characters long - the more, the better</li>
                            </ul>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-primary me-2">Save changes</button>
                            <button type="reset" class="btn btn-label-secondary">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--/ Change Password -->

        <!-- Recent Devices -->
        <div class="card mb-4">
            <h5 class="card-header">Recent Devices</h5>
            <div class="table-responsive">
                <table class="table border-top">
                    <thead class="table-light">
                        <tr>
                            <th class="text-truncate">Browser</th>
                            <th class="text-truncate">Location</th>
                            <th class="text-truncate">Recent Activities</th>
                        </tr>
                    </thead>
                    <tbody class="table-border-bottom-0">
                        @foreach ($admin->lastLogins as $key => $item)
                        <tr>
                            <td class="text-truncate">
                                @if(Str::contains($item->agent, "Postman"))
                                <img src="{{ asset('images/postman.webp') }}" width="20" class="text-info me-2" alt="">
                                {{-- <i class="ti ti-brand-windows text-info me-2 ti-sm"></i> --}}
                                <strong>
                                    PostmanRuntime
                                </strong>
                                @elseif (Str::contains($item->agent, "Firefox"))
                                <img src="{{ asset('images/firefox.png') }}" width="20" class="text-info me-2" alt="">
                                <strong>
                                    Mozilla Firefox
                                </strong>
                                @elseif(Str::contains($item->agent, "Edg"))
                                <img src="{{ asset('images/edge.png') }}" width="20" class="text-info me-2" alt="">
                                <strong>
                                    Microsoft Edge
                                </strong>
                                @elseif(Str::contains($item->agent, "Chrome"))
                                <img src="{{ asset('images/chrom.png') }}" width="20" class="text-info me-2" alt="">
                                <strong>
                                    Google Chrome
                                </strong>
                                @elseif(Str::contains($item->agent, "Opera"))
                                <img src="{{ asset('images/opera.png') }}" width="20" class="text-info me-2" alt="">
                                <strong>
                                    Opera
                                </strong>
                                @elseif(Str::contains($item->agent, "Dart"))
                                <img src="{{ asset('images/dart.png') }}" width="20" class="text-info me-2" alt="">
                                <strong>
                                    Dart
                                </strong>
                                @else
                                Unknown
                                @endif
                            </td>
                            <td class="text-truncate">{{ $item->city }}, {{ $item->country }}</td>
                            <td class="text-truncate">{{ $item->created_at->timezone($item->timezone)->format("d, M Y h:i A") }}</td>
                        </tr>
                        @if($key == 5)
                            @break
                        @endif
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <!--/ Recent Devices -->
    </div>
</div>
@endsection