@extends('layouts.dashboard')

@section('content')
<style>
  /* .salary-slip-box {
    border: 2px solid #ffc107;
    padding: 15px;
    font-family: 'Arial', sans-serif;
    background-color: #fff;
    margin-top: 20px;
  }

  .salary-header {
    border-bottom: 3px solid #ffc107;
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .salary-header .logo {
    background-color: #ffc107;
    color: white;
    padding: 15px 25px;
    font-size: 20px;
    font-weight: bold;
  }

  .salary-header .company-info {
    text-align: right;
  }

  .section-title {
    font-weight: bold;
    font-size: 18px;
    color: #ffc107;
    margin-top: 20px;
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    gap: 20px;
  }

  .info-row p {
    display: flex;
    gap: 5px;
    min-width: 45%;
    margin: 0;
    white-space: nowrap;
  }

  .info-row strong {
    min-width: 140px;
    display: inline-block;
  }

  .salary-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
  }

  .salary-table th,
  .salary-table td {
    border: 1px solid #000;
    padding: 8px 10px;
    font-size: 14px;
  }

  .salary-table th {
    background-color: #ffc107;
    color: white;
    text-align: center;
  }

  .total-row {
    font-weight: bold;
  }

  .net-salary {
    color: #ffc107;
    font-weight: bold;
  }

  .footer-info {
    margin-top: 25px;
  }

  .footer-info p {
    margin: 4px 0;
  }

  .border-top-line {
    margin-top: 25px;
    border-top: 3px solid #ffc107;
  } */
  .salary-slip {
    max-width: 1000px;
    margin: 20px auto;
    border: 1px solid #ccc;
    padding: 20px;
    background: #fff;
  }

  .header,
  .section-title {
    background-color: #f2f2f2;
    padding: 10px;
    text-align: center;
    font-weight: bold;
  }

  .company-info {
    text-align: center;
    margin-top: 10px;
  }

  .employee-details,
  .footer-info {
    margin-top: 20px;
  }

  .info-row {
    display: grid;
    margin-bottom: 10px;
    grid-template-columns: repeat(3, 1fr);
  }

  .info-row p {
    margin: 0 15px 5px 0;
    flex: 1 1 45%;
  }

  .table-split th {
    background: #eaeaea;
    text-align: center;
  }

  .total-row td {
    font-weight: bold;
  }

  .net-row td {
    font-weight: bold;
    color: #e74c3c;
  }

  .footer-info {
    margin-top: 30px;
  }
</style>

<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Salary</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Salary</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</section>


<section class="content">
  <div class="card">
    <div class="card-header p-1 bg-info">
      <h4 class="text-primary title text-white  mb-0 mr-2">Employee Salary Details</h4>
    </div>
    <div class="card-body">
      <form id="salaryForm">
        <div class="row">
          <div class="form-group col-md-4">
            <label>CTC Basic / Annual</label>
            <input type="number" min="0" class="form-control" id="ctcBasic" placeholder="Enter CTC Basic">
          </div>
          <div class="form-group col-md-4">
            <label>HRA</label>
            <input type="number" min="0" class="form-control" id="hra" placeholder="Enter HRA">
          </div>
          <div class="form-group col-md-4">
            <label>Special Allowance</label>
            <input type="number" min="0" class="form-control" id="ctcSpecial" placeholder="Enter CTC Special Allowance">
          </div>
          <div class="form-group col-md-4">
            <label>Medical Allowance</label>
            <input type="number" min="0" class="form-control" id="ctcMedical" placeholder="Enter CTC Medical">
          </div>
          <div class="form-group col-md-4">
            <label>DA</label>
            <input type="number" min="0" class="form-control" id="empSalary" placeholder="Enter total Daily Allowance">
          </div>
        </div>

        <h5 class="text-danger bg-info p-2">Salary Deduction</h5>
        <div class="row">
          <div class="form-group col-md-4">
            <label>PF Contribution</label>
            <input type="number" min="0" class="form-control" id="pf" placeholder="Enter PF Contribution">
          </div>
          <div class="form-group col-md-4">
            <label>Professional Tax</label>
            <input type="number" min="0" class="form-control" id="profTax" placeholder="Enter professional tax deducted">
          </div>
          <div class="form-group col-md-4">
            <label>TDS</label>
            <input type="number" min="0" class="form-control" id="tds" placeholder="Enter TDS">
          </div>
          <div class="form-group col-md-4">
            <label>ESIC</label>
            <input type="number" min="0" class="form-control" id="esic" placeholder="Enter ESIC contribution">
          </div>
        </div>

        <button type="submit" class="btn btn-primary mt-3">Submit</button>
      </form>


      <div id="salarySlip" class="salary-slip-box">
        <div class="salary-header text-center">
          <h5 class="font-weight-bold mb-0">PAYSLIP FOR THE MONTH OF JULY 2025</h5>
          <div class="company-logo my-2">
            <img src="https://turantams.itdivine.in/dashboard/img/Turant_logo.png" class="img-fluid" width="150">
          </div>
          <div class="company-info">
            <p class="mb-0">Turrant AMS</p>
            <small>16 - Cerebrum IT Park B3, Pune<br>+91 923 1111 222</small>
          </div>
        </div>

        <div class="employee-details border p-3 mb-3">
          <div class="info-row">

            <p><strong>Name:</strong> John Doe</p>
            <p><strong>Payment Mode:</strong> Bank Transfer</p>
            <p><strong>Date of Joining:</strong> 01-Jan-2020</p>
            <p><strong>PAN No:</strong> ACDSE3456G</p>
            <p><strong>Days Paid:</strong> 27</p>

            <p><strong>Emp No:</strong> NU01</p>
            <p><strong>Bank Name:</strong> ABC Bank</p>
            <p><strong>Designation:</strong> Software Engineer</p>
            <p><strong>PF No.:</strong> PF/01/2516/03</p>
            <p><strong>LWP:</strong> 3</p>
          </div>
        </div>
        <h6 class="bg-dark text-white p-2 mb-0">Monthly Salary Details</h6>
        <div class="table-responsive">
          <table class="table table-bordered text-center mt-0 mb-0">
            <thead class="thead-light">
              <tr>
                <th colspan="2">Salary Rates (Rs)</th>
                <th colspan="2">Earnings Current Month (Rs)</th>
                <th colspan="2">Deductions (Rs)</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>CTC Basic</td>
                <td>25,000.00</td>
                <td>Basic Salary</td>
                <td>5,572.00</td>
                <td>PF Contribution</td>
                <td>669.00</td>
              </tr>
              <tr>
                <td>CTC HRA</td>
                <td>15,000.00</td>
                <td>HRA</td>
                <td>3,277.00</td>
                <td>TDS</td>
                <td>13,676.00</td>
              </tr>
              <tr>
                <td>CTC Special Allowance</td>
                <td>4,500.00</td>
                <td>Special Allowance</td>
                <td>983.00</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>CTC Medical</td>
                <td>5,000.00</td>
                <td>Medical Allowance</td>
                <td>1,093.00</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td><strong>Total</strong></td>
                <td><strong>55,000.00</strong></td>
                <td><strong>Total</strong></td>
                <td><strong>10,925.00</strong></td>
                <td><strong>Total</strong></td>
                <td><strong>13,007.00</strong></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="annual-details">
          <h6 class="bg-dark text-white p-2 mb-0 mt-2">Annual Salary Details</h6>
          <div class="table-responsive">
            <table class="table table-bordered text-center mt-0">
              <thead class="thead-light">
                <tr>
                  <th colspan="2">Annual Earnings / Deductions</th>
                  <th colspan="2">Investments</th>
                  <th colspan="2">Sec.10 Exempt / Perks</th>
                  <th colspan="2">Reimbursements till date</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Projected Basic</td>
                  <td>1,45,851</td>
                  <td>Ded u/s 80D</td>
                  <td>25,000</td>
                  <td>HRA Received</td>
                  <td>85,677</td>
                  <td>Conveyance Expense</td>
                  <td>0</td>
                </tr>
                <tr>
                  <td>Projected HRA</td>
                  <td>85,677</td>
                  <td>Ded 80DD</td>
                  <td>0</td>
                  <td>50%/40% Basic</td>
                  <td>5,83,405</td>
                  <td>Cyber Expense</td>
                  <td>0</td>
                </tr>
                <tr>
                  <td>Projected Special Allow</td>
                  <td>25,703</td>
                  <td>Ded u/s 80U</td>
                  <td>0</td>
                  <td>Rent Paid for Year</td>
                  <td>0</td>
                  <td>Telephone Expense</td>
                  <td>0</td>
                </tr>
                <tr>
                  <td>Projected Conv.</td>
                  <td>45,000</td>
                  <td>Ded 80E</td>
                  <td>0</td>
                  <td>10% Basic</td>
                  <td>0</td>
                  <td>Weekly Off</td>
                  <td>0</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

@endsection

@push('scripts')

<script>
  $(document).ready(function() {
    $('#salaryForm').on('submit', function(e) {
      e.preventDefault();

      const basic = +$('#basicSalary').val();
      const hra = +$('#hra').val();
      const perf = +$('#performancePay').val();
      const med = +$('#medicalAllowance').val();

      const pf = +$('#pf').val();
      const tax = +$('#profTax').val();
      const esic = +$('#esic').val();

      const incType = $('#incrementType').val();
      const incVal = +$('#incrementValue').val();

      let earnings = [{
          label: 'Basic Pay',
          amount: basic
        },
        {
          label: 'HRA',
          amount: hra
        },
        {
          label: 'Performance Pay',
          amount: perf
        },
        {
          label: 'Medical Allowance',
          amount: med
        }
      ];

      let totalEarnings = basic + hra + perf + med;
      if (incType === 'percent') totalEarnings += (totalEarnings * incVal) / 100;
      else if (incType === 'flat') totalEarnings += incVal;

      let deductions = [{
          label: 'PF',
          amount: pf
        },
        {
          label: 'Prof. Tax',
          amount: tax
        },
        {
          label: 'ESIC',
          amount: esic
        }
      ];

      const totalDeductions = pf + tax + esic;
      const net = totalEarnings - totalDeductions;

      // Determine max rows needed for combined table
      const maxRows = Math.max(earnings.length, deductions.length);
      let combinedHTML = '';

      for (let i = 0; i < maxRows; i++) {
        const earn = earnings[i] || {
          label: '',
          amount: ''
        };
        const deduct = deductions[i] || {
          label: '',
          amount: ''
        };

        combinedHTML += `
        <tr>
          <td>${earn.label}</td>
          <td>${earn.amount !== '' ? `₹${earn.amount.toFixed(2)}` : ''}</td>
          <td>${deduct.label}</td>
          <td>${deduct.amount !== '' ? `₹${deduct.amount.toFixed(2)}` : ''}</td>
        </tr>`;
      }
      // Insert Increment row if applicable
      if (incType !== 'none' && incVal > 0) {
        const label = incType === 'percent' ? `Increment (${incVal}%)` : 'Flat Increment';
        combinedHTML += `
    <tr>
      <td>${label}</td>
      <td colspan="3">₹${(incType === 'percent' ? ((basic + hra + perf + med) * incVal / 100) : incVal).toFixed(2)}</td>
    </tr>`;
      }

      // Totals Row
      combinedHTML += `
      <tr class="font-weight-bold">
        <td><strong>Total Earnings</strong></td>
        <td><strong>₹${totalEarnings.toFixed(2)}</strong></td>
        <td><strong>Total Deductions</strong></td>
        <td><strong>₹${totalDeductions.toFixed(2)}</strong></td>
      </tr>
      <tr>
        <td colspan="3" class="text-right"><strong>Net Payable:</strong></td>
        <td><strong>₹${net.toFixed(2)}</strong></td>
      </tr>`;

      $('#combinedSlipTable').html(combinedHTML);
      $('#salarySlip').show();
    });
  });
</script>

@endpush