@extends('temple.layouts.app')

@section('title', 'Mark Payment — ' . ($receipt->receipt_number ?: $receipt->id))

@section('content')

@php
    /*
    |--------------------------------------------------------------------------
    | DEVOTEE GROUPS (same logic as receipts index / receipt view)
    |--------------------------------------------------------------------------
    */

    $devotees = $receipt->devotees ?? collect();

    if (! $devotees instanceof \Illuminate\Support\Collection) {
        $devotees = collect($devotees);
    }

    $groups = collect();

    foreach ($devotees as $devoteeRow) {

        $groupItems = $devoteeRow->items ?? collect();

        if (! $groupItems instanceof \Illuminate\Support\Collection) {
            $groupItems = collect($groupItems);
        }

        $groups->push([
            'name'       => $devoteeRow->devotee_name ?: 'Walk-in Devotee',
            'nakshatram' => $devoteeRow->nakshatram,
            'items'      => $groupItems,
        ]);
    }

    if ($groups->isEmpty()) {

        $legacyItems = $receipt->items ?? collect();

        if (! $legacyItems instanceof \Illuminate\Support\Collection) {
            $legacyItems = collect($legacyItems);
        }

        $groups->push([
            'name'       => $receipt->devotee_name ?: 'Walk-in Devotee',
            'nakshatram' => $receipt->nakshatram,
            'items'      => $legacyItems,
        ]);
    }

    $groupCount = $groups->count();

    $grandTotal = $groups->sum(function ($group) {
        return $group['items']->sum(function ($item) {
            return (float) ($item->amount ?? 0);
        });
    });

    $grandQuantity = $groups->sum(function ($group) {
        return $group['items']->sum(function ($item) {
            return (int) ($item->quantity ?? 0);
        });
    });

    $totalAmount = (float) ($receipt->total_amount ?: $grandTotal);
@endphp

<div class="receipt-create-container">

    {{-- Header --}}
    <div class="vazhipad-header">
        <div class="vazhipad-header-left">
            <div class="vazhipad-header-icon">
                <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                    <circle cx="12" cy="12" r="10"></circle>
                    <path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"></path>
                    <path d="M12 18V6"></path>
                </svg>
            </div>
            <div class="vazhipad-header-titles">
                <h1 class="vazhipad-page-title">Counter Payment Update</h1>
                <p class="vazhipad-page-subtitle">Update payment status and collection method for Receipt #{{ $receipt->receipt_number ?: $receipt->id }}</p>
            </div>
        </div>

        <div class="vazhipad-header-actions">
            <a href="{{ route('temple.receipt-printing.show', $receipt) }}" class="btn-temple btn-temple-secondary">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="19" y1="12" x2="5" y2="12"></line>
                    <polyline points="12 19 5 12 12 5"></polyline>
                </svg>
                <span>Back to Receipt</span>
            </a>
        </div>
    </div>

    @if ($errors->any())
        <div class="temple-alert temple-alert--danger" id="paymentErrorAlert">
            <div class="temple-alert-content" style="align-items: flex-start;">
                <div class="temple-alert-icon" style="margin-top: 2px;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="12" y1="8" x2="12" y2="12"></line>
                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
                    </svg>
                </div>
                <div>
                    <strong style="display: block; margin-bottom: 4px;">Please review the following:</strong>
                    <ul style="margin: 0; padding-left: 18px; font-size: 13.5px;">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <button type="button" class="temple-alert-close" onclick="document.getElementById('paymentErrorAlert').remove()" aria-label="Close">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>
        </div>
    @endif

    {{-- Devotee & Receipt Summary Card --}}
    <div class="receipt-card-section" style="margin-bottom: 24px;">
        <div class="vazhipad-card-accent"></div>
        <div class="receipt-card-header">
            <h3 class="receipt-card-title">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: var(--gold-600);">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                </svg>
                <span>Receipt Summary</span>
            </h3>

            <span class="receipt-id-badge">
                {{ $receipt->receipt_number ?: '#RC-' . str_pad($receipt->id, 6, '0', STR_PAD_LEFT) }}
            </span>
        </div>

        <div class="receipt-card-body">
            <div class="receipt-meta-grid" style="margin-bottom: 20px;">
                <div>
                    <div class="meta-field-label">Devotee Name</div>
                    <div class="meta-field-value" style="font-family: 'Noto Serif', Georgia, serif; color: var(--maroon-900);">
                        {{ $groups->first()['name'] }}
                        @if($groupCount > 1)
                            <span style="font-size: 12px; color: var(--ink-500); font-weight: 600;">
                                +{{ $groupCount - 1 }} more
                            </span>
                        @endif
                    </div>
                </div>
                <div>
                    <div class="meta-field-label">Nakshatram</div>
                    <div class="meta-field-value">
                        @if($groupCount > 1)
                            <span style="color: var(--ink-400); font-size: 13px;">Multiple — see below</span>
                        @elseif(!empty($groups->first()['nakshatram']))
                            <span class="nakshatram-tag"> {{ $groups->first()['nakshatram'] }}</span>
                        @else
                            <span style="color: var(--ink-400);">—</span>
                        @endif
                    </div>
                </div>
                <div>
                    <div class="meta-field-label">Receipt Date</div>
                    <div class="meta-field-value">
                        {{ optional($receipt->receipt_date ?: $receipt->receipts_date)->format('d M Y') ?: 'N/A' }}
                    </div>
                </div>
                <div>
                    <div class="meta-field-label">Total Amount</div>
                    <div class="meta-field-value" style="font-size: 16px; color: var(--maroon-900);">
                        ₹{{ number_format($totalAmount, 2) }}
                    </div>
                </div>
            </div>

            <table class="receipt-slip-table">
                <thead>
                    <tr>
                        <th>Vazhipad Offering</th>
                        <th style="width: 20%; text-align: center;">Quantity</th>
                        <th style="width: 25%; text-align: right;">Amount (₹)</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($groups as $group)

                        @php
                            $groupTotal = $group['items']->sum(fn ($i) => (float) ($i->amount ?? 0));
                            $groupQty   = $group['items']->sum(fn ($i) => (int) ($i->quantity ?? 0));
                        @endphp

                        {{-- Devotee heading row (only when more than one devotee) --}}
                        @if($groupCount > 1)
                            <tr style="background: #fffaf0;">
                                <td colspan="3" style="font-weight: 700; color: var(--maroon-900);">
                                    Devotee {{ $loop->iteration }} — {{ $group['name'] }}
                                    @if(!empty($group['nakshatram']))
                                        <span class="nakshatram-tag">{{ $group['nakshatram'] }}</span>
                                    @endif
                                </td>
                            </tr>
                        @endif

                        @forelse ($group['items'] as $item)
                            <tr>
                                <td><strong>{{ $item->vazhipad?->name ?? $item->vazhipad?->vazhipad_name ?? 'Offering' }}</strong></td>
                                <td style="text-align: center;">{{ $item->quantity ?? 1 }}</td>
                                <td style="text-align: right; font-weight: 600;">₹{{ number_format((float) ($item->amount ?? 0), 2) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" style="text-align: center; color: var(--ink-400); font-style: italic;">No Vazhipad items found.</td>
                            </tr>
                        @endforelse

                        @if($groupCount > 1)
                            <tr>
                                <td style="font-weight: 700; color: var(--maroon-900);">{{ $group['name'] }} Total</td>
                                <td style="text-align: center; font-weight: 700;">{{ $groupQty }}</td>
                                <td style="text-align: right; font-weight: 700; color: var(--maroon-900);">
                                    ₹{{ number_format($groupTotal, 2) }}
                                </td>
                            </tr>
                        @endif

                    @endforeach

                    <tr class="receipt-total-row">
                        <td style="font-family: 'Noto Serif', Georgia, serif; font-weight: 700; color: var(--maroon-900);">Grand Total</td>
                        <td style="text-align: center; font-weight: 700;">{{ $grandQuantity }} items</td>
                        <td style="text-align: right; font-weight: 700; font-size: 17px; color: var(--maroon-900);">
                            ₹{{ number_format($totalAmount, 2) }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    {{-- Payment Form Card --}}
    <div class="receipt-card-section" style="max-width: 620px;">
        <div class="vazhipad-card-accent"></div>
        <div class="receipt-card-header">
            <h3 class="receipt-card-title">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: var(--green-600);">
                    <circle cx="12" cy="12" r="10"></circle>
                    <polyline points="12 6 12 12 14 14"></polyline>
                </svg>
                <span>Update Counter Payment</span>
            </h3>
        </div>

        <div class="receipt-card-body">
            <form method="POST" action="{{ route('temple.receipt-printing.payment', $receipt) }}" id="payment-form">
                @csrf
                @method('PATCH')

                <div class="form-group-item" style="margin-bottom: 18px;">
                    <label class="form-label" for="payment_status">
                        <span>Payment Status</span>
                        <span style="color: var(--red-600); font-weight: 700;">*</span>
                    </label>
                    <select name="payment_status" id="payment_status" class="form-select" required>
                        @php
                            $statuses = [
                                'pending' => 'Pending (Unpaid)',
                                'paid' => 'Paid (Full Amount)',
                                'partially_paid' => 'Partially Paid',
                                'cancelled' => 'Cancelled / Refunded',
                            ];
                        @endphp
                        @foreach ($statuses as $value => $label)
                            <option value="{{ $value }}" @selected(old('payment_status', $receipt->payment_status) === $value)>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group-item" style="margin-bottom: 18px;">
                    <label class="form-label" for="payment_method">Payment Method</label>
                    <select name="payment_method" id="payment_method" class="form-select">
                        <option value="">— Select Payment Method —</option>
                        @php
                            $methods = [
                                'cash' => 'Cash at Counter',
                                'upi' => 'UPI (Google Pay / PhonePe / Paytm)',
                                'card' => 'Debit / Credit Card POS',
                                'bank_transfer' => 'Direct Bank Transfer / NEFT',
                                'other' => 'Other',
                            ];
                        @endphp
                        @foreach ($methods as $value => $label)
                            <option value="{{ $value }}" @selected(old('payment_method', $receipt->payment_method) === $value)>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group-item" style="margin-bottom: 18px; display: none;" id="transaction_id_group">
                    <label class="form-label" for="transaction_id">
                        <span>Transaction ID</span>
                        <span style="color: var(--ink-400); font-weight: 400; font-size: 12px;">(optional)</span>
                    </label>
                    <input type="text"
                           name="transaction_id"
                           id="transaction_id"
                           class="form-control"
                           placeholder="e.g. UPI Ref / UTR / Txn No."
                           value="{{ old('transaction_id', $receipt->transaction_id ?? '') }}">
                    <span style="font-size: 12px; color: var(--ink-400); margin-top: 4px;">
                        Enter the UPI reference number or transaction/UTR number, if available.
                    </span>
                </div>

                <div class="form-group-item" style="margin-bottom: 18px;">
                    <label class="form-label">Total Bill Amount</label>
                    <div style="position: relative;">
                        <span style="position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--gold-600);">₹</span>
                        <input type="text"
                               class="form-control"
                               style="padding-left: 32px; background: var(--cream-50); font-weight: 700; color: var(--maroon-900);"
                               value="{{ number_format($totalAmount, 2) }}"
                               disabled>
                    </div>
                </div>

                <div class="form-group-item" style="margin-bottom: 24px;">
                    <label class="form-label" for="paid_amount">
                        <span>Paid Amount (₹)</span>
                        <span style="color: var(--red-600); font-weight: 700;">*</span>
                    </label>
                    <div style="position: relative;">
                        <span style="position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--gold-600);">₹</span>
                        <input type="number"
                               step="0.01"
                               min="0"
                               max="{{ $totalAmount }}"
                               name="paid_amount"
                               id="paid_amount"
                               class="form-control"
                               style="padding-left: 32px; font-weight: 700;"
                               value="{{ old('paid_amount', $receipt->paid_amount ?: $totalAmount) }}"
                               required>
                    </div>
                    <span style="font-size: 12px; color: var(--ink-400); margin-top: 4px;">
                        Cannot exceed the total amount of ₹{{ number_format($totalAmount, 2) }}.
                    </span>
                </div>

                <div style="display: flex; align-items: center; justify-content: flex-end; gap: 12px;">
                    <a href="{{ route('temple.receipt-printing.show', $receipt) }}" class="btn-temple btn-temple-secondary">
                        Cancel
                    </a>

                    <button type="submit" class="btn-temple btn-temple-primary">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        <span>Update Payment Status</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>

@push('scripts')
<script>
    (function () {
        const totalAmount = {{ $totalAmount }};
        const statusSelect = document.getElementById('payment_status');
        const paidAmountInput = document.getElementById('paid_amount');
        const methodSelect = document.getElementById('payment_method');
        const transactionIdGroup = document.getElementById('transaction_id_group');
        const transactionIdInput = document.getElementById('transaction_id');

        function toggleTransactionIdField() {
            const methodsWithTxnId = ['upi', 'other'];
            if (methodsWithTxnId.includes(methodSelect.value)) {
                transactionIdGroup.style.display = '';
            } else {
                transactionIdGroup.style.display = 'none';
                transactionIdInput.value = '';
            }
        }

        statusSelect?.addEventListener('change', function () {
            if (this.value === 'paid') {
                paidAmountInput.value = totalAmount.toFixed(2);
            } else if (this.value === 'cancelled' || this.value === 'pending') {
                paidAmountInput.value = '0.00';
            }
        });

        paidAmountInput?.addEventListener('input', function () {
            if (parseFloat(this.value) > totalAmount) {
                this.value = totalAmount.toFixed(2);
            }
        });

        methodSelect?.addEventListener('change', toggleTransactionIdField);

        // Run on load so old()/existing value state is respected (e.g. validation errors, edit).
        toggleTransactionIdField();
    })();
</script>
@endpush
@endsection