@extends('layouts.user')

@section('title', 'Account Settings')

@section('content')
<div class="content" style="height: calc(100vh - 6.2rem); overflow-y: auto; overflow-x: hidden;">
    <div class="pb-3">
        <!-- Page Header -->
        <div class="row g-3 mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <h2 class="mb-0">Account Settings</h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="{{ route('user.dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Settings</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <!-- Success/Error Messages -->
        @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <span data-feather="check-circle" style="width: 16px; height: 16px;" class="me-2"></span>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endif

        @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <span data-feather="alert-circle" style="width: 16px; height: 16px;" class="me-2"></span>
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endif

        @if(session('status') === 'password-updated')
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <span data-feather="check-circle" style="width: 16px; height: 16px;" class="me-2"></span>
            Password updated successfully!
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endif

        <div class="row g-3">
            <!-- Change Password Section -->
            <div class="col-lg-8">
                <div class="card mb-3">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <span data-feather="lock" style="width: 20px; height: 20px;" class="text-primary me-2"></span>
                            <h5 class="mb-0">Change Password</h5>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-phoenix-info d-flex align-items-center" role="alert">
                            <span data-feather="info" style="width: 20px; height: 20px;" class="me-2"></span>
                            <div>
                                <strong>Secure Password Reset Process</strong><br>
                                <small>For security reasons, we'll send a password reset link to your registered email address. The link will be valid for 24 hours.</small>
                            </div>
                        </div>

                        <form method="POST" action="{{ route('user.password.reset.link') }}" id="passwordResetRequestForm">
                            @csrf
                            
                            <div class="mb-4">
                                <label for="email" class="form-label">Confirm Your Email Address</label>
                                <div class="position-relative">
                                    <input 
                                        type="email" 
                                        class="form-control @error('email') is-invalid @enderror" 
                                        id="email" 
                                        name="email" 
                                        value="{{ $user->email }}"
                                        required
                                        readonly
                                        autocomplete="email">
                                    <span data-feather="mail" style="width: 16px; height: 16px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);" class="text-body-tertiary"></span>
                                </div>
                                @error('email')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                <div class="form-text mt-2">
                                    <span data-feather="shield" style="width: 12px; height: 12px;"></span>
                                    We'll send the password reset instructions to this email address
                                </div>
                            </div>

                            <div class="bg-body-secondary border border-translucent rounded-3 p-3 mb-3">
                                <h6 class="mb-2">
                                    <span data-feather="check-circle" style="width: 16px; height: 16px;" class="text-success me-1"></span>
                                    What happens next?
                                </h6>
                                <ol class="mb-0 ps-3">
                                    <li class="text-body-tertiary mb-1">You'll receive an email with a secure reset link</li>
                                    <li class="text-body-tertiary mb-1">Click the link to create your new password</li>
                                    <li class="text-body-tertiary mb-1">You'll be logged out automatically</li>
                                    <li class="text-body-tertiary">Login with your new password</li>
                                </ol>
                            </div>

                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-body-tertiary">
                                    <span data-feather="clock" style="width: 12px; height: 12px;"></span>
                                    Can request once every 5 minutes
                                </small>
                                <button type="submit" class="btn btn-phoenix-primary">
                                    <span data-feather="send" style="width: 16px; height: 16px;" class="me-1"></span>
                                    Send Reset Link
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                
            </div>

            <!-- Quick Actions Sidebar -->
            <div class="col-lg-4">
                <div class="card mb-3">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <span data-feather="zap" style="width: 20px; height: 20px;" class="text-primary me-2"></span>
                            <h5 class="mb-0">Quick Actions</h5>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="{{ route('user.profile', ['role' => request()->route('role') ?? 'athlete']) }}" class="btn btn-phoenix-primary btn-sm">
                                <span data-feather="user" style="width: 16px; height: 16px;" class="me-2"></span>
                                View/Edit Profile
                            </a>
                            <a href="{{ route('user.documents', ['role' => $currentRoleSlug]) }}" class="btn btn-phoenix-secondary btn-sm">
                                <span data-feather="folder" style="width: 16px; height: 16px;" class="me-2"></span>
                                My Documents
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Active Roles Card -->
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <span data-feather="users" style="width: 20px; height: 20px;" class="text-primary me-2"></span>
                            <h5 class="mb-0">Active Roles</h5>
                        </div>
                    </div>
                    <div class="card-body">
                        @if($user->activeRoles->count() > 0)
                            <div class="d-flex flex-column gap-2">
                                @foreach($user->activeRoles as $role)
                                    <div class="d-flex align-items-center justify-content-between p-2 bg-body-secondary rounded">
                                        <span class="fw-semibold">{{ ucfirst($role->name) }}</span>
                                        @if($role->name === (request()->route('role') ?? 'athlete'))
                                            <span class="badge badge-phoenix badge-phoenix-success">Current</span>
                                        @else
                                            <a href="{{ url('/' . $role->name . '/dashboard') }}" class="btn btn-phoenix-secondary btn-sm">Switch</a>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-body-tertiary mb-0">No active roles assigned</p>
                        @endif
                    </div>
                </div>
                <!-- Account Information -->
                <div class="card mt-3">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <span data-feather="user" style="width: 20px; height: 20px;" class="text-primary me-2"></span>
                            <h5 class="mb-0">Account Information</h5>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row  g-3">
                            <div class="col-md-6">
                                <p class="text-body-tertiary fs-9 mb-1">Email</p>
                                <p class="fw-semibold">{{ $user->email }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="text-body-tertiary fs-9 mb-1">Mobile</p>
                                <p class="fw-semibold">{{ $user->mobile ?? 'Not provided' }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="text-body-tertiary fs-9 mb-1">Unique ID</p>
                                <p class="fw-semibold">{{ $user->u_id ?? 'Not assigned' }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="text-body-tertiary fs-9 mb-1">Member Since</p>
                                <p class="fw-semibold">{{ $user->created_at->format('M d, Y') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-dismiss alerts after 7 seconds
    document.querySelectorAll('.alert').forEach(alert => {
        setTimeout(() => {
            const closeButton = alert.querySelector('.btn-close');
            if (closeButton) {
                closeButton.click();
            }
        }, 7000);
    });

    // Form submission confirmation
    const form = document.getElementById('passwordResetRequestForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            const submitBtn = form.querySelector('button[type="submit"]');
            if (submitBtn) {
                // Show loading state
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Sending...';
            }
        });
    }
});
</script>
@endpush
@endsection