@extends('admin.layouts.app')

@section('title', 'Ledger Details')
@section('page-title', $ledger->name)

@section('content')
<div class="bg-white rounded-xl shadow-md border border-gray-100 p-6 space-y-6">
    <div class="flex justify-between items-start">
        <div>
            <p class="text-sm uppercase text-gray-400">Ledger Code</p>
            <h2 class="text-2xl font-bold">{{ $ledger->code }}</h2>
            <p class="text-sm text-gray-500 mt-2">{{ $ledger->ledgerGroup->name }} › {{ $ledger->ledgerGroup->subNature->name }}</p>
        </div>
        <div class="text-right">
            <p class="text-xs text-gray-500">Status</p>
            <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $ledger->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                {{ $ledger->is_active ? 'Active' : 'Inactive' }}
            </span>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm text-gray-600">
        <div class="bg-gray-50 rounded-lg p-4">
            <p class="text-xs uppercase">Opening Balance</p>
            <p class="text-xl font-semibold text-gray-900">{{ number_format($ledger->opening_balance, 2) }}</p>
            <p class="text-xs">{{ ucfirst($ledger->opening_balance_type) }}</p>
        </div>
        <div class="bg-gray-50 rounded-lg p-4">
            <p class="text-xs uppercase">Contact</p>
            <p class="font-medium">{{ $ledger->contact_person ?? 'N/A' }}</p>
            <p class="text-xs text-gray-500">{{ $ledger->phone ?? '—' }}</p>
        </div>
        <div class="bg-gray-50 rounded-lg p-4">
            <p class="text-xs uppercase">Email</p>
            <p class="font-medium">{{ $ledger->email ?? 'N/A' }}</p>
            <p class="text-xs text-gray-500">{{ $ledger->tax_number ?? 'Tax N/A' }}</p>
        </div>
    </div>

    <div>
        <p class="text-sm text-gray-600 mb-2">Description</p>
        <p class="text-sm text-gray-800">{{ $ledger->description ?? 'No description provided' }}</p>
    </div>
</div>
@endsection