@extends('layouts.main-app')

@section('content')
<div class="row justify-content-center mb-4">
    <div class="col-md-12">
        <ul class="nav nav-tabs" id="settingTab" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->routeIs('setting.setting.profile-setting') ? 'active' : '' }}" 
                    href="{{ route('setting.setting.profile-setting') }}" role="tab" 
                    aria-selected="true"
                >
                    @lang('Profile')
                </a>
            </li> 
                        <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->routeIs('setting.setting.change-password') ? 'active' : '' }}" 
                    href="{{ route('setting.setting.change-password') }}" 
                    aria-selected="false" 
                >
                    @lang('Change Password')
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->routeIs('twofactor.twofactor') ? 'active' : '' }}" 
                    href="{{ route('twofactor.twofactor') }}" 
                    aria-selected="false" 
                >
                    @lang('2FA Security')
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->routeIs('setting.setting.api-key') ? 'active' : '' }}" 
                    href="{{ route('setting.setting.api-key') }}" 
                    aria-selected="false"
                >
                    @lang('Api Key') 
                </a>
            </li>
                         <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->routeIs('setting.setting.ip-allow') ? 'active' : '' }}" 
                    href="{{ route('setting.setting.ip-allow') }}" 
                    aria-selected="false"
                >
                   @lang('IP Allow')
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->routeIs('setting.setting.help') ? 'active' : '' }}" 
                    href="{{ route('setting.setting.help') }}" role="tab" 
                    aria-selected="false"
                >
                    @lang('Support Account')
                </a>
            </li>
        </ul>
    </div>
</div>

<style>
    .nav-tabs .nav-link{
        border: none !important;
        font-weight: 700;
        color: #7e7e7e;
    }
    .nav-tabs .nav-link.active{
        color: #002046;
    }
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
        background: transparent;
    }
</style> 



<div class="row justify-content-center gy-4">
    
    <div class="col-12">
        <div class="page-heading mb-4">
            <h3 class="mb-2">{{ __($pageTitle) }}</h3>
         <p>
    @lang('Easily update and manage your profile to keep your account details current. Personalize your experience and adjust your preferences effortlessly.')
</p>
        </div>
        <hr>
    </div>

    <div class="col-xl-5 col-lg-6">
        <div class="card">
            <div class="card-body">
                <h4 class="mb-2 text-center">{{ auth()->user()->full_name }}</h4>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap gap-1">
                        <span class="fw--bold"><i class="las la-user base--color"></i> @lang('Username')</span> 
                        <span>{{ auth()->user()->full_name }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap gap-1">
                        <span class="fw--bold"><i class="las la-envelope base--color"></i> @lang('Email')</span> 
                        <span>[{{ auth()->user()->email }}]</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap gap-1">
                        <span class="fw--bold"><i class="las la-phone base--color"></i> @lang('Mobile')</span>
                        <span>[{{ auth()->user()->mobile }}]</span>
                    </li>
                    
                    <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap gap-1">
                        <span class="fw--bold"><i class="las la-globe base--color"></i> @lang('Traffic')</span>
                         @if(auth()->user()->traffic == 'A')
                        <span class="badge badge--success">Active</span>
                        @else 
                        <span class="badge badge--danger">Inactive</span>
                        @endif
                    </li>
                  <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap gap-1">
                        <span class="fw--bold"><i class="las la-user-tie base--color"></i> @lang('Status')</span>
                        @if(auth()->user()->status == 'A')
                        <span class="badge badge--success">Active</span>
                        @else 
                        <span class="badge badge--danger">Inactive</span>
                        @endif
                    </li>
                </ul>
            </div>
        </div> 
    </div>
    <div class="col-xl-7 col-lg-6">
        <div class="card style--two">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-center">
                <h5 class="card-title">@lang('Profile Setting')</h5>
            </div>
            <div class="card-body p-4">
                <form class="register" action="{{ route('profile.update') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-form-label">@lang('Name')</label>
                                <input type="text" class="form--control" name="name"
                                value="{{ auth()->user()->full_name }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                            <label class="col-form-label">@lang('Address')</label>
                            <input type="text" class="form--control" name="address"
                            value="{{ auth()->user()->address }}">
                        </div>
                        </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn--base w-100">@lang('Submit')</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
