@extends('admin.layout.app')

@section('styles')
    <style>
        /* ------- Slip look & feel ------- */
        :root {
            --border: #dcdcdc;
            --ink: #222;
            --muted: #6c757d;
        }

        .slip {
            max-width: 900px;
            margin: 0 auto;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: #fff;
        }

        .slip-header {
            border-bottom: 1px dashed var(--border);
            padding-bottom: 14px;
            margin-bottom: 14px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .brand .logo {
            width: 46px;
            height: 46px;
            border: 1px solid var(--border);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
        }

        .brand .name {
            line-height: 1.1;
        }

        .brand .name .title {
            font-size: 18px;
            font-weight: 700;
            color: var(--ink);
        }

        .brand .name .subtitle {
            font-size: 12px;
            color: var(--muted);
        }

        .slip-title {
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
            font-size: 14px;
            color: #0d6efd;
        }

        .kv {
            display: grid;
            grid-template-columns: 180px 1fr;
            gap: 8px 16px;
            margin-bottom: 6px;
        }

        .kv .k {
            color: var(--muted);
        }

        .kv .v {
            color: var(--ink);
            font-weight: 600;
        }

        .slip-footer {
            border-top: 1px dashed var(--border);
            padding-top: 12px;
            margin-top: 12px;
            display: flex;
            gap: 20px;
            justify-content: space-between;
            align-items: flex-end;
        }

        .sig {
            min-width: 220px;
            text-align: center;
        }

        .sig .line {
            border-top: 1px solid var(--border);
            margin-top: 34px;
        }

        .badges {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .badge-soft {
            border: 1px solid var(--border);
            color: var(--muted);
            padding: 4px 8px;
            border-radius: 999px;
            font-size: 12px;
        }

        .amount-box {
            border: 1px dashed var(--border);
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 20px;
            font-weight: 800;
            text-align: right;
        }

        .no-print {}

        @media print {
            .no-print {
                display: none !important;
            }

            body {
                background: #fff;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .card,
            .card-page {
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
            }

            .slip {
                border: 1px solid #000;
                border-radius: 0;
            }
        }
    </style>
@endsection

@section('body')
    <div class="card card-page p-4">
        <div class="d-flex justify-content-between align-items-start mb-3 no-print">
            <div>
                <h4 class="mb-1">Payment #{{ $payment->id }}</h4>
                <small class="text-muted">
                    {{ $payment->laborer->name ?? '—' }}
                    —
                    {{ $payment->paid_at ? $payment->paid_at->toDateString() : '—' }}
                </small>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('payments.edit', $payment) }}" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-edit me-1"></i> Edit
                </a>
                <a href="{{ route('payments.index') }}" class="btn btn-sm btn-outline-secondary">
                    Back
                </a>
                <button type="button" class="btn btn-sm btn-dark" onclick="printSlip()">
                    <i class="fas fa-print me-1"></i> Print
                </button>
            </div>
        </div>

        <!-- Bank-style Payment Slip -->
        <div id="printArea" class="slip p-4">
            <div class="d-flex justify-content-between align-items-center slip-header">
                <div class="brand">
                    <div class="logo">{{ strtoupper(substr(config('app.name', 'APP'), 0, 2)) }}</div>
                    <div class="name">
                        <div class="title">{{ config('app.name', 'Your Company') }}</div>
                        <div class="subtitle">Payment Voucher / Bank Slip</div>
                    </div>
                </div>
                <div class="text-end">
                    <div class="slip-title">PAYMENT SLIP</div>
                    <div class="text-muted small">Ref #: {{ $payment->id }}</div>
                    <div class="text-muted small">
                        Date: {{ $payment->paid_at ? $payment->paid_at->format('Y-m-d') : now()->format('Y-m-d') }}
                    </div>
                </div>
            </div>

            <div class="row g-3">
                <div class="col-md-8">
                    <div class="kv">
                        <div class="k">Payee (Laborer)</div>
                        <div class="v">{{ $payment->laborer->name ?? '—' }}</div>

                        <div class="k">Payment Method</div>
                        <div class="v">{{ $payment->method ?: '—' }}</div>

                        @if (!empty($payment->timesheet_id ?? null))
                            <div class="k">Timesheet #</div>
                            <div class="v">#{{ $payment->timesheet_id }}</div>
                        @endif

                        <div class="k">Notes</div>
                        <div class="v">{{ $payment->notes ?: '—' }}</div>
                    </div>

                    <div class="badges mt-2">
                        <span class="badge-soft">Prepared by: {{ auth()->user()->name ?? '—' }}</span>
                        <span class="badge-soft">Created at: {{ $payment->created_at->format('Y-m-d H:i') ?? '—' }}</span>
                        <span class="badge-soft">Updated at: {{ $payment->updated_at->format('Y-m-d H:i') ?? '—' }}</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="amount-box">
                        {{ number_format((float) $payment->amount, 2) }}
                    </div>
                    <div class="text-end text-muted small mt-1">Amount</div>
                </div>
            </div>

            <div class="slip-footer">
                <div class="sig">
                    <div>Payee Signature</div>
                    <div class="line"></div>
                </div>
                <div class="sig">
                    <div>Authorized By</div>
                    <div class="line"></div>
                </div>
                <div class="sig">
                    <div>Received By</div>
                    <div class="line"></div>
                </div>
            </div>

            <div class="text-center text-muted small mt-3">
                Thank you — keep this slip for your records.
            </div>
        </div>

        <!-- Print hint -->
        <div class="text-muted small mt-3 no-print">
            Tip: You can also press <kbd>Ctrl</kbd> + <kbd>P</kbd> (or <kbd>Cmd</kbd> + <kbd>P</kbd>) to print.
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function printSlip() {
            // Use print CSS and print the existing DOM — simplest & reliable
            window.print();
        }
    </script>
@endsection