@extends('hr_main')
@section('title', '| Earned Leave Calculation')
@section('content')
@include('convert_word')

<style media="screen">
  .table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td  {
    line-height:1;
    font-size: 10px !important;
  }

  .table thead tr th {
    position: relative;
    word-break: normal;
    text-transform: capitalize !important;
  }

  .left{  
    float: left;
  }
  .right{
    float: right;
  }
  .center{
    text-align:left;
    margin:0 auto !important;
    display:inline-block
  }
  .left{
    text-align: left;
    margin-left: 80px !important;
    display: inline-block;
  }

  th, td {
    padding: 4px !important;
  }

  .btn-xs, .btn-group-xs>.btn {
    font-size: 1.3em;
    background-color: #ffba00;
    color: #fff;
    padding: 1px 5px;
    padding-top: 1px;
    padding-right: 5px;
    padding-bottom: 1px;
    padding-left: 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 0;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  .toast-top-center {
    top: 175px;
    left: 50%;
    margin-left: -150px;
  }
  @media all and (max-width: 240px) {
    .toast-top-center {
      margin-left: -54px;
    }
  }
  @media all and (min-width: 241px) and (max-width: 320px) {
    .toast-top-center {
      margin-left: -64px;
    }
  }
  @media all and (min-width: 321px) and (max-width: 480px) {
    .toast-top-center {
      margin-left: -96px;
    }
  }
</style>

<div class="container-fluid">
  @if($earnedLeaveInfo != null)
    <div class="row" style="padding-bottom: 20px !important;">
      <div class="col-md-12" style="border:1px solid #000; background-color: white;" id="reportingDiv">

        <br>
        <div class="row" style="padding-bottom: 0px; text-align: center; vertical-align: middle; color: black; ">
          <span style="font-size: 16px !important; text-decoration: underline !important;"><strong>Earned Leave Calculation</strong></span><br>
        </div>
        <br>

        <table align="left" border="1px solid #000" style="border-collapse: collapse; font-size: 12px !important;" width="100%">
          <thead>
            <tr>
              <th style="text-align: center;"><b>Particulars</b></th>
              <th style="text-align: center;"><b>Leave Calculations</b></th>
              <th style="text-align: center;"><b>No. of Leaves</b></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="text-align: left;">Job Duration (Full Calendar Month)</td>
              <td style="text-align: left;">{{ ($earnedLeaveInfo->totalJobDurtaionMonth != 0) ? $earnedLeaveInfo->totalJobDurtaionMonth.' Months' : '-' }}</td>
              <td style="text-align: right;">{{ ($earnedLeaveInfo->totalJobDurtaionMonth != 0) ? $earnedLeaveInfo->totalJobDurtaionMonth : '-' }}</td>
            </tr>
            <tr>
              <td style="text-align: left;">Without Pay Leave</td>
              <td style="text-align: left;">{{ ($earnedLeaveInfo->totalWithoutPayLeave != 0) ? $earnedLeaveInfo->totalWithoutPayLeave.' Days' : '-' }}</td>
              <td style="text-align: right;">{{ ($earnedLeaveInfo->totalActualWithoutPayLeave != 0) ? $earnedLeaveInfo->totalActualWithoutPayLeave : '-' }}</td>
            </tr>
            <tr>
              <td style="text-align: left;">Consumed Leave</td>
              <td style="text-align: left;">{{ ($earnedLeaveInfo->totalConsumedLeave != 0) ? $earnedLeaveInfo->totalConsumedLeave.' Days' : '-' }}</td>
              <td style="text-align: right;">{{ ($earnedLeaveInfo->totalConsumedLeave != 0) ? $earnedLeaveInfo->totalConsumedLeave : '-' }}</td>
            </tr>
            <tr>
              <td style="text-align: center;" colspan="2"><b>Remaining Leave</b></td>
              <td style="text-align: right;">{{ ($earnedLeaveInfo->totalRemainingLeave != 0) ? $earnedLeaveInfo->totalRemainingLeave : '-' }}</td>
            </tr>
          <tbody>
        </table>

        <div class="row">
          <div class="col-md-12">
            &nbsp;
          </div>
        </div>

        <table align="left" border="1px solid ash" style="border-collapse: collapse; font-size: 12px !important; width: 100%;">
          <tr>
            <td style="padding: 10px;">
              <span style="display: flex; align-items: center; justify-content: center; font-family: sans-serif; font-weight: bold;">
                <span>Earned Leave Encashment Method =</span>
                <span style="text-align: center; line-height: 1.2; margin-left: 10px;">
                  <span style="display: block;">Basic × Remaining Leaves</span>
                  <span style="display: block; border-top: 1px solid #000; margin-top: 2px;">Number of Full Months</span>
                </span>
              </span>
            </td>
          </tr>
        </table>

        <div class="row">
          <div class="col-md-12">
            &nbsp;
          </div>
        </div>

        <table align="left" border="0px" style="border-collapse: collapse; font-size: 12px !important; width: 100%;">
          <tr>
            <td style="padding: 10px;">
              <span style="display: flex; align-items: center; justify-content: center; font-family: sans-serif; font-weight: bold;">
                <span>Earned Leave Encashment Eligible Amount (TK) =</span>
                <span style="text-align: center; line-height: 1.2; margin-left: 10px;">
                  <span style="display: block;">{{ number_format($earnedLeaveInfo->totalBasicSalary) }} × {{ number_format($earnedLeaveInfo->totalRemainingLeave) }}</span>
                  <span style="display: block; border-top: 1px solid #000; margin-top: 2px;">30</span>
                </span>
                <span>&nbsp; = {{ number_format($earnedLeaveInfo->totalEarnLeaveAmount) }}/-</span>
              </span>
            </td>
          </tr>
        </table>

        <div class="row">
          <div class="col-md-12">
            &nbsp;
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            &nbsp;
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            &nbsp;
          </div>
        </div>
        
      </div>
    </div>
  @endif
</div>
@endsection