@extends('layouts.app')

@section('content')
<main class="listings-main">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6">
        <div class="card shadow-sm">
          <div class="card-body m-3">
            <h2 class="mb-4 text-dark fw-bold" style="letter-spacing: 1px;">
              <i class="bi bi-people me-2 text-warning"></i>{{ __('messages.profile_settings') }}
            </h2>
            <form action="{{ route('web.customer.saveProfile') }}" method="POST" enctype="multipart/form-data">
              @csrf
              <!-- Profile Picture -->
              <div class="mb-4 text-center">
                <div class="profile-pic-wrapper mb-2">
                  <img src="{{ $user->photo ? asset($user->photo) : asset('assets/images/default-avatar.png') }}" alt="Profile Picture" class="rounded-circle" style="width: 96px; height: 96px; object-fit: cover;">
                </div>
                <input type="file" name="photo" accept="image/*" class="form-control form-control-sm d-inline-block" style="max-width: 220px;">
              </div>
              <!-- First Name -->
              <div class="mb-3">
                <label for="first_name" class="form-label">{{ __('messages.first_name') }}</label>
                <input type="text" class="form-control" id="first_name" name="first_name" value="{{ old('first_name', $user->first_name) }}" required>
              </div>
              <!-- Last Name -->
              <div class="mb-3">
                <label for="last_name" class="form-label">{{ __('messages.last_name') }}</label>
                <input type="text" class="form-control" id="last_name" name="last_name" value="{{ old('last_name', $user->last_name) }}" required>
              </div>
              <!-- Bio -->
              <div class="mb-3">
                <label for="bio" class="form-label">{{ __('messages.bio') }}</label>
                <textarea class="form-control" id="bio" name="bio" rows="3">{{ old('bio', $user->bio) }}</textarea>
              </div>
              <button type="submit" class="btn btn-primary-custom">{{ __('messages.save_changes') }}</button>
            </form>
            <hr class="my-4">
            <div class="d-flex flex-column flex-md-row gap-2 justify-content-between align-items-stretch">
              <a href="{{ route('web.customer.wallet') }}" class="btn btn-outline-primary-custom d-flex align-items-center justify-content-center flex-fill py-3 shadow-sm">
                <i class="bi bi-wallet2 me-2 fs-5"></i>
                <span>{{ __('messages.view_wallet_balance') }}</span>
              </a>
              <a href="{{ route('web.customer.invited.users') }}" class="btn btn-outline-primary-custom d-flex align-items-center justify-content-center flex-fill py-3 shadow-sm">
                <i class="bi bi-people me-2 fs-5"></i>
                <span>{{ __('messages.view_invited_users') }}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
@endsection