@extends('frontEnd.layouts.master')
@section('title', 'Customer Account')
@section('content')

        <style>
            .customer-section {
                background-color: #f8f9fa;
                padding: 50px 0;
            }

            .customer-content {
                background: #fff;
                border-radius: 15px;
                padding: 30px;
                border: none;
            }

            .account-title {
                font-weight: 700;
                color: #2B2D42;
                /* Updated to Brand Color */
                margin-bottom: 25px;
                position: relative;
                padding-bottom: 10px;
            }

            .account-title::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 50px;
                height: 3px;
                background: #2B2D42;
                /* Updated to Brand Color */
                border-radius: 3px;
            }

            .info-card {
                border: 1px solid #f1f1f1;
                border-radius: 12px;
                padding: 20px;
                transition: all 0.3s ease;
                height: 100%;
            }

            .info-card:hover {
                border-color: #2B2D42;
                /* Updated to Brand Color */
                background: #fcfcfd;
                /* Very subtle background change */
            }

            .info-label {
                font-size: 0.85rem;
                color: #888;
                text-transform: uppercase;
                letter-spacing: 1px;
                margin-bottom: 5px;
            }

            .info-value {
                font-weight: 600;
                color: #2B2D42;
                /* Updated to Brand Color */
                font-size: 1.05rem;
                margin-bottom: 0;
            }

            .info-icon {
                font-size: 1.5rem;
                color: #2B2D42;
                /* Updated to Brand Color */
                margin-bottom: 15px;
                display: block;
            }

            .profile-hero {
                /* Gradient updated to match brand primary with a slightly lighter shade */
                background: linear-gradient(135deg, #2B2D42 0%, #4a4e69 100%);
                border-radius: 15px;
                padding: 30px;
                color: white;
                margin-bottom: 30px;
            }

            .profile-hero img {
                border: 4px solid rgba(255, 255, 255, 0.2);
            }

            .sticky-top-custom {
                position: -webkit-sticky;
                position: sticky;
                top: 80px;
                z-index: 9;
                height: fit-content;
            }

            @media (max-width: 991px) {
                .sticky-top-custom {
                    position: relative;
                    top: 0;
                }
            }
        </style>

        <section class="customer-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-4 mb-4 sticky-top-custom">
                        <div class="customer-sidebar">
                            @include('frontEnd.layouts.customer.sidebar')
                        </div>
                    </div>

                    <div class="col-lg-9 col-md-8">
                        @php
    $customer = \App\Models\Customer::with('cust_area')->find(Auth::guard('customer')->user()->id);
                        @endphp

                        <div class="profile-hero shadow-sm d-flex align-items-center">
                            <img src="{{ $customer->image ? asset($customer->image) : 'https://ui-avatars.com/api/?name=' . urlencode($customer->name) . '&background=fff&color=E52E8A' }}"
                                alt="Profile" class="rounded-circle me-4 shadow" width="100" height="100"
                                style="object-fit: cover;">
                            <div>
                                <h3 class="mb-1 fw-bold">{{ $customer->name }}</h3>
                                <p class="mb-0 opacity-75"><i class="bi bi-geo-alt-fill me-1"></i>
                                    {{ $customer->district ?? 'Location not set' }}</p>
                            </div>
                            <div class="ms-auto d-none d-md-block">
                                <a href="{{ route('customer.profile_edit') }}"
                                    class="btn btn-light btn-sm rounded-pill px-3 shadow-sm">
                                    <i class="bi bi-pencil me-1"></i> Edit Profile
                                </a>
                            </div>
                        </div>

                        <div class="customer-content shadow-sm">
                            <h5 class="account-title">Personal Information</h5>

                            <div class="row g-4">
                                <div class="col-md-6">
                                    <div class="info-card">
                                        <i class="bi bi-person-badge info-icon"></i>
                                        <p class="info-label">Full Name</p>
                                        <p class="info-value">{{ $customer->name }}</p>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="info-card">
                                        <i class="bi bi-telephone info-icon"></i>
                                        <p class="info-label">Phone Number</p>
                                        <p class="info-value">{{ $customer->phone }}</p>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="info-card">
                                        <i class="bi bi-envelope info-icon"></i>
                                        <p class="info-label">Email Address</p>
                                        <p class="info-value">{{ $customer->email }}</p>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="info-card">
                                        <i class="bi bi-map info-icon"></i>
                                        <p class="info-label">District & Area</p>
                                        <p class="info-value">
                                            {{ $customer->district }}
                                            {{ $customer->cust_area ? ' - ' . $customer->cust_area->area_name : '' }}
                                        </p>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="info-card">
                                        <i class="bi bi-house-door info-icon"></i>
                                        <p class="info-label">Shipping Address</p>
                                        <p class="info-value text-muted fw-normal">
                                            {{ $customer->address ?? 'No address provided.' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
@endsection

@push('script')
    <script src="{{ asset('public/frontEnd/') }}/js/parsley.min.js"></script>
    <script src="{{ asset('public/frontEnd/') }}/js/form-validation.init.js"></script>
@endpush