@extends('customer.layout')

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

@section('content')

<h3 class="fw-bold mb-4">My Profile</h3>

{{-- SUCCESS MESSAGE --}}
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        {{ session('success') }}
        <button class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="row g-4">

    <!-- PROFILE INFO -->
    <div class="col-lg-4">
        <div class="card shadow-sm">
            <div class="card-body text-center">

                <div class="mb-3">
                    <i class="bi bi-person-circle display-3 text-secondary"></i>
                </div>

                <h5 class="fw-bold mb-0">
                    {{ auth()->user()->name ?? 'Customer' }}
                </h5>

                <p class="text-muted mb-1">
                    {{ auth()->user()->email ?? 'No email' }}
                </p>

                <span class="badge bg-primary mt-2">
                    Customer
                </span>

            </div>
        </div>
    </div>

    <!-- EDIT PROFILE -->
    <div class="col-lg-8">
        <div class="card shadow-sm">
            <div class="card-body">

                <h6 class="fw-bold mb-3">Edit Profile</h6>

                <form method="POST" action="#">
                    @csrf

                    <div class="row g-3">

                        <!-- Name -->
                        <div class="col-md-6">
                            <label class="form-label">Full Name</label>
                            <input type="text"
                                   name="name"
                                   class="form-control"
                                   value=""
                                   required>
                        </div>

                        <!-- Email -->
                        <div class="col-md-6">
                            <label class="form-label">Email</label>
                            <input type="email"
                                   class="form-control"
                                   value=""
                                   disabled>
                        </div>

                        <!-- Phone -->
                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <input type="text"
                                   name="phone"
                                   class="form-control"
                                   placeholder="+94"
                                   value="">
                        </div>

                        <!-- Address -->
                        <div class="col-md-6">
                            <label class="form-label">Address</label>
                            <input type="text"
                                   name="address"
                                   class="form-control"
                                   value="">
                        </div>

                        <!-- Buttons -->
                        <div class="col-12 mt-3">
                            <button class="btn btn-primary">
                                <i class="bi bi-save me-1"></i>
                                Update Profile
                            </button>

                            <a href="{{ route('customer.dashboard') }}"
                               class="btn btn-secondary ms-2">
                                Cancel
                            </a>
                        </div>

                    </div>
                </form>

            </div>
        </div>
    </div>

</div>

@endsection