@extends('layout')

@section('content')
  <div class="header-actions" style="align-items:center;">
    <h2>Create Agreement</h2>
    <div class="spacer"></div>
    <a class="btn btn-secondary" href="{{ route('customers.create') }}" target="_blank" title="Add new customer">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
      New Customer
    </a>
  </div>

  <div class="card">
    <div class="card-header">
      <h3>Agreement Details</h3>
      <div class="small text-muted">Fill the fields below. Instalment amount auto-updates based on total, down payment, percentage, and count.</div>
    </div>
    <div class="card-body">
      <form method="post" action="{{ route('agreements.store') }}">
        @csrf
        <div class="grid" style="grid-template-columns: repeat(2, 1fr); gap: 16px;">
          <div>
            <label for="customer_id">Customer</label>
            <select name="customer_id" id="customer_id" required>
              <option value="">Select customer…</option>
              @foreach($customers as $c)
                <option value="{{ $c->id }}" @selected(old('customer_id') == $c->id)>{{ $c->name }} ({{ $c->phone }})</option>
              @endforeach
            </select>
            @error('customer_id')
              <div class="text-danger small">{{ $message }}</div>
            @enderror
          </div>

          <div>
            <label for="product_id">Product</label>
            <select name="product_id" id="product_id" required>
              <option value="">Select product…</option>
              @foreach($products as $p)
                <option value="{{ $p->id }}" data-price="{{ $p->price }}" @selected(old('product_id') == $p->id)>{{ $p->name }} — {{ number_format($p->price, 2) }}</option>
              @endforeach
            </select>
            @error('product_id')
              <div class="text-danger small">{{ $message }}</div>
            @enderror
          </div>

          <div>
            <label for="total_amount">Total Amount</label>
            <input name="total_amount" id="total_amount" type="number" step="0.01" placeholder="e.g., 50000.00" value="{{ old('total_amount') }}" required>
            @error('total_amount')
              <div class="text-danger small">{{ $message }}</div>
            @enderror
          </div>

          <div>
            <label for="down_payment">Down Payment</label>
            <input name="down_payment" id="down_payment" type="number" step="0.01" placeholder="e.g., 5000.00" value="{{ old('down_payment', 0) }}">
            @error('down_payment')
              <div class="text-danger small">{{ $message }}</div>
            @enderror
          </div>

          <div>
            <label for="instalment_percentage">Instalment Percentage (%)</label>
            <input name="instalment_percentage" id="instalment_percentage" type="number" step="0.01" min="0" max="100" placeholder="e.g., 10" value="{{ old('instalment_percentage', 0) }}">
            @error('instalment_percentage')
              <div class="text-danger small">{{ $message }}</div>
            @enderror
          </div>

          <div>
            <label for="instalment_amount">Instalment Amount</label>
            <input name="instalment_amount" id="instalment_amount" type="number" step="0.01" placeholder="Auto-calculated" value="{{ old('instalment_amount') }}" required>
            @error('instalment_amount')
              <div class="text-danger small">{{ $message }}</div>
            @enderror
          </div>

          <div>
            <label for="instalments_count">Instalments Count</label>
            <input name="instalments_count" id="instalments_count" type="number" min="1" placeholder="e.g., 12" value="{{ old('instalments_count') }}" required>
            @error('instalments_count')
              <div class="text-danger small">{{ $message }}</div>
            @enderror
          </div>

          <div>
            <label for="start_date">Start Date</label>
            <input name="start_date" id="start_date" type="date" value="{{ old('start_date') }}" required>
            @error('start_date')
              <div class="text-danger small">{{ $message }}</div>
            @enderror
          </div>
        </div>

        <div class="form-actions">
          <a class="btn btn-secondary" href="{{ route('agreements.index') }}">Cancel</a>
          <button class="btn btn-primary" type="submit">Create Agreement</button>
        </div>
      </form>
    </div>
  </div>

  <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
      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