@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">Make Payment for Invoice: {{ $invoice->invoice_id }}</h1>
    <div class="bg-white p-6 rounded-lg shadow-md max-w-2xl">
        <form action="{{ route('invoices.store-payment', $invoice->invoice_id) }}" method="POST">
            @csrf
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <label for="amount" class="block text-sm font-medium text-gray-700">Amount</label>
                    <input type="number" name="amount" id="amount" step="0.01" value="{{ old('amount', $invoice->serviceOrder ? number_format($invoice->serviceOrder->total_cost - $invoice->payments->sum('amount'), 2) : '0.00') }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" required>
                    @error('amount')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="payment_method" class="block text-sm font-medium text-gray-700">Payment Method</label>
                    <select name="payment_method" id="payment_method" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" required>
                        @foreach(['cash', 'bank'] as $method)
                            <option value="{{ $method }}" {{ old('payment_method') == $method ? 'selected' : '' }}>{{ ucfirst($method) }}</option>
                        @endforeach
                    </select>
                    @error('payment_method')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div id="trx_id_field" class="{{ old('payment_method') == 'bank' ? '' : 'hidden' }}">
                    <label for="trx_id" class="block text-sm font-medium text-gray-700">Transaction ID</label>
                    <input type="text" name="trx_id" id="trx_id" value="{{ old('trx_id') }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" {{ old('payment_method') == 'bank' ? 'required' : '' }}>
                    @error('trx_id')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="branch_id" class="block text-sm font-medium text-gray-700">Branch</label>
                    <select name="branch_id" id="branch_id" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" required>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}" {{ old('branch_id') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                        @endforeach
                    </select>
                    @error('branch_id')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Submit Payment</button>
                <a href="{{ route('invoices.show', $invoice->invoice_id) }}" class="ml-2 bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600">Cancel</a>
            </div>
        </form>
    </div>
</div>

<script>
    document.getElementById('payment_method').addEventListener('change', function () {
        const trxIdField = document.getElementById('trx_id_field');
        if (this.value === 'bank') {
            trxIdField.classList.remove('hidden');
            document.getElementById('trx_id').setAttribute('required', 'required');
        } else {
            trxIdField.classList.add('hidden');
            document.getElementById('trx_id').removeAttribute('required');
        }
    });
</script>
@endsection