@extends('admin.admin_dashboard')

@section('admin')


{{-- SweetAlert2 --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

{{-- A) Hard “insufficient funds” error --}}
@if($errors->has('balance'))
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      Swal.fire({
        icon: 'warning',
        title: 'Insufficient Funds',
        text: @json($errors->first('balance')),
        confirmButtonText: 'OK'
      });
    });
  </script>
@endif

{{-- B) Overdraft *confirmation* --}}
@if(session('overdraft_confirm'))
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const w = @json(session('overdraft_confirm'));

      // helper to format UGX amounts, no decimals
      const fmt = n => Number(n)
        .toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });

      Swal.fire({
        icon:           'warning',
        title:          'Overdraft Confirmation',
        html:
          `Balance: <strong>UGX ${fmt(w.bank_balance)}</strong><br>` +
          `Overdraft Limit: <strong>UGX ${fmt(w.overdraft_limit)}</strong><br>` +
          `You are overdrawing by <strong>UGX ${fmt(w.overdraft_amount)}</strong>.`,
        showCancelButton: true,
        confirmButtonText: 'Proceed Anyway',
        cancelButtonText:  'Go Back'
      }).then(result => {
        if (result.isConfirmed) {
          const form = document.querySelector('form[action="{{ route('save.payment.voucher') }}"]');
          // inject hidden flag so controller knows you confirmed
          if (! form.querySelector('[name="confirm_overdraft"]')) {
            const ip = document.createElement('input');
            ip.type  = 'hidden';
            ip.name  = 'confirm_overdraft';
            ip.value = '1';
            form.appendChild(ip);
          }
          form.submit();
        }
      });
    });
  </script>
@endif









<button type="button" class="btn btn-coffee btn-lg px-4 py-2 mt-3 ms-4" data-bs-toggle="modal" data-bs-target="#formulaModal">
    Update FML
</button>

<button type="button" class="btn btn-coffee btn-lg px-4 py-2 mt-3 ms-4" data-bs-toggle="modal" data-bs-target="#gradingPriceModal">
     Update Grading Price
</button>



<div class="container-fluid py-5 px-4">
    <div class="card shadow-lg border-0 rounded-lg p-5" style="border: double 5px #000; position: relative;">
 



  <!-- Background watermark, without blur, and with reduced opacity -->
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('{{ asset('upload/HC LOGO.png') }}'); background-repeat: no-repeat; background-size: contain; background-position: center; opacity: 0.1; pointer-events: none;"></div>
  
       <!-- Header Section -->
<div class="row align-items-center mb-4 border-bottom pb-3">
    <!-- Left: Logo -->
    <div class="col-md-3 text-start">
        <img src="{{ asset('upload/HC LOGO.png') }}" alt="Company Logo" class="img-fluid" style="max-height: 90px;">
    </div>

    <!-- Center: Company Name & Address -->
    <div class="col-md-6 text-center">
        <h2 class="fw-bold text-uppercase text-coffee mb-1">HOPE COFFEE UGANDA</h2>
        <p class="mb-1 text-dark fs-5 fw-semibold">P.O Box 81 KYOTERA</p>
        <p class="text-dark fs-5 fw-semibold">SSANJE, KABANO</p>
    </div>

    <!-- Right: Date and Farmer Photo -->
    <div class="col-md-3 text-end">
<<<<<<< HEAD
        <img src="{{ asset('upload/farmers/' . $grn->farmer->farmer_photo) }}" alt="Farmer's Photo" 
            class="img-fluid rounded-circle border border-2 border-coffee shadow-sm mb-2"
            style="max-width: 150px; max-height: 150px;">
=======
        <img src="{{ asset('upload/farmers/' . $grn->farmer->farmer_photo) }}" alt="Farmer's Photo"
            class="chm-voucher-farmer-photo border border-2 border-coffee shadow-sm mb-2">
>>>>>>> origin/main
        <h6 class="fw-bold text-dark">{{ \Carbon\Carbon::now()->format('l, F j, Y') }}</h6>
    </div>
</div>

<!-- Contact Information Bar -->
<div class="text-center bg-light py-2 px-3 rounded border mb-3">
    <p class="text-dark fs-7 mb-0" style="font-style: italic; white-space: nowrap;">
        <span>🌐 Website: <a href="https://www.hopecoffeeuganda.com" target="_blank" class="text-decoration-none">www.hopecoffeeuganda.com</a></span> | 
        <span>✉️ Email: <a href="mailto:info@hopecoffeeuganda.com" class="text-decoration-none">info@hopecoffeeuganda.com</a></span> | 
        <span>📞 Contact: +256 706 058246</span>
    </p>
</div>

        
        
        <!-- Payment Voucher Title -->
        <div class="text-center my-4">
            <h4 class="fw-bold text-uppercase text-coffee d-inline-block">
                Farmer Payment Voucher
            </h4>
        </div>

    <!-- Farmer Details Section -->
<div class="row mb-2 d-flex align-items-center">
    <div class="col-md-6">
        <p class="fw-semibold text-dark fs-6 mb-0">Farmer Name: {{ $grn->farmer->farmer_fname }} {{ $grn->farmer->farmer_lname }}</p>
    </div>
    <div class="col-md-6 text-end">
        <p class="fw-semibold text-dark fs-6 mb-0">Phone Number: {{ $grn->farmer->farmer_contact }}</p>
    </div>
</div>

<!-- Farmer Group Section -->
<div class="row mb-2 d-flex align-items-center">
    <div class="col-md-6">
        <p class="fw-semibold text-dark fs-6 mb-0">Farmer Group: {{ $grn->farmer->group->group_name ?? 'N/A' }}</p>
    </div>
    <div class="col-md-6 text-end">
        <p class="fw-semibold text-dark fs-6 mb-0">Gender: {{ $grn->farmer->farmer_gender }}</p>
    </div>
</div>

<!-- Farmer Village Section -->
<div class="row mb-2 d-flex align-items-center">
    <div class="col-md-6">
        <p class="fw-semibold text-dark fs-6 mb-0">Farmer Village: {{ $grn->farmer->farmer_village ?? 'N/A' }}</p>
    </div>
        <div class="col-md-6 text-end">
       <!-- Farmer Age -->
<p class="fw-semibold text-dark fs-6 mb-0">
    Age: {{ \Carbon\Carbon::parse($grn->farmer->d_o_b)->age }}
</p>

    </div>
</div>

<div class="row mb-2 d-flex align-items-center">
    <div class="col-md-6">
        <p class="fw-semibold text-dark fs-6 mb-0">Kibooko <i>(Kgs)</i>: {{ $grn->kiboko }}</p>
    </div>

     <div class="col-md-6 text-end">
        <p class="fw-semibold text-dark fs-6 mb-0">EUDR : {{ $grn->farmer->EUDR }}</p>
    </div>

</div>
<div class="row mb-2 d-flex align-items-center">
   <div class="col-md-6">
    <p class="fw-semibold text-dark fs-6 mb-0">
        Voucher No.: 
        <span class="fw-bold" style="color: red; font-size: 1.2rem; font-family: 'Courier New', monospace;">
            {{ $grn->id }}
        </span>
    </p>
</div>

</div>



  <!-- Payment Details Table -->

  <form action="{{ route('save.payment.voucher.grade18') }}" method="POST" enctype="multipart/form-data">
    @csrf
<div class="table-responsive">
    <table class="table table-hover  custom-table-border">
        <thead class="bg-coffee text-light">
            <tr>
                <th>Grade</th>
                <th>Quantity (Kgs)</th>
                <th>Unit Price (UGX)</th>
                <th>Amount (UGX)</th>
            </tr>
        </thead>
        <tbody>
            @php
                // Map database field names to display labels
                $grades = [
                    'ungraded'   => 'Ungraded',
                    'grade_1800' => 'Grade 18',
                    'grade_1700' => 'Grade 17',
                    'grade_1500' => 'Grade 15',
                    'grade_1200' => 'Grade 12',
                    'grade_1199' => 'Grade 1199'
                ];
            @endphp

            @foreach($grades as $dbField => $displayLabel)
                <tr class="bg-light small-row">
                    <td class="fw-bold text-dark text-uppercase">{{ $displayLabel }}</td>
                    <td>
                        <input type="number" name="{{ $dbField }}" class="form-control small-input qty-input border-0"
                               value="{{ old($dbField, $grn->$dbField) }}" min="0" step="0.01" readonly>
                    </td>
                    <td>
                        <input type="text" name="unit_price_{{ $dbField }}" class="form-control small-input price-input border-0"
                               value="{{ old('unit_price_' . $dbField, number_format($grn->unit_price ?? 0, 0, '.', ',')) }}">
                    </td>
                    <td>
                        <input type="text" class="form-control amount-field text-center small-input  border-0 fw-bold" id="amount_{{ $dbField }}" readonly>
                    </td>
                    
                </tr>
            @endforeach
        </tbody>
        <tfoot>
         <input type="text"  name="grn_id" value="{{ $grn->id }}" class="form-control" hidden >
                   
       
            <tr class="bg-light small-row">
                <td class="fw-bold text-dark">Total Quantity (Kgs)</td>
                <td>
                    <input type="text" name="total_quantity" id="total_quantity" class="form-control small-input text-center bg-light border-0 fw-bold" readonly>
                </td>
                 <td colspan="2"></td>
                
            </tr>
            <tr class="bg-light small-row">
                <td class="fw-bold text-dark">Sacks 1/100kg</td>
                <td>
                    <input type="text" name="sacks_total" class="form-control small-input sacks-field text-center bg-light border-0 fw-bold" id="sacks_total" readonly>
                </td>
                <td class="fw-bold text-dark">Subtotal</td>
                <td>
                    <input type="text" name="subtotal_amount" id="subtotal_amount" class="form-control small-input text-center border-0 text-dark fw-bold" readonly>
                </td>
            </tr>

            <tr class="bg-light small-row">
    <td class="fw-bold text-dark">MC (Amazzi)</td>
    <td>
        <input type="text" value="{{ $grn->moisture_content }}" name="moisture_content" class="form-control mc-field text-center bg-light border-0 fw-bold small-input" id="mc" readonly>
    </td>
     <td colspan="2"></td>
             </tr>

             <tr class="bg-light small-row">
                <td class="fw-bold text-dark">FAQ (Kase)</td>
                <td>
                    <input type="text" value="{{ $grn->faq }}"  name="faq" class="form-control small-input faq-field text-center bg-light border-0 fw-bold" id="faq" readonly>
                </td>
                <td id="gradingLabel" class="fw-bold text-dark">Grading (Okusunsula) 0/kg</td>

                <td>
                    <input type="text" id="grading_cost" name="grading_cost" class="form-control small-input text-center border-0 text-dark fw-bold" readonly>
                </td>
            </tr>

             <tr class="bg-light small-row">
                <td class="fw-bold text-dark">MC Kgs Ded</td>
                <td>
    <input type="number" class="form-control small-input text-center bg-light border-0 fw-bold" 
           id="kg_ded" name="mc_ded" >
</td>

                <td class="fw-bold text-dark">Hulling (Okukuba) 200/kg</td>
                <td>
                    <input type="text" id="hulling_cost" name="hulling_cost" class="form-control small-input text-center border-0 text-dark fw-bold" readonly>
                </td>
            </tr>

             <tr class="bg-light small-row">
                <td style="visibility: hidden;"></td>
               <td>
    <button type="button" class="btn btn-coffee btn-lg px-4 py-2 mt-3 ms-4" id="mcDeductionBtn">
        MC Deduction
    </button>
</td>

                <td class="fw-bold text-dark">Sacks (Obukutiya)</td>
                <td>
                    <input type="text" name="sacks_cost" id="sacks_cost" class="form-control small-input text-center border-0 text-dark fw-bold" readonly>
                </td>

            </tr>

           
          
           <tr class="bg-light small-row">
    <td style="visibility: hidden;"></td>
    <td style="visibility: hidden;"></td>
    <td class="fw-bold text-dark">Transport (Entambula)</td>
    <td>
        <input type="text"
        id="transport_advance"
        name="transport_advance"
        value="{{ old('transport_advance', '') }}"
        placeholder="{{ number_format($transportAdvanceTotal, 0) }}"
        class="form-control small-input text-center border-0 text-dark fw-bold"
        >
    </td>
</tr>

<tr class="bg-light small-row">
    <td style="visibility: hidden;"></td>
    <td style="visibility: hidden;"></td>
    <td class="fw-bold text-dark">Advance (Ebbanja)</td>
    <td>
       <input
   type="text"
   id="money_advance"
   name="money_advance"
   class="form-control small-input text-center border-0 text-dark fw-bold"
   value="{{ old('money_advance', '') }}"
   placeholder="{{ number_format($generalAdvanceTotal, 0) }}">
    </td>
</tr>

<tr class="bg-light small-row">
    <td style="visibility: hidden;"></td>
    <td style="visibility: hidden;"></td>
    <td class="fw-bold text-dark">Tarpaulin (Ettundubaali)</td>
    <td>
        <input type="text"
        id="tarpaulin_advance"
        name="tarpaulin_advance"
        value="{{ old('tarpaulin_advance', '') }}"
        placeholder="{{ number_format($tarpaulinAdvanceTotal, 0) }}"
        class="form-control small-input text-center border-0 text-dark fw-bold"
        >

        
    </td>
</tr>


            <tr class="bg-light small-row">
    <!-- Hide first two cells (but keep their space in the layout) -->
    <td style="visibility: hidden;"></td>
    <td style="visibility: hidden;"></td>
    
    <td class="fw-bold text-dark">Total Deductions</td>
    <td>
        <input type="text" id="total_deductions" name="total_deductions" class="form-control small-input text-center border-0 text-dark fw-bold" readonly>
    </td>
</tr>
<tr class="bg-light small-row" style="height: 50px;">
    
</tr>


<tr class="bg-light small-row">
    <!-- Hidden first two cells for spacing, and layout adjustment -->
    <td style="visibility: hidden;"></td>
    <td style="visibility: hidden;"></td>
    <!-- NET PAY Row -->
   <td class="fw-bold text-dark" style="font-size: 1.1rem; padding-right: 15px; padding-left: 5px; border: none;">
    <span>NET PAY</span>
</td>

    <td class="d-flex align-items-center">
    <span class="fw-bold text-dark" style="font-size: 1.1rem; padding-right: 5px;">UGX</span>
    <input type="text" id="net_pay" name="net_pay" class="form-control small-input text-center border-0 text-dark fw-bold" readonly style="font-size: 1.1rem; padding: 8px 12px; background-color: #f1f1f1;">
</td>

</tr>

<tr class="bg-light small-row">
   <td class="fw-bold text-dark" colspan="4">
    <div class="d-flex justify-content-between align-items-center">
        <div>Farmers Name: 
            <span type="text" class="form-control small-input text-center border-0 text-dark fw-bold" readonly style="font-size: 0.5rem; padding: 6px 10px; background-color: #f1f1f1;" value="{{ strtoupper($grn->farmer->farmer_fname) }} {{ strtoupper($grn->farmer->farmer_lname) }}">{{ strtoupper($grn->farmer->farmer_fname) }} {{ strtoupper($grn->farmer->farmer_lname) }}</span>
        </div>
        <div>Signature: 
            <input type="text" class="form-control small-input text-center border-0 text-dark fw-bold" readonly style="font-size: 0.5rem; padding: 6px 10px; background-color: #f1f1f1;">
        </div>
        <div>Date: 
            <input type="text" class="form-control small-input text-center border-0 text-dark fw-bold" readonly style="font-size: 0.5rem; padding: 6px 10px; background-color: #f1f1f1;" value="{{ \Carbon\Carbon::now()->format('F j, Y') }}">
        </div>
    </div>
</td>

</tr>

<tr class="bg-light small-row">
    <td class="fw-bold text-dark" colspan="4">
        <!-- Title Section -->
        <div class="d-flex justify-content-between align-items-center mt-2">
            <div class="text-muted" style="font-size: 0.8rem; font-style: italic;">Official Use Only</div>
            <div class="text-center fw-bold" style="flex: 1;">
                AUTHORISATION TO DEBIT 'HOPE COFFEE UGANDA ACCOUNT' NO. 2009000227
            </div>
        </div>

        <!-- Debit Authorization Section -->
       <div class="d-flex align-items-center text-muted" style="font-size: 0.7rem; font-style: italic;">
    You are hereby authorized and directed to debit our Account by the amount of UGX 
    <input type="text" id="net_pay_display" class="form-control small-input text-center border-0 text-dark fw-bold mx-2 flex-grow-1" readonly 
           style="font-size: 0.9rem; padding: 4px 8px; background-color: #f1f1f1; min-width: 100px; width: max-content;"> 
    to Account Number
    <input type="text" maxlength="10" name="sacco_account" class="form-control border-0 text-dark fw-bold mx-2" 
           style="font-size: 1rem; padding: 6px 8px; background-color: #f1f1f1; min-width: 60px; width: max-content; text-align: left;" 
           value="{{ $grn->farmer->sacco_account }}">
    </div>



       <!-- Prepared By & Approved By (On the Same Line) -->
<div class="mt-4 d-flex justify-content-between">
    <!-- Column for Prepared By -->
<div class="w-50 text-center">
    <div class="text-muted" style="font-size: 0.8rem; font-style: italic;">Prepared By:</div>
    <div class="fw-bold text-uppercase mt-1" style="font-size: 0.9rem;">{{ strtoupper(auth()->user()->name) }}</div>
    <div class="text-muted mt-1">
        <!-- Displaying the user’s signature from the database -->
        @if(auth()->user()->sign)
            <img src="{{ asset('upload/admin_images/' . auth()->user()->sign) }}" alt="User Signature" style="max-width: 150px; max-height: 60px;"/>
        @endif
    </div>
</div>




    <!-- Column for Approved By -->
    <div class="w-50 text-center">
        <div class="text-muted" style="font-size: 0.8rem; font-style: italic;">Approved By:</div>
        <div class="fw-bold text-uppercase mt-1" style="font-size: 0.9rem;"></div>
        <div class="text-muted mt-2">
             <span class="d-inline-block" style="border-bottom: 1px dashed #000; width: 120px;"></span>
        </div>
    </div>
</div>

<!-- Hope Coffee Signatories -->
<div class="mt-2 text-center">
    <h6 class="fw-bold">Hope Coffee Signatories</h6>
    <div class="mt-2 d-flex justify-content-center">
        <span class="me-4">1. <span class="d-inline-block" style="border-bottom: 1px dashed #000; width: 300px;"></span></span>
        <span>2. <span class="d-inline-block" style="border-bottom: 1px dashed #000; width: 300px;"></span></span>
    </div>
</div>
<div class="mt-3 text-center mb-1">
    <p class="text-muted" style="font-size: 0.6rem; font-style: italic;">
        Generated by Celebrate Hope Ministries Enterprise Resource Planning System (CHM ERP)
    </p>
</div>

    </td>
</tr>






        </tfoot>
    </table>
    </div>
</div>





<div class="row">
    <div class="col-12 d-flex justify-content-between">
        <!-- Left: Add Signature Button -->
        <button type="button" class="btn btn-coffee btn-lg px-4 py-2 mt-3" data-bs-toggle="modal" data-bs-target="#signatureModal">
            Add Signature
        </button>

        <!-- Right: Save Voucher Button -->
        <button type="submit" class="btn btn-coffee btn-lg px-4 py-2 mt-3" >
            Save Voucher
        </button>
    </div>
</div>

</form>


<!-- JavaScript for Dynamic Calculations -->

<script>
document.addEventListener("DOMContentLoaded", function() {
  // DOM elements
  const mcField               = document.getElementById("mc");
  const kgDedField            = document.getElementById("kg_ded");
  const totalQtyField         = document.getElementById("total_quantity");
  const transportAdvanceField = document.getElementById("transport_advance");
  const moneyAdvanceField     = document.getElementById("money_advance");
  const tarpaulinAdvanceField = document.getElementById("tarpaulin_advance");
  const faqField              = document.getElementById("faq");
  const mcDeductionButton     = document.getElementById("mcDeductionBtn");

  const grades        = ['grade_1800','grade_1700','grade_1500','grade_1200','grade_1199','ungraded'];
  const ungradedField = document.querySelector("input[name='ungraded']");
  let moistureFormula = "((mcValue - 11) / 100) * totalQty";

  // Grading price modal support
  const gradingPriceInput = document.getElementById("gradingPrice");
  const gradingCostDisplay = document.getElementById("grading_cost");
  const saveGradingPriceBtn = document.getElementById("saveGradingPriceBtn");
  const gradingLabel = document.getElementById("grading_label");

  // Utility: format numbers as currency (no decimals, commas)
  function formatCurrency(val) {
    return parseFloat(val||0).toFixed(0)
           .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }

  function updateGradingCost() {
    const price = parseFloat(gradingPriceInput.value.replace(/,/g, '')) || 0;
    const faqVal = parseFloat(faqField.value.replace(/,/g,'')) || 0;
    gradingCostDisplay.value = formatCurrency(price * faqVal);
    updateTotalDeductions();
  }

  function updateGradingLabel() {
    const price = parseFloat(gradingPriceInput.value.replace(/,/g, '')) || 0;
    if (gradingLabel) {
      gradingLabel.textContent = `Grading (Okusunsula) ${formatCurrency(price)}/kg`;
    }
  }

  updateGradingLabel();

  if (saveGradingPriceBtn && gradingPriceInput && gradingCostDisplay) {
    saveGradingPriceBtn.addEventListener("click", function () {
      updateGradingCost();
      updateGradingLabel();
      bootstrap.Modal.getInstance(document.getElementById("gradingPriceModal")).hide();
      calculateTotals();
    });
  }

  let mcDedClicked = false;
  let originalUngradedValue = null; // <-- store original ungraded value

  mcDeductionButton.addEventListener("click", function() {
    mcDedClicked = true;
    calculateMCDeduction();

    const kgDed = parseFloat(kgDedField.value) || 0;

    // Only store once
    if (originalUngradedValue === null) {
      originalUngradedValue = parseFloat(ungradedField.value.replace(/,/g, '')) || 0;
    }

    ungradedField.value = (originalUngradedValue - kgDed).toFixed(0);

    updateTotalQuantity();
  });

  const form = document.querySelector("form[action='{{ route('save.payment.voucher.grade18') }}']");
  if (form) {
    form.addEventListener("submit", function(e) {
      if (!mcDedClicked) {
        e.preventDefault();
        return Swal.fire({
          icon: 'warning',
          title: 'MC Deduction Missing',
          text: 'Please click the “MC Deduction” button before saving.',
          confirmButtonText: 'OK'
        });
      }

      const priceFields = form.querySelectorAll("input[name^='unit_price_']");
      for (let fld of priceFields) {
        const grade = fld.name.replace('unit_price_','');
        const qtyEl = form.querySelector(`input[name='${grade}']`);
        const qty   = qtyEl ? parseFloat(qtyEl.value) || 0 : 0;

        if (qty > 0) {
          const val = parseFloat(fld.value.replace(/,/g,'')) || 0;
          if (val < 2000) {
            e.preventDefault();
            return Swal.fire({
              icon: 'warning',
              title: 'Unit Price Too Low',
              text: `The unit price for ${grade.replace(/_/g,' ').toUpperCase()} must be at least UGX 2,000.`,
              confirmButtonText: 'OK'
            });
          }
        }
      }
    });
  }

  function calculateMCDeduction() {
    const totalQty = parseFloat(faqField.value.replace(/,/g,'')) || 0;
    const mcVal    = parseFloat(mcField.value)              || 0;
    if (kgDedField.dataset.manual !== "true") {
      try {
        const code = moistureFormula
                       .replace("mcValue", mcVal)
                       .replace("totalQty", totalQty);
        kgDedField.value = Math.round(eval(code));
      } catch (err) {
        console.error("Error in MC formula:", err);
      }
    }
  }

  kgDedField.addEventListener("input", function() {
    this.dataset.manual = "true";
    calculateMCDeduction();
  });
  mcField.addEventListener("input", calculateMCDeduction);
  totalQtyField.addEventListener("input", calculateMCDeduction);

  new MutationObserver(calculateMCDeduction)
    .observe(totalQtyField, { attributes: true, childList: true, subtree: true });

  document.getElementById("saveFormulaBtn").addEventListener("click", function() {
    moistureFormula = document.getElementById("moistureFormula").value;
    calculateMCDeduction();
    bootstrap.Modal.getInstance(
      document.getElementById('formulaModal')
    ).hide();
  });

  [transportAdvanceField, moneyAdvanceField, tarpaulinAdvanceField].forEach(field => {
    field.addEventListener("input", function() {
      this.value = formatCurrency(this.value.replace(/,/g,''));
      updateTotalDeductions();
    });
  });

  gradingPriceInput.addEventListener("input", function () {
    const price = parseFloat(gradingPriceInput.value.replace(/,/g, '')) || 0;
    gradingPriceInput.value = formatCurrency(price);
    updateGradingLabel();
    updateGradingCost();
    calculateTotals();
  });

  faqField.addEventListener("input", function() {
    updateGradingCost();
  });

  function updateTotalQuantity() {
    let sum = 0;
    grades.forEach(g => {
      sum += parseFloat(document.querySelector(`input[name='${g}']`).value) || 0;
    });
    totalQtyField.value = formatCurrency(sum);
    calculateTotals();
  }

  function calculateTotals() {
    let totalQty = 0, subtotal = 0;
    grades.forEach(g => {
      const qty   = parseFloat(document.querySelector(`input[name='${g}']`).value) || 0;
      const price = parseFloat(
        document.querySelector(`input[name='unit_price_${g}']`).value.replace(/,/g,'')
      ) || 0;
      const amt   = qty * price;
      document.querySelector(`#amount_${g}`).value = formatCurrency(amt);
      totalQty += qty; subtotal += amt;
    });
    updateSummaryFields(totalQty, subtotal);
  }

  function updateSummaryFields(totalQty, subtotal) {
    totalQtyField.value = formatCurrency(totalQty);
    document.getElementById("subtotal_amount").value = formatCurrency(subtotal);
    const faq   = parseFloat(faqField.value.replace(/,/g,'')) || 0;
    const sacks = Math.ceil(faq/100);
    document.getElementById("sacks_total").value   = sacks;
    document.getElementById("hulling_cost").value = formatCurrency(faq*200);
    document.getElementById("sacks_cost").value   = formatCurrency(sacks*1000);
    updateTotalDeductions();
  }

  function updateTotalDeductions() {
    const t    = parseFloat(transportAdvanceField.value.replace(/,/g,'')) || 0;
    const m    = parseFloat(moneyAdvanceField.value.replace(/,/g,''))    || 0;
    const tar  = parseFloat(tarpaulinAdvanceField.value.replace(/,/g,''))|| 0;
    const sacks = parseFloat(document.getElementById("sacks_cost").value.replace(/,/g,'')) || 0;
    const hull  = parseFloat(document.getElementById("hulling_cost").value.replace(/,/g,''))|| 0;
    const gradingCost = parseFloat(gradingCostDisplay.value.replace(/,/g,'')) || 0;

    const totalDed = t + m + tar + sacks + hull + gradingCost;
    document.getElementById("total_deductions").value = formatCurrency(totalDed);

    const sub = parseFloat(document.getElementById("subtotal_amount").value.replace(/,/g,'')) || 0;
    const net = sub - totalDed;
    document.getElementById("net_pay").value         = formatCurrency(net);
    document.getElementById("net_pay_display").value = formatCurrency(net);
  }

  grades.forEach(g => {
    const fld = document.querySelector(`input[name='unit_price_${g}']`);
    fld.addEventListener("input", function() {
      const n = parseFloat(this.value.replace(/,/g,'')) || 0;
      this.value = formatCurrency(n);
      calculateTotals();
    });
  });

  setTimeout(() => {
    calculateMCDeduction();
    calculateTotals();
    updateTotalDeductions();
  }, 500);
});
</script>



<script>
document.addEventListener("DOMContentLoaded", () => {
  const gradingLabel = document.getElementById("gradingLabel");
  const gradingPriceInput = document.getElementById("gradingPrice");

  function updateGradingLabel() {
    const price = parseFloat(gradingPriceInput.value.replace(/,/g, '')) || 0;
    gradingLabel.textContent = `Grading (Okusunsula) ${price}/kg`;
  }

  // Initialize label
  updateGradingLabel();

  // Update label whenever input changes
  gradingPriceInput.addEventListener("input", updateGradingLabel);
});
</script>









    </div>
</div>

<style>
   /* Container & Card Styling */
.container-fluid {
    background-color: #f8f9fa;
}

.card {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
}

/* Table Styling */
.table {
    width: 100%;
    border-collapse: collapse;
}

/* Table Header */
.table thead th {
    background-color: #6F4E37 !important; /* Coffee Brown */
    color: #ffffff !important; /* White Text */
    font-size: 16px;
    font-weight: bold;
    padding: 12px;
    text-align: center;
}

/* Table Body */
.table tbody td {
    font-size: 16px;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

/* Custom Colors */
.text-coffee {
    color: #6F4E37 !important; /* Coffee Brown */
}

.text-success {
    color: #28a745 !important;
    font-weight: bold;
}

.border-bottom {
    border-bottom: 3px solid #6F4E37 !important; /* Coffee Brown */
}

/* Improve readability */
.fw-bold {
    font-weight: bold;
}
 .input-as-cell {
        background-color: #f0f0f0; /* Light gray background */
        border: none; /* Remove the border */
        text-align: center; /* Center the text */
        font-weight: bold; /* Optional: Make the text bold */
        padding: 0.375rem 0.75rem; /* Optional: Adjust padding to match table cells */
    }
    .small-row td {
    padding: 5px !important; /* Reduce padding inside cells */
    font-size: 16px; /* Reduce font size */
}

.small-input {
    height: 35px !important; /* Reduce input height */
    font-size: 26px !important; /* Reduce font size inside input */
    padding: 2px !important; /* Reduce input padding */
    text-align: center !important; /* Center the text inside the input */
}
.custom-table-border {
    border: 3px solid black !important;  /* Outer table border */
}

.custom-table-border th, 
.custom-table-border td {
    border: 2px solid black !important;  /* Cell borders */
}

.custom-table-border td[style="visibility: hidden;"] {
    border: none !important;  /* Remove borders on hidden cells */
}
    .borderless {
    border: none !important;
}

/* Custom Button Styling */
.btn-coffee {
    background-color: #6F4E37; /* Coffee Brown */
    color: #ffffff; /* White Text */
    font-size: 16px; /* Bigger font size */
    font-weight: bold; /* Bold text */
    border-radius: 25px; /* Rounded edges */
    padding: 12px 25px; /* Adjusted padding */
    transition: background-color 0.3s, transform 0.2s ease; /* Smooth transition */
}

.btn-coffee:hover {
    background-color: #4b3827; /* Darker coffee color on hover */
    transform: translateY(-3px); /* Slight lift effect */
}

.btn-coffee:focus, .btn-coffee:active {
    background-color: #4b3827; /* Keep dark color on focus */
    outline: none; /* Remove default focus outline */
}

.btn-coffee:disabled {
    background-color: #a39b91; /* Disabled state */
    cursor: not-allowed;
}


</style>

<!-- Modal -->
<div class="modal fade" id="formulaModal" tabindex="-1" aria-labelledby="formulaModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="formulaModalLabel">Update FML</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="formulaForm">
                    <div class="mb-3">
                        <label for="moistureFormula" class="form-label">Moisture Content Deduction</label>
                        <input type="text" class="form-control" id="moistureFormula" value="((mcValue - 11) / 100) * totalQty">
                    </div> 
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="saveFormulaBtn">Save Changes</button>
            </div>
        </div>
    </div>
</div>


<!-- Grading Price Modal -->
<div class="modal fade" id="gradingPriceModal" tabindex="-1" aria-labelledby="gradingPriceModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="gradingPriceModalLabel">Update Grading Price</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="gradingPriceForm">
                    <div class="mb-3">
                        <label for="gradingPrice" class="form-label">Grading Price (UGX per Kg)</label>
                        <input type="number" class="form-control" id="gradingPrice" value="{{ old('grading_price', $gradingPrice ?? 0) }}" step="0.01" min="0" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-dark" id="saveGradingPriceBtn">Save</button>
            </div>
        </div>
    </div>
</div>




<!-- Include SweetAlert2 CDN -->

<!-- Include Signature Pad CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/2.3.2/signature_pad.min.js"></script>

<!-- Signature Modal -->
<div class="modal fade" id="signatureModal" tabindex="-1" aria-labelledby="signatureModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="signatureModalLabel">Add Digital Signature</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <canvas id="signaturePad" class="border rounded w-100" style="height: 250px;"></canvas>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="clearSignature()">Clear</button>
                <button type="button" class="btn btn-primary" onclick="saveSignature()">Save</button>
            </div>
        </div>
    </div>
</div>

<script>
    // Initialize the signature pad
    const canvas = document.getElementById('signaturePad');
    const signaturePad = new SignaturePad(canvas);

    // Function to clear the signature pad
    function clearSignature() {
        signaturePad.clear();
    }

    // Function to save the signature
    function saveSignature() {
        if (signaturePad.isEmpty()) {
            // Show SweetAlert error message if signature pad is empty
            Swal.fire({
                icon: 'error',
                title: 'Oops!',
                text: 'Please provide a signature before saving.',
            });
        } else {
            const signatureData = signaturePad.toDataURL(); // Get the signature as a data URL
            console.log("Signature saved:", signatureData);

            // Here you can send the signatureData to the server or handle it as needed
            // For this example, we're just showing a success message after saving
            Swal.fire({
                icon: 'success',
                title: 'Signature saved!',
                text: 'Your signature has been saved successfully.',
            });

            // Optionally close the modal after saving
            // $('#signatureModal').modal('hide'); // If you're using jQuery for modal control
        }
    }
</script>















@endsection