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

@section('content')
<div x-data="partyPaymentCrud(@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-money-wavy me-2"></i>Add Party Payment</h4>
                <button type="submit" class="btn btn-success px-5" :disabled="isLoading">
                    <i class="ph ph-check-circle me-2"></i> Save 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 text-primary" 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">
                            <option value="">Select Mode</option>
                            <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 && 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" placeholder="Ref/Cheque No.">
                    </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" cols="30" rows="1" placeholder="enter any notes for this payment made by the party"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow border-0">
            <div class="card-header bg-light">
                <h5 class="mb-0">Select Trips to Allocate Payment</h5>
            </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 / Trip Reference</th>
                            <th>Route</th>
                            <th>Total Fare</th>
                            <th width="200">Amount to Pay</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>
                                    <i class="ph ph-arrow-right"></i>
                                    <span x-text="trip.delivery ?? ''"></span>
                                </td>
                                <td class="fw-bold" x-text="trip.payment_balance"></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)"
                                               :max="trip.payment_balance"
                                               placeholder="Enter amount">
                                    </div>
                                    <span x-show="!isTripSelected(trip.id)" class="text-muted small italic">Click to select</span>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            <div class="card-footer bg-white text-end">
                <button type="submit" class="btn btn-success px-5" :disabled="isLoading">
                    <i class="ph ph-check-circle me-2"></i> Save Payment
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('inline-scripts')
<script>
    function partyPaymentCrud(party, trips) {
        return {
            isLoading: false,
            party: party,
            trips: Array.isArray(trips) ? trips : Object.values(trips),
            paymentModes: ['Cash', 'Cheque', 'UPI', 'Bank Transfer'],
            form: {
                amount: 0,
                payment_mode: 'Cash',
                reference_no: '',
                entry_date: new Date().toISOString().split('T')[0],
                trips: [], // This will store { trip_id, amount }
            },

            init() {
                //
            },

            // Check if trip is in the form array
            isTripSelected(tripId) {
                return this.form.trips.some(t => t.trip_id === tripId);
            },

            // Toggle trip selection
            toggleTrip(trip) {
                const index = this.form.trips.findIndex(t => t.trip_id === trip.id);
                
                if (index > -1) {
                    // Remove if already selected
                    this.form.trips.splice(index, 1);
                } else {
                    // Add new trip. Suggest remaining unallocated amount or trip fare
                    let suggestedAmount = Math.min(this.unallocatedAmount(), trip.payment_balance);
                    if (suggestedAmount <= 0) suggestedAmount = trip.payment_balance;

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

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

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

            // Helper to show how much of the "Total Amount" is left to assign
            unallocatedAmount() {
                const allocated = this.form.trips.reduce((sum, t) => sum + (parseFloat(t.amount) || 0), 0);
                return this.form.amount - allocated;
            },

            async submitForm() {
                if (this.unallocatedAmount() !== 0) {
                    if (!confirm("The total trip allocation does not match the Total Amount!")) return;
                }
                
                this.isLoading = true;
                const payload = {
                    'party_id': "{{ $party->id }}",
                    ...this.form,
                    trips: this.form.trips.map(trip => ({
                        ...trip,
                    })),
                };

                try {
                    const res = await axios.post('/parties/payments', payload);
                    showToast(res.data.message);
                    setTimeout(() => {
                        window.location.href = "/parties/{{ $party->id }}";
                    }, 750);
                } catch (e) {
                    alert(e.response?.data?.message || 'Submission failed');
                } finally {
                    this.isLoading = false;
                }
            }
        };
    }
</script>
@endpush