@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h3 class="mb-0">Customer #{{ $customer->id }}</h3>
    <div>
        @can('update', $customer)<a href="{{ route('customers.edit', $customer) }}" class="btn btn-outline-secondary">Edit</a>@endcan
        <a href="{{ route('customers.index') }}" class="btn btn-outline-primary">Back to List</a>
    </div>
</div>
<div class="row g-3">
    <div class="col-lg-8">
        <div class="card"><div class="card-body">
            <h5>{{ $customer->full_name ?: trim($customer->first_name.' '.$customer->last_name) }}</h5>
            <div class="row small">
                @foreach(['Email'=>'email','Phone'=>'phone','Alt Phone'=>'alt_phone','Company'=>'company','Designation'=>'designation','Department'=>'department','Industry'=>'industry','City'=>'city','State'=>'state','Pincode'=>'pincode','Country'=>'country','Source'=>'source','Primary Tag'=>'primary_tag'] as $label => $field)
                    <div class="col-md-6 mb-2"><strong>{{ $label }}:</strong> {{ $customer->{$field} }}</div>
                @endforeach
            </div>
            <hr>
            <div><strong>Address:</strong> {{ $customer->address_line1 }} {{ $customer->address_line2 }}</div>
        </div></div>
    </div>
    <div class="col-lg-4">
        <div class="card mb-3"><div class="card-body">
            <h6>Tags</h6>
            @forelse($customer->tags as $tag)
                <span class="badge bg-primary-subtle text-primary me-1">{{ $tag->name }}</span>
            @empty <div class="text-muted">No tags</div> @endforelse
        </div></div>
        <div class="card"><div class="card-body">
            <h6>Custom Attributes (EAV)</h6>
            <div class="small">
                @forelse($customer->attributes as $attr)
                    <div class="mb-1"><strong>{{ $attr->key }}</strong>: {{ $attr->value }}</div>
                @empty <div class="text-muted">No custom attributes</div> @endforelse
            </div>
        </div></div>
    </div>
</div>
@endsection