@extends('layouts.master')
@section('title', $title)

@php
    $settings = \App\Models\Setting::pluck('value','name')->toArray();

    /* ================= TOTAL CALCULATIONS ================= */
    $totalBasic = $salary_details->sum('basic_salary');
    $totalAllowance = $salary_details->sum('allowance');
    $totalDeduction = $salary_details->sum('deductions');
    $totalNet = $salary_details->sum(function ($d) {
        return $d->basic_salary + $d->allowance - $d->deductions;
    });
@endphp

@section('content')

<style>
/* ================= BASE LAYOUT ================= */
.statement-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

.header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: #fff;
    border-radius: 12px;
}

/* ================= SCREEN HEADER ================= */
.statement-header {
    background: linear-gradient(120deg,#4361ee,#3a0ca3);
    color: #fff;
    padding: 30px;
    border-radius: 12px 12px 0 0;
    text-align: center;
}

.clinic-name {
    font-size: 28px;
    font-weight: 700;
}

.statement-title {
    font-size: 18px;
    margin-bottom: 15px;
}

.total-summary table {
    width: 100%;
    font-size: 14px;
    color: #fff;
}

.total-summary td {
    padding: 6px;
}

/* ================= PRINT HEADER ================= */
.print-header {
    display: none;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #000;
}

.print-header table {
    width: 100%;
    font-size: 13px;
}

/* ================= TABLE ================= */
.statement-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    box-shadow: 0 0 0 1px #dee2e6;
}

.statement-table th,
.statement-table td {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
}

.statement-table thead {
    background: #3a0ca3;
    color: #fff;
}

.text-end { text-align: right; }
.debit { color: #e74c3c; }
.credit { color: #27ae60; }

/* ================= SIGNATURES ================= */
.signature-section {
    margin-top: 80px;
    padding-top: 30px;
    border-top: 1px dashed #999;
}

.signature-row {
    display: flex;
    justify-content: space-between;
}

.signature-box {
    width: 23%;
    text-align: center;
}

.signature-line {
    height: 60px;
    border-bottom: 2px solid #000;
    margin-bottom: 8px;
}

/* ================= PRINT MODE ================= */
@media print {

    body * {
        visibility: hidden !important;
    }

    #print, #print * {
        visibility: visible !important;
    }

    #print {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .header-actions {
        display: none !important;
    }

    .statement-container {
        background: #fff !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .statement-header {
        display: none !important;
    }

    .print-header {
        display: block !important;
    }

    .statement-table thead {
        background: #f1f1f1 !important;
        color: #000 !important;
    }

    .credit, .debit {
        color: #000 !important;
    }

    .print-signatures {
        page-break-before: always;
    }
}
</style>

<div class="statement-container">

    <!-- ACTION BAR -->
    <div class="header-actions">
        <h5>Salary Statement</h5>
        <a href="#" class="btn btn-info" onclick="printStatement()">
            <i class="fas fa-print"></i> Print
        </a>
    </div>

    <div id="print">

        <!-- PRINT HEADER (PRINT ONLY) -->
        <div class="print-header">
            <h2>Payroll – Salary Statement</h2>
            <div>{{ month_format($salary_head->month) }}</div>

            <table>
                <tr>
                    <td><strong>Total Basic:</strong> {{ number_format($totalBasic,2) }}</td>
                    <td><strong>Total Allowance:</strong> {{ number_format($totalAllowance,2) }}</td>
                </tr>
                <tr>
                    <td><strong>Total Deductions:</strong> {{ number_format($totalDeduction,2) }}</td>
                    <td><strong>Total Net:</strong> {{ number_format($totalNet,2) }}</td>
                </tr>
            </table>
        </div>

        <!-- SCREEN HEADER -->
        <div class="statement-header">
            <h1 class="clinic-name">Payroll – Salary Statement</h1>
            <div class="statement-title">{{ month_format($salary_head->month) }}</div>

            <div class="total-summary">
                <table>
                    <tr>
                        <td><strong>Total Basic</strong></td>
                        <td>{{ number_format($totalBasic,2) }}</td>
                        <td><strong>Total Allowance</strong></td>
                        <td>{{ number_format($totalAllowance,2) }}</td>
                    </tr>
                    <tr>
                        <td><strong>Total Deductions</strong></td>
                        <td>{{ number_format($totalDeduction,2) }}</td>
                        <td><strong>Total Net</strong></td>
                        <td>{{ number_format($totalNet,2) }}</td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- TABLE -->
        <table class="statement-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Staff</th>
                    <th>Phone</th>
                    <th>Grade</th>
                    <th>Branch</th>
                    <th>Basic</th>
                    <th>Allowance</th>
                    <th>Deductions</th>
                    <th class="text-end">Net</th>
                </tr>
            </thead>
            <tbody>
                @php($i=1)
                @foreach($salary_details as $d)
                    @php($net = $d->basic_salary + $d->allowance - $d->deductions)
                    <tr>
                        <td>{{ $i++ }}</td>
                        <td>{{ $d->staff?->name }}</td>
                        <td>{{ $d->staff?->phone_number }}</td>
                        <td>{{ $d->staff?->gd?->name }}</td>
                        <td>{{ $d->staff?->branch?->name }}</td>
                        <td>{{ number_format($d->basic_salary,2) }}</td>
                        <td>{{ number_format($d->allowance,2) }}</td>
                        <td class="debit">{{ number_format($d->deductions,2) }}</td>
                        <td class="text-end credit">{{ number_format($net,2) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <!-- SIGNATURES -->
        <div class="signature-section print-signatures">
            <div class="signature-row">
                <div class="signature-box"><div class="signature-line"></div>Mayor</div>
                <div class="signature-box"><div class="signature-line"></div>Secretary</div>
                <div class="signature-box"><div class="signature-line"></div>Finance Officer</div>
                <div class="signature-box"><div class="signature-line"></div>HR Manager</div>
            </div>
            <div style="margin-top:30px;text-align:right;font-size:12px;">
                Printed on {{ date('d M Y') }}
            </div>
        </div>

    </div>
</div>

<script>
function printStatement() {
    window.print();
}
</script>

@endsection