@extends('layouts.omd.omd')
@section('title', 'Payments')
@section('content')

<div class="container-fluid px-4 py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h5 class="fw-semibold mb-0">Payments</h5>
    </div>

    @if(session('success'))
        <div class="alert border-0 rounded-3 mb-3 small fw-medium" style="background:#e6f7f0; color:#0a8a55;">
            ✓ {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="alert border-0 rounded-3 mb-3 small fw-medium" style="background:#ffeaea; color:#c0392b;">
            ✕ {{ session('error') }}
        </div>
    @endif

    <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" style="font-size:13px;">
                <thead class="table-light border-bottom">
                    <tr>
                        <th class="text-uppercase text-secondary fw-semibold px-3 py-3" style="font-size:11px; letter-spacing:0.6px;">PO Number</th>
                        <th class="text-uppercase text-secondary fw-semibold px-3 py-3" style="font-size:11px; letter-spacing:0.6px;">Vendor</th>
                        <th class="text-uppercase text-secondary fw-semibold px-3 py-3" style="font-size:11px; letter-spacing:0.6px;">Total</th>
                        <th class="text-uppercase text-secondary fw-semibold px-3 py-3" style="font-size:11px; letter-spacing:0.6px;">Paid</th>
                        <th class="text-uppercase text-secondary fw-semibold px-3 py-3" style="font-size:11px; letter-spacing:0.6px;">Pending</th>
                        <th class="text-uppercase text-secondary fw-semibold px-3 py-3" style="font-size:11px; letter-spacing:0.6px;">Method</th>
                        <th class="text-uppercase text-secondary fw-semibold px-3 py-3" style="font-size:11px; letter-spacing:0.6px;">Transaction ID</th>
                        <th class="text-uppercase text-secondary fw-semibold px-3 py-3" style="font-size:11px; letter-spacing:0.6px;">Status</th>
                        <th class="text-uppercase text-secondary fw-semibold px-3 py-3" style="font-size:11px; letter-spacing:0.6px;">Payment Date</th>
                        <th class="text-uppercase text-secondary fw-semibold px-3 py-3" style="font-size:11px; letter-spacing:0.6px;">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($payments as $payment)
                    @php
                        $statusMap = [
                            'pending' => ['bg' => 'warning',   'text' => 'dark'],
                            'partial' => ['bg' => 'info',      'text' => 'white'],
                            'paid'    => ['bg' => 'success',   'text' => 'white'],
                        ];
                        $s = $statusMap[$payment->payment_status] ?? ['bg' => 'secondary', 'text' => 'white'];
                    @endphp
                    <tr>
                        <td class="px-3">
                            <span class="font-monospace badge bg-primary bg-opacity-10 text-primary fw-medium" style="font-size:12px;">
                                {{ $payment->order->po_number ?? '-' }}
                            </span>
                        </td>
                        <td class="px-3 fw-medium">{{ $payment->vendor->user->name ?? '-' }}</td>
                        <td class="px-3 font-monospace" style="font-size:14px;">₹ {{ number_format($payment->total_amount, 2) }}</td>
                        <td class="px-3 font-monospace text-success fw-semibold" style="font-size:14px;">₹ {{ number_format($payment->paid_amount, 2) }}</td>
                        <td class="px-3 font-monospace text-danger fw-semibold" style="font-size:14px;">₹ {{ number_format($payment->pending_amount, 2) }}</td>
                        <td class="px-3 text-secondary">{{ ucfirst(str_replace('_', ' ', $payment->payment_method ?? '-')) }}</td>
                        <td class="px-3 font-monospace text-secondary" style="font-size:124x;">{{ $payment->transaction_id ?? '-' }}</td>
                        <td class="px-3">
                            <span class="badge rounded-pill bg-{{ $s['bg'] }} text-{{ $s['text'] }}">
                                {{ ucfirst($payment->payment_status) }}
                            </span>
                        </td>
                        <td class="px-3 text-secondary" style="font-size:12px;">
                            {{ $payment->payment_date ? \Carbon\Carbon::parse($payment->payment_date)->format('d M Y') : '-' }}
                        </td>
                        <td class="px-3">
                            @if($payment->payment_status !== 'paid')
                                <button class="btn btn-sm fw-semibold px-3 rounded-2"
                                    style="background:#eff4ff; color:#2563eb; border:1px solid #c7d7fd; font-size:12px;"
                                    data-bs-toggle="modal"
                                    data-bs-target="#payModal{{ $payment->id }}">
                                    + Add Payment
                                </button>
                            @else
                                <span class="badge rounded-pill bg-success">Fully Paid ✓</span>
                            @endif
                        </td>
                    </tr>

                    {{-- Add Payment Modal --}}
                    @if($payment->payment_status !== 'paid')
                    <div class="modal fade" id="payModal{{ $payment->id }}" tabindex="-1">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content border-0 rounded-3 shadow">
                                <form method="POST" action="{{ route('omd.payments.add', $payment->order_id) }}">
                                    @csrf

                                    <div class="modal-header border-bottom px-4 py-3">
                                        <div>
                                            <h6 class="fw-semibold mb-0">Add Payment</h6>
                                            <small class="text-secondary font-monospace">{{ $payment->order->po_number }}</small>
                                        </div>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>

                                    <div class="modal-body px-4 py-3">

                                        {{-- Summary bar --}}
                                        <div class="row g-2 mb-3">
                                            <div class="col-6">
                                                <div class="rounded-2 p-2 text-center" style="background:#f8f9fb;">
                                                    <div class="text-secondary" style="font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;">Total Amount</div>
                                                    <div class="font-monospace fw-semibold mt-1" style="font-size:14px;">₹ {{ number_format($payment->total_amount, 2) }}</div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="rounded-2 p-2 text-center" style="background:#ffeaea;">
                                                    <div class="text-secondary" style="font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;">Pending</div>
                                                    <div class="font-monospace fw-semibold text-danger mt-1" style="font-size:14px;">₹ {{ number_format($payment->pending_amount, 2) }}</div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <label class="text-uppercase text-secondary fw-semibold d-block mb-1" style="font-size:11px; letter-spacing:0.5px;">
                                                    Amount Paying <span class="text-danger">*</span>
                                                </label>
                                                <div class="input-group input-group-sm">
                                                    <span class="input-group-text bg-light">₹</span>
                                                    <input type="number" step="0.01" name="paid_amount"
                                                        class="form-control form-control-sm rounded-end-2"
                                                        max="{{ $payment->pending_amount }}"
                                                        placeholder="0.00" required>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="text-uppercase text-secondary fw-semibold d-block mb-1" style="font-size:11px; letter-spacing:0.5px;">
                                                    Payment Date <span class="text-danger">*</span>
                                                </label>
                                                <input type="date" name="payment_date"
                                                    class="form-control form-control-sm rounded-2"
                                                    value="{{ date('Y-m-d') }}" required>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="text-uppercase text-secondary fw-semibold d-block mb-1" style="font-size:11px; letter-spacing:0.5px;">
                                                    Payment Method <span class="text-danger">*</span>
                                                </label>
                                                <select name="payment_method" class="form-select form-select-sm rounded-2" required>
                                                    <option value="">— Select —</option>
                                                    <option value="bank_transfer">Bank Transfer</option>
                                                    <option value="upi">UPI</option>
                                                    <option value="rtgs">RTGS</option>
                                                    <option value="neft">NEFT</option>
                                                    <option value="cheque">Cheque</option>
                                                </select>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="text-uppercase text-secondary fw-semibold d-block mb-1" style="font-size:11px; letter-spacing:0.5px;">
                                                    Transaction ID
                                                </label>
                                                <input type="text" name="transaction_id"
                                                    class="form-control form-control-sm rounded-2"
                                                    placeholder="Bank reference number">
                                            </div>

                                            <div class="col-12">
                                                <label class="text-uppercase text-secondary fw-semibold d-block mb-1" style="font-size:11px; letter-spacing:0.5px;">
                                                    Notes
                                                </label>
                                                <textarea name="notes" class="form-control form-control-sm rounded-2"
                                                    rows="2" placeholder="Optional notes..."></textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal-footer border-top px-4 py-3">
                                        <button type="button" class="btn btn-light btn-sm px-3" data-bs-dismiss="modal">Cancel</button>
                                        <button type="submit" class="btn btn-success btn-sm px-4 fw-semibold">Record Payment</button>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                    @endif

                    @empty
                    <tr>
                        <td colspan="10" class="text-center text-muted py-5">No payments found</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

@endsection