@extends('backend.partials.master')
@section('title', 'Return Receipt / Debit Note')

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

    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <form action="@if(!empty($returnreceipt)){{ route('returnreceipt.update') }}@else{{ route('returnreceipt.store') }}@endif"
                  method="POST" enctype="multipart/form-data">
              @csrf
              @if(!empty($returnreceipt))
                @method('PUT')
                <input type="hidden" name="id" value="{{ $returnreceipt->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', $returnreceipt->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">Type <small class="text-danger">*</small></label>
                  <select name="type" id="type" class="form-control required" required>
                    <option disabled selected value="">Select Type</option>
                    <option value="Return Receipt"
                        {{ old('type', $returnreceipt->type ?? '') == 'Return Receipt' ? 'selected' : '' }}>
                        Return Receipt
                    </option>
                    <option value="Debit Note"
                        {{ old('type', $returnreceipt->type ?? '') == 'Debit Note' ? 'selected' : '' }}>
                        Debit Note
                    </option>

                  </select>

                </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 selected value="">Select Supplier</option>
                      @foreach($suppliers as $supplier)
                        <option value="{{ $supplier->id }}"
                          {{ old('supplier_id', $returnreceipt->supplier_id ?? '') == $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 class="form-label" for="purchase_no">Purchase Return No.<small class="text-danger">*</small></label>
                    <select name="purchase_no" id="purchase_no" required  class="form-control choices-single">
                      <option value="">Select Purchase Return No.</option>
                      @if(!empty($returnreceipt->purchase_no))
                        <option selected>{{ $returnreceipt->purchase_no }}</option>
                      @endif
                    </select>
                    @error('purchase_no')
                      <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', $returnreceipt->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</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', $returnreceipt->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', $returnreceipt->payment_method ?? '') == 'cash_online' ? 'selected' : '' }}>Cash + Online</option>
                    <option value="cash" {{ old('payment_method', $returnreceipt->payment_method ?? '') == 'cash' ? 'selected' : '' }}>Cash</option>
                    <option value="cheque" {{ old('payment_method', $returnreceipt->payment_method ?? '') == 'cheque' ? 'selected' : '' }}>Cheque</option>
                    <option value="epayment" {{ old('payment_method', $returnreceipt->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', $returnreceipt->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', $returnreceipt->online_amount ?? '') }}" class="form-control">
                </div>

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

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

              <br>
              <button type="submit" class="btn btn-primary">{{ empty($returnreceipt) ? 'Create' : 'Update' }}</button>
              <a href="{{ route('returnreceipt') }}" 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>

    $('form').on('submit', function(e) {
    if (!$('#supplier_id').val()) {
        alert('Supplier is required');
        e.preventDefault();
        return;
    }

    if (!$('#purchase_no').val()) {
        alert('Record Number is required');
        e.preventDefault();
        return;
    }

     if (!$('.amount').val()) {
        alert('Amount is required');
        e.preventDefault();
        return;
    }
});


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 () {
    // When Supplier changes
    $('#supplier_id').on('change', function () {
        const supplierId = $(this).val();
        if (supplierId) {
            // Fetch record numbers for this supplier
            fetch(`{{ route('get.records.bySupplier', ':id') }}`.replace(':id', supplierId))
                .then(response => response.json())
                .then(data => {
                    const recordSelect = $('#purchase_no');
                    recordSelect.empty().append('<option value="">Select Record Number</option>');
                    data.forEach(record => {
                        recordSelect.append(`<option value="${record.record_no}">${record.record_no}</option>`);
                    });
                })
                .catch(err => console.error('Error fetching records:', err));
        } else {
            $('#purchase_no').empty().append('<option value="">Select Record Number</option>');
            $('#pending_amt').val('');
        }
    });

    // When Record Number changes
    $('#purchase_no').on('change', function () {
        const recordNo = $(this).val();
        if (recordNo) {
            fetch(`{{ route('get.pending.byRecord', ':record') }}`.replace(':record', recordNo))
                .then(response => response.json())
                .then(data => {
                    $('#pending_amt').val(data.pending_amount);
                })
                .catch(err => {
                    console.error('Error fetching pending amount:', err);
                    $('#pending_amt').val('');
                });
        } else {
            $('#pending_amt').val('');
        }
    });

    // Payment Method logic
    $('#payment_method').on('change', function () {
        const method = $(this).val();
        $('#cheque_no').prop('readonly', method === 'cash').val(method === 'cash' ? '' : $('#cheque_no').val());
    }).trigger('change');
});
</script>


@endpush