@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="h4">Vendor Payments</h2>
        <a href="{{ route('vendor-payments.create') }}" class="btn btn-primary">
            <i class="fas fa-plus me-1"></i> Record Payment
        </a>
    </div>

    <!-- Filters -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <form action="{{ route('vendor-payments.index') }}" method="GET" class="row g-3">
                <div class="col-md-3">
                    <input type="text" name="search" class="form-control" placeholder="Search Payment # or Vendor" value="{{ request('search') }}">
                </div>
                <div class="col-md-3">
                    <select name="vendor_id" class="form-select">
                        <option value="">All Vendors</option>
                        @foreach($vendors as $vendor)
                            <option value="{{ $vendor->id }}" {{ request('vendor_id') == $vendor->id ? 'selected' : '' }}>{{ $vendor->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="status" class="form-select">
                        <option value="">All Status</option>
                        <option value="recorded" {{ request('status') == 'recorded' ? 'selected' : '' }}>Recorded</option>
                        <option value="voided" {{ request('status') == 'voided' ? 'selected' : '' }}>Voided</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-light border w-100">Filter</button>
                </div>
                <div class="col-md-2">
                    <a href="{{ route('vendor-payments.index') }}" class="btn btn-link w-100 text-decoration-none">Clear</a>
                </div>
            </form>
        </div>
    </div>

    <!-- Payments Table -->
    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4">Date</th>
                            <th>Payment #</th>
                            <th>Vendor Name</th>
                            <th>Reference #</th>
                            <th>Mode</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th class="text-end pe-4">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($payments as $payment)
                        <tr>
                            <td class="ps-4">{{ \Carbon\Carbon::parse($payment->payment_date)->format('d M Y') }}</td>
                            <td>
                                <a href="{{ route('vendor-payments.show', $payment->id) }}" class="text-decoration-none fw-bold">
                                    {{ $payment->payment_number }}
                                </a>
                            </td>
                            <td>{{ $payment->vendor->name }}</td>
                            <td>{{ $payment->reference_number ?? '-' }}</td>
                            <td>{{ $payment->payment_mode }}</td>
                            <td class="fw-bold">{{ formatCurrency($payment->amount) }}</td>
                            <td>
                                @if($payment->status == 'recorded')
                                    <span class="badge bg-success-soft text-success">Recorded</span>
                                @else
                                    <span class="badge bg-secondary-soft text-secondary">Voided</span>
                                @endif
                            </td>
                            <td class="text-end pe-4">
                                <div class="btn-group">
                                    <a href="{{ route('vendor-payments.show', $payment->id) }}" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <form action="{{ route('vendor-payments.destroy', $payment->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to void/delete this payment?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center py-5 text-muted">No payments found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($payments->hasPages())
        <div class="card-footer bg-white border-0">
            {{ $payments->links() }}
        </div>
        @endif
    </div>
</div>

<style>
    .bg-success-soft { background-color: rgba(25, 135, 84, 0.1); }
    .bg-secondary-soft { background-color: rgba(108, 117, 125, 0.1); }
    .table thead th { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 0; }
    .table tbody td { font-size: 0.9rem; }
</style>
@endsection