@extends('layouts.app')
@extends('layouts.components.menu')

@section('content')
<div x-data="partyPaymentCrud(@js($partyPayment), @js($party), @js($trips))" class="container py-5">
    <form @submit.prevent="submitForm">
        <div class="card shadow border-0 mb-4">
            <div class="card-header bg-primary text-white py-3 d-flex justify-content-between align-items-center">
                <a class="btn btn-secondary btn-sm" href="/parties/{{ $party->id }}">
                    <i class="ph ph-arrow-left me-2"></i> Go Back
                </a>
                <h4 class="text-white mb-0">
                    <i class="ph ph-pencil-line me-2"></i> Edit Party Payment
                </h4>
                <button type="submit" class="btn btn-success px-5" :disabled="isLoading">
                    <i class="ph ph-check-circle me-2"></i> Update Payment
                </button>
            </div>

            <div class="card-body p-4">
                <div class="row g-4 mb-3">
                    <div class="col-md-3">
                        <label class="form-label fw-bold text-uppercase small text-muted">Payment Date</label>
                        <input type="date" x-model="form.entry_date" class="form-control shadow-sm">
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-bold text-uppercase small text-muted">Total Amount Collected</label>
                        <input type="number" x-model.number="form.amount" class="form-control shadow-sm" placeholder="0.00">
                        <div class="form-text" :class="unallocatedAmount() == 0 ? 'text-success' : 'text-danger'" 
                             x-text="'Unallocated: ' + unallocatedAmount()"></div>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-bold text-uppercase small text-muted">Mode of Payment</label>
                        <select class="form-select shadow-sm" x-model="form.payment_mode">
                            <template x-for="mode in paymentModes" :key="mode">
                                <option :value="mode" x-text="mode"></option>
                            </template>
                        </select>
                    </div>

                    <div class="col-md-3" x-show="form.payment_mode !== 'Cash'">
                        <label class="form-label fw-bold text-uppercase small text-muted">Reference #</label>
                        <input type="text" x-model="form.reference_no" class="form-control shadow-sm">
                    </div>

                    <div class="col-md-12">
                        <label class="form-label fw-bold text-uppercase small text-muted">Notes</label>
                        <textarea x-model="form.notes" class="form-control" rows="1"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow border-0">
            <div class="card-header bg-light d-flex justify-content-between">
                <h5 class="mb-0">Trip Allocation</h5>
                <span class="badge bg-info text-dark" x-text="form.trips.length + ' Trips Selected'"></span>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th width="50"></th>
                            <th>Trip Date</th>
                            <th>LR/Ref</th>
                            <th>Route</th>
                            <th>Balance Available</th>
                            <th width="200">This Payment</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="trip in trips" :key="trip.id">
                            <tr :class="isTripSelected(trip.id) ? 'table-primary' : ''" @click="toggleTrip(trip)" style="cursor: pointer;">
                                <td><input type="checkbox" :checked="isTripSelected(trip.id)" class="form-check-input"></td>
                                <td x-text="trip.pickup_date || '--'"></td>
                                <td x-text="trip.parsed_lr || '--'"></td>
                                <td>
                                    <span x-text="trip.pickup"></span> → <span x-text="trip.delivery"></span>
                                </td>
                                <td class="fw-bold" x-text="getAvailableBalance(trip)"></td>
                                <td @click.stop>
                                    <div x-show="isTripSelected(trip.id)">
                                        <input type="number" 
                                               class="form-control form-control-sm border-primary" 
                                               :value="getTripAmount(trip.id)"
                                               @input="updateTripAmount(trip.id, $event.target.value)"
                                               placeholder="0.00">
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
    </form>
</div>
@endsection

@push('inline-scripts')
<script>
    function partyPaymentCrud(partyPayment, party, trips) {
        return {
            isLoading: false,
            party: party,
            trips: Array.isArray(trips) ? trips : Object.values(trips),
            paymentModes: ['Cash', 'Cheque', 'UPI', 'Bank Transfer'],
            form: {
                amount: partyPayment.amount || 0,
                payment_mode: partyPayment.payment_mode || 'Cash',
                reference_no: partyPayment.reference_no || '',
                entry_date: partyPayment.entry_date || '',
                notes: partyPayment.notes || '',
                trips: []
            },

            init() {
                // Map existing trip allocations into the form
                if (partyPayment.trips) {
                    this.form.trips = partyPayment.trips.map(t => ({
                        trip_id: t.trip_id,
                        amount: parseFloat(t.amount)
                    }));
                }
            },

            // Crucial for Edit: The trip balance in the DB is currently Reduced by this payment.
            // We need to show the user what the balance WOULD be if they unselected this payment.
            getAvailableBalance(trip) {
                let currentAllocation = 0;
                const existing = this.form.trips.find(t => t.trip_id === trip.id);
                if (existing) currentAllocation = existing.amount;
                
                return (parseFloat(trip.payment_balance) + currentAllocation).toFixed(2);
            },

            isTripSelected(tripId) {
                return this.form.trips.some(t => t.trip_id === tripId);
            },

            toggleTrip(trip) {
                const index = this.form.trips.findIndex(t => t.trip_id === trip.id);
                if (index > -1) {
                    this.form.trips.splice(index, 1);
                } else {
                    const balance = parseFloat(this.getAvailableBalance(trip));
                    let suggested = Math.min(this.unallocatedAmount(), balance);
                    if (suggested <= 0) suggested = balance;

                    this.form.trips.push({ trip_id: trip.id, amount: suggested });
                }
            },

            updateTripAmount(tripId, value) {
                const trip = this.form.trips.find(t => t.trip_id === tripId);
                if (trip) trip.amount = parseFloat(value) || 0;
            },

            getTripAmount(tripId) {
                const trip = this.form.trips.find(t => t.trip_id === tripId);
                return trip ? trip.amount : 0;
            },

            unallocatedAmount() {
                const allocated = this.form.trips.reduce((sum, t) => sum + (t.amount || 0), 0);
                return (this.form.amount - allocated).toFixed(2);
            },

            async submitForm() {
                if (parseFloat(this.unallocatedAmount()) !== 0) {
                    if (!confirm("Allocation doesn't match Total Amount. Proceed?")) return;
                }

                this.isLoading = true;
                
                try {
                    // Method spoofing for PUT request
                    const res = await axios.post(`/parties/payments/${partyPayment.id}`, {
                        ...this.form,
                        _method: 'PUT' 
                    });
                    
                    alert('Payment updated successfully');
                    window.location.href = `/parties/${this.party.id}`;
                } catch (e) {
                    alert(e.response?.data?.message || 'Update failed');
                } finally {
                    this.isLoading = false;
                }
            }
        };
    }
</script>
@endpush