@extends('layouts.adminnav')

@section('title', 'Admin Profile - Admin Panel')

@section('content')
<div class="container py-4">
    <div class="row">
        <div class="col-12 mb-4">
            <h3 class="fw-bold text-navy">
                <i class="fa-solid fa-user-gear me-2"></i>Admin Profile Management
            </h3>
        </div>
    </div>

    <!-- Success & Error Alerts -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
            <i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
            <i class="fa-solid fa-triangle-exclamation me-2"></i>
            <strong>Please check the form for errors:</strong>
            <ul class="mb-0 mt-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row g-4">
        <!-- Profile Summary Card -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm rounded-3 text-center p-4">
                <div class="card-body">
                    <div class="mb-3">
                        <div class="rounded-circle bg-navy text-white d-inline-flex align-items-center justify-content-center shadow" style="width: 100px; height: 100px; font-size: 40px;">
                            <i class="fa-solid fa-user-shield"></i>
                        </div>
                    </div>
                    <h4 class="fw-bold mb-1">{{ $admin->username ?? 'Administrator' }}</h4>
                    <span class="badge bg-danger fs-6 px-3 py-2 rounded-pill mt-2">System Administrator</span>
                    
                    <hr class="my-4">

                    <div class="text-start">
                        <p class="mb-2"><strong><i class="fa-solid fa-id-badge text-navy me-2"></i>Admin ID:</strong> {{ $admin->id ?? session('admin_id') }}</p>
                        <p class="mb-2"><strong><i class="fa-solid fa-user text-navy me-2"></i>Username:</strong> {{ $admin->username ?? 'N/A' }}</p>
                        <p class="mb-0"><strong><i class="fa-solid fa-clock text-navy me-2"></i>Created At:</strong> {{ isset($admin->created_at) ? $admin->created_at->format('Y-m-d') : 'N/A' }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Edit Profile & Password Forms -->
        <div class="col-lg-8">
            <!-- Update Username Card -->
            <div class="card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-header bg-white py-3 border-0">
                    <h5 class="fw-bold mb-0 text-navy">
                        <i class="fa-solid fa-pen-to-square me-2"></i>Update Account Details
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.profile.update') }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label class="form-label fw-bold">Username</label>
                                <input type="text" name="username" class="form-control" value="{{ old('username', $admin->username ?? '') }}" required>
                            </div>
                            <div class="col-12 text-end mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa-solid fa-floppy-disk me-1"></i> Save Changes
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Change Password Card -->
            <div class="card border-0 shadow-sm rounded-3">
                <div class="card-header bg-white py-3 border-0">
                    <h5 class="fw-bold mb-0 text-navy">
                        <i class="fa-solid fa-key me-2"></i>Change Password
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.profile.password') }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="row g-3">
                            <div class="col-md-12">
                                <label class="form-label fw-bold">Current Password</label>
                                <input type="password" name="current_password" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">New Password</label>
                                <input type="password" name="new_password" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Confirm New Password</label>
                                <input type="password" name="new_password_confirmation" class="form-control" required>
                            </div>
                            <div class="col-12 text-end mt-4">
                                <button type="submit" class="btn btn-danger">
                                    <i class="fa-solid fa-shield-halved me-1"></i> Update Password
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection