<template>
  <div id="app">
    <fieldset>
      <legend class="d-flex justify-content-center">Date Picker</legend>
      <div class="grid-container">
        <!-- Do the days of the weeek need to be read? -->
        <div class="grid-item"><span class="sr-only">Sunday</span>S</div>
        <div class="grid-item"><span class="sr-only">Monday</span>M</div>
        <div class="grid-item"><span class="sr-only">Tuesday</span>T</div>
        <div class="grid-item"><span class="sr-only">Wednesday</span>W</div>
        <div class="grid-item"><span class="sr-only">Thursday</span>T</div>
        <div class="grid-item"><span class="sr-only">Friday</span>F</div>
        <div class="grid-item"><span class="sr-only">Saturday</span>S</div>
        <div class="grid-item radio-wrapper past-day">
          <input type="radio" name="day-of-month" id="thirtypast" />
          <label for="thirtypast"><span>30</span></label>
        </div>
        <div class="grid-item radio-wrapper past-day">
          <input type="radio" name="day-of-month" id="thirtyonepast" />
          <label for="thirtyonepast"><span>31</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day first-of-month">
          <div v-if="isFirstDayOfMonth" class="current-month">OCT</div>
          <input type="radio" name="day-of-month" id="one" />
          <label for="one"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="two" />
          <label for="two"><span>2</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="three" />
          <label for="three"><span>3</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day" :class="[isCurrentDay ? 'current-day' : '']">
          <div v-if="isCurrentDayDot" class="current-day-dot"></div>
          <input type="radio" name="day-of-month" id="four" />
          <label for="four"><span>4</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="five" />
          <label for="five"><span>5</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="six" />
          <label for="six"><span>6</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="seven" />
          <label for="seven"><span>7</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="eight" />
          <label for="eight"><span>8</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="nine" />
          <label for="nine"><span>9</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="ten" />
          <label for="ten"><span>10</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="eleven" />
          <label for="eleven"><span>11</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="twelve" />
          <label for="twelve"><span>12</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="thirteen" />
          <label for="thirteen"><span>13</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="fourteen" />
          <label for="fourteen"><span>17</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="fifteen" />
          <label for="fifteen"><span>15</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="sixteen" />
          <label for="sixteen"><span>16</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="seventeen" />
          <label for="seventeen"><span>17</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="eighteen" />
          <label for="eighteen"><span>18</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="nineteen" />
          <label for="nineteen"><span>19</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="twenty" />
          <label for="twenty"><span>20</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="twentyone" />
          <label for="twentyone"><span>21</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="twentytwo" />
          <label for="twentytwo"><span>22</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="twentythree" />
          <label for="twentythree"><span>23</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="twentyfour" />
          <label for="twentyfour"><span>24</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="twentyfive" />
          <label for="twentyfive"><span>25</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="twentysix" />
          <label for="twentysix"><span>26</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="twentyseven" />
          <label for="twentyseven"><span>27</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="twentyeight" />
          <label for="twentyeight"><span>28</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="twentynine" />
          <label for="twentynine"><span>29</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="thirty" />
          <label for="thirty"><span>30</span></label>
        </div>
        <div class="grid-item radio-wrapper highlighted-day">
          <input type="radio" name="day-of-month" id="thirtyone" />
          <label for="thirtyone"><span>31</span></label>
        </div>
        <div class="grid-item radio-wrapper future-day">
          <input type="radio" name="day-of-month" id="onefuture" />
          <label for="onefuture"><span>1</span></label>
        </div>
        <div class="grid-item radio-wrapper future-day">
          <input type="radio" name="day-of-month" id="twofuture" />
          <label for="twofuture"><span>2</span></label>
        </div>
      </div>
    </fieldset>
  </div>
  <form class="w-100 d-flex justify-content-center mt-5">
    <input type="date">
  </form>
</template>

<script>
export default {
  name: "datePicker",
  data() {
    return {
      dayOfWeek: "Tuesday",
      dayOfMonth: "1st",
      pastMonth: "October",
      isFirstDayOfMonth: true,
      isCurrentDay: true,
      isCurrentDayDot: true,
    };
  },
};
</script>

<style lang="scss">
.container {
  //max-width: 341px;
  label {
    display: initial; //Override Bootstrap default
  }
  #availableDates label:nth-child(14n):after {
    content: "\a";
    white-space: pre;
  }
}

.grid-container {
  margin: 0 auto;
  max-width: 341px;
  display: grid;
  grid-gap: 4px;
  grid-template-columns: auto auto auto auto auto auto auto;
  justify-content: center;
  align-items: center;

  .grid-item {
    text-align: center;
    padding: 4px;
  }

  .radio-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 46px;
    height: 46px;

    .current-day-dot {
      position: absolute;

    }

    &.first-of-month {
      .current-month {
        position: absolute;
        font-size: 9px;
        top: 4px;
        color: #1574a1;
      }
    }

    &.highlighted-day {

      input[type="radio"] {
        position: absolute;
        // opacity: 0;
        height: 0.1px;
        width: 0.1px;

        + label {
          position: relative;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          color: #1574a1;

          span {
            z-index: 2;
          }

          &::before {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 1px solid #1574a1;
            background-color: #e4f1f7;
            color: #1574a1;
            width: 40px;
            height: 40px;
            z-index: -1;
          }

          &::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            width: 40px;
            height: 40px;
          }
        }

        &:checked {
          + label::after {
            background: #1574a1;
            box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
            color: #fff;
          }
          + label span {
            color: #fff;
          }
        }

        &:focus {
          + label::before {
            background-color: #1574a1;
          }
          + label span {
            color: #fff;
          }
        }
      }
    }

    &.past-day {

      input[type="radio"] {
        position: absolute;
        opacity: 0;
        height: 0.1px;
        width: 0.1px;

        + label {
          position: relative;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          color: #8E9292;

          span {
            z-index: 2;
          }

          &::before {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 1px solid transparent;
            background-color: transparent;
            color: #1574a1;
            width: 40px;
            height: 40px;
            z-index: -1;
          }

          &::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            width: 40px;
            height: 40px;
          }
        }

        &:checked {
          + label::after {
            background: #1574a1;
            box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
            color: #fff;
          }
          + label span {
            color: #fff;
          }
        }

        &:focus {
          + label::before {
            background-color: transparent;
          }
          + label span {
            color: #1574a1;
          }
        }

        &:active {
          + label::before {
            background-color: #1574a1;
          }
          + label span {
            color: #fff;
          }
        }
      }
    }

    &.future-day {

      input[type="radio"] {
        position: absolute;
        opacity: 0;
        height: 0.1px;
        width: 0.1px;

        + label {
          position: relative;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          color: #4D5151;

          span {
            z-index: 2;
          }

          &::before {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 1px solid transparent;
            background-color: transparent;
            color: #1574a1;
            width: 40px;
            height: 40px;
            z-index: -1;
          }

          &::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            width: 40px;
            height: 40px;
          }
        }
      }
    }

    &.current-day {

      input[type="radio"] {
        position: absolute;
        // opacity: 0;
        height: 0.1px;
        width: 0.1px;

        &:after {
          content: "\A";
          width:4px;
          height:4px;
          border-radius:50%;
          background: #1574a1;
          position: absolute;
          top: 8px;
          left: -1px;
          z-index: 1;
        }

        &:checked {
          + label::after {
            background: #1574a1;
            box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
            color: #fff;
          }
          + label span {
            color: #fff;
          }
          &:after {
            background: #fff;
          }
        }
      }
      span {
        position: relative;
        top: -.25rem;
      }
    }
  }

}

</style>
