@extends('admin.admin_dashboard')
@section('customcss')
<!-- Datatable -->
<link href="{{asset('../asset/vendor/datatables/css/jquery.dataTables.min.css')}}" rel="stylesheet">
<!-- Custom Stylesheet -->
<link href="{{ asset('../asset/vendor/jquery-nice-select/css/nice-select.css') }}" rel="stylesheet">
@endsection

@section('admin')

		<!--**********************************
            Content body start
        ***********************************-->
		<div class="content-body">
			<div class="container-fluid">
				<div class="row page-titles">
					<div class="col-md-9">
						<ol class="breadcrumb">
							<li class="breadcrumb-item active"><a href="javascript:void(0)">Home </a></li>
							<li class="breadcrumb-item"><a href="javascript:void(0)">Employee Salary </a></li>
						</ol>
					</div>
					{{-- <div class="col-md-3 mb-0 text-right">
						<a href="{{ route('admin.employee.salary.create') }}" class="btn btn-success ms-auto">+ Pay Salaries</a>
					</div> --}}
				</div>
				<div class="card shadow-sm mb-3">
        <div class="card-body d-flex align-items-center gap-3 flex-wrap">
            <form method="GET" action="{{ route('admin.employee.salary.index') }}" class="d-flex align-items-center gap-2">
                <label class="mb-0">Filter by Month:</label>
                <input type="month" name="month" class="form-control"
                       value="{{ $month }}" style="max-width: 200px;">
                <button class="btn btn-primary">Filter</button>
                @if($month)
                    <a href="{{ route('admin.employee.salary.index') }}" class="btn btn-light">Clear</a>
                @endif
            </form>
            <a href="{{ route('admin.employee.salary.increment_history') }}" class="btn btn-outline-primary">
                Salary Increment History
            </a>
            @canany(['Admin', 'Pay Salaries'])
            <a href="{{ route('admin.employee.salary.create') }}" class="btn btn-success ms-auto">+ Pay Salaries</a>
            @endcanany
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-header"><strong>Salary Payment History</strong></div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Employee</th>
                            <th>Emp ID</th>
                            <th>Month</th>
                            <th>Gross</th>
                            <th>Bonus</th>
                            <th>Paid</th>
                            <th>Method</th>
                            <th>Payment Date</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($salaries as $i => $row)
                            <tr>
                                <td>{{ $salaries->firstItem() + $i }}</td>
                                <td>{{ $row->employee->name ?? '-' }}</td>
                                <td>{{ $row->employee->e_id ?? '-' }}</td>
                                <td>{{ optional($row->month)->format('F Y') }}</td>
                                <td>{{ number_format($row->salary_amount, 2) }}</td>
                                <td>{{ number_format((float)($row->bonus_amount ?? 0), 2) }}</td>
                                <td>{{ number_format($row->payment_amount, 2) }}</td>
                                <td>{{ $row->paymentMethod->name ?? '-' }}</td>
                                <td>{{ optional($row->payment_date)->format('d M Y, h:i A') }}</td>
                                <td>
                                    <span class="badge bg-{{ $row->status === 'paid' ? 'success' : 'secondary' }}">
                                        {{ ucfirst($row->status) }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="10" class="text-center text-muted p-4">No records found.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        @if($salaries->hasPages())
            <div class="card-footer">
                {{ $salaries->withQueryString()->links() }}
            </div>
        @endif
    </div>
			</div>
		</div>
		<!--**********************************
            Content body end
        ***********************************-->
@endsection

@section('customjs')

<!-- Datatable -->
<script src="{{asset('../asset/vendor/datatables/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('../asset/js/plugins-init/datatables.init.js')}}"></script>

<script src="{{asset('../asset/vendor/jquery-nice-select/js/jquery.nice-select.min.js')}}"></script>
@endsection