@extends('layouts.aura-main')

@section('main-content')
<div class="max-w-3xl mx-auto pb-20">
    <div class="mb-6">
        <a href="{{ url()->previous() }}" class="text-[10px] font-black uppercase tracking-widest text-slate-400 hover:text-indigo-600 flex items-center gap-2 mb-4">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M15 19l-7-7 7-7"></path></svg>
            Cancel and Go Back
        </a>
        <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Confirm Payment Reversal</h1>
        <p class="text-[11px] font-bold uppercase tracking-widest text-rose-600 italic">Audit Action: Issuing Contra-Entry</p>
    </div>

    <form action="{{ route('suppliers.billpayments.reverse_store', $payment->id) }}" method="POST">
        @csrf
        <div class="space-y-6">
            <div class="bg-white border border-slate-300 rounded-sm shadow-sm overflow-hidden">
                <div class="p-4 bg-slate-50 border-b border-slate-200">
                    <h2 class="text-[10px] font-black text-slate-700 uppercase tracking-widest">Original Transaction Details</h2>
                </div>
                <div class="grid grid-cols-2 p-6 gap-6">
                    <div>
                        <p class="text-[8px] font-black text-slate-400 uppercase mb-1">Supplier</p>
                        <p class="text-xs font-bold text-slate-800">{{ $payment->supplier->name }}</p>
                    </div>
                    <div>
                        <p class="text-[8px] font-black text-slate-400 uppercase mb-1">Source Account</p>
                        <p class="text-xs font-bold text-slate-800">{{ $payment->bankAccount->name }}</p>
                    </div>
                    <div>
                        <p class="text-[8px] font-black text-slate-400 uppercase mb-1">Reference</p>
                        <p class="text-xs font-mono font-bold text-indigo-600 uppercase">{{ $payment->reference }}</p>
                    </div>
                    <div>
                        <p class="text-[8px] font-black text-slate-400 uppercase mb-1">Amount Paid</p>
                        <p class="text-sm font-black text-slate-900 font-mono">K{{ number_format($payment->credit, 2) }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-rose-50 border border-rose-200 rounded-sm p-6">
                <h3 class="text-[10px] font-black text-rose-800 uppercase tracking-widest mb-4 flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                    System Impact Analysis
                </h3>
                <ul class="space-y-2">
                    <li class="flex items-center gap-3 text-[11px] text-slate-700 font-medium">
                        <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
                        A **Contra-Debit** of K{{ number_format($payment->credit, 2) }} will be added to the Cashbook.
                    </li>
                    <li class="flex items-center gap-3 text-[11px] text-slate-700 font-medium">
                        <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
                        Bill **#{{ $payment->bill->bill_no }}** balance will increase by K{{ number_format($payment->credit, 2) }}.
                    </li>
                    <li class="flex items-center gap-3 text-[11px] text-slate-700 font-medium">
                        <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
                        Original payment reference will be marked as **Reversed**.
                    </li>
                </ul>
            </div>

            <div class="bg-white border border-slate-300 rounded-sm p-6 shadow-sm">
                <label class="block text-[9px] font-black uppercase text-slate-900 mb-2">Reason for Reversal <span class="text-rose-600">*</span></label>
                <textarea name="reason" required 
                    placeholder="Enter detailed reason for the audit trail..." 
                    class="w-full border border-slate-300 rounded-sm p-4 text-xs font-medium focus:border-indigo-500 outline-none h-32 bg-slate-50 shadow-inner"></textarea>
                @error('reason') <p class="text-[10px] text-rose-600 font-bold mt-1 uppercase">{{ $message }}</p> @enderror
            </div>

            <div class="flex justify-end gap-3">
                <a href="{{ url()->previous() }}" class="px-6 py-3 text-[10px] font-black uppercase text-slate-400 hover:text-slate-600 transition">Discard Action</a>
                <button type="submit" class="bg-rose-600 text-white px-8 py-3 rounded-sm text-[10px] font-black uppercase tracking-[0.1em] hover:bg-rose-700 transition shadow-md">
                    Execute Reversal
                </button>
            </div>
        </div>
    </form>
</div>
@endsection