@extends('backend.partials.master')
@section('title', 'Supplier Payment')

@section('maincontent')
<main class="content">
  <div class="container-fluid p-0">
    <div class="mb-3">
      <h1 class="h3 d-inline align-middle">Supplier Payment</h1>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <form id="purchaseForm" action="@if(!empty($supplierpay)){{ route('supplierpay.update') }}@else{{ route('supplierpay.store') }}@endif"
                  method="POST" enctype="multipart/form-data">
              @csrf
              @if(!empty($supplierpay))
                @method('PUT')
                <input type="hidden" name="id" value="{{ $supplierpay->id }}">
              @endif

                <input type="hidden" name="purchasesid" value="{{ $purchases->id ?? '' }}">

             <input type="hidden" name="purchasesdetailsid" value="{{ $purchasesdetials->id ?? '' }}">
              <div class="row">
                <div class="mb-3 col-md-3">
                  <label for="record_no" class="form-label">Record Number <small class="text-danger">*</small></label>
                  <input type="text"
                         name="record_no"
                         id="record_no"
                         class="form-control @error('record_no') is-invalid @enderror"
                         value="{{ old('record_no', $supplierpay->record_no ?? $record_no) }}"
                         readonly required>
                  @error('record_no')
                    <small class="text-danger">{{ $message }}</small>
                  @enderror
                </div>

                <div class="mb-3 col-md-3">
                  <label for="supplier_id" class="form-label">Supplier <small class="text-danger">*</small></label>
                  <select name="supplier_id" id="supplier_id" class="form-control choices-single ">
  <option disabled value="" selected disabled>Select Supplier</option>
  @foreach($suppliers as $supplier)
    <option value="{{ $supplier->id }}"
      {{ (string) old('supplier_id', (isset($returnreceipt) ? $returnreceipt->supplier_id : '')) === (string) $supplier->id ? 'selected' : '' }}>
      {{ $supplier->name }}
    </option>
  @endforeach
</select>
@error('supplier_id')
  <small class="text-danger">{{ $message }}</small>
@enderror

                </div>

                <div class="mb-3 col-md-3">
                  <label for="pending_amt" class="form-label">Pending Amount <small class="text-danger">*</small></label>
                  <input type="text"
                         name="pending_amt"
                         id="pending_amt"
                         class="form-control @error('pending_amt') is-invalid @enderror"
                         value="{{ old('pending_amt', $supplierpay->pending_amt ?? '') }}"
                         readonly required>
                  @error('pending_amt')
                    <small class="text-danger">{{ $message }}</small>
                  @enderror
                </div>
              </div>

              <div class="row">
              <table class="table" id="mytable">
    <thead>
        <tr>
            <th>Date</th>
            <th>Payment Method</th>
            <th>Details</th>
            <th>Amount</th>
            <th>Narration</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- Date -->
            <td>
            <input type="date" name="date" id="date" class="form-control @error('date') is-invalid @enderror"
                value="{{ old('date', $supplierpay->date ?? date('Y-m-d')) }}" required>
                @error('date')<small class="text-danger">{{ $message }}</small>@enderror
             </td>

            <!-- Payment Method -->
            <td>
                <select name="payment_method" id="payment_method" class="form-control">
                    <option value="" selected disabled>Select Payment Method</option>
                    <option value="cash_online" {{ old('payment_method', $supplierpay->payment_method ?? '') == 'cash_online' ? 'selected' : '' }}>Cash + Online</option>
                    <option value="cash" {{ old('payment_method', $supplierpay->payment_method ?? '') == 'cash' ? 'selected' : '' }}>Cash</option>
                    <option value="cheque" {{ old('payment_method', $supplierpay->payment_method ?? '') == 'cheque' ? 'selected' : '' }}>Cheque</option>
                    <option value="epayment" {{ old('payment_method', $supplierpay->payment_method ?? '') == 'epayment' ? 'selected' : '' }}>E‑payment</option>
                </select>
                 @error('payment_method')
                    <small class="text-danger">{{ $message }}</small>
                 @enderror
            </td>

            <!-- Dynamic Fields -->
            <td>

                <!-- Cash Amount -->
                <div id="cash_div" class="mb-2 d-none">
                    <label>Cash Amount</label>
                    <input type="number" step="0.01" name="cash_amount" value="{{ old('cash_amount', $supplierpay->cash_amount ?? '') }}" class="form-control">
                </div>

                <!-- Online Amount -->
                <div id="online_div" class="mb-2 d-none">
                    <label>Online Amount</label>
                    <input type="number" step="0.01" name="online_amount" value="{{ old('online_amount', $supplierpay->online_amount ?? '') }}" class="form-control">
                </div>

                <!-- Cheque Number -->
                <div id="cheque_no_div" class="mb-2 d-none">
                    <label>Cheque No</label>
                    <input type="text" name="cheque_no" value="{{ old('cheque_no', $supplierpay->cheque_no ?? '') }}" class="form-control">
                </div>

                <!-- Cheque Amount -->
                <div id="cheque_amount_div" class="mb-2 d-none">
                    <label>Cheque Amount</label>
                    <input type="number" step="0.01" name="cheque_amount" value="{{ old('cheque_amount', $supplierpay->cheque_amount ?? '') }}" class="form-control">
                </div>

                <!-- E-payment Amount -->
                <div id="epayment_div" class="mb-2 d-none">
                    <label>E-payment Amount</label>
                    <input type="number" step="0.01" name="epayment_amount" value="{{ old('epayment_amount', $supplierpay->epayment_amount ?? '') }}" class="form-control">
                </div>

            </td>
             <td>
                <input type="text" name="amount" value="{{ old('amount', $supplierpay->amount ?? '') }}" id="total_amount" class="form-control" readonly required>
                @error('payment_method')
                    <small class="text-danger">{{ $message }}</small>
                 @enderror
            </td>
             <td>
                <input type="text" name="narration" value="{{ old('narration', $supplierpay->narration ?? '') }}" id="narration" class="form-control" required>
            </td>
        </tr>
    </tbody>
</table>

              </div>

              <br>
              <button type="submit" class="btn btn-primary">{{ empty($supplierpay) ? 'Create' : 'Update' }}</button>
              <a href="{{ route('supplierpay') }}" class="btn btn-secondary">Cancel</a>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
@endsection

@push('scripts')
{{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {

    $('#purchaseForm').on('submit', function (e) {

        if ($('#supplier_id').val() === "") {
            e.preventDefault();
            alert('Supplier select ');
            $('#supplier_id').focus();
            return false;
        }

    });

});
</script> --}}


<script>
document.addEventListener('DOMContentLoaded', function () {

    const pendingAmtInput = document.getElementById('pending_amt');

    const amountInputs = document.querySelectorAll(
        'input[name="cash_amount"], input[name="online_amount"], input[name="cheque_amount"], input[name="epayment_amount"]'
    );

    function checkTotalAmount(changedInput) {
        let pendingAmt = parseFloat(pendingAmtInput.value) || 0;
        let total = 0;

        amountInputs.forEach(input => {
            total += parseFloat(input.value) || 0;
        });

        if (total > pendingAmt) {
            alert('Amount cannot be greater than the pending amount.');
            changedInput.value = ''; // last value remove
        }
    }

    amountInputs.forEach(input => {
        input.addEventListener('input', function () {
            checkTotalAmount(this);
        });
    });

});
</script>


<script>
document.addEventListener('DOMContentLoaded', function () {

    const paymentMethod = document.getElementById('payment_method');
    const totalAmount   = document.getElementById('total_amount');

    const cashAmount    = document.querySelector('[name="cash_amount"]');
    const onlineAmount  = document.querySelector('[name="online_amount"]');
    const chequeAmount  = document.querySelector('[name="cheque_amount"]');
    const epaymentAmount= document.querySelector('[name="epayment_amount"]');

    const cashDiv       = document.getElementById('cash_div');
    const onlineDiv     = document.getElementById('online_div');
    const chequeNoDiv   = document.getElementById('cheque_no_div');
    const chequeAmountDiv = document.getElementById('cheque_amount_div');
    const epaymentDiv   = document.getElementById('epayment_div');

    // Function to hide all dynamic fields
    function hideAll() {
        cashDiv.classList.add('d-none');
        onlineDiv.classList.add('d-none');
        chequeNoDiv.classList.add('d-none');
        chequeAmountDiv.classList.add('d-none');
        epaymentDiv.classList.add('d-none');
    }

    // Function to show fields based on selected payment method
    function showFields(method) {
        hideAll(); // hide all first

        if (method === 'cash_online') {
            cashDiv.classList.remove('d-none');
            onlineDiv.classList.remove('d-none');
        }
        else if (method === 'cash') {
            cashDiv.classList.remove('d-none');
        }
        else if (method === 'cheque') {
            chequeNoDiv.classList.remove('d-none');
            chequeAmountDiv.classList.remove('d-none');
        }
        else if (method === 'epayment') {
            epaymentDiv.classList.remove('d-none');
        }

        calculateTotal(); // recalculate total on show
    }

    // Function to calculate total
    function calculateTotal() {
        let method = paymentMethod.value;
        let total = 0;

        if (method === 'cash_online') {
            total = (parseFloat(cashAmount.value) || 0) + (parseFloat(onlineAmount.value) || 0);
        }
        else if (method === 'cash') {
            total = parseFloat(cashAmount.value) || 0;
        }
        else if (method === 'cheque') {
            total = parseFloat(chequeAmount.value) || 0;
        }
        else if (method === 'epayment') {
            total = parseFloat(epaymentAmount.value) || 0;
        }

        totalAmount.value = total > 0 ? total.toFixed(2) : '';
    }

    // On page load: show fields if old/existing value present
    if (paymentMethod) {
        showFields(paymentMethod.value);

        // On change: update fields visibility
        paymentMethod.addEventListener('change', function () {
            showFields(this.value);
        });
    }

    // Live calculation on input
    [cashAmount, onlineAmount, chequeAmount, epaymentAmount].forEach(el => {
        if (el) {
            el.addEventListener('input', calculateTotal);
        }
    });

});
</script>

<script>
$(document).ready(function () {
   // alert("hii");
  $('#supplier_id').on('change', function () {
    //alert("hii");
    const supplierId = $(this).val();
    if (supplierId) {
      $.ajax({
        url: '{{ route("get.supplierpending.amount") }}',
        type: 'GET',
        data: { supplier_id: supplierId },
        dataType: 'json',
        success: function (response) {
          console.log('Pending Amount Response:', response);
          if (response.pending_amount !== undefined) {
            $('#pending_amt').val(response.pending_amount);
          } else {
            $('#pending_amt').val('');
          }
        },
        error: function (xhr, status, error) {
          console.error('Error fetching pending amount:', error);
          $('#pending_amt').val('');
          alert('Error fetching pending amount.');
        }
      });
    } else {
      $('#pending_amt').val('');
    }
  });

  // If a pre-selected payment_method exists
  $('#payment_method').trigger('change');
});
</script>

@endpush