@extends('layouts.admin')
@section('title', $customer->full_name)
@section('page-title', $customer->full_name)
@section('content')
<div class="space-y-6" x-data="{ tab: 'overview' }">
    <div class="flex flex-wrap items-center justify-between gap-4">
        <div>
            <p class="text-sm text-slate-500">Code: <span class="font-mono font-medium text-slate-800">{{ $customer->customer_code }}</span></p>
            <span class="inline-flex mt-1 rounded-full px-2.5 py-0.5 text-xs font-medium {{ $customer->status === 'active' ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-800' }}">{{ $customer->status }}</span>
        </div>
        <div class="flex gap-2">
            @can('edit customers')<a href="{{ route('customers.edit', $customer) }}" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Edit</a>@endcan
            @can('create measurements')<a href="{{ route('customers.measurement-profiles.create', $customer) }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Add Measurement</a>@endcan
            <a href="{{ route('customers.measurement-profiles.index', $customer) }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Measurements</a>
        </div>
    </div>

    <div class="border-b border-slate-200">
        <nav class="-mb-px flex gap-4">
            <button type="button" @click="tab = 'overview'" :class="tab === 'overview' ? 'border-slate-800 text-slate-800' : 'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700'" class="whitespace-nowrap border-b-2 px-1 py-3 text-sm font-medium">Overview</button>
            <button type="button" @click="tab = 'orders'" :class="tab === 'orders' ? 'border-slate-800 text-slate-800' : 'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700'" class="whitespace-nowrap border-b-2 px-1 py-3 text-sm font-medium">Order history</button>
            <button type="button" @click="tab = 'measurements'" :class="tab === 'measurements' ? 'border-slate-800 text-slate-800' : 'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700'" class="whitespace-nowrap border-b-2 px-1 py-3 text-sm font-medium">Measurement history</button>
            <button type="button" @click="tab = 'payments'" :class="tab === 'payments' ? 'border-slate-800 text-slate-800' : 'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700'" class="whitespace-nowrap border-b-2 px-1 py-3 text-sm font-medium">Payment history</button>
            <button type="button" @click="tab = 'balance'" :class="tab === 'balance' ? 'border-slate-800 text-slate-800' : 'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700'" class="whitespace-nowrap border-b-2 px-1 py-3 text-sm font-medium">Outstanding balance</button>
        </nav>
    </div>

    <div x-show="tab === 'overview'" class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <dl class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <div><dt class="text-sm font-medium text-slate-500">Full name</dt><dd class="mt-1 text-sm text-slate-800">{{ $customer->full_name }}</dd></div>
            <div><dt class="text-sm font-medium text-slate-500">Mobile</dt><dd class="mt-1 text-sm text-slate-800">{{ $customer->mobile ?? '-' }}</dd></div>
            <div><dt class="text-sm font-medium text-slate-500">Alternate mobile</dt><dd class="mt-1 text-sm text-slate-800">{{ $customer->alternate_mobile ?? '-' }}</dd></div>
            <div><dt class="text-sm font-medium text-slate-500">WhatsApp</dt><dd class="mt-1 text-sm text-slate-800">{{ $customer->whatsapp_number ?? '-' }}</dd></div>
            <div><dt class="text-sm font-medium text-slate-500">Email</dt><dd class="mt-1 text-sm text-slate-800">{{ $customer->email ?? '-' }}</dd></div>
            <div><dt class="text-sm font-medium text-slate-500">Gender</dt><dd class="mt-1 text-sm text-slate-800">{{ $customer->gender ?? '-' }}</dd></div>
            <div><dt class="text-sm font-medium text-slate-500">Date of birth</dt><dd class="mt-1 text-sm text-slate-800">{{ $customer->date_of_birth?->format('d M Y') ?? '-' }}</dd></div>
            <div><dt class="text-sm font-medium text-slate-500">Anniversary</dt><dd class="mt-1 text-sm text-slate-800">{{ $customer->anniversary_date?->format('d M Y') ?? '-' }}</dd></div>
            <div><dt class="text-sm font-medium text-slate-500">Preferred branch</dt><dd class="mt-1 text-sm text-slate-800">{{ $customer->preferredBranch?->name ?? '-' }}</dd></div>
            <div><dt class="text-sm font-medium text-slate-500">Communication</dt><dd class="mt-1 text-sm text-slate-800">{{ $customer->preferred_communication_method ?? '-' }}</dd></div>
            <div class="sm:col-span-2"><dt class="text-sm font-medium text-slate-500">Address</dt><dd class="mt-1 text-sm text-slate-800">{{ $customer->address ? $customer->address : '-' }}{{ $customer->city ? ', ' . $customer->city : '' }}{{ $customer->area ? ', ' . $customer->area : '' }}</dd></div>
            <div class="sm:col-span-2"><dt class="text-sm font-medium text-slate-500">Notes</dt><dd class="mt-1 text-sm text-slate-800">{{ $customer->notes ?? '-' }}</dd></div>
            <div class="sm:col-span-2"><dt class="text-sm font-medium text-slate-500">Remarks</dt><dd class="mt-1 text-sm text-slate-800">{{ $customer->remarks ?? '-' }}</dd></div>
            @if($customer->tags && count($customer->tags) > 0)
            <div class="sm:col-span-2"><dt class="text-sm font-medium text-slate-500">Tags</dt><dd class="mt-1 flex flex-wrap gap-1">@foreach($customer->tags as $tag)<span class="rounded bg-slate-100 px-2 py-0.5 text-xs text-slate-700">{{ $tag }}</span>@endforeach</dd></div>
            @endif
        </dl>
    </div>

    <div x-show="tab === 'orders'" x-cloak class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <p class="text-slate-500">Order history will appear here (Phase 3).</p>
    </div>

    <div x-show="tab === 'measurements'" x-cloak class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <p class="text-slate-500 mb-4">Measurement history (placeholders).</p>
        @if($customer->measurementProfiles->isNotEmpty())
        <ul class="space-y-2">
            @foreach($customer->measurementProfiles->take(10) as $profile)
            <li class="flex items-center justify-between rounded-lg border border-slate-100 py-2 px-3">
                <span>{{ $profile->measurementTemplate->template_name }} — v{{ $profile->version }} ({{ $profile->date_taken->format('d M Y') }})</span>
                <a href="{{ route('customers.measurement-profiles.show', [$customer, $profile]) }}" class="text-sm text-slate-600 hover:text-slate-900">View</a>
            </li>
            @endforeach
        </ul>
        <a href="{{ route('customers.measurement-profiles.index', $customer) }}" class="mt-3 inline-block text-sm font-medium text-slate-700 hover:text-slate-900">View all measurements</a>
        @else
        <p class="text-slate-500">No measurements yet. <a href="{{ route('customers.measurement-profiles.create', $customer) }}" class="text-slate-800 underline">Add measurement profile</a></p>
        @endif
    </div>

    <div x-show="tab === 'payments'" x-cloak class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <p class="text-slate-500">Payment history will appear here (Phase 3).</p>
    </div>

    <div x-show="tab === 'balance'" x-cloak class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <p class="text-slate-500">Outstanding balance will appear here (Phase 3).</p>
    </div>
</div>
@endsection