@extends('layouts/layoutMaster')

@section('title', 'Salary Slip')

@section('content')
<div class="invoice-print p-4" style=" max-width: 1140px; margin: 0 auto;">
  <div class="card invoice-preview-card">
    <!-- Header Section -->
    <div class="card-body invoice-preview-header p-4">
      <div class="d-flex justify-content-between flex-xl-row flex-md-column flex-sm-row flex-column text-heading align-items-xl-center align-items-md-start align-items-sm-center flex-wrap gap-6 p-4" style="background-color: #f2f3f4; border-radius: 8px;">
        <div>
          <div class="d-flex svg-illustration align-items-center gap-2 mb-6">
            <img src="{{ $company->user->profile_photo_url }}" class="rounded-circle" width="50px" alt="User Profile Photo">
            {{-- <span class="app-brand-logo demo">@include('_partials.macros',["width"=>25,"withbg"=>'var(--bs-primary)'])</span> --}}
            <span class="mb-0 app-brand-text fw-semibold demo">{{ $company->company_name }}</span>
          </div>
          <p class="mb-1">{{ $company->billing_address }}</p>
        </div>
        <div>
          {{-- <h5 class="mb-6">Salary Slip</h5> --}}
          <div class="mb-1">

          </div>
          <div style="margin-top: 50px;">
            @php
                $months = [
                    1 => 'Jan', 2 => 'Feb', 3 => 'Mar', 4 => 'Apr',
                    5 => 'May', 6 => 'Jun', 7 => 'Jul', 8 => 'Aug',
                    9 => 'Sep', 10 => 'Oct', 11 => 'Nov', 12 => 'Dec'
                ];
                $monthName = $months[$dataSalary->month] ?? 'Invalid Month';
            @endphp
            <span>Payslip for the month</span><br>
            <span style="font-weight: bold;">{{ $dataSalary->year }} {{ $monthName }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Employee Info & Total Pay Section -->
    <div class="card-body py-4">
      <div class="d-flex justify-content-between flex-wrap gap-4">
        <div class="employee-info">
          <h6 class="mb-3">Employee Summary</h6>
          <table class="mb-3">
            <tr><td class="pe-3">Employee name:</td><td>{{ $employee->name }}</td></tr>
            <tr><td class="pe-3">Employee no.:</td><td>{{ $employee->phone_no }}</td></tr>
            <tr><td class="pe-3">Employee email:</td><td>{{ $employee->email }}</td></tr>
            <tr><td class="pe-3">Pay Period:</td><td>{{ $monthName }} {{ $dataSalary->year }}</td></tr>
          </table>
        </div>

        <div class="total-pay-card" style="width: 300px; border: 1px solid #ddd; border-radius: 8px;">
          <div style="padding: 16px; border-top-left-radius: 8px; border-top-right-radius: 8px;">
            <div style="font-size: 24px; font-weight: bold;">Rs.{{ number_format($dataSalary->net_salary,2) }}</div>
            <div style="font-size: 14px; margin-top: 4px;">Total Net Pay</div>
          </div>
          <div style="padding: 16px;">
            @php
              $year = $dataSalary->year;
              $month = $dataSalary->month;
              $daysInMonth = \Carbon\Carbon::createFromDate($year, $month)->daysInMonth;
            @endphp
            <table style="width: 100%;">
              <tr style="border-top: 1px;">
                <td>Paid Days</td>
                <td class="text-end">: {{ $daysInMonth }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- Earnings & Deductions Tables -->
    <div class="salary-details mx-4 mb-4">
      <div class="row g-0">
        <div class="col-6 pe-2">
          <table class="table m-0">
            <thead>
              <tr>
                <th>EARNINGS</th>
                <th class="text-end" style="width: 120px;">AMOUNT</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="text-nowrap">Basic</td>
                <td class="text-end">{{ number_format($employee->salary,2) }}</td>
              </tr>
              @php
                $totalGrossEarnings = $employee->salary;
              @endphp
              @foreach ($allounces as $allounce)
              <tr>
                <td>{{ $allounce->component_name }}</td>
                @if($allounce->status != 'Amount')
                  @php
                    $amount = ($dataSalary->basic_salary * $allounce->charge)/100;
                    $totalGrossEarnings += $amount;
                  @endphp
                  <td class="text-end">{{ number_format($amount,2) }}</td>
                @else
                  @php
                    $totalGrossEarnings += $allounce->charge;
                  @endphp
                  <td class="text-end">{{ number_format($allounce->charge,2) }}</td>
                @endif
              </tr>
              @endforeach
              <!-- Add empty rows if deductions has more items -->
              @if(count($allounces) < count($deducations))
                @for($i = 0; $i < (count($deducations) - count($allounces)); $i++)
                  <tr><td>&nbsp;</td><td></td></tr>
                @endfor
              @endif
            </tbody>
          </table>
        </div>

        <div class="col-6 ps-2">
          <table class="table m-0">
            <thead>
              <tr>
                <th>DEDUCTIONS</th>
                <th class="text-end" style="width: 120px;">AMOUNT</th>
              </tr>
            </thead>
            <tbody>
              @php
                $totalDeductions = 0;
              @endphp
              @foreach ($deducations as $deduct)
              <tr>
                <td>{{ $deduct->component_name }}</td>
                @if($deduct->status != 'Amount')
                  @php
                    $amount = ($dataSalary->basic_salary * $deduct->charge)/100;
                    $totalDeductions += $amount;
                  @endphp
                  <td class="text-end">{{ number_format($amount,2) }}</td>
                @else
                  @php
                    $totalDeductions += $deduct->charge;
                  @endphp
                  <td class="text-end">{{ number_format($deduct->charge,2) }}</td>
                @endif
              </tr>
              @endforeach
              <!-- Add empty rows if earnings has more items -->
              @if(count($deducations) < count($allounces))
                @for($i = 0; $i < (count($allounces) - count($deducations)); $i++)
                  <tr><td>&nbsp;</td><td></td></tr>
                @endfor
              @endif
            </tbody>
          </table>
        </div>
      </div>

      <!-- Totals Row -->
      <div class="row g-0">
        <div class="col-6 pe-2">
          <table class="table m-0">
            <tfoot style="background-color: #f5f5f7;">
              <tr>
                <th>Gross Earnings</th>
                <th class="text-end" style="width: 120px;">{{ number_format($totalGrossEarnings, 2) }}</th>
              </tr>
            </tfoot>
          </table>
        </div>
        <div class="col-6 ps-2">
          <table class="table m-0">
            <tfoot style="background-color: #f5f5f7;">
              <tr>
                <th>Total Deductions</th>
                <th class="text-end" style="width: 120px;">{{ number_format($totalDeductions, 2) }}</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>

    <!-- Total Net Payable -->
    <div class="mx-4 mb-4">
      <div class="d-flex align-items-center justify-content-between p-3"
           style="border-radius: 4px;">
        <div>
          <h6 class="mb-1 text-uppercase">Total Net Payable</h6>
          <small class="text-muted">Gross Earnings - Total Deductions</small>
        </div>
        <div>
          <span class="fs-4 fw-bold">Rs.{{ number_format($dataSalary->net_salary,2) }}</span>
        </div>
      </div>
    </div>
    <br>
    <div class="mx-4 mb-4">
      <div class="d-flex align-items-center justify-content-between p-3"
           style="border-radius: 4px;">
        <div>
          {{-- <h6 class="mb-1 text-uppercase">Total Net Payable</h6>
          <small class="text-muted">Gross Earnings - Total Deductions</small> --}}
        </div>
        <div>
          <span>Amount in Words: </span>
          {{-- <span class="fs-4 fw-bold" id="salaryAmount">{{ $dataSalary->net_salary }}</span> --}}
          <span id="salaryInWords">{{ convertNumberToWords($dataSalary->net_salary) }}</span>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* General styles */
body {
  background: white !important;
  font-size: 14px;
  line-height: 1.4;
}

/* Print-specific styles */
@media print {
  @page {
    size: A4;
    margin: 1cm;
  }

  body {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .invoice-print {
    padding: 0 !important;
  }

  .card {
    border: none !important;
    box-shadow: none !important;
  }

  .table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  .table td, .table th {
    padding: 8px !important;
    border: 1px solid #ddd !important;
  }

  .row {
    display: flex !important;
    width: 100% !important;
  }

  .col-6 {
    width: 50% !important;
    float: left !important;
  }

  /* Ensure backgrounds and colors print */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide unnecessary elements */
  .no-print {
    display: none !important;
  }
}

/* Table styles */
.table {
  margin-bottom: 0;
}

.table th {
  font-weight: 600;
  background-color: #f8f9fa !important;
}

.table td, .table th {
  padding: 8px;
  vertical-align: top;
}

/* Utility classes */
.text-end {
  text-align: right !important;
}

.bg-light {
  background-color: #f8f9fa !important;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/convert-number-to-words/2.0.2/convert-number-to-words.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
      const salaryAmount = {{ $dataSalary->net_salary }};
      const salaryInWords = numberToWords.toWords(salaryAmount);
      document.getElementById("salaryInWords").textContent = salaryInWords.charAt(0).toUpperCase() + salaryInWords.slice(1);
  });
</script>
<script>
  (function() {
    const invoiceDiv = document.querySelector('.invoice-print');
    const originalContent = document.body.innerHTML;

    // Temporarily set the body's HTML to the invoice div's content
    document.body.innerHTML = invoiceDiv.outerHTML;

    // Trigger the print dialog
    window.print();
  })();
</script>

@endsection