@extends('layouts.dashboard')
<style>
  th,
  td {
    text-align: left !important;
  }

  .bg-gray-light {
    background-color: #f8f9fa;
    color: #000 !important;
    border: 1px solid #ccc;
    border-bottom: 0px;
    text-align: center;
    font-weight: 600;
  }
  .btn-save-data {
    background-image: linear-gradient(to right, #4CAF50, #8BC34A);
    /* Green gradient */
    color: #fff;
    border: none;
    border-radius: 50px;
    /* Pill shape */
    font-weight: 600;
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
    transition: all 0.3s ease;
  }

  .btn-save-data:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    /* Lift button on hover */
  }

  /* Styling for the Download Salary Slip button */
  .btn-download-slip {
    background-image: linear-gradient(to right, #2196F3, #03A9F4);
    /* Blue gradient */
    color: #fff;
    border: none;
    border-radius: 50px;
    /* Pill shape */
    font-weight: 600;
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  .btn-download-slip:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
  }
</style>
@section('content')
<div class="container-fluid pt-3">
  <div class="card">
    <div class="card-header d-flex justify-content-between">
      <h4 class="mb-0 accent-danger font-weight-bold ">Employee Salary Slip</h4>
      <div class="ml-auto">
        <button type="button" class="btn btn-sm px-0">
          <a href="{{ route('salary.index') }}" class="uniqbtn-btn">
            <i class="fa fa-backward"></i>
            <span>Back</span>
          </a>
        </button>
      </div>
    </div>
    <div class="card-body">
      {{-- Header --}}
      <div class="text-center d-flex justify-content-between">
        <div class="left">
          <form method="GET" action="{{ route('salary.showSlip', $employee->id) }}" class="mb-0 text-center">
            <label for="month"><strong>Select Month:</strong></label>
            <input type="month" id="month" name="month" class="form-control d-inline-block w-auto"
              value="{{ request('month') ?? now()->format('Y-m') }}" onchange="this.form.submit()">
          </form>
        </div>
         <div class="right d-flex justify-content-end align-items-center">
          <form method="POST" class="mb-0" action="{{ route('salary.saveSalaryData', ['id' => $employee->id]) }}">
            @csrf
            <input type="hidden" name="month" value="{{ request('month') ?? now()->format('Y-m') }}">
            <button type="submit" class="btn btn-save-data mr-2 text-white">
              <i class="fas fa-save"></i> Save Salary Data
            </button>
          </form>
          <button class="btn btn-download-slip text-white" onclick="downloadPDF()">
            <i class="fas fa-download"></i> Download Salary Slip
          </button>
        </div>
      </div>
    </div>
  </div>

  @if(isset($employee))
  <div id="salarySlip" class="card shadow mt-1">
    <div class="card-body">
      {{-- Dynamic Payslip Header --}}
      <div class="row align-items-start mb-4">
        <div class="col-auto">
          @if(isset(auth()->user()->profile_image))
          <img class="img-fluid" width="120"
            src="{{ asset('public/uploads') . '/' . auth()->user()->profile_image }}" alt="User Image">
          @endif
        </div>
        <div class="col text-right">
          <p class="mb-0 font-weight-bold">{{ auth()->user()->name }}</p>
          <p class="mb-1 text-muted">Office No. 16, B3 Cerebrum IT Park,</p>
          <p class="mb-1 text-muted text-capitalize">{{ auth()->user()->address }}</p>
        </div>
      </div>


      {{-- Employee Info --}}
      <h5 class="bg-gray-light  p-2 mb-0 text-center">
        Payslip For The Month Of {{ $selectedMonth->format('F Y') }}
      </h5>
      <div class="border p-0 mb-4">
        <table class="table table-bordered table-sm mb-0 text-left mt-0">
          <tbody>
            <tr>
              <th>Emp Code</th>
              <td>{{ $employee->employee_id ?? 'CC002' }}</td>
              <th>Emp Name</th>
              <td colspan="3">{{ $employee->name ?? 'Pulin Prakash Mishra' }}</td>
            </tr>
            <tr>
              <th>Date Of Joining</th>
              <td>{{ \Carbon\Carbon::parse($employee->doj ?? '1986-12-01')->format('d-M-Y') }}</td>
              <th>Designation</th>
              <td>{{ $employee->designation->name }}</td>
              <th>PF No.</th>
              <td>23212134</td>
            </tr>
            <tr>
              <th>Date Of Birth</th>
              <td>{{ \Carbon\Carbon::parse($employee->dob)->format('d-M-Y') }}</td>
              <th>Location</th>
              <td>{{ $employee->location ?? 'Pune' }}</td>
              <th>PAN No.</th>
              <td>{{ $employee->pan ?? 'BBTPM0755R' }}</td>
            </tr>
            <tr>
              <th>UAN</th>
              <td>{{ $employee->uan ?? '100282121743' }}</td>
              <th>Bank A/c No.</th>
              <td>45433323</td>
              <th>EPS No.</th>
              <td>121212</td>
            </tr>
          </tbody>
        </table>
      </div>



      {{-- Monthly Salary Details --}}
      <h6 class="bg-gray-light  p-2 mb-0">Monthly Salary Details</h6>
      <div class="table-responsive">
        <table class="table table-bordered text-center mt-0 mb-4">
          <thead class="bg-warning">
            <tr>
              <th>Earning (Rs)</th>
              <th>Amount</th>
              <th>Deductions (Rs)</th>
              <th>Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Basic Salary</td>
              <td>{{ isset($emp_salary) ? number_format($emp_salary->monthly_basic_salary, 2) : 0 }}</td>
              <td>PF Contribution</td>
              <td>{{ isset($emp_salary) ? number_format($emp_salary->pf_contribution, 2) : 0 }}</td>
            </tr>
            <tr>
              <td>HRA</td>
              <td>{{ isset($emp_salary) ? number_format($emp_salary->monthly_hra, 2) : 0 }}</td>
              <td>TDS</td>
              <td>{{ isset($emp_salary) ? number_format($emp_salary->tds, 2) : 0 }}</td>
            </tr>
            <tr>
              <td>Special Allowance</td>
              <td>{{ isset($emp_salary) ? number_format($emp_salary->monthly_special_allowance, 2) : 0 }}</td>
              <td>LWP</td>
              <td> {{ $employee->lwp }}</td>
            </tr>
            <tr>
              <td>Medical Allowance</td>
              <td>{{ isset($emp_salary) ? number_format($emp_salary->monthly_medical_allowance, 2) : 0 }}</td>
              <td></td>
              <td></td>
            </tr>
            <tr class="bg-light font-weight-bold">
              <td>Total</td>
              <td>
                {{ isset($emp_salary) ? number_format(
                    ($emp_salary->monthly_basic_salary ?? 0) +
                    ($emp_salary->monthly_hra ?? 0) +
                    ($emp_salary->monthly_special_allowance ?? 0) +
                    ($emp_salary->monthly_medical_allowance ?? 0), 2) : 0 
                }}
              </td>
              <td>Total Deductions</td>
              <td>{{ number_format(($emp_salary->pf_contribution ?? 0) + ($emp_salary->tds ?? 0), 2) }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      {{-- Net Pay and In Words --}}
      @php
      $totalEarnings = $emp_salary->monthly_total ?? 0;
      $totalDeductions = ($emp_salary->pf_contribution ?? 0) + ($emp_salary->tds ?? 0);
      $netPay = $totalEarnings - $totalDeductions;
      @endphp


      <div class="table-responsive">
        <table class="table table-bordered mt-0">
          <tbody>
            <tr>
              <td><strong>Net Pay:</strong></td>
              <td>Rs. {{ number_format($netPay, 2) }}</td>
            </tr>
            <tr>
              <td><strong>In Words:</strong></td>
              <td><span id="inWords"></span></td>
            </tr>
          </tbody>
        </table>
      </div>
      <p>Please send your queries to <a href="mailto:careers@cloudcatch.co">careers@cloudcatch.co</a></p>
    </div>
  </div>
  @endif
</div>
@endsection

@push('scripts')


<script>
  function numberToWords(num) {
    const a = [
      '', 'one', 'two', 'three', 'four', 'five', 'six', 'seven',
      'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen',
      'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'
    ];
    const b = [
      '', '', 'twenty', 'thirty', 'forty', 'fifty',
      'sixty', 'seventy', 'eighty', 'ninety'
    ];

    function inWords(n) {
      if (n < 20) return a[n];
      if (n < 100) return b[Math.floor(n / 10)] + (n % 10 ? " " + a[n % 10] : "");
      if (n < 1000) return a[Math.floor(n / 100)] + " hundred" + (n % 100 ? " " + inWords(n % 100) : "");
      if (n < 1000000) return inWords(Math.floor(n / 1000)) + " thousand" + (n % 1000 ? " " + inWords(n % 1000) : "");
      if (n < 1000000000) return inWords(Math.floor(n / 1000000)) + " million" + (n % 1000000 ? " " + inWords(n % 1000000) : "");
      return "Number too large";
    }

    let whole = Math.floor(num);
    let words = inWords(whole);

    return words.charAt(0).toUpperCase() + words.slice(1);
  }

  // ✅ Corrected way to pass the PHP variable to JavaScript
  document.getElementById("inWords").innerText = numberToWords({
    {
      $netPay
    }
  });
</script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

<script>
  function downloadPDF() {
    const element = document.getElementById('salarySlip');

    const opt = {
      margin: 0.3,
      filename: 'salary-slip-{{ $employee->employee_id }}.pdf',
      image: {
        type: 'jpeg',
        quality: 0.98
      },
      html2canvas: {
        scale: 2,
        useCORS: true,
        allowTaint: true,
        scrollY: 0,
        logging: true
      },
      jsPDF: {
        unit: 'in',
        format: 'a4',
        orientation: 'portrait'
      }
    };

    html2pdf().set(opt).from(element).save();
  }
</script>
@endpush