{% extends "base.html" %}
{% block title %}Add Worker{% endblock %}
{% block page_title %}Add Worker / Mistri{% endblock %}
{% block content %}
<div class="panel" style="max-width:640px">
  <form method="post">
    {% csrf_token %}
    <div class="row">
      <div class="col-md-6 mb-3">
        <label class="form-label">Name</label>
        <input type="text" name="name" class="form-control" required>
      </div>
      <div class="col-md-6 mb-3">
        <label class="form-label">Work Type</label>
        <input type="text" name="work_type" class="form-control" placeholder="e.g. Mason, Rod binder, Helper" required>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 mb-3">
        <label class="form-label">Mobile Number</label>
        <input type="text" name="mobile_number" class="form-control">
      </div>
      <div class="col-md-6 mb-3">
        <label class="form-label">Rate Type</label>
        <select name="rate_type" class="form-select" id="rateType" onchange="toggleRate()">
          <option value="daily">Daily Rate</option>
          <option value="contract">Contract Basis</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 mb-3" id="dailyRateField">
        <label class="form-label">Daily Rate (৳)</label>
        <input type="number" step="0.01" name="daily_rate" class="form-control" value="0">
      </div>
      <div class="col-md-6 mb-3" id="contractField" style="display:none">
        <label class="form-label">Contract Amount (৳)</label>
        <input type="number" step="0.01" name="contract_amount" class="form-control" value="0">
      </div>
    </div>
    <button class="btn btn-brand"><i class="fa-solid fa-check"></i> Save Worker</button>
    <a href="{% url 'labor:worker_list' %}" class="btn btn-outline-secondary">Cancel</a>
  </form>
</div>
<script>
function toggleRate(){
  const type = document.getElementById('rateType').value;
  document.getElementById('dailyRateField').style.display = type === 'daily' ? 'block' : 'none';
  document.getElementById('contractField').style.display = type === 'contract' ? 'block' : 'none';
}
</script>
{% endblock %}