{% extends 'base.html' %}
{% load widget_tweaks %}
{% block content %}
<div class="container mt-5 mb-5">
  {% if messages %}
    {% for message in messages %}
      <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endfor %}
  {% endif %}

  {% if form.non_field_errors %}
    <div class="alert alert-danger">
      {% for error in form.non_field_errors %}
        <div>{{ error }}</div>
      {% endfor %}
    </div>
  {% endif %}

  <div class="row justify-content-center">
    <div class="col-md-10">
      <form method="POST" enctype="multipart/form-data" class="p-4 shadow rounded bg-white">
        {% csrf_token %}
        <h2 class="mb-4 text-center text-primary">Player Registration</h2>

        <div class="row mb-3">
          <div class="col-md-6">
            <label class="form-label">Surname</label>
            {% if form.surname.errors %}
              {{ form.surname|add_class:"form-control is-invalid" }}
              <div class="invalid-feedback">{{ form.surname.errors.0 }}</div>
            {% else %}
              {{ form.surname|add_class:"form-control" }}
            {% endif %}
          </div>
          <div class="col-md-6">
            <label class="form-label">Other Names</label>
            {% if form.other_names.errors %}
              {{ form.other_names|add_class:"form-control is-invalid" }}
              <div class="invalid-feedback">{{ form.other_names.errors.0 }}</div>
            {% else %}
              {{ form.other_names|add_class:"form-control" }}
            {% endif %}
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-6">
            <label class="form-label">Date of Birth</label>
            <input type="date" class="form-control" name="date_of_birth" required>
          </div>
          <div class="col-md-6">
            <label class="form-label">Place of Birth</label>
            {{ form.place_of_birth|add_class:"form-control" }}
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-6">
            <label class="form-label">Nationality</label>
            {{ form.nationality|add_class:"form-control" }}
          </div>
          <div class="col-md-6">
            <label class="form-label">State of Origin</label>
            {{ form.state_of_origin|add_class:"form-control" }}
          </div>
        </div>

        <div class="row">
          <div class="mb-3 col-md-6">
            <label class="form-label">Residential Address</label>
            {{ form.residential_address|add_class:"form-control"|attr:"rows:2 style:max-height:80px;" }}
          </div>
          <div class="mb-3 col-md-6">
            <label class="form-label">Permanent Address</label>
            {{ form.permanent_address|add_class:"form-control"|attr:"rows:2 style:max-height:80px;" }}
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-4">
            <label class="form-label">State FA</label>
            {{ form.state_fa|add_class:"form-control" }}
          </div>
          <div class="col-md-4">
            <label class="form-label">Present Club</label>
            {{ form.present_club|add_class:"form-control" }}
          </div>
          {% comment %} <div class="col-md-4">
            <label class="form-label">Club Division</label>
            {{ form.club_division|add_class:"form-control" }}
          </div> {% endcomment %}

          <div class="col-md-4">
            <label class="form-label">Club Division</label>
            <select name="club_division" class="form-control" required>
              <option value="">Select Option</option>
              <option value="Championship">Championship</option>
              <option value="Premiership">Premiership</option>
            </select>
          </div>


        </div>

        <div class="row mb-3">
          <div class="col-md-6">
            <label class="form-label">Jersey Number</label>
            {{ form.jersey_number|add_class:"form-control" }}
          </div>
          <div class="col-md-6">
            <label class="form-label">Position</label>
            {{ form.position|add_class:"form-control" }}
          </div>
        </div>

        <h5 class="mt-4">Career History & Contract Details</h5>

        <div class="mb-3">
          <label class="form-label">Employer</label>
          {{ form.employer|add_class:"form-control" }}
        </div>

        <div class="mb-3">
          <label class="form-label">Last Club</label>
          {{ form.last_club|add_class:"form-control" }}
        </div>

        {% comment %} <div class="mb-3">
          <label class="form-label">Date Left Last Club</label>
          {{ form.date_left_last_club|add_class:"form-control" }}
        </div> {% endcomment %}
        <div class="mb-3">
          <label class="form-label">Date Left Last Club</label>
          <input type="date" class="form-control" name="date_left_last_club" required>
        </div>

        <div class="mb-3">
          <label class="form-label">Reason for Leaving</label>
          {{ form.reason_for_leaving|add_class:"form-control"|attr:"rows:2 style:max-height:80px;" }}
        </div>

        <div class="row mb-3">
          <div class="col-md-6">
            <label class="form-label">Contract Period</label>
            {{ form.contract_period|add_class:"form-control" }}
          </div>
          <div class="col-md-6">
            <label class="form-label">Contract Expiry Date</label>
            <input type="date" class="form-control" name="contract_expiry" required>
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-6">
            <div class="form-check mb-3">
              {{ form.is_minor }}
              <label class="form-check-label" for="is_minor">
                Is this player a minor (under 18)?
              </label>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3" id="consent-upload" style="display: none;">
              <label class="form-label text-danger">Parental Consent Document (Required for Minors)</label>
              {{ form.parental_consent|add_class:"form-control" }}
            </div>
          </div>
        </div>

        <h5 class="mt-4">Required Documents</h5>
        <div class="row mb-3">
          <div class="col-md-4">
            <label class="form-label">Passport Photo</label>
            {{ form.passport_photo|add_class:"form-control" }}
          </div>
          <div class="col-md-4">
            <label class="form-label">Player Signature</label>
            {{ form.player_signature|add_class:"form-control" }}
          </div>
          <div class="col-md-4">
            <label class="form-label">Club Stamp</label>
            {{ form.club_stamp|add_class:"form-control" }}
          </div>
        </div>

        <h5 class="mt-4">Agent (Optional)</h5>
        <div class="row mb-3">
          <div class="col-md-6">
            <label class="form-label">Agent Name</label>
            {{ form.agent_name|add_class:"form-control" }}
          </div>
          <div class="col-md-6">
            <label class="form-label">Agent Signature</label>
            {{ form.agent_signature|add_class:"form-control" }}
          </div>
        </div>

        <button type="submit" class="btn btn-success w-100 mt-4">Register Player</button>
      </form>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const isMinorCheckbox = document.getElementById("id_is_minor");
    const consentUpload = document.getElementById("consent-upload");

    if (isMinorCheckbox) {
      isMinorCheckbox.addEventListener("change", function () {
        consentUpload.style.display = this.checked ? "block" : "none";
      });

      if (isMinorCheckbox.checked) {
        consentUpload.style.display = "block";
      }
    }
  });
</script>
{% endblock %}