@extends('layouts/layoutMaster')

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

@section('vendor-style')
@vite('resources/assets/vendor/libs/flatpickr/flatpickr.scss')
@endsection

@section('page-style')
@vite('resources/assets/vendor/scss/pages/app-invoice.scss')
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/moment/moment.js',
  'resources/assets/vendor/libs/flatpickr/flatpickr.js',
  'resources/assets/vendor/libs/cleavejs/cleave.js',
  'resources/assets/vendor/libs/cleavejs/cleave-phone.js'
])
@endsection

{{-- @section('page-script')
@vite([
  'resources/assets/js/offcanvas-add-payment.js',
  'resources/assets/js/offcanvas-send-invoice.js'
])
@endsection --}}
@section('content')
<div class="row invoice-preview">
  <!-- Invoice -->
  <div class="col-xl-9 col-md-8 col-12 mb-md-0 mb-6">
    <div class="card invoice-preview-card p-sm-12 p-6">
      <div class="card-body invoice-preview-header rounded-4 p-6">
        <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">
          <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>{{ $dataSalary->year }} {{ $monthName }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body py-6 px-0">
        <div class="d-flex justify-content-between flex-wrap gap-6">
          <div>
            <h6>Employee Summary</h6>
            <p class="mb-1">Employee name: {{ $employee->name }}</p>
            <p class="mb-1">Employee no.: {{ $employee->phone_no }}</p>
            <p class="mb-1">Employee email: {{ $employee->email }}</p>
            <p class="mb-1">Pay Period: {{ $dataSalary->year }} {{ $monthName }}</p>
          </div>
          <div style="width: 300px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); font-family: Arial, sans-serif; border: 1px solid #e0e0e0;">
            <div style="padding: 16px; color: #000000; font-size: 24px; font-weight: bold; text-align: left; ">
              Rs.{{ number_format($dataSalary->net_salary,2) }}
              <div style="font-size: 14px; color: #000000; font-weight: normal; margin-top: 4px;">Total Net Pay</div>
            </div>
            <div style="background: #fff; padding: 16px; font-size: 14px; color: #333;">
              <table style="width: 100%;">
                <tbody>
                  @php
                    $year = $dataSalary->year; // The specific year
                    $month = $dataSalary->month; // The specific month (e.g., 1 for January, 2 for February)
                    $daysInMonth = \Carbon\Carbon::createFromDate($year, $month)->daysInMonth;
                  @endphp
                  <tr>
                    <td style="padding: 4px 0; text-align: left;">Paid Days</td>
                    <td style="padding: 4px 0; text-align: right; padding-right: 5px;">: {{ $daysInMonth }}</td>
                  </tr>
                  {{-- <tr>
                    <td style="padding: 4px 0; text-align: left;">LOP Days</td>
                    <td style="padding: 4px 0; text-align: right;">: 3</td>
                  </tr> --}}
                </tbody>
              </table>
            </div>
          </div>

        </div>
      </div>
      <div class="table-responsive border rounded-4 border-bottom-0">
        <div class="row">
          <!-- Left Table -->
          <div class="col-md-6">
            <table class="table m-0">
              <thead class="bg-light">
                <tr>
                  <th>EARNINGS</th>
                  <th>AMOUNT</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="text-nowrap">Basic</td>
                  <td>{{ number_format($dataSalary->basic_salary,2) }}</td>
                </tr>
                @php
                  $totalGrossEarnings = $dataSalary->basic_salary;
                @endphp
                @foreach ($allounces as $allounce)
                <tr>
                  <td class="text-nowrap">{{ $allounce->component_name }}</td>
                  @if ($allounce->status != 'Amount')
                    @php
                      $amount = ($dataSalary->basic_salary * $allounce->charge) / 100;
                      $totalGrossEarnings += $amount;
                    @endphp
                    <td>{{ number_format($amount, 2) }}</td>
                  @else
                    @php
                      $totalGrossEarnings += $allounce->charge;
                    @endphp
                    <td>{{ number_format($allounce->charge, 2) }}</td>
                  @endif
                </tr>
                @endforeach
                <!-- Add empty rows to match height if needed -->
                @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>

          <!-- Right Table -->
          <div class="col-md-6">
            <table class="table m-0">
              <thead class="bg-light">
                <tr>
                  <th>DEDUCTIONS</th>
                  <th>AMOUNT</th>
                </tr>
              </thead>
              <tbody>
                @php
                  $totalDeducations = 0;
                @endphp
                @foreach ($deducations as $deduct)
                  <tr>
                    <td class="text-nowrap">{{ $deduct->component_name }}</td>
                    @if($deduct->status != 'Amount')
                      @php
                        $amount = ($dataSalary->basic_salary * $deduct->charge) / 100;
                        $totalDeducations += $amount;
                      @endphp
                      <td>{{ number_format($amount,2) }}</td>
                    @else
                      @php
                        $totalDeducations += $deduct->charge;
                      @endphp
                      <td>{{ number_format($deduct->charge,2) }}</td>
                    @endif
                  </tr>
                @endforeach
                <!-- Add empty rows to match height if needed -->
                @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>

        <!-- Total Row (Outside of both tables) -->
        <div class="row">
          <div class="col-md-6">
            <table class="table m-0">
              <tfoot>
                <tr class="bg-light">
                  <th>Gross Earnings</th>
                  <th>{{ number_format($totalGrossEarnings, 2) }}</th>
                </tr>
              </tfoot>
            </table>
          </div>
          <div class="col-md-6">
            <table class="table m-0">
              <tfoot>
                <tr class="bg-light">
                  <th>Total Deductions</th>
                  <th>{{ number_format($totalDeducations, 2) }}</th>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>

      <br>
      <div class="table-responsive">
        <div class="d-flex align-items-center justify-content-between p-4 border rounded" style="">
          <div>
            <h6 class="mb-1 fw-bold text-uppercase">Total Net Payable</h6>
            <span class="text-muted">Gross Earnings - Total Deductions</span>
          </div>
          <div class="text-end">
            <span class="fw-bold fs-4" style="color: #000000;">Rs.{{ number_format($dataSalary->net_salary,2) }}</span>
          </div>
        </div>
      </div>
    </div>
      <hr class="mt-0 mb-6">
      <div class="card-body p-0">
        <div class="row">
          <div class="col-12">
            {{-- <span class="fw-medium text-heading">Note:</span>
            <span>It was a pleasure working with you and your team. We hope you will keep us in mind for future freelance projects. Thank You!</span> --}}
          </div>
        </div>
      </div>
    </div>

  <div class="col-xl-3 col-md-4 col-12 invoice-actions">
    <div class="card">
      <div class="card-body">
        {{-- <button class="btn btn-primary d-grid w-100 mb-4" data-bs-toggle="offcanvas" data-bs-target="#sendInvoiceOffcanvas">
          <span class="d-flex align-items-center justify-content-center text-nowrap">
            <i class="ri-send-plane-line ri-16px scaleX-n1-rtl me-2"></i>Send Invoice
          </span>
        </button> --}}
        <button class="btn btn-outline-secondary d-grid w-100 mb-4">Download</button>
        <div class="d-flex mb-4">
          <a class="btn btn-outline-secondary d-grid w-100 me-4" target="_blank" href="{{ route('app-salarySlip-print', ['id' => $dataSalary->id]) }}">
            Print
          </a>
        </div>
        {{-- <button class="btn btn-success d-grid w-100" data-bs-toggle="offcanvas" data-bs-target="#addPaymentOffcanvas">
          <span class="d-flex align-items-center justify-content-center text-nowrap">
            <i class="ri-money-dollar-circle-line ri-16px me-2"></i>Add Payment
          </span>
        </button> --}}
          </div>
      </div>
  </div>
  </div>
</div>



<!-- Offcanvas -->
@include('_partials/_offcanvas/offcanvas-send-invoice')
@include('_partials/_offcanvas/offcanvas-add-payment')
<!-- /Offcanvas -->
@endsection