@extends('layouts.dashboard')

@section('title', $pageTitle ?? 'Payments')

@section('page_header')
    <div class="page-header">
        <div class="page-header-left d-flex align-items-center">
            <div class="page-header-title">
                <h5 class="m-b-10">{{ $pageTitle ?? 'Payments' }}</h5>
            </div>
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                <li class="breadcrumb-item">Payments</li>
            </ul>
        </div>
        <div class="page-header-right ms-auto">
            <a href="{{ route('payments.add') }}" class="btn btn-md btn-primary">
                <i class="feather-plus me-2"></i>
                <span>Add Payment</span>
            </a>
        </div>
    </div>
@endsection

@section('page_content')
    @if (session('status'))
        <div class="alert alert-success">{{ session('status') }}</div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger">{{ $errors->first() }}</div>
    @endif

    <div class="row g-3">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="text-muted fs-12">Total Entries</div>
                    <div class="fs-5 fw-semibold">{{ (int) ($totalPayments ?? 0) }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="text-muted fs-12">Total Amount</div>
                    <div class="fs-5 fw-semibold">{{ number_format((float) ($totalAmount ?? 0), 2) }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="paymentsList">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Reference</th>
                            <th>Company</th>
                            <th>Party</th>
                            <th>Party Type</th>
                            <th>Mode</th>
                            <th>Description</th>
                            <th class="text-end">Amount</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($payments as $payment)
                            <tr>
                                <td>{{ optional($payment->date)->format('Y-m-d') }}</td>
                                <td>{{ $payment->reference_no }}</td>
                                <td>{{ $payment->company?->name }}</td>
                                <td>{{ $payment->party?->name }}</td>
                                <td>{{ $payment->party?->party_type }}</td>
                                <td>{{ $payment->mode }}</td>
                                <td>{{ $payment->description ?: '-' }}</td>
                                <td class="text-end">{{ number_format((float) $payment->amount, 2) }}</td>
                                <td>
                                    <div class="hstack gap-2 justify-content-end">
                                        @if (! empty($payment->invoice_url))
                                            <a href="{{ $payment->invoice_url }}" class="avatar-text avatar-md" title="View Invoice" target="_blank" rel="noopener noreferrer">
                                                <i class="feather feather-file-text"></i>
                                            </a>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center text-muted">No payment records found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" type="text/css" href="assets/vendors/css/dataTables.bs5.min.css">
@endpush

@push('scripts')
    <script src="assets/vendors/js/dataTables.min.js"></script>
    <script src="assets/vendors/js/dataTables.bs5.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (window.jQuery && jQuery.fn.dataTable) {
                jQuery('#paymentsList').DataTable({
                    paging: true,
                    searching: true,
                    info: true,
                    order: []
                });
            }
        });
    </script>
@endpush