@extends('garage.layouts.app')

@section('title', 'Joining Letter')

@section('content')
<div class="container-fluid px-0 py-0 w-100">
    <div class="d-flex align-items-center justify-content-between mb-3">
        <div>
            <div class="h4 mb-0"><i class="bi bi-file-earmark-text me-2 text-primary"></i>Joining Letter</div>
            <div class="small text-muted">Professional employee appointment letter format.</div>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('garage.employees.index') }}" class="btn btn-sm btn-outline-secondary">Back</a>
            <a href="{{ route('garage.employees.joining-letter.pdf', $employee->id) }}" class="btn btn-sm btn-outline-danger" target="_blank">
                <i class="bi bi-file-earmark-pdf me-1"></i>Download PDF
            </a>
            <button type="button" class="btn btn-sm btn-primary" onclick="window.print()">
                <i class="bi bi-printer me-1"></i>Print
            </button>
        </div>
    </div>

    <div class="joining-letter-wrap bg-white shadow-sm rounded-3 border overflow-hidden">
        <div class="row g-0 jl-row">
            <div class="col-lg-8 p-4 p-lg-5 jl-left">
                <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-4">
                    <div>
                        <div class="fw-bold fs-5">{{ $garage->name ?? 'Garage' }}</div>
                        <div class="small text-muted">{{ $garage->address ?? '' }}</div>
                        <div class="small text-muted">
                            @if(!empty($garage->phone)) {{ $garage->phone }} @endif
                            @if(!empty($garage->email)) · {{ $garage->email }} @endif
                        </div>
                    </div>
                    <div class="text-muted small">Date: {{ now()->format('d M Y') }}</div>
                </div>

                <div class="border-top pt-3 mb-3"></div>
                <h5 class="mb-3 text-primary">Subject: Joining / Appointment Letter</h5>

                <p class="mb-2">Dear <strong>{{ $employee->name }}</strong>,</p>
                <p class="mb-2">
                    We are pleased to appoint you as <strong>{{ $employee->category_name ?? 'Employee' }}</strong>
                    in the <strong>{{ $employee->department_name ?? 'General Department' }}</strong> department at
                    <strong>{{ $garage->name ?? 'our organization' }}</strong>.
                </p>
                <p class="mb-2">
                    Your date of joining is <strong>{{ !empty($employee->join_date) ? \Carbon\Carbon::parse($employee->join_date)->format('d M Y') : now()->format('d M Y') }}</strong>.
                    Your compensation will be <strong>PKR {{ number_format((float)($employee->salary_amount ?? 0), 2) }}</strong>
                    on a <strong>{{ ucfirst($employee->salary_type ?? 'monthly') }}</strong> basis.
                </p>
                <p class="mb-2">
                    You are expected to follow company policies, maintain confidentiality, and perform your responsibilities professionally.
                    Your working hours are <strong>{{ (float)($employee->working_hours_per_day ?? 0) > 0 ? number_format((float)$employee->working_hours_per_day, 2).' hours/day' : 'as assigned by management' }}</strong>.
                </p>
                <p class="mb-4">
                    Please sign this letter as acceptance of terms and return a copy to HR/admin office.
                </p>

                <div class="row mt-5">
                    <div class="col-6">
                        <div class="small text-muted mb-4">Employee Signature</div>
                        <div class="border-top pt-2">{{ $employee->name }}</div>
                    </div>
                    <div class="col-6 text-end">
                        <div class="small text-muted mb-4">Authorized Signature</div>
                        <div class="border-top pt-2">{{ $garage->name ?? 'Management' }}</div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 border-start bg-light p-4 jl-right">
                <div class="card border-0 shadow-sm">
                    <div class="card-body text-center">
                        @if(!empty($employeeImageUrl))
                            <img src="{{ $employeeImageUrl }}" alt="Employee image" class="rounded-circle border" style="width: 118px; height: 118px; object-fit: cover;">
                        @else
                            <div class="rounded-circle d-inline-flex align-items-center justify-content-center border"
                                 style="width: 118px; height: 118px; background:#eef2ff; color:#3730a3; font-size:38px; font-weight:700;">
                                {{ strtoupper(mb_substr($employee->name ?? '?', 0, 1)) }}
                            </div>
                        @endif
                        <div class="mt-3 fw-semibold">{{ $employee->name }}</div>
                        <div class="small text-muted">{{ $employee->category_name ?? 'Employee' }}</div>
                        <span class="badge {{ !empty($employee->is_active) ? 'bg-success' : 'bg-secondary' }} mt-2">
                            {{ !empty($employee->is_active) ? 'Active' : 'Inactive' }}
                        </span>
                    </div>
                </div>

                <div class="card border-0 shadow-sm mt-3">
                    <div class="card-body">
                        <div class="small text-muted mb-2">Employee Details</div>
                        <div class="small mb-1"><strong>Code:</strong> {{ $employee->code ?: 'N/A' }}</div>
                        <div class="small mb-1"><strong>Department:</strong> {{ $employee->department_name ?: 'N/A' }}</div>
                        <div class="small mb-1"><strong>Phone:</strong> {{ $employee->phone ?: 'N/A' }}</div>
                        <div class="small mb-1"><strong>Email:</strong> {{ $employee->email ?: 'N/A' }}</div>
                        <div class="small mb-0"><strong>CNIC:</strong> {{ $employee->cnic ?: 'N/A' }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
 .joining-letter-wrap .jl-row {
    display: flex;
    align-items: stretch;
 }
 .joining-letter-wrap .jl-left {
    width: 67%;
    max-width: 67%;
    flex: 0 0 67%;
 }
 .joining-letter-wrap .jl-right {
    width: 33%;
    max-width: 33%;
    flex: 0 0 33%;
 }

@media print {
    body * {
        visibility: hidden !important;
    }
    .joining-letter-wrap,
    .joining-letter-wrap * {
        visibility: visible !important;
    }
    .joining-letter-wrap {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
    }
    .joining-letter-wrap .jl-row {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
    }
    .joining-letter-wrap .jl-left,
    .joining-letter-wrap .jl-right {
        display: table-cell !important;
        vertical-align: top !important;
        float: none !important;
    }
    .joining-letter-wrap .jl-left {
        width: 67% !important;
    }
    .joining-letter-wrap .jl-right {
        width: 33% !important;
        border-left: 1px solid #dee2e6 !important;
    }
}
</style>
@endsection