@extends('layouts.dashboard')
@section('content')

{{-- Page Header --}}
<div class="content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6"><h1 class="m-0">Pay Slip</h1></div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Pay Slip</li>
                </ol>
            </div>
        </div>
    </div>
</div>

{{-- Payslips Section --}}
<section class="container-fluid pb-3">
    <div class="row">
        <div class="col-12">
            <div class="card w-100">
                <div class="card-header p-2 d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">Last 3 Months Payslips</h4>

                    {{-- Month-Year Filter Form --}}
                    <form method="GET" action="{{ route('employee.pay-slips') }}" class="d-flex align-items-center" style="margin-left: auto;">
                        <input type="month" id="month" name="month" class="form-control form-control-sm mr-2"
                               value="{{ request('month') ?? now()->format('Y-m') }}">
                        <button type="submit" class="btn btn-sm btn-primary">Filter</button>
                    </form>
                </div>

                <div class="card-body p-2">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm m-0 text-center align-middle">
                            <thead class="thead-light">
                                <tr>
                                    <th>Sr No</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Month</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($last3Salaries as $key => $salary)
                                    @php
                                        $monthStr = str_pad($salary->month, 2, '0', STR_PAD_LEFT);
                                        $monthYear = $salary->year.'-'.$monthStr;
                                    @endphp
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $employee->name }}</td>
                                        <td>{{ $employee->email }}</td>
                                        <td>{{ \Carbon\Carbon::create($salary->year, $salary->month, 1)->format('F Y') }}</td>
                                        <td>
                                            {{-- View Payslip --}}
                                            <a href="{{ route('employee.salaryslip.view') }}?month={{ $monthYear }}" 
                                               class="btn btn-sm btn-outline-warning" title="View">
                                                <i class="fa fa-eye"></i>
                                            </a>

                                            {{-- Download Payslip --}}
                                            <a href="#" class="btn btn-sm btn-outline-success" 
                                               onclick="downloadPDFFromUrl('{{ route('employee.salaryslip.view') }}?month={{ $monthYear }}', 'salary-slip-{{ $employee->employee_id }}-{{ \Carbon\Carbon::create($salary->year, $salary->month, 1)->format('F-Y') }}.pdf'); return false;" 
                                               title="Download">
                                                <i class="fa fa-download"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5">No Payslips found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
    async function downloadPDFFromUrl(url, filename) {
        try {
            // Fetch HTML content of the salary slip view
            const response = await fetch(url);
            const html = await response.text();

            // Create temporary container
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = html;

            // Find the salary slip element
            const salarySlipElement = tempDiv.querySelector('#salarySlip');

            if (salarySlipElement) {
                const opt = {
                    margin: 0.3,
                    filename: filename,
                    image: { type: 'jpeg', quality: 0.98 },
                    html2canvas: { scale: 2, useCORS: true, allowTaint: true, scrollY: 0 },
                    jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
                };
                html2pdf().set(opt).from(salarySlipElement).save();
            } else {
                alert('Salary slip not found. Please view it first.');
            }
        } catch (error) {
            console.error(error);
            alert('Error generating PDF.');
        }
    }
</script>
@endpush