@extends('layouts.dashboard')

@section('title', 'Issue Receipt')
@section('header', 'Issue Receipt')

@section('sidebar')
@include('company-admin.partials.sidebar')
@endsection

@section('content')
<div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
    <form action="{{ route('company.receipts.store') }}" method="POST">
        @csrf
        
        <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Select Payment</h3>
            <p class="text-sm text-gray-600">Choose a completed payment to issue a receipt for.</p>
        </div>

        <div class="mb-6">
            <label for="payment_id" class="block text-sm font-medium text-gray-700 mb-2">Payment *</label>
            <select name="payment_id" id="payment_id" required 
                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition duration-200"
                onchange="loadPaymentDetails(this.value)">
                <option value="">Select Payment</option>
                @foreach($payments as $payment)
                <option value="{{ $payment->id }}" {{ old('payment_id', $selectedPayment?->id) == $payment->id ? 'selected' : '' }}>
                    {{ $payment->payment_number }} - {{ number_format($payment->amount, 0) }} {{ $payment->currency }} 
                    ({{ $payment->payment_date ? \Carbon\Carbon::parse($payment->payment_date)->format('M d, Y') : 'N/A' }})
                </option>
                @endforeach
            </select>
            @error('payment_id')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
            @if($payments->isEmpty())
            <p class="mt-2 text-sm text-amber-600">
                No completed payments available. Payments must be marked as "completed" to issue receipts.
            </p>
            @endif
        </div>

        <div id="payment-details" class="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200" style="display: none;">
            <h4 class="text-sm font-semibold text-gray-700 mb-3">Payment Details</h4>
            <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                    <span class="text-gray-500">Amount:</span>
                    <span class="font-semibold text-gray-900" id="payment-amount">-</span>
                </div>
                <div>
                    <span class="text-gray-500">Method:</span>
                    <span class="font-semibold text-gray-900" id="payment-method">-</span>
                </div>
                <div>
                    <span class="text-gray-500">Date:</span>
                    <span class="font-semibold text-gray-900" id="payment-date">-</span>
                </div>
                <div>
                    <span class="text-gray-500">Reference:</span>
                    <span class="font-semibold text-gray-900" id="payment-reference">-</span>
                </div>
            </div>
        </div>

        <div class="mb-6">
            <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">Notes (Optional)</label>
            <textarea name="notes" id="notes" rows="3" 
                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition duration-200">{{ old('notes') }}</textarea>
            @error('notes')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div class="mt-6 flex justify-end space-x-3">
            <a href="{{ route('company.receipts.index') }}" 
               class="px-6 py-2.5 bg-gray-300 text-gray-700 font-semibold rounded-lg hover:bg-gray-400 transition duration-200">
                Cancel
            </a>
            <button type="submit" 
                    class="px-6 py-2.5 bg-gradient-to-r from-violet-600 to-purple-600 text-white font-semibold rounded-lg hover:from-violet-700 hover:to-purple-700 transition duration-200 shadow-lg hover:shadow-xl"
                    {{ $payments->isEmpty() ? 'disabled' : '' }}>
                Issue Receipt
            </button>
        </div>
    </form>
</div>

<script>
const payments = @json($payments->keyBy('id'));

function loadPaymentDetails(paymentId) {
    const detailsDiv = document.getElementById('payment-details');
    if (!paymentId || !payments[paymentId]) {
        detailsDiv.style.display = 'none';
        return;
    }

    const payment = payments[paymentId];
    document.getElementById('payment-amount').textContent = 
        new Intl.NumberFormat().format(payment.amount) + ' ' + payment.currency;
    document.getElementById('payment-method').textContent = 
        payment.payment_method ? payment.payment_method.replace('_', ' ').toUpperCase() : 'N/A';
    document.getElementById('payment-date').textContent = 
        payment.payment_date ? new Date(payment.payment_date).toLocaleDateString() : 'N/A';
    document.getElementById('payment-reference').textContent = 
        payment.reference_number || 'N/A';
    
    detailsDiv.style.display = 'block';
}

// Load details if payment is pre-selected
@if($selectedPayment)
loadPaymentDetails({{ $selectedPayment->id }});
@endif
</script>
@endsection