@php($editing = $loan->exists)
<x-layouts.app :title="$editing ? ($loan->contact_name ?: 'Loan record #'.$loan->id) : 'Add loan record'"
               :subtitle="$editing ? 'Record #'.$loan->id.($loan->car_reg_no ? ' · '.$loan->car_reg_no : '') : 'New chat-loan lead. The allocation date defaults to today.'"
               :breadcrumbs="['CRM' => null, 'Chat loan data' => route('loan-data.index'), ($editing ? '#'.$loan->id : 'New') => null]">
    <x-slot:actions>
        <a href="{{ route('loan-data.index') }}" class="btn btn-secondary"><x-heroicon-m-arrow-left class="h-4 w-4" /> Back to list</a>
    </x-slot:actions>

    <form method="POST" action="{{ $editing ? route('loan-data.update', $loan->id) : route('loan-data.store') }}" class="grid gap-6 xl:grid-cols-3">
        @csrf
        @if ($editing) @method('PUT') @endif

        <div class="space-y-6 xl:col-span-2">
            @foreach ($sections as $title => $fields)
                <x-card :title="$title">
                    <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach ($fields as $col => $def)
                            @include('crm.loan-data.partials.field', ['model' => $loan, 'col' => $col, 'def' => $def])
                        @endforeach
                    </div>
                </x-card>
            @endforeach
        </div>

        <div class="space-y-6">
            <x-card title="Record">
                <dl class="space-y-3 text-sm">
                    @if ($editing)
                        <div class="flex justify-between gap-3"><dt class="text-ink-500">Created</dt><dd class="text-right">{{ $loan->created_date?->format('d-m-Y H:i') ?? '—' }}</dd></div>
                        <div class="flex justify-between gap-3"><dt class="text-ink-500">Loan city</dt><dd class="text-right">{{ $loan->loan_chat_type ?: '—' }}</dd></div>
                        <div class="flex justify-between gap-3"><dt class="text-ink-500">Zoho id</dt><dd class="truncate text-right font-mono text-xs">{{ $loan->zohoRecordId() ?? '—' }}</dd></div>
                        <div class="flex justify-between gap-3"><dt class="text-ink-500">Zoho updated</dt><dd><span class="badge {{ strcasecmp((string) $loan->zoho_update, 'Yes') === 0 ? 'badge-green' : 'badge-gray' }}">{{ $loan->zoho_update ?: 'No' }}</span></dd></div>
                        <div class="flex justify-between gap-3"><dt class="text-ink-500">Data alot month</dt><dd>{{ $loan->DATA_ALOT_MONTH ?: '—' }}</dd></div>
                        <div class="flex justify-between gap-3"><dt class="text-ink-500">Remark (data related)</dt><dd class="text-right">{{ $loan->sp_rem_data_related ?: '—' }}</dd></div>
                    @else
                        <p class="text-ink-500">The loan city (loan chat type) is derived from the data type when you save.</p>
                    @endif
                </dl>
            </x-card>

            <div class="flex gap-2">
                <button class="btn btn-brand flex-1"><x-heroicon-m-check class="h-4 w-4" /> {{ $editing ? 'Save changes' : 'Add record' }}</button>
                <a href="{{ route('loan-data.index') }}" class="btn btn-secondary">Cancel</a>
            </div>

            @if ($editing)
                <x-card title="Tasks" :subtitle="$activities->count() ? $activities->count().' task(s) for this lead' : 'Not allocated yet'" :padded="false">
                    @forelse ($activities as $a)
                        @php($tone = match (strtolower((string) $a->status)) { 'completed' => 'badge-green', 'in progress' => 'badge-amber', 'not started' => 'badge-blue', default => 'badge-gray' })
                        <div class="border-b border-ink-100 px-5 py-3 last:border-0 dark:border-ink-800">
                            <div class="flex items-center justify-between gap-2">
                                @if (Route::has('activities.show'))
                                    <a href="{{ route('activities.show', $a->id) }}" class="truncate text-sm font-medium text-brand-700 hover:underline dark:text-brand-400">{{ $a->subject ?: 'Task #'.$a->id }}</a>
                                @else
                                    <span class="truncate text-sm font-medium">{{ $a->subject ?: 'Task #'.$a->id }}</span>
                                @endif
                                <span class="badge {{ $tone }}">{{ $a->status ?: '—' }}</span>
                            </div>
                            <div class="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-ink-500">
                                <span>{{ $a->user_name ?: 'User #'.$a->user_id }}</span>
                                @if ($a->task_for)<span>{{ $a->task_for }}</span>@endif
                                @if ($a->due_date)<span>Due {{ date('d-m-Y', strtotime($a->due_date)) }}</span>@endif
                                @if ($a->modified_by)<span>Updated {{ date('d-m-Y H:i', strtotime($a->modified_by)) }}</span>@endif
                            </div>
                            @if ($a->final_remark_ins_loan)<div class="mt-1 text-xs text-ink-700 dark:text-ink-300">{{ $a->final_remark_ins_loan }}</div>@endif
                        </div>
                    @empty
                        <x-empty-state title="No tasks" message="Assign this lead from the list to create a telecaller task." icon="heroicon-o-clipboard-document-list" />
                    @endforelse
                </x-card>
            @endif
        </div>
    </form>
</x-layouts.app>