@extends('layouts.admin')

@section('title', 'Debit Note '.$debitNote->debit_note_number)

@section('page-title', 'Debit Note '.$debitNote->debit_note_number)

@section('breadcrumbs')
    <a href="{{ route('admin.debit-notes.index') }}" class="hover:text-primary">Debit Notes</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">{{ $debitNote->debit_note_number }}</span>
@endsection

@section('content')
<div class="max-w-[1400px] mx-auto space-y-6">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden p-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-xl font-bold text-gray-900">{{ $debitNote->debit_note_number }}</h1>
                <p class="text-sm text-gray-500 mt-1">
                    {{ $debitNote->debit_note_date?->format('M d, Y') ?? '—' }}
                    <span class="mx-1">·</span>
                    <span class="capitalize">{{ $debitNote->status }}</span>
                </p>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <a href="{{ route('admin.debit-notes.edit', $debitNote) }}" class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-blue-600 transition-colors">
                    <span class="material-symbols-outlined text-lg">edit</span>
                    Edit
                </a>
                <button type="button" onclick="openShowDeleteModal()" class="inline-flex items-center gap-2 px-4 py-2 border border-red-200 text-red-600 rounded-lg text-sm font-medium hover:bg-red-50 transition-colors">
                    <span class="material-symbols-outlined text-lg">delete</span>
                    Delete
                </button>
                <a href="{{ route('admin.debit-notes.index') }}" class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700 hover:bg-gray-50">
                    <span class="material-symbols-outlined text-lg">arrow_back</span>
                    Back to list
                </a>
            </div>
        </div>

        <dl class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-sm border-t border-gray-100 pt-6 mt-6">
            <div>
                <dt class="text-gray-500">Purchase</dt>
                <dd class="font-medium text-gray-900 mt-0.5">
                    @if($debitNote->purchase)
                        {{ $debitNote->purchase->purchase_number }}
                    @else
                        —
                    @endif
                </dd>
            </div>
            <div>
                <dt class="text-gray-500">Order date</dt>
                <dd class="font-medium text-gray-900 mt-0.5">{{ $debitNote->order_date?->format('M d, Y') ?? '—' }}</dd>
            </div>
            <div>
                <dt class="text-gray-500">Payment</dt>
                <dd class="font-medium text-gray-900 mt-0.5 capitalize">{{ str_replace('_', ' ', $debitNote->payment_method ?? 'cash') }}</dd>
            </div>
            <div>
                <dt class="text-gray-500">Bill from</dt>
                <dd class="font-medium text-gray-900 mt-0.5">{{ $debitNote->company?->name ?? '—' }}</dd>
            </div>
            <div>
                <dt class="text-gray-500">Supplier</dt>
                <dd class="font-medium text-gray-900 mt-0.5">{{ $debitNote->supplier?->name ?? '—' }}</dd>
            </div>
            <div>
                <dt class="text-gray-500">Created by</dt>
                <dd class="font-medium text-gray-900 mt-0.5">{{ $debitNote->creator?->name ?? '—' }}</dd>
            </div>
        </dl>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6 pt-6 border-t border-gray-100">
            <div class="rounded-lg border border-gray-200 p-4 bg-gray-50/50">
                <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2">Company</h2>
                <p class="font-semibold text-gray-900">{{ $debitNote->company?->name }}</p>
                @if($debitNote->company)
                    <div class="text-sm text-gray-600 mt-2 space-y-0.5">
                        @if($debitNote->company->email)<p>{{ $debitNote->company->email }}</p>@endif
                        @if($debitNote->company->phone)<p>{{ $debitNote->company->phone }}</p>@endif
                    </div>
                @endif
            </div>
            <div class="rounded-lg border border-gray-200 p-4 bg-gray-50/50">
                <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2">Supplier</h2>
                <p class="font-semibold text-gray-900">{{ $debitNote->supplier?->name }}</p>
                @if($debitNote->supplier)
                    <div class="text-sm text-gray-600 mt-2 space-y-0.5">
                        @if($debitNote->supplier->email)<p>{{ $debitNote->supplier->email }}</p>@endif
                        @if($debitNote->supplier->phone)<p>{{ $debitNote->supplier->phone }}</p>@endif
                    </div>
                @endif
            </div>
        </div>

        @if($debitNote->items->isNotEmpty())
            <div class="mt-6 pt-6 border-t border-gray-100">
                <h2 class="text-sm font-semibold text-gray-700 mb-3">Line items</h2>
                <div class="overflow-x-auto rounded-lg border border-gray-200">
                    <table class="w-full text-sm text-left">
                        <thead class="bg-gray-50 text-xs uppercase text-gray-500">
                            <tr>
                                <th class="px-4 py-2">Description</th>
                                <th class="px-4 py-2 text-right">Unit</th>
                                <th class="px-4 py-2 text-right">Qty</th>
                                <th class="px-4 py-2 text-right">Rate</th>
                                <th class="px-4 py-2 text-right">Discount</th>
                                <th class="px-4 py-2 text-right">Tax %</th>
                                <th class="px-4 py-2 text-right">Amount</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @foreach($debitNote->items as $line)
                                <tr>
                                    <td class="px-4 py-2 text-gray-900">{{ $line->description }}</td>
                                    <td class="px-4 py-2 text-right text-gray-600">{{ $line->unit ?? '—' }}</td>
                                    <td class="px-4 py-2 text-right text-gray-600">{{ $line->quantity }}</td>
                                    <td class="px-4 py-2 text-right text-gray-600">{{ \App\Models\Currency::formatAmount((float) $line->rate) }}</td>
                                    <td class="px-4 py-2 text-right text-gray-600">{{ \App\Models\Currency::formatAmount((float) $line->discount) }}</td>
                                    <td class="px-4 py-2 text-right text-gray-600">{{ $line->tax_rate }}</td>
                                    <td class="px-4 py-2 text-right font-medium text-gray-900">{{ \App\Models\Currency::formatAmount((float) $line->amount) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endif

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-6 pt-6 border-t border-gray-100">
            <div class="sm:col-span-2 flex flex-wrap justify-end gap-4 text-sm">
                <div class="text-right">
                    <span class="text-gray-500">Subtotal</span>
                    <p class="font-medium text-gray-900">{{ \App\Models\Currency::formatAmount((float) $debitNote->amount) }}</p>
                </div>
                <div class="text-right">
                    <span class="text-gray-500">Tax</span>
                    <p class="font-medium text-gray-900">{{ \App\Models\Currency::formatAmount((float) $debitNote->tax_amount) }}</p>
                </div>
                <div class="text-right">
                    <span class="text-gray-500">Discount</span>
                    <p class="font-medium text-gray-900">{{ \App\Models\Currency::formatAmount((float) $debitNote->discount_amount) }}</p>
                </div>
                <div class="text-right border-l border-gray-200 pl-4">
                    <span class="text-gray-500">Total</span>
                    <p class="text-lg font-bold text-gray-900">{{ \App\Models\Currency::formatAmount((float) $debitNote->total) }}</p>
                </div>
            </div>
        </div>

        @if($debitNote->notes || $debitNote->terms)
            <div class="mt-6 pt-6 border-t border-gray-100 space-y-4 text-sm">
                @if($debitNote->notes)
                    <div>
                        <h3 class="font-semibold text-gray-700 mb-1">Notes</h3>
                        <p class="text-gray-600 whitespace-pre-wrap">{{ $debitNote->notes }}</p>
                    </div>
                @endif
                @if($debitNote->terms)
                    <div>
                        <h3 class="font-semibold text-gray-700 mb-1">Terms</h3>
                        <p class="text-gray-600 whitespace-pre-wrap">{{ $debitNote->terms }}</p>
                    </div>
                @endif
            </div>
        @endif

        @if($debitNote->signature)
            <div class="mt-6 pt-6 border-t border-gray-100">
                <h3 class="text-sm font-semibold text-gray-700 mb-2">Signature</h3>
                <p class="text-sm text-gray-900">{{ $debitNote->signature->name }}</p>
            </div>
        @endif
    </div>
</div>

<!-- Delete confirmation (show page) -->
<div id="show-delete-modal" class="hidden fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" role="dialog" aria-modal="true">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-md">
        <div class="p-6">
            <div class="flex items-start gap-3">
                <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-red-100">
                    <span class="material-symbols-outlined text-red-600">warning</span>
                </div>
                <div class="flex-1 min-w-0">
                    <h3 class="text-lg font-semibold text-gray-900">Delete debit note</h3>
                    <p class="text-sm text-gray-600 mt-2">Delete <strong>{{ $debitNote->debit_note_number }}</strong>? This cannot be undone.</p>
                </div>
            </div>
            <div class="flex justify-end gap-3 mt-6">
                <button type="button" onclick="closeShowDeleteModal()" class="px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50">Cancel</button>
                <form method="POST" action="{{ route('admin.debit-notes.destroy', $debitNote) }}" class="inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="px-4 py-2 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function openShowDeleteModal() {
    document.getElementById('show-delete-modal').classList.remove('hidden');
}
function closeShowDeleteModal() {
    document.getElementById('show-delete-modal').classList.add('hidden');
}
document.getElementById('show-delete-modal')?.addEventListener('click', function(e) {
    if (e.target === this) closeShowDeleteModal();
});
</script>
@endpush
@endsection