@extends('admin.layouts.app')

@section('title', 'Payment Receive')

@section('content')
<h4 class="font-weight-bold py-3 mb-0">{{ $payment ? 'Edit' : 'Create' }} Payment Receive</h4>

<div class="card mb-4">
<div class="card-body">
<div class="row">
<div class="col-lg-7">
<form id="validation-form" method="post" autocomplete="off" action="{{ $payment ? route('admin.payments.update', $payment) : route('admin.payments.store') }}">
@csrf
@if ($payment)
    @method('PUT')
@endif
<div class="form-row">
<div class="form-group col-md-12">
<label class="form-label"> Customer<span class="text-danger">*</span></label>
<select class="select2-demo form-control" name="CustId" id="CustId" required>
<option selected value="">Select Customer</option>
@foreach ($customers as $customer)
<option value="{{ $customer->id }}" @selected((int) old('CustId', $preselectCustId) === (int) $customer->id)>
{{ $customer->Fname }} {{ $customer->Lname }}
</option>
@endforeach
</select>
</div>

<div class="form-group col-md-12">
<label class="form-label">Customer Name </label>
<input type="text" name="CustName" id="CustName" class="form-control" value="{{ old('CustName', $payment->AccountName ?? '') }}" autocomplete="off">
</div>

@unless ($payment)
<div class="form-group col-md-4">
<label class="form-label">Total Amount <span class="text-danger">*</span></label>
<input type="text" name="TotalInvAmt" id="TotalInvAmt" class="form-control" value="" autocomplete="off" readonly>
</div>
<div class="form-group col-md-4">
<label class="form-label">Total Paid Amount <span class="text-danger">*</span></label>
<input type="text" name="PaidAmount" id="PaidAmount" class="form-control" value="" autocomplete="off" readonly>
</div>
<div class="form-group col-md-4">
<label class="form-label">Balance Amount <span class="text-danger">*</span></label>
<input type="text" name="BalanceAmt" id="BalanceAmt" class="form-control" value="" autocomplete="off" readonly>
</div>
@endunless

<div class="form-group col-md-4">
<label class="form-label">Paid Amount <span class="text-danger">*</span></label>
<input type="text" name="Amount" id="Amount" class="form-control" value="{{ old('Amount', $payment->Amount ?? '') }}" autocomplete="off" required>
</div>

<div class="form-group col-md-4">
<label class="form-label">Payment Date <span class="text-danger">*</span></label>
<input type="date" name="PayDate" id="PayDate" class="form-control" value="{{ old('PayDate', optional($payment?->PaymentDate)->format('Y-m-d') ?? date('Y-m-d')) }}" autocomplete="off" required>
</div>

<div class="form-group col-md-4">
<label class="form-label">Payment Type <span class="text-danger">*</span></label>
<select class="form-control" id="PayType" name="PayType" required onchange="getPayType(this.value);">
<option selected disabled value="">Select Payment Type</option>
<option value="Cash" @selected(old('PayType', $payment->PayMode ?? '') === 'Cash')>Cash</option>
<option value="Cheque" @selected(old('PayType', $payment->PayMode ?? '') === 'Cheque')>Cheque/Bank Transfer</option>
<option value="UPI" @selected(old('PayType', $payment->PayMode ?? '') === 'UPI')>UPI</option>
</select>
</div>

<div class="form-group col-md-4 chequeoption" style="display: none;">
<label class="form-label">Cheque No <span class="text-danger">*</span></label>
<input type="text" name="ChequeNo" class="form-control" id="ChequeNo" placeholder="Cheque No" value="{{ old('ChequeNo', $payment->ChequeNo ?? '') }}">
</div>
<div class="form-group col-md-4 chequeoption" style="display: none;">
<label class="form-label">Cheque Date <span class="text-danger">*</span></label>
<input type="date" name="ChqDate" class="form-control" id="ChqDate" value="{{ old('ChqDate', optional($payment?->ChqDate)->format('Y-m-d')) }}">
</div>
<div class="form-group col-md-4 chequeoption" style="display: none;">
<label class="form-label">Bank Name <span class="text-danger">*</span></label>
<input type="text" name="BankName" class="form-control" id="BankName" placeholder="Bank Name" value="{{ old('BankName', $payment->BankName ?? '') }}">
</div>
<div class="form-group col-md-12 upioption" style="display: none;">
<label class="form-label">UPI No/ Transaction Id <span class="text-danger">*</span></label>
<input type="text" name="UpiNo" class="form-control" id="UpiNo" placeholder="UPI No/ Transaction Id" value="{{ old('UpiNo', $payment->UpiNo ?? '') }}">
</div>
<div class="form-group col-md-12">
<label class="form-label">Narration</label>
<input type="text" name="Narration" id="Narration" class="form-control" value="{{ old('Narration', $payment->Narration ?? '') }}">
</div>
</div>
<button type="submit" class="btn btn-primary btn-finish" id="submit">Save</button>
</form>
</div>
<div class="col-lg-5" id="custresult"></div>
</div>
</div>
</div>
@endsection

@push('scripts')
<script>
function getPayType(val){
  if(val == 'Cheque'){
    $('.chequeoption').show();
    $('.upioption').hide();
  } else if(val == 'UPI'){
    $('.chequeoption').hide();
    $('.upioption').show();
  } else {
    $('.chequeoption').hide();
    $('.upioption').hide();
  }
}

function getCollections(recid){
  $.ajax({
    url: "{{ route('admin.payments.collections') }}",
    method: "POST",
    data: { _token: "{{ csrf_token() }}", id: recid },
    success: function(data) { $('#custresult').html(data); }
  });
}

function getRecordDetails(uid){
  $.ajax({
    url: "{{ route('admin.payments.record-details') }}",
    method: "POST",
    data: { _token: "{{ csrf_token() }}", uid: uid },
    success: function(res) {
      $('#TotalInvAmt').val(res.TotAmt);
      $('#PaidAmount').val(res.PaidAmt);
      $('#BalanceAmt').val(res.BalAmt);
      getCollections(uid);
    }
  });
}

$(document).ready(function() {
  var CustId = $('#CustId').val();
  if (CustId) {
    getRecordDetails(CustId);
  }
  getPayType($('#PayType').val());

  $(document).on("change", "#CustId", function() {
    var val = this.value;
    getRecordDetails(val);
    $.ajax({
      url: "{{ route('admin.payments.customer-details') }}",
      method: "POST",
      data: { _token: "{{ csrf_token() }}", id: val },
      dataType: "json",
      success: function(data) {
        $('#CustName').val((data.Fname || '') + ' ' + (data.Lname || ''));
      }
    });
  });
});
</script>
@endpush