@extends('layouts.app')

@section('title', 'My Profile')

@section('content')
<div class="welcome">
    <h3>My Profile</h3>
</div>

<div class="row">
    <!-- Profile Info -->
    <div class="col-md-8">
        <div class="card" style="border-radius: 15px; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.05); background: #fff; padding: 30px;">
            <h5 style="font-weight: 700; color: #1B79B5; margin-bottom: 25px;">Update Profile Information</h5>
            
            <form action="{{ route('admin.profile.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label style="font-weight: 600; color: #444; display: block; margin-bottom: 8px;">First Name</label>
                        <input type="text" name="first_name" class="form-control" value="{{ old('first_name', $user->first_name) }}" style="height: 48px; border-radius: 8px; border: 1px solid #CFD9E8;">
                    </div>
                    <div class="col-md-6 mb-4">
                        <label style="font-weight: 600; color: #444; display: block; margin-bottom: 8px;">Last Name</label>
                        <input type="text" name="last_name" class="form-control" value="{{ old('last_name', $user->last_name) }}" style="height: 48px; border-radius: 8px; border: 1px solid #CFD9E8;">
                    </div>
                </div>

                <div class="mb-4">
                    <label style="font-weight: 600; color: #444; display: block; margin-bottom: 8px;">Email Address</label>
                    <input type="email" name="email" class="form-control" value="{{ old('email', $user->email) }}" style="height: 48px; border-radius: 8px; border: 1px solid #CFD9E8;">
                </div>

                <div class="mb-4">
                    <label style="font-weight: 600; color: #444; display: block; margin-bottom: 8px;">Mobile Number</label>
                    <input type="text" name="mobile" class="form-control" value="{{ old('mobile', $user->mobile) }}" style="height: 48px; border-radius: 8px; border: 1px solid #CFD9E8;">
                </div>

                <div class="mb-4">
                    <label style="font-weight: 600; color: #444; display: block; margin-bottom: 8px;">Profile Image</label>
                    <div style="display: flex; align-items: center; gap: 20px;">
                        <img src="{{ $user->image ? asset('storage/user/'.$user->image) : 'https://i.pravatar.cc/100' }}" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid #1B79B5; padding: 2px;">
                        <input type="file" name="image" class="form-control-file">
                    </div>
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn btn-primary" style="background: #1B79B5; border: none; padding: 12px 30px; border-radius: 30px; font-weight: 700;">Save Changes</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Password Change -->
    <div class="col-md-4">
        <div class="card" style="border-radius: 15px; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.05); background: #fff; padding: 30px;">
            <h5 style="font-weight: 700; color: #E7000B; margin-bottom: 25px;">Change Password</h5>
            
            <form action="{{ route('admin.profile.change-password') }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label style="font-weight: 600; color: #444; display: block; margin-bottom: 8px;">New Password</label>
                    <input type="password" name="password" class="form-control" style="height: 48px; border-radius: 8px; border: 1px solid #CFD9E8;" required>
                </div>

                <div class="mb-4">
                    <label style="font-weight: 600; color: #444; display: block; margin-bottom: 8px;">Confirm New Password</label>
                    <input type="password" name="password_confirmation" class="form-control" style="height: 48px; border-radius: 8px; border: 1px solid #CFD9E8;" required>
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn btn-danger" style="background: #E7000B; border: none; padding: 12px 30px; border-radius: 30px; font-weight: 700; width: 100%;">Update Password</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection