@extends('layout')

@section('content')
  <h2>Edit Agreement #{{ $agreement->id }}</h2>
  <form method="post" action="{{ route('agreements.update', $agreement) }}">
    @csrf
    @method('PUT')
    <div class="grid">
      <div>
        <label>Customer</label>
        <select name="customer_id" required>
          @foreach($customers as $c)
            <option value="{{ $c->id }}" @selected(old('customer_id', $agreement->customer_id) == $c->id)>{{ $c->name }} ({{ $c->phone }})</option>
          @endforeach
        </select>
      </div>
      <div>
        <label>Product</label>
        <select name="product_id" id="product_id" required>
          @foreach($products as $p)
            <option value="{{ $p->id }}" data-price="{{ $p->price }}" @selected(old('product_id', $agreement->product_id) == $p->id)>{{ $p->name }} — {{ number_format($p->price, 2) }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label>Total Amount</label>
        <input name="total_amount" id="total_amount" type="number" step="0.01" value="{{ old('total_amount', $agreement->total_amount) }}" required>
      </div>
      <div>
        <label>Down Payment</label>
        <input name="down_payment" id="down_payment" type="number" step="0.01" value="{{ old('down_payment', $agreement->down_payment) }}">
      </div>
      <div>
        <label>Instalment Percentage (%)</label>
        <input name="instalment_percentage" id="instalment_percentage" type="number" step="0.01" min="0" max="100" value="{{ old('instalment_percentage', $agreement->instalment_percentage) }}">
      </div>
      <div>
        <label>Instalment Amount</label>
        <input name="instalment_amount" id="instalment_amount" type="number" step="0.01" value="{{ old('instalment_amount', $agreement->instalment_amount) }}" required>
      </div>
      <div>
        <label>Instalments Count</label>
        <input name="instalments_count" id="instalments_count" type="number" min="1" value="{{ old('instalments_count', $agreement->instalments_count) }}" required>
      </div>
      <div>
        <label>Start Date</label>
        <input name="start_date" type="date" value="{{ old('start_date', $agreement->start_date) }}" required>
      </div>
      <div>
        <label>Status</label>
        <select name="status">
          <option value="active" @selected(old('status', $agreement->status) === 'active')>Active</option>
          <option value="completed" @selected(old('status', $agreement->status) === 'completed')>Completed</option>
          <option value="cancelled" @selected(old('status', $agreement->status) === 'cancelled')>Cancelled</option>
        </select>
      </div>
    </div>
    <div style="margin-top:12px; display:flex; gap:8px;">
      <a class="btn btn-secondary" href="{{ route('agreements.index') }}">Back</a>
      <button class="btn btn-primary" type="submit">Save</button>
    </div>
  </form>

  <script>
    (function() {
      const productSel = document.getElementById('product_id');
      const totalInput = document.getElementById('total_amount');
      const downInput = document.getElementById('down_payment');
      const pctInput = document.getElementById('instalment_percentage');
      const countInput = document.getElementById('instalments_count');
      const amountInput = document.getElementById('instalment_amount');

      function toNumber(el) {
        const v = parseFloat(el.value);
        return isNaN(v) ? 0 : v;
      }

      function recalc() {
        const total = toNumber(totalInput);
        const down = toNumber(downInput);
        const pct = toNumber(pctInput);
        const count = parseInt(countInput.value || '0', 10);
        if (!count || count <= 0) return;
        const base = Math.max(total - down, 0);
        const totalPayable = base + (base * (pct / 100.0));
        const perMonth = totalPayable / count;
        amountInput.value = perMonth.toFixed(2);
      }

      // Auto-fill total amount from product price when changing product
      productSel && productSel.addEventListener('change', function() {
        const opt = productSel.options[productSel.selectedIndex];
        if (opt && opt.dataset.price) {
          totalInput.value = parseFloat(opt.dataset.price).toFixed(2);
          recalc();
        }
      });

      [totalInput, downInput, pctInput, countInput].forEach(function(el) {
        if (el) {
          el.addEventListener('input', recalc);
          el.addEventListener('change', recalc);
        }
      });
    })();
  </script>
@endsection