@extends('backend.partials.master')
@section('title', 'Sale Receipt')

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

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

              <input type="hidden" name="sale_id" value="{{ $saleinvoices->id ?? ''}}">
              <input type="hidden" name="sale_details_id" value="{{ $saledetials->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', $salereceipt->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="customer_id" class="form-label">Customer <small class="text-danger">*</small></label>
                  <select name="customer_id" id="customer_id" class="form-control choices-single ">
                   <option value="" disabled selected>Select Customer</option>
                    @foreach($customers as $customer)
                        <option value="{{ $customer->id }}"
                                            {{ old('customer_id', $salereceipt->customer_id ?? '') == $customer->id ? 'selected' : '' }}>
                                            {{ $customer->fname }}
                                            </option>
                    @endforeach
                    </select>
                    @error('customer_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', $salereceipt->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<small class="text-danger">*</small></th>
            <th>Details</th>
            <th>Amount<small class="text-danger">*</small></th>
            <th>Narration<small class="text-danger">*</small></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', $salereceipt->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" required>
                    <option value="">Select Payment Method </option>
                    <option value="cash_online" {{ old('payment_method', $salereceipt->payment_method ?? '') == 'cash_online' ? 'selected' : '' }}>Cash + Online</option>
                    <option value="cash" {{ old('payment_method', $salereceipt->payment_method ?? '') == 'cash' ? 'selected' : '' }}>Cash</option>
                    <option value="cheque" {{ old('payment_method', $salereceipt->payment_method ?? '') == 'cheque' ? 'selected' : '' }}>Cheque</option>
                    <option value="epayment" {{ old('payment_method', $salereceipt->payment_method ?? '') == 'epayment' ? 'selected' : '' }}>E‑payment</option>
                </select>
            </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', $salereceipt->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', $salereceipt->online_amount ?? '') }}" class="form-control">
                </div>

                <!-- Cheque Number -->
                <div id="cheque_no_div" class="mb-2 d-none">
                    <label>Cheque No/Transaction ID</label>
                    <input type="text" name="cheque_no" value="{{ old('cheque_no', $salereceipt->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', $salereceipt->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', $salereceipt->epayment_amount ?? '') }}" class="form-control">
                </div>

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

              </div>

              <br>
              <button type="submit" class="btn btn-primary">{{ empty($salereceipt) ? 'Create' : 'Update' }}</button>
              <a href="{{ route('salereceipt') }}" class="btn btn-secondary">Cancel</a>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></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') {
            chequeNoDiv.classList.remove('d-none');
            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>




@push('scripts')
<script>
$(document).ready(function () {
   // alert("hii");
  $('#customer_id').on('change', function () {
    //alert("hii");
    const customer_id = $(this).val();
    if (customer_id) {
      $.ajax({
        url: '{{ route("get.pending.amount") }}',
        type: 'GET',
        data: { customer_id: customer_id },
        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('');
    }
  });

  // Payment Method logic


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

@endpush