@extends('employee.employee-master')

@section('content')
<div class="container mt-5">
    <div class="text-center mb-4">
        <h2 class="text-primary">Salary Slip</h2>
        <p class="text-muted">For the period: {{ $salarySlips->month }}/{{ $salarySlips->year }}</p>
    </div>

    @if (isset($error))
    <div class="alert alert-danger text-center">
        {{ $error }}
    </div>
    @elseif (isset($salarySlips))
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
            <h4 class="mb-0">Salary Details</h4>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-6">
                    <p><strong>Employee Name:</strong> {{ $salarySlips->employee->name }}</p>
                </div>
                <div class="col-md-6">
                    <p><strong>Employee ID:</strong> {{ $salarySlips->employee_id }}</p>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-6">
                    <p><strong>Month/Year:</strong> {{ $salarySlips->month }}/{{ $salarySlips->year }}</p>
                </div>
                <div class="col-md-6">
                    <p><strong>Present Days:</strong> {{ $salarySlips->present_days }}</p>
                </div>
            </div>
            <hr>
            <h5 class="text-primary">Salary Components</h5>
            <div class="row mb-3">
                <div class="col-md-6">
                    <p><strong>Fixed Value Component:</strong>
                        ₹{{ number_format($salarySlips->component_fixed_value ?? 0, 2) }}</p>
                </div>
                <div class="col-md-6">
                    <p><strong>Percentage Component:</strong> {{ $salarySlips->component_percentage_value ?? 0 }}%</p>
                </div>
            </div>
            <hr>
            <h5 class="text-primary">Total Salary</h5>
            <div class="row">
                <div class="col-md-12">
                    <p class="text-success" style="font-size: 1.2em;">
                        <strong>₹{{ number_format($salarySlips->total_salary, 2) }}</strong>
                    </p>
                </div>
            </div>
        </div>
        <div class="card-footer bg-light text-end">
            <small class="text-muted">Generated on {{ now()->format('d M, Y') }}</small>
        </div>
    </div>

    <!-- Buttons -->
    <div class="mt-4 text-center">
        <a href="{{ route('salary-slip.download', $salarySlips->id) }}" class="btn btn-success">
            Download PDF
        </a>
        <button onclick="window.print();" class="btn btn-primary">
            Print Salary Slip
        </button>
    </div>
    @endif
</div>
@endsection