<style>
    @page {
        size: auto;
        margin: 0 auto;
    }
    @media print {
        
        html, body {
            width: 210mm;
            height: 297mm;
        }
    }
    
    table {
        border-collapse: collapse;
    }

    table, th, td {
        border: 1px solid black;
        padding: 5px;
    }
    .container{
        width: 1024px;
        margin: 0 auto;
        padding-top: 30px; 
        
    }
    .color-header{
        background-color: skyblue !important;
    }
    
</style>
<div class="container">
    <table class="table" style="width:100%">
        <tr style="background-color: skyblue !important;">
            <th colspan="4">Information</th>
        </tr>
        <tr>
            <td>Employee Name:</td>
            <td>{{optional($ev->employee)->name}}</td>
            <td>Date:</td>
            <td>{{$ev->date}}</td>
        </tr>
        <tr>
            <td>Department:</td>
            <td></td>
            <td>Peroid of Review:</td>
            <td></td>
        </tr>
        <tr>
            <td>Review:</td>
            <td></td>
            <td>Reviewer title:</td>
            <td></td>
        </tr>
    </table>
    <br>
    <table class="table" style="width:100%">
        <tr style="background-color: skyblue !important;">
            <th>Performance Evaluation</th>
            <th style="text-align:center">Excellent</th>
            <th style="text-align:center">Very Good</th>
            <th style="text-align:center">Good</th>
            <th style="text-align:center">Fair</th>
            <th style="text-align:center">Poor</th>
        </tr>
        
        
        <tr>
            <td>Interest</td> 
            <td style="text-align:center">{{$ev->interest == 5 ? $ev->interest : ""}}</td>
            <td style="text-align:center">{{$ev->interest == 4 ? $ev->interest : ""}}</td>
            <td style="text-align:center">{{$ev->interest == 3 ? $ev->interest : ""}}</td>
            <td style="text-align:center">{{$ev->interest == 2 ? $ev->interest : ""}}</td>
            <td style="text-align:center">{{$ev->interest == 1 ? $ev->interest : ""}}</td>
        </tr>
        <tr>
            <td>Attitude</td> 
            <td style="text-align:center">{{$ev->attitude == 5 ? $ev->attitude : ""}}</td>
            <td style="text-align:center">{{$ev->attitude == 4 ? $ev->attitude : ""}}</td>
            <td style="text-align:center">{{$ev->attitude == 3 ? $ev->attitude : ""}}</td>
            <td style="text-align:center">{{$ev->attitude == 2 ? $ev->attitude : ""}}</td>
            <td style="text-align:center">{{$ev->attitude == 1 ? $ev->attitude : ""}}</td> 
        </tr>
        <tr>
            <td>Communicate</td> 
            <td style="text-align:center">{{$ev->communicate == 5 ? $ev->communicate : ""}}</td>
            <td style="text-align:center">{{$ev->communicate == 4 ? $ev->communicate : ""}}</td>
            <td style="text-align:center">{{$ev->communicate == 3 ? $ev->communicate : ""}}</td>
            <td style="text-align:center">{{$ev->communicate == 2 ? $ev->communicate : ""}}</td>
            <td style="text-align:center">{{$ev->communicate == 1 ? $ev->communicate : ""}}</td>
        </tr>
        <tr>
            <td>Work Quality</td> 
            <td style="text-align:center">{{$ev->work_quality == 5 ? $ev->work_quality : ""}}</td>
            <td style="text-align:center">{{$ev->work_quality == 4 ? $ev->work_quality : ""}}</td>
            <td style="text-align:center">{{$ev->work_quality == 3 ? $ev->work_quality : ""}}</td>
            <td style="text-align:center">{{$ev->work_quality == 2 ? $ev->work_quality : ""}}</td>
            <td style="text-align:center">{{$ev->work_quality == 1 ? $ev->work_quality : ""}}</td> 
        </tr>
        <tr>
            <td>Productivity</td> 
            <td style="text-align:center">{{$ev->productivity == 5 ? $ev->productivity : ""}}</td>
            <td style="text-align:center">{{$ev->productivity == 4 ? $ev->productivity : ""}}</td>
            <td style="text-align:center">{{$ev->productivity == 3 ? $ev->productivity : ""}}</td>
            <td style="text-align:center">{{$ev->productivity == 2 ? $ev->productivity : ""}}</td>
            <td style="text-align:center">{{$ev->productivity == 1 ? $ev->productivity : ""}}</td>
        </tr>
        <tr>
            <td>Knowledge</td> 
            <td style="text-align:center">{{$ev->knowledge == 5 ? $ev->knowledge : ""}}</td>
            <td style="text-align:center">{{$ev->knowledge == 4 ? $ev->knowledge : ""}}</td>
            <td style="text-align:center">{{$ev->knowledge == 3 ? $ev->knowledge : ""}}</td>
            <td style="text-align:center">{{$ev->knowledge == 2 ? $ev->knowledge : ""}}</td>
            <td style="text-align:center">{{$ev->knowledge == 1 ? $ev->knowledge : ""}}</td> 
        </tr>
        <tr>
            <td>Technical Skill</td> 
            <td style="text-align:center">{{$ev->technical_skill == 5 ? $ev->technical_skill : ""}}</td>
            <td style="text-align:center">{{$ev->technical_skill == 4 ? $ev->technical_skill : ""}}</td>
            <td style="text-align:center">{{$ev->technical_skill == 3 ? $ev->technical_skill : ""}}</td>
            <td style="text-align:center">{{$ev->technical_skill == 2 ? $ev->technical_skill : ""}}</td>
            <td style="text-align:center">{{$ev->technical_skill == 1 ? $ev->technical_skill : ""}}</td>
        </tr>
        <tr>
            <td>Teamwork</td> 
            <td style="text-align:center">{{$ev->teamwork == 5 ? $ev->teamwork : ""}}</td>
            <td style="text-align:center">{{$ev->teamwork == 4 ? $ev->teamwork : ""}}</td>
            <td style="text-align:center">{{$ev->teamwork == 3 ? $ev->teamwork : ""}}</td>
            <td style="text-align:center">{{$ev->teamwork == 2 ? $ev->teamwork : ""}}</td>
            <td style="text-align:center">{{$ev->teamwork == 1 ? $ev->teamwork : ""}}</td> 
        </tr>
        <tr>
            <td>Attendance</td> 
            <td style="text-align:center">{{$ev->attendance == 5 ? $ev->attendance : ""}}</td>
            <td style="text-align:center">{{$ev->attendance == 4 ? $ev->attendance : ""}}</td>
            <td style="text-align:center">{{$ev->attendance == 3 ? $ev->attendance : ""}}</td>
            <td style="text-align:center">{{$ev->attendance == 2 ? $ev->attendance : ""}}</td>
            <td style="text-align:center">{{$ev->attendance == 1 ? $ev->attendance : ""}}</td>
        </tr>
        <tr>
            <td>Creativity</td> 
            <td style="text-align:center">{{$ev->creativity == 5 ? $ev->creativity : ""}}</td>
            <td style="text-align:center">{{$ev->creativity == 4 ? $ev->creativity : ""}}</td>
            <td style="text-align:center">{{$ev->creativity == 3 ? $ev->creativity : ""}}</td>
            <td style="text-align:center">{{$ev->creativity == 2 ? $ev->creativity : ""}}</td>
            <td style="text-align:center">{{$ev->creativity == 1 ? $ev->creativity : ""}}</td> 
        </tr>
        <tr>
            <td>Enthusiasm</td> 
            <td style="text-align:center">{{$ev->enthusiasm == 5 ? $ev->enthusiasm : ""}}</td>
            <td style="text-align:center">{{$ev->enthusiasm == 4 ? $ev->enthusiasm : ""}}</td>
            <td style="text-align:center">{{$ev->enthusiasm == 3 ? $ev->enthusiasm : ""}}</td>
            <td style="text-align:center">{{$ev->enthusiasm == 2 ? $ev->enthusiasm : ""}}</td>
            <td style="text-align:center">{{$ev->enthusiasm == 1 ? $ev->enthusiasm : ""}}</td> 
        </tr>
        
    </table>
</div>