@extends('admin.layouts.app')

@section('title', 'Renew Package')

@section('content')
<h4 class="font-weight-bold py-3 mb-0">Renew Package</h4>

<div class="card mb-4">
<div class="card-body">
<form id="validation-form" method="POST" action="{{ route('admin.customers.renew.store', $customer) }}">
@csrf
<div class="form-row">
<div class="form-group col-md-4">
  <label class="form-label">Renew Date <span class="text-danger">*</span></label>
  <input type="date" name="RenewDate" class="form-control" required value="{{ date('Y-m-d') }}" readonly>
</div>
<div class="form-group col-md-4">
  <label class="form-label">Customer Name </label>
  <input type="text" class="form-control" value="{{ trim($customer->Fname.' '.$customer->Lname) }}" disabled>
</div>
<div class="form-group col-md-4">
  <label class="form-label">Phone No </label>
  <input type="text" class="form-control" value="{{ $customer->Phone }}" disabled>
</div>
<div class="form-group col-md-12">
  <label class="form-label">Address </label>
  <input type="text" class="form-control" value="{{ $customer->Address }}" disabled>
</div>

<div class="form-group col-md-3">
  <label class="form-label">Select Package <span class="text-danger">*</span></label>
  <select class="form-control" name="PackageId" id="PackageId" required onchange="getPackageDetails(this.value)">
    <option selected disabled>Select Package</option>
    @foreach ($packages as $package)
      <option
        value="{{ $package->id }}"
        data-duration="{{ $package->Duration }}"
        data-period="{{ $package->Period }}"
        data-amount="{{ $package->Amount }}"
      >{{ $package->Name }} (₹{{ $package->Amount }})</option>
    @endforeach
  </select>
</div>
<div class="form-group col-md-3">
  <label class="form-label">Start From <span class="text-danger">*</span></label>
  <input type="date" name="PkgDate" id="PkgDate" class="form-control" value="{{ date('Y-m-d') }}" onchange="autoCalculateValidity()" required>
</div>
<div class="form-group col-md-3">
  <label class="form-label">Validity <span class="text-danger">*</span></label>
  <input type="date" name="Validity" id="Validity" class="form-control" value="" required>
</div>
<div class="form-group col-md-3">
  <label class="form-label">Amount <span class="text-danger">*</span></label>
  <input type="text" name="PkgAmount" id="PkgAmount" class="form-control" value="{{ $customer->PkgAmount }}" readonly>
</div>
<div class="form-group col-md-3">
  <label class="form-label">Paid Amount <span class="text-danger">*</span></label>
  <input type="text" name="PaidAmount" id="PaidAmount" class="form-control" value="{{ $customer->PaidAmount }}" required>
</div>
<div class="form-group col-md-3">
  <label class="form-label">Balance Amount <span class="text-danger">*</span></label>
  <input type="text" name="BalAmount" id="BalAmount" class="form-control" value="" readonly>
</div>
<div class="form-group col-md-3">
<label class="form-label">Payment Mode <span class="text-danger">*</span></label>
  <select class="form-control" id="PayMode" name="PayMode" required>
    <option selected disabled value="">Select Pay Mode</option>
    <option value="Cash">Cash</option>
    <option value="UPI">UPI</option>
  </select>
</div>
</div>
<button type="submit" name="submit" class="btn btn-primary btn-finish mt-3">Submit</button>
</form>
</div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
function getPackageDetails(packageId) {
  const select = document.getElementById('PackageId');
  const option = select.options[select.selectedIndex];
  const PkgAmount = option.getAttribute('data-amount');
  const duration = option.getAttribute('data-duration');
  const period = parseInt(option.getAttribute('data-period')) || 0;
  const startInput = document.getElementById('PkgDate');
  const validityInput = document.getElementById('Validity');
  $('#PkgAmount').val(PkgAmount);
  updateBalance();
  if (!startInput.value) {
    startInput.value = new Date().toISOString().split('T')[0];
  }
  const startDate = new Date(startInput.value);
  if (duration === 'Day') {
    startDate.setDate(startDate.getDate() + period);
  } else if (duration === 'Month') {
    startDate.setMonth(startDate.getMonth() + period);
  } else if (duration === 'Week') {
    startDate.setDate(startDate.getDate() + (period * 7));
  } else if (duration === 'Year') {
    startDate.setFullYear(startDate.getFullYear() + period);
  }
  validityInput.value = startDate.toISOString().split('T')[0];
}
function autoCalculateValidity() {
  const select = document.getElementById('PackageId');
  if (select.value) {
    getPackageDetails(select.value);
  }
}
function updateBalance() {
  const pkg = parseFloat($('#PkgAmount').val()) || 0;
  const paid = parseFloat($('#PaidAmount').val()) || 0;
  const balance = pkg - paid;
  $('#BalAmount').val(balance.toFixed(2));
  $('#BalAmount').css('color', balance < 0 ? 'red' : 'black');
}
document.addEventListener('DOMContentLoaded', () => {
  $('#PaidAmount').on('input', updateBalance);
  updateBalance();
});
</script>
@endpush