@extends('layouts.dashboard')

<style>
    th, td {
        text-align: left !important;
    }
    .bg-gray-light {
        background-color: #003c78;
    }
</style>

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header d-flex justify-content-between">
            <h4 class="mb-0 font-weight-bold text-primary">Employee Salary Slip</h4>
            <div class="ml-auto">
                <a href="{{ route('employee.pay-slips') }}" class="btn btn-sm btn-secondary">← Back</a>
                <button onclick="downloadPDF()" class="btn btn-sm btn-success ms-2">Download PDF</button>
            </div>
        </div>
    </div>

    @if(isset($emp_salary))
    <div id="salarySlip" class="card shadow mt-1 p-3">
        {{-- Header --}}
        <div class="row align-items-start mb-4">
            <div class="col-auto">
                <img class="img-fluid" width="120" src="{{ asset('public/uploads/logo.png') }}" alt="Company Logo">
            </div>
            <div class="col text-right">
                <p class="mb-0 font-weight-bold">Cloudcatch</p>
                <p class="mb-1 text-muted">Office No. 16, B3 Cerebrum IT Park,</p>
                <p class="mb-1 text-muted">Kalyani Nagar, Pune</p>
            </div>
        </div>

        {{-- Employee Info --}}
        <h5 class="bg-gray-light text-white p-2 mb-0">
            PAYSLIP FOR THE MONTH OF {{ $selectedMonth->format('F Y') }}
        </h5>
        <div class="border p-0 mb-4">
            <table class="table table-bordered table-sm mb-0 text-left mt-0">
                <tbody>
                    <tr>
                        <th>Emp Code</th>
                        <td>{{ $employee->employee_id }}</td>
                        <th>Emp Name</th>
                        <td colspan="3">{{ $employee->name }}</td>
                    </tr>
                    <tr>
                        <th>Date Of Joining</th>
                        <td>{{ \Carbon\Carbon::parse($employee->doj)->format('d-M-Y') }}</td>
                        <th>Designation</th>
                        <td>{{ $employee->designation->name ?? 'N/A' }}</td>
                        <th>PF No.</th>
                        <td>{{ $employee->pf_no ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <th>Date Of Birth</th>
                        <td>{{ \Carbon\Carbon::parse($employee->dob)->format('d-M-Y') }}</td>
                        <th>Location</th>
                        <td>{{ $employee->location ?? 'N/A' }}</td>
                        <th>PAN No.</th>
                        <td>{{ $employee->pan ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <th>UAN</th>
                        <td>{{ $employee->uan ?? 'N/A' }}</td>
                        <th>Bank A/c No.</th>
                        <td>{{ $employee->bank_account_no ?? 'N/A' }}</td>
                        <th>EPS No.</th>
                        <td>{{ $employee->eps_no ?? 'N/A' }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        {{-- Monthly Salary Details --}}
        <h6 class="bg-gray-light text-white p-2 mb-0">Monthly Salary Details</h6>
        <div class="table-responsive">
            <table class="table table-bordered text-center mt-0 mb-4">
                <thead class="bg-warning">
                    <tr>
                        <th>Earning (Rs)</th>
                        <th>Amount</th>
                        <th>Deductions (Rs)</th>
                        <th>Amount</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Basic Salary</td>
                        <td>{{ number_format($emp_salary->monthly_basic_salary, 2) }}</td>
                        <td>PF Contribution</td>
                        <td>{{ number_format($emp_salary->pf_contribution, 2) }}</td>
                    </tr>
                    <tr>
                        <td>HRA</td>
                        <td>{{ number_format($emp_salary->monthly_hra, 2) }}</td>
                        <td>TDS</td>
                        <td>{{ number_format($emp_salary->tds, 2) }}</td>
                    </tr>
                    <tr>
                        <td>Special Allowance</td>
                        <td>{{ number_format($emp_salary->monthly_special_allowance, 2) }}</td>
                        <td>LWP</td>
                        <td>{{ number_format($emp_salary->lwp, 2) }}</td>
                    </tr>
                    <tr>
                        <td>Medical Allowance</td>
                        <td>{{ number_format($emp_salary->monthly_medical_allowance, 2) }}</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr class="bg-light font-weight-bold">
                        <td>Total</td>
                        <td>{{ number_format($emp_salary->monthly_total, 2) }}</td>
                        <td>Total Deductions</td>
                        <td>{{ number_format($emp_salary->pf_contribution + $emp_salary->tds + $emp_salary->lwp, 2) }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        {{-- Net Pay --}}
        <table class="table table-bordered mt-0">
            <tbody>
                <tr>
                    <td><strong>Net Pay:</strong></td>
                    <td>Rs. {{ number_format($netPay, 2) }}</td>
                </tr>
                <tr>
                    <td><strong>In Words:</strong></td>
                    <td>{{ $netPayInWords }}</td>
                </tr>
            </tbody>
        </table>

        <p>Please send your queries to <a href="mailto:info@cloudcatch.co">info@cloudcatch.co</a></p>
    </div>
    @else
        <div class="alert alert-info mt-3">No salary data available for the selected month.</div>
    @endif
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
    function downloadPDF() {
        const element = document.getElementById('salarySlip');
        const opt = {
            margin: 0.3,
            filename: 'salary-slip-{{ $employee->employee_id }}-{{ $selectedMonth->format("F-Y") }}.pdf',
            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(element).save();
    }
</script>
@endpush