<div>
    <div class="row mb-4">
        <div class="col-md-6">
            <h1 class="h3">{{ __('Customer Settlements') }}</h1>
            <p class="text-muted">{{ __('Manage customer payments and settlements') }}</p>
        </div>
        <div class="col-md-6 text-end">
            <!-- Optional: Add manual payment button not tied to specific customer immediately? -->
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body">
            <div class="row g-3 mb-4">
                <div class="col-md-3">
                    <label class="form-label">{{ __('From Date') }}</label>
                    <input type="date" class="form-control" wire:model.live="dateFrom">
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ __('To Date') }}</label>
                    <input type="date" class="form-control" wire:model.live="dateTo">
                </div>
                <div class="col-md-6">
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0"><i class="fas fa-search text-muted"></i></span>
                        <input type="text" class="form-control border-start-0 ps-0" wire:model.live="search" placeholder="{{ __('Search customers...') }}">
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="bg-light">
                        <tr>
                            <th>{{ __('Customer') }}</th>
                            <th>{{ __('Phone') }}</th>
                            <th class="text-end">{{ __('Debited') }}</th>
                            <th class="text-end">{{ __('Credited') }}</th>
                            <th class="text-end">{{ __('Balance') }}</th>
                            <th class="text-end">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($customers as $customer)
                            @php
                                $debit = $customer->period_debit ?? 0;
                                $credit = $customer->period_credit ?? 0;
                                $balance = $debit - $credit; // AR: Debit increases balance
                            @endphp
                            <tr>
                                <td>
                                    <div class="fw-bold">{{ $customer->name }}</div>
                                    <small class="text-muted">{{ $customer->code }}</small>
                                </td>
                                <td>{{ $customer->phone ?? '-' }}</td>
                                <td class="text-end">{{ number_format($debit, 2) }}</td>
                                <td class="text-end">{{ number_format($credit, 2) }}</td>
                                <td class="text-end">
                                    <span class="badge {{ $balance > 0 ? 'bg-danger' : ($balance < 0 ? 'bg-success' : 'bg-secondary') }} fs-6">
                                        {{ number_format($balance, 2) }}
                                    </span>
                                </td>
                                <td class="text-end">
                                        <button class="btn btn-sm btn-outline-info me-1" wire:click="viewHistory({{ $customer->id }})">
                                            <i class="fas fa-history"></i>
                                        </button>
                                    <button class="btn btn-sm btn-primary" wire:click="openSettlementModal({{ $customer->id }})">
                                        <i class="fas fa-money-bill-wave me-1"></i>{{ __('Settle') }}
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-4 text-muted">
                                    <i class="fas fa-users fa-2x mb-2 d-block"></i>
                                    {{ __('No customers with outstanding balances found.') }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Settlement Modal -->
    @if($showSettlementModal)
    <div class="modal fade show d-block" style="background-color: rgba(0,0,0,0.5);">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Settle Customer Balance') }}</h5>
                    <button type="button" class="btn-close" wire:click="closeSettlementModal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">{{ __('Customer') }}</label>
                        <input type="text" class="form-control" value="{{ $selectedPartner->name }}" disabled>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('Current Due Balance') }}</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light fw-bold">{{ number_format($calculatedBalance, 2) }}</span>
                        </div>
                    </div>
                    
                    <hr>

                    <div class="mb-3">
                        <label class="form-label">{{ __('Payment Amount') }} <span class="text-danger">*</span></label>
                        <input type="number" step="0.01" class="form-control" wire:model="amount">
                        @error('amount') <span class="text-danger small">{{ $message }}</span> @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">{{ __('Payment Method') }} <span class="text-danger">*</span></label>
                        <select class="form-select" wire:model="paymentMethodId">
                            @foreach($paymentMethods as $method)
                                <option value="{{ $method->id }}">{{ $method->name }}</option>
                            @endforeach
                        </select>
                        @error('paymentMethodId') <span class="text-danger small">{{ $message }}</span> @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">{{ __('Payment Date') }} <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" wire:model="paymentDate">
                        @error('paymentDate') <span class="text-danger small">{{ $message }}</span> @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">{{ __('Notes') }}</label>
                        <textarea class="form-control" wire:model="notes" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" wire:click="closeSettlementModal">{{ __('Cancel') }}</button>
                    <button type="button" class="btn btn-success" wire:click="createSettlement">
                        <i class="fas fa-check me-1"></i>{{ __('Confirm Payment') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- History Modal -->
    @if($showHistoryModal)
    <div class="modal fade show d-block" style="background-color: rgba(0,0,0,0.5);">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Payment History: ') }} {{ $selectedPartner->name }}</h5>
                    <button type="button" class="btn-close" wire:click="closeHistoryModal"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>{{ __('Date') }}</th>
                                    <th>{{ __('Ref') }}</th>
                                    <th>{{ __('Method') }}</th>
                                    <th>{{ __('User') }}</th>
                                    <th class="text-end">{{ __('Amount') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($partnerHistory as $payment)
                                    <tr>
                                        <td>{{ $payment->payment_date->format('Y-m-d') }}</td>
                                        <td>{{ $payment->payment_number }}</td>
                                        <td>{{ $payment->paymentMethod->name ?? '-' }}</td>
                                        <td>{{ $payment->user->name ?? '-' }}</td>
                                        <td class="text-end fw-bold">{{ number_format($payment->amount, 2) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center">{{ __('No payment history found.') }}</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" wire:click="closeHistoryModal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>
