@extends('eliteadmin::layouts.app')

@section('title', 'My Profile')
@section('page_class', 'page-profile')

@section('content')
    <div class="page-header">
        <div>
            <h1 class="page-title">My Profile</h1>
            <nav class="breadcrumb">
                <a href="{{ route('dashboard') }}" class="breadcrumb-item">Home</a>
                <span class="breadcrumb-item active">Profile</span>
            </nav>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body text-center">
                    <img src="{{ asset('assets/img/profile-img.webp') }}" alt="Profile" class="rounded-circle mb-3" width="120" height="120">
                    <h5 class="mb-1">{{ auth()->user()->name }}</h5>
                    <p class="text-muted small mb-0">{{ auth()->user()->email }}</p>
                    <p class="text-muted small">{{ auth()->user()->roles->first()->name ?? 'Staff' }}</p>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Profile Information</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('profile.update') }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="name" class="form-label">Full Name</label>
                                <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror"
                                       value="{{ old('name', auth()->user()->name) }}" required>
                                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label for="email" class="form-label">Email Address</label>
                                <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror"
                                       value="{{ old('email', auth()->user()->email) }}" required>
                                @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label for="phone" class="form-label">Phone Number</label>
                                <input type="tel" name="phone" id="phone" class="form-control @error('phone') is-invalid @enderror"
                                       value="{{ old('phone', auth()->user()->phone ?? '') }}">
                                @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>

                        <div class="d-flex justify-content-end mt-4">
                            <button type="submit" class="btn btn-primary">Save Changes</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Change Password</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('profile.password') }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="current_password" class="form-label">Current Password</label>
                                <input type="password" name="current_password" id="current_password"
                                       class="form-control @error('current_password') is-invalid @enderror" required>
                                @error('current_password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label for="password" class="form-label">New Password</label>
                                <input type="password" name="password" id="password"
                                       class="form-control @error('password') is-invalid @enderror" required>
                                @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label for="password_confirmation" class="form-label">Confirm Password</label>
                                <input type="password" name="password_confirmation" id="password_confirmation" class="form-control" required>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end mt-4">
                            <button type="submit" class="btn btn-outline-primary">Update Password</button>
                        </div>
                    </form>
                </div>
            </div>

            @if ($platformTwoFactorEnabled)
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Two-Factor Authentication</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small">
                            When enabled, you will receive a 6-digit verification code on WhatsApp each time you sign in.
                        </p>

                        @if (! filled($user->phone))
                            <x-eliteadmin::alert type="warning" :dismissible="false" class="mb-3">
                                Add a mobile number to your profile before enabling two-factor authentication.
                            </x-eliteadmin::alert>
                        @endif

                        <form action="{{ route('profile.two-factor') }}" method="POST">
                            @csrf
                            @method('PUT')

                            <input type="hidden" name="two_factor_enabled" value="0">

                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input" type="checkbox" name="two_factor_enabled" id="profile_two_factor_enabled" value="1"
                                       @checked(old('two_factor_enabled', $user->two_factor_enabled))
                                       @disabled(! $canEnableTwoFactor && ! $user->two_factor_enabled)>
                                <label class="form-check-label" for="profile_two_factor_enabled">
                                    Enable WhatsApp verification at login
                                </label>
                            </div>

                            <div class="mb-3">
                                <label for="two_factor_current_password" class="form-label">Current Password</label>
                                <input type="password" name="current_password" id="two_factor_current_password"
                                       class="form-control @error('current_password') is-invalid @enderror" required>
                                @error('current_password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                @error('phone')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            </div>

                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-outline-primary">Save 2FA Preference</button>
                            </div>
                        </form>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection