{% extends "pos/base.html" %}

{% block stylesheets %}
<style>
  /* layout wrapper */
  .branch-item { margin-bottom: 1rem; }

  /* hide radio but keep accessible */
  .branch-input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* professional card */
  .branch-card{
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: linear-gradient(
      145deg,
      rgba(var(--accent-rgb, 13,110,253), 0.09),
      #ffffff 60%
    );
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  /* top accent bar */
  .branch-card::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:6px;
    background: rgb(var(--accent-rgb, 13,110,253));
  }

  .branch-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.12);
  }

  /* selected state (FIXED selector) */
  .branch-input:checked + label .branch-card{
    border-color: rgb(var(--accent-rgb, 13,110,253));
    box-shadow:
      0 0 0 4px rgba(var(--accent-rgb, 13,110,253), 0.18),
      0 14px 30px rgba(0,0,0,0.14);
  }

  /* icon bubble */
  .branch-icon{
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb, 13,110,253), 0.14);
    color: rgb(var(--accent-rgb, 13,110,253));
    margin-bottom: .75rem;
  }

  .branch-title{
    font-weight: 800;
    letter-spacing: .2px;
    margin-bottom: .25rem;
  }

  .role-badge{
    display: inline-block;
    margin-top: .5rem;
    padding: .28rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    background: rgba(var(--accent-rgb, 13,110,253), 0.14);
    color: rgb(var(--accent-rgb, 13,110,253));
  }

  /* Different colors per branch card (cycle 12) */
  .row > .branch-item:nth-child(1)  { --accent-rgb: 13,110,253; }   /* blue */
  .row > .branch-item:nth-child(2)  { --accent-rgb: 111,66,193; }   /* purple */
  .row > .branch-item:nth-child(3)  { --accent-rgb: 20,184,166; }   /* teal */
  .row > .branch-item:nth-child(4)  { --accent-rgb: 249,115,22; }   /* orange */
  .row > .branch-item:nth-child(5)  { --accent-rgb: 34,197,94; }    /* green */
  .row > .branch-item:nth-child(6)  { --accent-rgb: 239,68,68; }    /* red */
  .row > .branch-item:nth-child(7)  { --accent-rgb: 79,70,229; }    /* indigo */
  .row > .branch-item:nth-child(8)  { --accent-rgb: 236,72,153; }   /* pink */
  .row > .branch-item:nth-child(9)  { --accent-rgb: 6,182,212; }    /* cyan */
  .row > .branch-item:nth-child(10) { --accent-rgb: 245,158,11; }   /* amber */
  .row > .branch-item:nth-child(11) { --accent-rgb: 132,204,22; }   /* lime */
  .row > .branch-item:nth-child(12) { --accent-rgb: 100,116,139; }  /* slate */
</style>

{% endblock %}

{% block content %}
<div class="container py-4">
  <h2 class="mb-4 text-primary">Pick Your Branch</h2>
  <form method="post">
    {% csrf_token %}
    <div class="row">
      {% for assign in assignments %}
      <div class="col-md-4 mb-3 branch-item">
        <input
          type="radio"
          name="branch_id"
          id="branch{{ assign.branch.id }}"
          value="{{ assign.branch.id }}"
          class="branch-input"
        >
        <label for="branch{{ assign.branch.id }}" class="d-block">
        <div class="card branch-card h-100 text-center p-3">
          <div class="card-body">
            <div class="branch-icon">
              <i class="fas fa-building fa-lg"></i>
            </div>

            <h5 class="card-title branch-title">{{ assign.branch.company_name|title }}</h5>
            <span class="role-badge">{{ assign.role|title }}</span>
          </div>
        </div>

        </label>
      </div>
      {% endfor %}
    </div>
    <div class="text-right">
      <button type="submit" class="btn btn-lg btn-success">
        <i class="fas fa-arrow-right mr-2"></i>Continue
      </button>
    </div>
  </form>
</div>
{% endblock %}

{% block javascripts %}
<script>
  document.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll('.branch-input').forEach(function(input){
      input.addEventListener('change', function(){
        // radio change hote hi form submit
        this.form.submit();
      });
    });
  });
</script>
{% endblock %}