@extends('layouts.app')
@section('title', 'Admin Profile')

@section('content')


@if(session('done'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fa-solid fa-check-circle me-2"></i>{{ session('done') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif
@if(session('not'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fa-solid fa-circle-exclamation me-2"></i>{{ session('not') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="row g-4">
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body text-center p-4">
                <div class="mb-4">
                    <div class="position-relative d-inline-block">
                        <div class="rounded-circle d-flex align-items-center justify-content-center" 
                             style="width: 120px; height: 120px; background: linear-gradient(135deg, #e94560, #ff6b8a); border: 4px solid #e94560;">
                            <i class="fa-solid fa-user text-white" style="font-size: 48px;"></i>
                        </div>
                        <span class="position-absolute bottom-0 end-0 translate-middle p-1 bg-success rounded-circle border border-2 border-white">
                            <span class="visually-hidden">Online</span>
                        </span>
                    </div>
                </div>
                <h5 class="mb-1">{{ ucwords($admin->name) }}</h5>
                <p class="text-muted mb-3">{{ $admin->email }}</p>
                <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2">
                    <i class="fa-solid fa-shield-halved me-1"></i>Super Admin
                </span>
                
                <hr class="my-4">
                
                <div class="text-start">
                    <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0">
                            <div class="p-2 rounded-3 me-3" style="background: rgba(25, 135, 84, 0.1);">
                                <i class="fa-solid fa-calendar text-success"></i>
                            </div>
                        </div>
                        <div>
                            <small class="text-muted d-block">Member Since</small>
                            <span class="fw-medium">{{ $admin->created_at->format('M d, Y') }}</span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0">
                            <div class="p-2 rounded-3 me-3" style="background: rgba(13, 110, 253, 0.1);">
                                <i class="fa-solid fa-clock text-primary"></i>
                            </div>
                        </div>
                        <div>
                            <small class="text-muted d-block">Last Login</small>
                            <span class="fw-medium">{{ $admin->updated_at->format('M d, Y H:i') }}</span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="p-2 rounded-3 me-3" style="background: rgba(233, 69, 96, 0.1);">
                                <i class="fa-solid fa-circle text-danger" style="font-size: 8px;"></i>
                            </div>
                        </div>
                        <div>
                            <small class="text-muted d-block">Status</small>
                            <span class="fw-medium text-success">Online</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-transparent border-0 text-center pb-4">
                <a href="{{ route('admin.logout') }}" class="btn btn-outline-danger btn-sm">
                    <i class="fa-solid fa-right-from-bracket me-2"></i>Logout
                </a>
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3">
                <ul class="nav nav-pills" id="profileTabs" role="tablist">
                    <li class="nav-item me-2" role="presentation">
                        <button class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab">
                            <i class="fa-solid fa-user me-2"></i>Profile
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="password-tab" data-bs-toggle="tab" data-bs-target="#password" type="button" role="tab">
                            <i class="fa-solid fa-key me-2"></i>Change Password
                        </button>
                    </li>
                </ul>
            </div>
            <div class="card-body p-4">
                <div class="tab-content" id="profileTabsContent">
                    <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <h5 class="mb-4">Profile Information</h5>
                        <form action="{{ route('admin.update') }}" method="POST">
                            @csrf
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label for="name" class="form-label">Full Name</label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                           id="name" name="name" value="{{ old('name', $admin->name) }}">
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Enter your full name</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="email" class="form-label">Email Address</label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                           id="email" name="email" value="{{ old('email', $admin->email) }}">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Enter your email address</div>
                                </div>
                            </div>
                            <hr class="my-4">
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa-solid fa-save me-2"></i>Save Changes
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <div class="tab-pane fade" id="password" role="tabpanel" aria-labelledby="password-tab">
                        <h5 class="mb-4">Change Password</h5>
                        <form action="{{ route('admin.changePassword') }}" method="POST">
                            @csrf
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label for="current_password" class="form-label">Current Password</label>
                                    <div class="input-group">
                                        <input type="password" class="form-control @error('current_password') is-invalid @enderror" 
                                               id="current_password" name="current_password" placeholder="Enter current password">
                                        <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('current_password', 'currentToggleIcon')">
                                            <i class="fa-solid fa-eye" id="currentToggleIcon"></i>
                                        </button>
                                    </div>
                                    @error('current_password')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="new_password" class="form-label">New Password</label>
                                    <div class="input-group">
                                        <input type="password" class="form-control @error('new_password') is-invalid @enderror" 
                                               id="new_password" name="new_password" placeholder="Enter new password">
                                        <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('new_password', 'newToggleIcon')">
                                            <i class="fa-solid fa-eye" id="newToggleIcon"></i>
                                        </button>
                                    </div>
                                    @error('new_password')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Minimum 8 characters</div>
                                </div>
                            </div>
                            <hr class="my-4">
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-warning">
                                    <i class="fa-solid fa-key me-2"></i>Change Password
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('style')
<style>
.nav-pills .nav-link {
    color: #6c757d;
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
}
.nav-pills .nav-link:hover {
    color: #e94560;
    background-color: rgba(233, 69, 96, 0.1);
}
.nav-pills .nav-link.active {
    color: #fff;
    background-color: #e94560;
}
.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
}
.btn-warning:hover {
    background-color: #e0a800;
    border-color: #e0a800;
    color: #000;
}
</style>
@endpush

@push('script')
<script>
function togglePassword(inputId, iconId) {
    const input = document.getElementById(inputId);
    const icon = document.getElementById(iconId);
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('fa-eye', 'fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.replace('fa-eye-slash', 'fa-eye');
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const hash = window.location.hash;
    if (hash === '#password') {
        const passwordTab = document.getElementById('password-tab');
        const passwordPane = document.getElementById('password');
        const profileTab = document.getElementById('profile-tab');
        const profilePane = document.getElementById('profile');
        
        profileTab.classList.remove('active');
        profilePane.classList.remove('show', 'active');
        passwordTab.classList.add('active');
        passwordPane.classList.add('show', 'active');
    }
});
</script>
@endpush