@extends('layouts.app')
@section('title', 'Record Payment'.$invoice->invoice_number)

@section('content')
<div class="content-wrapper">
    <div class="row">
        <div class="col-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <h4 class="card-title mb-1">
                                <i class="mdi mdi-cash-register text-success"></i>
                                Record Payment
                            </h4>
                            <p class="text-muted mb-0">Invoice: <strong>{{ $invoice->invoice_number }}</strong></p>
                        </div>
                        <a href="{{ route('invoice.show', $invoice->id) }}" class="btn btn-outline-secondary">
                            <i class="mdi mdi-arrow-left"></i> Back to Invoice
                        </a>
                    </div>

                    @include('layouts.partials.flash')

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card border-info">
                                <div class="card-header bg-info text-white">
                                    <h5 class="mb-0"><i class="mdi mdi-file-document-outline"></i> Invoice Summary</h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <tr>
                                                <th style="width: 40%">{{ __('invoice_page.invoice_number') }}</th>
                                                <td><strong>{{ $invoice->invoice_number }}</strong></td>
                                            </tr>
                                            <tr>
                                                <th>Customer</th>
                                                <td>{{ $invoice->customer->name ?? $invoice->customer->full_name ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('invoice_page.total_amount') }}</th>
                                                <td><strong class="text-primary">Rp. {{ number_format($invoice->total_amount, 0, ',', '.') }}</strong></td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('invoice_page.total_paid') }}</th>
                                                <td><span class="text-success">Rp. {{ number_format($invoice->payments->sum('amount'), 0, ',', '.') }}</span></td>
                                            </tr>
                                            <tr class="table-warning">
                                                <th>Remaining Balance</th>
                                                <td><strong class="text-danger">Rp. {{ number_format($invoice->total_amount - $invoice->payments->sum('amount'), 0, ',', '.') }}</strong></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card border-secondary">
                                <div class="card-header bg-secondary text-white">
                                    <h5 class="mb-0"><i class="mdi mdi-truck"></i> Shipment Details</h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <tr>
                                                <th style="width: 40%">Tracking Number</th>
                                                <td>{{ $invoice->shipment->tracking_number ?? $invoice->shipment->resi_number ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <th>Status</th>
                                                <td>
                                                    <span class="badge badge-info">{{ $invoice->shipment->status ? ucfirst($invoice->shipment->status) : 'N/A' }}</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>Rate Plan</th>
                                                <td>{{ $invoice->shipment->ratePlan->name ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <th>Total Charge</th>
                                                <td>Rp. {{ number_format($invoice->shipment->total_charge ?? 0, 0, ',', '.') }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-8 mx-auto">
                            <div class="card border-success">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0"><i class="mdi mdi-cash-register"></i> Payment Information</h5>
                                </div>
                                <div class="card-body">
                                    <form method="POST" action="{{ $formAction }}" enctype="multipart/form-data">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="payment_date" class="form-label"><i class="mdi mdi-calendar"></i> Payment Date</label>
                                                    <input type="date" name="payment_date" id="payment_date" class="form-control @error('payment_date') is-invalid @enderror" value="{{ old('payment_date', date('Y-m-d')) }}" required>
                                                    @error('payment_date')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <div class="form-group">
                                                    <label for="amount" class="form-label"><i class="mdi mdi-currency-usd"></i> Amount</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">Rp.</span>
                                                        </div>
                                                        <input type="number" step="1" name="amount" id="amount" class="form-control @error('amount') is-invalid @enderror" value="{{ old('amount', $invoice->total_amount - $invoice->payments->sum('amount')) }}" required>
                                                        @error('amount')
                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                    <small class="text-muted">Maximum: Rp. {{ number_format($invoice->total_amount - $invoice->payments->sum('amount'), 0, ',', '.') }}</small>
                                                </div>

                                                <div class="form-group">
                                                    <label for="method" class="form-label"><i class="mdi mdi-credit-card"></i> Payment Method</label>
                                                    <select name="method" id="method" class="form-control @error('method') is-invalid @enderror" required>
                                                        <option value="">Select Payment Method</option>
                                                        <option value="Cash" {{ old('method') == 'Cash' ? 'selected' : '' }}>💵 Cash</option>
                                                        <option value="Bank Transfer" {{ old('method') == 'Bank Transfer' ? 'selected' : '' }}>🏦 Bank Transfer</option>
                                                        <option value="Credit Card" {{ old('method') == 'Credit Card' ? 'selected' : '' }}>💳 Credit Card</option>
                                                        <option value="Debit Card" {{ old('method') == 'Debit Card' ? 'selected' : '' }}>💳 Debit Card</option>
                                                        <option value="E-Wallet" {{ old('method') == 'E-Wallet' ? 'selected' : '' }}>📱 E-Wallet</option>
                                                        <option value="Other" {{ old('method') == 'Other' ? 'selected' : '' }}>🔧 Other</option>
                                                    </select>
                                                    @error('method')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="reference_number" class="form-label"><i class="mdi mdi-receipt"></i> Reference Number</label>
                                                    <input type="text" name="reference_number" id="reference_number" class="form-control @error('reference_number') is-invalid @enderror" value="{{ old('reference_number') }}" placeholder="Enter reference number (optional)">
                                                    @error('reference_number')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                    <small class="text-muted">e.g. Transaction ID, Check Number, etc.</small>
                                                </div>

                                                <div class="form-group">
                                                    <label for="payment_proof" class="form-label"><i class="mdi mdi-file-image"></i> Payment Proof <span class="text-danger">*</span></label>
                                                    <input type="file" name="payment_proof" id="payment_proof" class="form-control @error('payment_proof') is-invalid @enderror" accept=".jpg,.jpeg,.png,.pdf" required>
                                                    @error('payment_proof')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                    <small class="text-muted">Upload payment receipt/proof (JPG, PNG, PDF - Max 2MB)</small>
                                                </div>

                                                <div class="form-group">
                                                    <label for="notes" class="form-label"><i class="mdi mdi-note-text"></i> Notes</label>
                                                    <textarea name="notes" id="notes" class="form-control @error('notes') is-invalid @enderror" rows="3" placeholder="Additional notes (optional)">{{ old('notes') }}</textarea>
                                                    @error('notes')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <div class="alert alert-info mt-4">
                                                    <h6><i class="mdi mdi-information"></i> Payment Guidelines</h6>
                                                    <ul class="mb-0">
                                                        <li>Ensure payment amount is correct</li>
                                                        <li>Upload clear payment proof/receipt</li>
                                                        <li>Keep reference number for tracking</li>
                                                        <li>Partial payments are allowed</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <hr class="my-4">

                                        <div class="row">
                                            <div class="col-md-12 text-center">
                                                <button type="submit" class="btn btn-success btn-lg px-5 me-3">
                                                    <i class="mdi mdi-check"></i> Record Payment
                                                </button>
                                                <a href="{{ route('invoice.show', $invoice->id) }}" class="btn btn-light btn-lg px-5">
                                                    <i class="mdi mdi-close"></i> Cancel
                                                </a>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Format amount input with thousand separators
    $('#amount').on('input', function() {
        let value = $(this).val().replace(/[^\d]/g, '');
        if (value) {
            $(this).val(parseInt(value).toLocaleString('id-ID'));
        }
    });

    // Remove formatting before form submission
    $('form').on('submit', function() {
        let amount = $('#amount').val().replace(/[^\d]/g, '');
        $('#amount').val(amount);
    });

    // Auto-calculate partial payment suggestions
    const totalBalance = {{ $invoice->total_amount - $invoice->payments->sum('amount') }};

    // Add quick payment buttons
    const quickPaymentHtml = `
        <div class="mt-2">
            <small class="text-muted">Quick amounts:</small><br>
            <button type="button" class="btn btn-sm btn-outline-primary me-2 mb-1 quick-pay" data-amount="${totalBalance}">Full Amount</button>
            <button type="button" class="btn btn-sm btn-outline-secondary me-2 mb-1 quick-pay" data-amount="${Math.round(totalBalance / 2)}">50%</button>
            <button type="button" class="btn btn-sm btn-outline-secondary me-2 mb-1 quick-pay" data-amount="${Math.round(totalBalance / 4)}">25%</button>
        </div>
    `;

    $('#amount').parent().after(quickPaymentHtml);

    // Handle quick payment button clicks
    $('.quick-pay').on('click', function() {
        const amount = $(this).data('amount');
        $('#amount').val(amount).trigger('input');
    });

    // Payment method change handler
    $('#method').on('change', function() {
        const method = $(this).val();
        const referenceField = $('#reference_number');
        const referenceLabel = $('label[for="reference_number"]');

        // Update placeholder and label based on payment method
        let placeholder = 'Enter reference number (optional)';
        let isRequired = false;

        switch(method) {
            case 'Bank Transfer':
                placeholder = 'Enter transaction/transfer ID';
                isRequired = true;
                break;
            case 'Credit Card':
            case 'Debit Card':
                placeholder = 'Enter authorization code';
                break;
            case 'E-Wallet':
                placeholder = 'Enter transaction ID';
                break;
            case 'Cash':
                placeholder = 'Receipt number (optional)';
                break;
            default:
                placeholder = 'Enter reference number (optional)';
        }

        referenceField.attr('placeholder', placeholder);
        if (isRequired) {
            referenceField.attr('required', true);
            referenceLabel.html('<i class="mdi mdi-receipt"></i> Reference Number <span class="text-danger">*</span>');
        } else {
            referenceField.removeAttr('required');
            referenceLabel.html('<i class="mdi mdi-receipt"></i> Reference Number');
        }
    });
});
</script>
@endpush