@extends('layouts.admin')

@section('content')

<div class="container-fluid">

    <!-- Page Header -->
    <div class="admin-page-header mb-4">
        <div>
            <h2><i class="fas fa-user-circle me-2" style="color: var(--admin-accent);"></i> Admin Profile</h2>
            <small>Update your name, email, profile photo, and password.</small>
        </div>
    </div>

    @include('partials.alerts')

    <div class="admin-profile-card">
        <div class="card-body p-4">

            <form action="{{ route('admin.profile.update') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row g-4">

                    <!-- Profile Image -->
                    <div class="col-md-3 text-center">
                        @if($admin->profile_image)
                            <img src="{{ asset('storage/'.$admin->profile_image) }}"
                                 class="admin-profile-image mb-3"
                                 alt="Profile Photo"
                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='inline-flex';">
                            <div class="admin-profile-placeholder-lg mb-3 mx-auto" style="display: none;">
                                {{ strtoupper(substr($admin->name, 0, 2)) }}
                            </div>
                        @else
                            <div class="admin-profile-placeholder-lg mb-3 mx-auto">
                                {{ strtoupper(substr($admin->name, 0, 2)) }}
                            </div>
                        @endif

                        <div class="mt-2">
                            <label class="form-label fw-bold small" style="color: var(--admin-primary);">Change Photo</label>
                            <input type="file" name="profile_image" class="form-control form-control-sm">
                        </div>
                    </div>

                    <div class="col-md-9">

                        <h5 class="fw-bold mb-3" style="color: var(--admin-primary);">
                            <i class="fas fa-id-card me-2" style="color: var(--admin-accent);"></i> Personal Information
                        </h5>

                        <!-- Name -->
                        <div class="mb-3">
                            <label class="form-label fw-bold small" style="color: var(--admin-primary);">Name</label>
                            <input type="text" name="name" class="form-control" value="{{ old('name', $admin->name) }}" placeholder="Enter admin full name">
                            @error('name')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <!-- Email -->
                        <div class="mb-3">
                            <label class="form-label fw-bold small" style="color: var(--admin-primary);">Email</label>
                            <input type="email" name="email" class="form-control" value="{{ old('email', $admin->email) }}" placeholder="Enter admin email">
                            @error('email')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <hr class="my-4">

                        <h5 class="fw-bold mb-3" style="color: var(--admin-primary);">
                            <i class="fas fa-lock me-2" style="color: var(--admin-accent);"></i> Change Password
                        </h5>

                        <!-- Current Password -->
                        <div class="mb-3">
                            <label class="form-label fw-bold small" style="color: var(--admin-primary);">Current Password</label>
                            <input type="password" name="current_password" class="form-control" placeholder="Enter current admin password">
                            @error('current_password')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <!-- New Password -->
                        <div class="mb-3">
                            <label class="form-label fw-bold small" style="color: var(--admin-primary);">New Password</label>
                            <input type="password" name="password" class="form-control" placeholder="Enter new admin password">
                            @error('password')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <!-- Confirm Password -->
                        <div class="mb-4">
                            <label class="form-label fw-bold small" style="color: var(--admin-primary);">Confirm Password</label>
                            <input type="password" name="password_confirmation" class="form-control" placeholder="Confirm new admin password">
                        </div>

                        <button class="btn btn-admin-primary px-4">
                            <i class="fas fa-save me-1"></i> Update Profile
                        </button>

                    </div>

                </div>

            </form>

        </div>
    </div>

    {{-- Danger zone: deactivate your own account --}}
    <div class="admin-form-card mt-4" style="border:1px solid #f1c7c7;">
        <div class="card-header text-danger"><i class="fas fa-triangle-exclamation me-2"></i> Danger Zone</div>
        <div class="card-body">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                <div>
                    <strong>Delete my account</strong>
                    <div class="text-muted small">Your account will be deactivated and you'll be signed out immediately. A super admin can restore it later.</div>
                </div>
                <form method="POST" action="{{ route('admin.profile.delete') }}"
                    onsubmit="event.preventDefault(); showConfirm(this, { title:'Delete your account?', message:'You will be signed out immediately. A super admin can restore your account later.', confirmText:'Delete my account', type:'danger' });">
                    @csrf @method('DELETE')
                    <button class="btn btn-outline-danger"><i class="fas fa-user-slash me-1"></i> Delete my account</button>
                </form>
            </div>
        </div>
    </div>

</div>

@endsection