@extends('Root.layout.master')
@section('title', 'Accounting')
@section('page_name', 'Accounting')

@push('styles')
    <style>
        /* Professional Table Styling */
        .table thead th {
            font-size: 0.75rem;
            letter-spacing: 0.05em;
            border-bottom: 1px solid #f0f2f5;
        }
        .table tbody tr:hover {
            background-color: #f8f9fa;
            transition: 0.2s ease;
        }
        /* Soft colored badges for Bootstrap 5 */
        .bg-success-subtle { background-color: #d1e7dd !important; }
        .bg-warning-subtle { background-color: #fff3cd !important; }

        /* Smooth card shadow */
        .card {
            border-radius: 12px;
            border: none;
            transition: transform 0.2s;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid mt-4">
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card border-0 shadow-sm bg-primary text-white">
                    <div class="card-body">
                        <h6 class="text-white-50 small uppercase">Total Transactions</h6>
                        <h4 class="mb-0 fw-bold">{{ $transactions->count() }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border-0 shadow-sm bg-success text-white">
                    <div class="card-body">
                        <h6 class="text-white-50 small">Total Paid</h6>
                        <h4 class="mb-0 fw-bold">BDT {{ number_format($transactions->where('status', 'paid')->sum('amount'), 2) }}</h4>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0 fw-bold text-dark">Transaction History</h5>
                <div class="d-flex gap-2">

                    <input type="text" id="tableSearch" class="form-control form-control-sm" placeholder="Search transactions..." style="width: 200px;">
                </div>
            </div>
            <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 text-muted small fw-bold text-uppercase">ID</th>
                            <th class="text-muted small fw-bold text-uppercase">Company</th>
                            <th class="text-muted small fw-bold text-uppercase">Reference</th>
                            <th class="text-muted small fw-bold text-uppercase">Method</th>
                            <th class="text-muted small fw-bold text-uppercase text-end">Amount</th>
                            <th class="text-muted small fw-bold text-uppercase text-center">Status</th>
                            <th class="pe-4 text-muted small fw-bold text-uppercase text-end">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($transactions as $item)
                            <tr>
                                <td class="ps-4 fw-medium text-secondary">TXN#{{ $item->transaction_id }}</td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-sm bg-soft-primary text-primary me-2 rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; background: #e7f1ff;">
                                            {{ substr($item->company->u_name,0,2) }}
                                        </div>
                                        <span class="fw-bold">{{ $item->company->u_name }}</span>
                                    </div>
                                </td>
                                <td><span class="badge bg-light text-dark border">{{ $item->reference ?? 'N/A' }}</span></td>
                                <td>
                                    @if($item->method == 'bank')
                                        <i class="bi bi-bank text-info me-1"></i> Bank
                                    @elseif($item->payment_method == 'check')
                                        <i class="bi bi-card-checklist text-warning me-1"></i> Check
                                    @else
                                        <i class="bi bi-cash text-success me-1"></i> Cash
                                    @endif
                                </td>
                                <td class="text-end fw-bold text-dark">
                                    BDT {{ number_format($item->amount, 2) }}
                                </td>
                                <td class="text-center">
                                    @if($item->status == 'paid')
                                        <span class="badge rounded-pill bg-success-subtle text-success border border-success px-3">
                                        <i class="bi bi-check-circle-fill me-1"></i> Paid
                                    </span>
                                    @else
                                        <span class="badge rounded-pill bg-warning-subtle text-warning border border-warning px-3">
                                        <i class="bi bi-clock-history me-1"></i> Pending
                                    </span>
                                    @endif
                                </td>
                                <td class="pe-4 text-end">
                                    <div class="d-flex justify-content-center">
                                           <a role="button" class="btn btn-sm btn-outline-danger" href="#"><i class="bi bi-trash me-2"></i> </a>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-5 text-muted">
                                    No transactions found.
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('scripts')
@endpush