@extends('layouts.app')

@section('title', 'Admin Profile Settings')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Super Admin Profile & Account Security</h1>
        <div class="page-subtitle">Update administrator credentials, email notifications, and account security.</div>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success border-0 shadow-sm mb-4" role="alert" style="border-radius: 12px; background-color: #DCFCE7; color: #15803D;">
        <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
    </div>
@endif

@if($errors->any())
    <div class="alert alert-danger border-0 shadow-sm mb-4" role="alert" style="border-radius: 12px;">
        <ul class="mb-0 ps-3">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form action="{{ route('admin.profile.update') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="row g-4">
        <!-- Left Column: Avatar & Profile Card -->
        <div class="col-lg-4">
            <div class="content-card text-center p-4 h-100">
                <div class="position-relative d-inline-block mb-3">
                    <img id="avatarPreview" 
                         src="{{ Auth::user()->avatar ?: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=200&q=80' }}" 
                         alt="Admin Avatar" 
                         class="rounded-circle shadow-sm" 
                         style="width: 130px; height: 130px; object-fit: cover; border: 4px solid var(--accent-red);">
                    
                    <label for="avatarFileInput" class="btn btn-danger btn-sm rounded-circle position-absolute bottom-0 end-0 p-2 shadow" style="cursor: pointer;" title="Change Profile Picture">
                        <i class="bi bi-camera-fill"></i>
                    </label>
                    <input type="file" name="avatar_file" id="avatarFileInput" class="d-none" accept="image/*" onchange="previewAvatar(this)">
                </div>

                <h5 class="fw-bold text-dark mb-1">{{ Auth::user()->name ?? 'Admin' }}</h5>
                <div class="badge bg-danger mb-3 px-3 py-1" style="background-color:var(--accent-red) !important;">Super Admin</div>
                <div class="text-muted small mb-1"><i class="bi bi-envelope me-1"></i> {{ Auth::user()->email ?? 'admin@tngmotors.com' }}</div>
                <div class="text-muted small"><i class="bi bi-geo-alt me-1"></i> Beverly Hills Headquarters • CA</div>

                <div class="mt-4 pt-3 border-top text-start">
                    <div class="form-text small text-muted text-center">
                        Click the camera icon to upload a custom profile picture from your gallery.
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column: Profile Information Form -->
        <div class="col-lg-8">
            <div class="content-card h-100">
                <div class="content-card-header">
                    <h5 class="content-card-title"><i class="bi bi-person-gear text-danger"></i> Account Profile Information</h5>
                </div>
                <div class="content-card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label font-weight-bold">First & Last Name *</label>
                            <input type="text" name="name" class="form-control" value="{{ old('name', Auth::user()->name) }}" required>
                        </div>
                        
                        <div class="col-md-6">
                            <label class="form-label font-weight-bold">Email Address *</label>
                            <input type="email" name="email" class="form-control" value="{{ old('email', Auth::user()->email) }}" required>
                        </div>

                        <div class="col-12"><hr class="my-2 text-muted"></div>
                        <h6 class="fw-bold mb-0 text-dark"><i class="bi bi-shield-lock me-1 text-danger"></i> Change Account Password (Optional)</h6>

                        <div class="col-md-6">
                            <label class="form-label font-weight-bold">New Password</label>
                            <input type="password" name="password" class="form-control" placeholder="Leave blank to keep current password">
                        </div>
                        
                        <div class="col-md-6">
                            <label class="form-label font-weight-bold">Confirm New Password</label>
                            <input type="password" name="password_confirmation" class="form-control" placeholder="Confirm new password">
                        </div>

                        <div class="col-12 mt-4 text-end">
                            <button type="submit" class="btn btn-luxury-red px-4 py-2">
                                <i class="bi bi-check-circle-fill me-1"></i> Save Profile Details
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    function previewAvatar(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('avatarPreview').src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@endsection