@extends('layouts.app')

@section('title', 'Purchase Details')

@section('content')
@can('view_purchases')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Purchase Details</h1>
        <a href="{{ route('purchases.index') }}" class="text-sm text-blue-600 hover:text-blue-800">&larr; Back to Purchases</a>
    </div>
    @can('edit_purchases')
        @if($purchase->payment_status !== 'paid')
        <button onclick="openPaymentModal({{ $purchase->id }}, '{{ $purchase->purchase_no }}', '{{ addslashes($purchase->supplier->name) }}', {{ $purchase->total_amount }}, {{ $purchase->paid_amount }}, {{ $purchase->total_amount - $purchase->paid_amount }})" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 flex items-center gap-2">
            <i class="fas fa-credit-card"></i> Record Payment
        </button>
        @endif
    @endcan
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 max-w-4xl">
    <div class="flex justify-between items-start mb-8">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Purchase Order</h2>
            <p class="text-gray-600">From: {{ $purchase->supplier->name }}</p>
        </div>
        <div class="text-right">
            <p class="text-lg font-bold text-blue-600">{{ $purchase->purchase_no }}</p>
            <p class="text-sm text-gray-500">{{ displayDate($purchase->purchase_date) }}</p>
        </div>
    </div>

    <table class="min-w-full divide-y divide-gray-200 mb-8">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">#</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Product</th>
                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Cost Price</th>
                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Qty</th>
                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Subtotal</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
            @foreach($purchase->items as $index => $item)
                <tr>
                    <td class="px-4 py-3 text-sm text-gray-600">{{ $index + 1 }}</td>
                    <td class="px-4 py-3 text-sm font-medium">{{ $item->product->name }}</td>
                    <td class="px-4 py-3 text-sm text-right">${{ number_format($item->cost_price, 2) }}</td>
                    <td class="px-4 py-3 text-sm text-center">{{ $item->quantity }}</td>
                    <td class="px-4 py-3 text-sm text-right font-medium">${{ number_format($item->subtotal, 2) }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <div class="flex justify-end">
        <div class="w-72">
            <div class="flex justify-between text-sm py-1"><span class="text-gray-600">Subtotal</span><span>${{ number_format($purchase->subtotal, 2) }}</span></div>
            <div class="flex justify-between text-sm py-1"><span class="text-gray-600">Discount</span><span class="text-red-600">-${{ number_format($purchase->discount, 2) }}</span></div>
            <div class="border-t border-gray-200 mt-2 pt-2 flex justify-between font-bold text-lg"><span>Total</span><span class="text-blue-600">${{ number_format($purchase->total_amount, 2) }}</span></div>
            <div class="flex justify-between text-sm py-1 mt-2"><span class="text-gray-600">Payment Status</span><span class="capitalize font-medium">{{ $purchase->payment_status }}</span></div>
            <div class="flex justify-between text-sm py-1"><span class="text-gray-600">Paid</span><span class="text-green-600">${{ number_format($purchase->paid_amount, 2) }}</span></div>
        </div>
    </div>
</div>
@endcan

<div id="paymentModal" class="hidden fixed inset-0 bg-gray-900/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-lg overflow-hidden">
        <div class="flex items-center justify-between p-5 border-b border-gray-200 bg-gradient-to-r from-brand-500 to-brand-600">
            <h3 class="text-lg font-semibold text-white flex items-center gap-2">
                <i class="fas fa-credit-card"></i> Record Payment
            </h3>
            <button onclick="closePaymentModal()" class="text-white/80 hover:text-white transition-colors">
                <i class="fas fa-times text-lg"></i>
            </button>
        </div>

        <form id="paymentForm" method="POST" action="" class="p-6 space-y-4">
            @csrf
            <div class="bg-gray-50 rounded-lg p-4 space-y-2 text-sm">
                <div class="flex justify-between"><span class="text-gray-600">Purchase No:</span><span id="modalPurchaseNo" class="font-medium text-gray-900"></span></div>
                <div class="flex justify-between"><span class="text-gray-600">Supplier:</span><span id="modalSupplier" class="font-medium text-gray-900"></span></div>
                <div class="flex justify-between"><span class="text-gray-600">Total Amount:</span><span id="modalTotal" class="font-medium text-gray-900"></span></div>
                <div class="flex justify-between"><span class="text-gray-600">Current Paid:</span><span id="modalPaid" class="font-medium text-green-600"></span></div>
                <div class="flex justify-between border-t border-gray-200 pt-2"><span class="font-semibold text-gray-700">Remaining:</span><span id="modalRemaining" class="font-bold text-blue-600"></span></div>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Payment Amount <span class="text-red-500">*</span></label>
                <input type="number" name="amount" id="paymentAmount" step="0.01" min="0.01" required
                    class="w-full rounded-lg border px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-1 focus:ring-brand-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Payment Account <span class="text-red-500">*</span></label>
                <select name="payment_account_id" required class="w-full rounded-lg border px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-1 focus:ring-brand-500">
                    <option value="">Select Account</option>
                    @foreach($paymentAccounts as $account)
                        <option value="{{ $account->id }}">{{ $account->name }} (Balance: ${{ number_format($account->balance, 2) }})</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Notes</label>
                <textarea name="notes" rows="2" class="w-full rounded-lg border px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-1 focus:ring-brand-500" placeholder="Optional notes..."></textarea>
            </div>

            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="closePaymentModal()" class="px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100 transition-colors font-medium">
                    Cancel
                </button>
                <button type="submit" class="px-5 py-2 text-sm bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors font-medium shadow-sm">
                    <i class="fas fa-check mr-1.5"></i> Record Payment
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openPaymentModal(purchaseId, purchaseNo, supplier, total, paid, remaining) {
    document.getElementById('paymentModal').classList.remove('hidden');
    document.getElementById('modalPurchaseNo').textContent = purchaseNo;
    document.getElementById('modalSupplier').textContent = supplier;
    document.getElementById('modalTotal').textContent = '$' + parseFloat(total).toFixed(2);
    document.getElementById('modalPaid').textContent = '$' + parseFloat(paid).toFixed(2);
    document.getElementById('modalRemaining').textContent = '$' + parseFloat(remaining).toFixed(2);
    document.getElementById('paymentAmount').value = parseFloat(remaining).toFixed(2);
    document.getElementById('paymentForm').action = '{{ url("purchases") }}/' + purchaseId + '/pay';
}

function closePaymentModal() {
    document.getElementById('paymentModal').classList.add('hidden');
}

document.getElementById('paymentModal')?.addEventListener('click', function(e) {
    if (e.target === this) closePaymentModal();
});
</script>
@endsection