{{-- set x-data="{cal_start_date: '{{ $phase->start_date }}', cal_end_date: '{{ $phase->due_date }}'}" in parent element of this component. so this component can read and update them --}}

@props([
    'startModel' => 'start_date',
    'endModel' => 'due_date',
])


<div x-data="{
      show_calculator: false,
      action: '+',
      years: 0,
      months: 0,
      weeks: 0,
      days: 0,
      // start_date is in parent element
      calculateEndDate() {
        if (!this.show_calculator || !cal_start_date) {
          return;
        }
        let startDate = new Date(Date.parse(cal_start_date));
        const factor = this.action === '+' ? 1 : -1;
        if (this.years) {
          startDate.setFullYear(startDate.getFullYear() + (parseInt(this.years) * factor));
        }
        if (this.months) {
          startDate.setMonth(startDate.getMonth() + (parseInt(this.months) * factor));
        }
        if (this.weeks) {
          startDate.setDate(startDate.getDate() + (parseInt(this.weeks) * 7 * factor));
        }
        if (this.days) {
          startDate.setDate(startDate.getDate() + (parseInt(this.days) * factor));
        }
        cal_end_date = startDate.toISOString().slice(0, 10);
        initFlatPickr();
      }

    }"
    x-init="$watch('cal_start_date; show_calculator', () => { calculateEndDate() })">
  <div class="col-12 mt-2">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="cal-phase-end-date" value="1" x-model="show_calculator">
      <label class="form-check-label" for="cal-phase-end-date">
        Calculate End Date
      </label>
    </div>
  </div>
  <div class="" x-show="show_calculator">
    <hr>

    <div class="form-group col">
      <label for="" class="col-form-label">Add/Subtract</label>
      <select class="form-select" x-model="action" x-on:change="calculateEndDate()">
        <option value="+">(+) Add</option>
        <option value="-">(-) Subtract</option>
      </select>
    </div>

    
    <div class="row">
      <div class="form-group col">
        <label for="" class="col-form-label">Years</label>
        <input type="text" class="form-control" placeholder="Years" x-model="years" x-on:keyUp="calculateEndDate()">
      </div>

      <div class="form-group col">
        <label for="" class="col-form-label">Months</label>
        <input type="text" class="form-control" placeholder="Months" x-model="months" x-on:keyUp="calculateEndDate()">
      </div>

      <div class="form-group col">
        <label for="" class="col-form-label">Weeks</label>
        <input type="text" class="form-control" placeholder="Weeks" x-model="weeks" x-on:keyUp="calculateEndDate()">
      </div>

      <div class="form-group col">
        <label for="" class="col-form-label">Days</label>
        <input type="text" class="form-control" placeholder="Days" x-model="days" x-on:keyUp="calculateEndDate()">
      </div>
    </div>

    <hr>

  </div>
</div>