@extends('layouts.app')

@section('title', 'Salary List')
@section('page-title', 'Salary')

@section('content')
<div class="page-header">
    <div>
        <h1>Salary Records</h1>
        <p class="breadcrumb mb-0">View and manage monthly payroll</p>
    </div>
    <a href="{{ route('salary.generate.form') }}" class="btn btn-primary">
        <i class="bi bi-lightning-charge me-1"></i> Generate Salary
    </a>
</div>

{{-- Filter Bar --}}
<form method="GET" action="{{ route('salary.index') }}" class="filter-bar mb-4">
    <label class="text-muted fw-500 small me-1">Filter:</label>
    <select name="month" class="form-select form-select-sm" style="width:160px;">
        <option value="">All Months</option>
        @foreach(range(1,12) as $m)
            <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>
                {{ \Carbon\Carbon::create(null, $m)->format('F') }}
            </option>
        @endforeach
    </select>
    <select name="year" class="form-select form-select-sm" style="width:110px;">
        <option value="">All Years</option>
        @foreach(range(now()->year - 2, now()->year + 1) as $y)
            <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
        @endforeach
    </select>
    <button type="submit" class="btn btn-primary btn-sm">Apply</button>
    @if($month || $year)
        <a href="{{ route('salary.index') }}" class="btn btn-outline-secondary btn-sm">Clear</a>
    @endif
</form>

<div class="table-card">
    @if($salaries->count())
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Employee</th>
                    <th>Period</th>
                    <th>Basic</th>
                    <th>Bonus</th>
                    <th>Overtime</th>
                    <th>Deduction</th>
                    <th>Net Salary</th>
                    <th>Status</th>
                    <th>Payment Date</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($salaries as $salary)
                <tr id="salary-row-{{ $salary->id }}">
                    <td class="text-muted">{{ $salaries->firstItem() + $loop->index }}</td>
                    <td>
                        <div class="fw-500">{{ $salary->employee->name }}</div>
                        <div class="text-muted" style="font-size:.76rem;">{{ $salary->employee->designation }}</div>
                    </td>
                    <td>{{ $salary->month_year }}</td>
                    <td>৳{{ number_format($salary->basic_salary, 2) }}</td>
                    <td>৳{{ number_format($salary->bonus, 2) }}</td>
                    <td>৳{{ number_format($salary->overtime, 2) }}</td>
                    <td>৳{{ number_format($salary->deduction, 2) }}</td>
                    <td class="fw-700 text-primary">৳{{ number_format($salary->net_salary, 2) }}</td>
                    <td>
                        <span class="badge-status {{ $salary->status }}" id="status-{{ $salary->id }}">
                            {{ ucfirst($salary->status) }}
                        </span>
                    </td>
                    <td id="payment-date-{{ $salary->id }}">
                        {{ $salary->payment_date ? $salary->payment_date->format('d M Y') : '—' }}
                    </td>
                    <td>
                        @if($salary->status === 'unpaid')
                        <button type="button"
                                class="btn btn-sm btn-success mark-paid-btn"
                                data-id="{{ $salary->id }}"
                                title="Mark as Paid">
                            <i class="bi bi-check-circle me-1"></i>Mark Paid
                        </button>
                        @else
                        <span class="text-muted small"><i class="bi bi-check2-circle me-1"></i>Paid</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="px-4 py-3 d-flex justify-content-between align-items-center border-top">
        <small class="text-muted">Showing {{ $salaries->firstItem() }}–{{ $salaries->lastItem() }} of {{ $salaries->total() }} records</small>
        {{ $salaries->links() }}
    </div>
    @else
    <div class="empty-state">
        <div class="empty-icon"><i class="bi bi-cash-stack"></i></div>
        <p>No salary records found. <a href="{{ route('salary.generate.form') }}">Generate salary</a> for your employees.</p>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
// AJAX Mark as Paid
document.querySelectorAll('.mark-paid-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const id  = this.dataset.id;
        const row = this;

        row.disabled = true;
        row.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';

        fetch(`/salary/${id}/paid`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept':       'application/json',
            }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                // Update status badge
                const badge = document.getElementById(`status-${id}`);
                badge.className = 'badge-status paid';
                badge.textContent = 'Paid';

                // Update payment date
                document.getElementById(`payment-date-${id}`).textContent = data.payment_date;

                // Replace button with text
                row.parentElement.innerHTML = '<span class="text-muted small"><i class="bi bi-check2-circle me-1"></i>Paid</span>';
            }
        })
        .catch(() => {
            row.disabled = false;
            row.innerHTML = '<i class="bi bi-check-circle me-1"></i>Mark Paid';
            alert('Failed to update. Please try again.');
        });
    });
});
</script>
@endpush