@extends('layouts.admin')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="h4 mb-0 text-gray-800">My Profile</h2>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card shadow mb-4 border-0">
            <div class="card-header py-3 bg-white">
                <h6 class="m-0 font-weight-bold text-primary">Edit Profile Information</h6>
            </div>
            <div class="card-body">


                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <ul class="mb-0">
                            @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

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

                    <div class="mb-3">
                        <label for="name" class="form-label fw-semibold">Name</label>
                        <input type="text" name="name" class="form-control" id="name" value="{{ old('name', $user->name) }}" required>
                    </div>

                    <div class="mb-3">
                        <label for="email" class="form-label fw-semibold">Email Address</label>
                        <input type="email" name="email" class="form-control" id="email" value="{{ old('email', $user->email) }}" required>
                    </div>

                    <div class="mb-3">
                        <label for="avatar" class="form-label fw-semibold">Avatar</label>
                        <input type="file" name="avatar" class="form-control" id="avatar">
                        <div class="form-text">Recommended size: 200x200px.</div>
                    </div>

                    <hr class="my-4">
                    <h6 class="fw-bold text-muted mb-3">Social Profiles</h6>

                    <div class="mb-3">
                        <label for="facebook" class="form-label fw-semibold">Facebook URL</label>
                        <input type="url" name="social_links[facebook]" class="form-control" id="facebook" value="{{ old('social_links.facebook', $user->social_links['facebook'] ?? '') }}">
                    </div>

                    <div class="mb-3">
                        <label for="linkedin" class="form-label fw-semibold">LinkedIn URL</label>
                        <input type="url" name="social_links[linkedin]" class="form-control" id="linkedin" value="{{ old('social_links.linkedin', $user->social_links['linkedin'] ?? '') }}">
                    </div>

                    <div class="mb-3">
                        <label for="twitter" class="form-label fw-semibold">Twitter URL</label>
                        <input type="url" name="social_links[twitter]" class="form-control" id="twitter" value="{{ old('social_links.twitter', $user->social_links['twitter'] ?? '') }}">
                    </div>

                    <hr class="my-4">
                    <h6 class="fw-bold text-muted mb-3">Change Password (Optional)</h6>

                    <div class="mb-3">
                        <label for="password" class="form-label fw-semibold">New Password</label>
                        <input type="password" name="password" class="form-control" id="password" autocomplete="new-password">
                        <div class="form-text">Leave blank to keep current password.</div>
                    </div>

                    <div class="mb-3">
                        <label for="password_confirmation" class="form-label fw-semibold">Confirm New Password</label>
                        <input type="password" name="password_confirmation" class="form-control" id="password_confirmation" autocomplete="new-password">
                    </div>

                    <div class="d-flex justify-content-end mt-4">
                        <button type="submit" class="btn btn-primary shadow-sm px-4">
                            <i class="fas fa-save me-1"></i> Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card shadow mb-4 border-0 text-center">
            <div class="card-body py-5">
                <div class="mb-3">
                    @if($user->avatar)
                        <img src="{{ asset('storage/' . $user->avatar) }}" class="rounded-circle shadow-sm" style="width: 100px; height: 100px; object-fit: cover;">
                    @else
                        <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mx-auto shadow-sm" style="width: 100px; height: 100px; font-size: 2.5rem;">
                            {{ substr($user->name, 0, 1) }}
                        </div>
                    @endif
                </div>
                <h5 class="font-weight-bold text-dark mb-1">{{ $user->name }}</h5>
                <p class="text-muted mb-0">{{ $user->email }}</p>
                <div class="mt-3">
                    <span class="badge bg-success">Administrator</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection