@extends('layouts.buyer')

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

@section('buyer-content')
    <!-- Page Header -->
    <div class="page-header">
        <div>
            <h3 class="page-title">Profile Settings</h3>
            <p class="text-muted mb-0">Manage your account information</p>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                <div class="card-header bg-transparent py-3">
                    <h6 class="fw-bold mb-0">
                        <i class="bi bi-person-gear me-2 text-primary"></i>Edit Profile Details
                    </h6>
                </div>
                <div class="card-body p-4">
                    @if(session('success'))
                        <div class="alert alert-success border-0 shadow-sm mb-4 rounded-3 d-flex align-items-center">
                            <i class="bi bi-check-circle-fill me-2 fs-5"></i>
                            <div>{{ session('success') }}</div>
                        </div>
                    @endif

                    <form action="{{ route('buyer.profile.update') }}" method="POST">
                        @csrf
                        <div class="row g-4 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold text-dark small text-uppercase spacing-1">Full Name</label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text bg-light border-0 text-muted ps-3"><i class="bi bi-person"></i></span>
                                    <input type="text" name="name" class="form-control bg-light border-0 fs-6" value="{{ old('name', $user->name) }}" required placeholder="Enter your full name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold text-dark small text-uppercase spacing-1">Email Address</label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text bg-light border-0 text-muted ps-3"><i class="bi bi-envelope"></i></span>
                                    <input type="email" name="email" class="form-control bg-light border-0 fs-6" value="{{ old('email', $user->email) }}" required placeholder="Enter email address">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold text-dark small text-uppercase spacing-1">Phone Number</label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text bg-light border-0 text-muted ps-3"><i class="bi bi-telephone"></i></span>
                                    <input type="text" name="phone" class="form-control bg-light border-0 fs-6" value="{{ old('phone', $user->phone) }}" placeholder="Enter phone number">
                                </div>
                            </div>
                        </div>
                        
                        <!-- Add more fields as needed -->

                        <div class="d-flex justify-content-end pt-3 border-top">
                            <button type="submit" class="btn btn-primary rounded-pill px-5 shadow-sm hover-lift fw-bold">
                                <i class="bi bi-check-lg me-2"></i>Save Changes
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4" style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);">
                <div class="card-body p-4 text-center text-white position-relative">
                    <div class="position-absolute top-0 start-0 w-100 h-100 opacity-10" style="background-image: radial-gradient(#ffffff 1px, transparent 1px); background-size: 20px 20px;"></div>
                    <div class="position-relative z-1">
                        <div class="mb-3">
                            <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-white bg-opacity-10 text-white border border-white border-opacity-25 shadow-sm backdrop-blur" style="width: 90px; height: 90px;">
                                <span class="display-6 fw-bold">{{ strtoupper(substr($user->name, 0, 1)) }}</span>
                            </div>
                        </div>
                        <h5 class="fw-bold mb-1">{{ $user->name }}</h5>
                        <p class="text-white-50 mb-3 small">{{ $user->email }}</p>
                        <span class="badge bg-white bg-opacity-20 rounded-pill px-3 py-2 fw-normal backdrop-blur">
                            <i class="bi bi-shield-check me-1"></i>Buyer Account
                        </span>
                    </div>
                </div>
            </div>
            
                <h6 class="fw-bold text-muted mb-3 small text-uppercase spacing-1">Account Stats</h6>
                <div class="row g-2">
                    <div class="col-6">
                        <div class="p-3 bg-light rounded-3">
                            <div class="h4 fw-bold text-primary mb-0">{{ $buyer->rfqs()->count() ?? 0 }}</div>
                            <small class="text-muted">RFQs</small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-3 bg-light rounded-3">
                            <div class="h4 fw-bold text-success mb-0">{{ $buyer->favorites()->count() ?? 0 }}</div>
                            <small class="text-muted">Favorites</small>
                        </div>
                    </div>
                </div>
        </div>
@endsection