@if ($change_order->id)
    {!! Form::model($change_order, ['route' => ['admin.contracts.change-requests.update', ['change_request' => $change_order, 'contract' => $change_order->contract, 'contract_id' => $change_order->contract]], 'method' => 'PUT']) !!}
@else
    {!! Form::model($change_order, ['route' => ['admin.contracts.change-requests.store', ['table_id' => request()->table_id] + (isset($contract) ? ['contract_id' => $contract] : [])], 'method' => 'POST', 'id' => 'create-change-request-form']) !!}
@endif
{{-- @dd($change_order) --}}
<div id="crc-sec" class="row">
  @php
    $contract = isset($contract) ? $contract : $change_order->contract;
  @endphp
  @if(!isset($contract?->id))
  {{-- client --}}
  <div class="form-group col-6">
    {{ Form::label('company_id', __('Client'), ['class' => 'col-form-label']) }}
    {!! Form::select('company_id', $change_order->contract ? [$change_order->contract->assignable->uuid => $change_order->contract->assignable->name] : [], @$change_order->contract?->assignable->uuid, [
      'id' => 'client_id-select',
      'class' => 'form-select dependent-select required',
      'data-kt-select2' => 'true',
      'data-placeholder' => 'Select Client',
      'data-remote' => route('resource-select', ['groupedCompany']),
      'data-allow-clear' => 'true'
      ]) !!}
  </div>

  {{-- program --}}
  <div class="form-group col-6">
    {!! Form::label('program_id', 'Programs', ['class' => 'col-form-label'] ) !!}
    {!! Form::select('program_id', [], [], [
      'class' => 'form-select dependent-select',
      'data-kt-select2' => 'true',
      'id' => 'program_id-select',
      'data-placeholder' => __('All'),
      'data-allow-clear' => 'true',
      'data-remote' => route('resource-select', ['Program', 'dependent' => 'company_id']),
      'data-dependent_id' => 'client_id-select'
    ]) !!}
  </div>

  {{-- reference_id --}}
  <div class="form-group col-12 d-none">
    {!! Form::label('reference_id', 'Reference ID', ['class' => 'col-form-label']) !!}
    {!! Form::text('reference_id', null, [
      'id' => 'cont-ref-id',
      'class' => 'form-control selected-cont-ref-id',
      'placeholder' => 'Reference ID',
      'data-dependent_id' => 'client_id-select',
      'data-dependent_3' => 'program_id-select'
    ]) !!}
  </div>

  {{-- Contract --}}
  <div class="form-group col-12">
    <label class="col-form-label d-flex justify-content-between">
      <span>{{ __('Select Contract') }}</span>

      {{-- filter by reference id --}}
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="filter_by_ref_id" id="filter_by_ref_id">
        <label class="form-check-label" for="filter_by_ref_id">
          {{ __('Filter by Reference ID') }}
        </label>
      </div>
    </label>
    {!! Form::select('contract_id', $change_order->contract ? [$change_order->contract->uuid => $change_order->contract->subject] : [], $contract?->uuid ?? null, [
      'data-placeholder' => 'Select Contract',
      'class' => 'form-select', 'data-kt-select2' => 'true',
      'data-remote' => route('resource-select', ['Contract', 'dependent' => 'company_id', 'dependent_3_col' => 'program_id', 'dependent_4_col' => 'reference_id']),
      'data-dependent_id' => 'client_id-select',
      'data-dependent_3' => 'program_id-select',
      'data-dependent_4' => 'cont-ref-id',
      'id' => 'contract_id'
    ])!!}
  </div>
  @endif

  @php
    $ac_sec_same_class = (isset($contract?->id) || $change_order->id) ? '' : 'd-none';
  @endphp

  <div class="ac-sec-same {{$ac_sec_same_class}}">
    @php
      $existing_change_order = $contract?->changeRequests()->where('status', 'Pending')->when(isset($change_order) && $change_order->id, fn($q) => $q->where('id', '!=', $change_order->id))->first();
      if($existing_change_order?->id){
        $ac_sec_same_class = 'd-none';
      }
    @endphp
    <div class="col-12 mt-2 change-order-exists-warning {{$existing_change_order?->id ? '' : 'd-none'}}">
      <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <strong>New Request Cannot be created!</strong> Change Request Already exists :
        <a href="{{ $existing_change_order?->id ? route('admin.contracts.change-requests.show', [$existing_change_order]) : '' }}" class="alert-link change-order-url">{{$existing_change_order?->id ? runtimeChangeReqIdFormat($existing_change_order->id) : 'test'}}</a>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    </div>

    {{-- Selected Contract Details (subject, value, start date, end date) in warning message--}}
    <div class="col-12 mt-2 selected-contract-details {{$contract?->id ? '' : 'd-none'}}">
      <div class="alert alert-success alert-dismissible fade show" role="alert">
        <strong>Contract Details</strong>
        <ul>
          <li> <b> Subject:  </b>
            <span class="selected-contract-subject">{{$contract?->subject}}</span>
          </li>

          <li> <b> Company:  </b>
            <span class="selected-contract-company">{{$contract?->assignable?->name}}</span>
          </li>

          <li> <b> Propgram:  </b>
            <span class="selected-contract-program">{{$contract?->program?->name}}</span>
          </li>

          <li> <b> Value:  </b>
            <span class="selected-contract-value">{{$contract ? cMoney($contract->value, $contract->currency, true) : '' }}</span>
          </li>
          <li> <b> Start Date: </b>
             <span class="selected-contract-start-date">{{ formatDateTime($contract?->start_date) }}</span>
            </li>
          <li> <b> End Date: </b>
             <span class="selected-contract-end-date">{{ formatDateTime($contract?->end_date) }}</span>
            </li>
          <li> <b> Reference ID: </b>
             <span class="selected-cont-ref-id">{{ $contract?->refrence_id }}</span>
            </li>
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    </div>

    @if(!($existing_change_order?->id))
    <div class="d-flex mt-3">
      <div class="form-check me-3 {{$contract?->status == 'Paused' ? 'd-none' : ''}}">
        <input class="form-check-input" type="radio" name="action_type" value="update-terms" id="update-terms-rad" @checked((!$change_order->id || $change_order->action == 'Terms Update') && $contract?->status != 'Paused')>
        <label class="form-check-label" for="update-terms-rad">
          Update Terms
        </label>
      </div>
      <div class="form-check me-3 {{$contract?->status == 'Paused' ? 'd-none' : ''}}">
        <input class="form-check-input" type="radio" name="action_type" value="pause-contract" id="pause-contract" @checked($change_order->action == 'Pause Contract')>
        <label class="form-check-label" for="pause-contract">
          Pause
        </label>
      </div>
      <div class="form-check me-3 {{$contract?->status == 'Paused' ? '' : 'd-none'}}">
        <input class="form-check-input" type="radio" name="action_type" value="resume-contract" id="resume-contract" @checked($change_order->action == 'Resume' || $contract?->status == 'Paused')>
        <label class="form-check-label" for="resume-contract">
          Resume
        </label>
      </div>
      <div class="form-check me-3 {{$contract?->status == 'Paused' ? 'd-none' : ''}}">
        <input class="form-check-input" type="radio" name="action_type" value="terminate-contract" id="terminate-contract" @checked($change_order->action == 'Termination')>
        <label class="form-check-label" for="terminate-contract">
          Terminate
        </label>
      </div>
      <div class="form-check me-3 {{$contract?->status == 'Paused' ? 'd-none' : ''}}">
        <input class="form-check-input" type="radio" name="action_type" value="contract-completed" id="contract-completed" @checked(in_array($change_order->action, ['Early Completed', 'Completed']))>
        <label class="form-check-label" for="contract-completed">
         Mark Completed
        </label>
      </div>
    </div>
    {!! Form::hidden('change_request_type', 'update-terms', ['id' => 'change-request-type', 'class' => 'dependent-select']) !!}

    <div id="pause-contract-section" class="{{$change_order->action == 'Pause Contract' ? '' : 'd-none'}} ac-sec">
    </div>

    {{-- <div id="contract-completed-section" class="{{in_array($change_order->action, ['Early Completed', 'Completed']) ? '' : 'd-none'}} ac-sec">
      <label for="" class="form-check-label">Completion Status</label>
      <div class="form-check me-3">
        <input class="form-check-input" type="radio" name="completion_status" value="Completed" id="completed-radio" @checked(@$change_order->action != 'Early Completed')>
        <label class="form-check-label" for="completed-radio">
          Completed
        </label>
      </div>
      <div class="form-check me-3">
        <input class="form-check-input" type="radio" name="completion_status" value="Early Completed" id="early-completed-radio" @checked(@$change_order->action == 'Early Completed')>
        <label class="form-check-label" for="early-completed-radio">
         Early Completed
        </label>
      </div>
    </div> --}}

    <div id="update-terms-sectoin" class="{{ $change_order->action == 'Terms Update' ? '' : 'd-none' }} ac-sec">
      <div class="card mt-2">
        <div class="card-header">
          <div class="card-title">Update Terms</div>
        </div>
        <div class="card-body pt-0">
          <div class="row cal-section">
            <div class="form-group col">
              <label for="current_amount" class='col-form-label'>Current Value</label>
              {!! Form::text('current_amount', @$contract?->printable_value ?? null, ['class' => 'form-control', 'disabled','placeholder' => __('value'), 'data-value' => @$contract?->value ?? null, 'data-currency' => $contract?->currency]) !!}
            </div>
            <div class="form-group col-6 {{@$modifications['new_value'] != @$snapshot['value'] ? "" : 'd-none'}} n-value">
                <label for="new_value" class='col-form-label'>New Value</label>
                {!! Form::text('new_value', @$modifications['new_value'] ? cMoney($modifications['new_value'], $snapshot['currency'], true) : null, ['class' => 'form-control new_value', 'disabled','placeholder' => __('Value')]) !!}
            </div>
            <div class="d-flex mt-2">
              <div class="form-check me-2">
                <input class="form-check-input value_action_rd" type="radio" name="value_action" value="unchanged" id="unch-val-rd" @checked(@$modifications['new_value'] == @$snapshot['value'])>
                <label class="form-check-label" for="unch-val-rd">
                  No Change
                </label>
              </div>
              <div class="form-check me-2">
                <input class="form-check-input value_action_rd" type="radio" name="value_action" value="inc" id="inc-val-rd" @checked(@$modifications['new_value'] > @$snapshot['value'])>
                <label class="form-check-label" for="inc-val-rd">
                  Increase Value
                </label>
              </div>
              <div class="form-check me-2">
                <input class="form-check-input value_action_rd" type="radio" name="value_action" value="dec" id="dec-val-rd" @checked(@$modifications['new_value'] < @$snapshot['value'])>
                <label class="form-check-label" for="dec-val-rd">
                  Decrease Value
                </label>
              </div>
              <div class="form-check me-2">
                <input class="form-check-input value_action_rd" type="radio" name="value_action" value="cust" id="cust-val-rd">
                <label class="form-check-label" for="cust-val-rd">
                  Custom Value
                </label>
              </div>
            </div>
            <div class="form-group col-12 val-calc {{@$modifications['new_value'] != @$snapshot['value'] ? "" : 'd-none'}}">
              <label for="value" class='col-form-label'>Value Change</label>
              <div class="d-flex">
                <div>
                  {!! Form::number('value_change', abs(@$modifications['new_value'] - @$snapshot['value']), ['class' => 'form-control value_change', 'placeholder' => __('Value')]) !!}
                </div>
              </div>
            </div>
          </div>

          <hr class="mt-2">

          <div class="row cal-section">
            <div class="form-group col">
              {{ Form::label('c_end_date', __('Current End Date'), ['class' => 'col-form-label']) }}
              {!! Form::date('c_end_date', @$contract?->end_date, ['class' => 'form-control calculator_input_date', 'disabled','placeholder' => __('End Date')]) !!}
            </div>
            {{-- due date --}}
            <div class="form-group col-6 {{@$modifications['new_end_date'] != @$snapshot['end_date'] ? '' : 'd-none'}}">
              {{ Form::label('new_end_date', __('New End Date'), ['class' => 'col-form-label']) }}
              {!! Form::date('new_end_date', $modifications['new_end_date'] ?? null, ['class' => 'form-control flatpickr calculated_date', 'placeholder' => __('End Date')]) !!}
            </div>
            <div class="d-flex mt-2">
              <div class="form-check me-2">
                <input class="form-check-input timeline_action_rd" type="radio" name="timeline_action" value="unchanged" id="unch-timeline-rd" @checked(@$modifications['new_end_date'] == @$snapshot['end_date'])>
                <label class="form-check-label" for="unch-timeline-rd">
                  No Change
                </label>
              </div>
              <div class="form-check me-2">
                <input class="form-check-input timeline_action_rd" type="radio" name="timeline_action" value="inc" id="inc-timeline-rd" @checked(@$modifications['new_end_date'] > @$snapshot['end_date'])>
                <label class="form-check-label" for="inc-timeline-rd">
                  Extend
                </label>
              </div>
              <div class="form-check me-2">
                <input class="form-check-input timeline_action_rd" type="radio" name="timeline_action" value="dec" id="dec-timeline-rd" @checked(@$modifications['new_end_date'] < @$snapshot['end_date'])>
                <label class="form-check-label" for="dec-timeline-rd">
                  Shorten
                </label>
              </div>
            </div>
            <div class="form-group col-12 timeline-calculator {{@$modifications['new_end_date'] != @$snapshot['end_date'] ? '' : 'd-none'}}">
              <label for="value" class='col-form-label'>Value Change</label>
              <div class="d-flex">
                {!! Form::number('timeline_change', @$modifications['new_end_date']?->diffInDays(@$snapshot['end_date']), ['class' => 'form-control timeline_change', 'placeholder' => __('Value')]) !!}
                {!! Form::select('timeline_unit', ['Day' => 'Day(s)', 'Month' => 'Month(s)', 'Year' => 'Year(s)'], null, [
                  'data-start-date' => @$snapshot['end_date'],
                  'class' => 'form-select timeline_change_unit',
                  'data-kt-select2' => 'true'
                  ])!!}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="contract-terminate-section" class="d-none ac-sec">
    </div>
    <div id="contract-resume-section" class="{{$change_order->action == 'Resume' ? '' : 'd-none'}} ac-sec">
      <div class="card mt-2">
        <div class="card-header">
          <h5 class="card-title">Resume Contract</h5>
        </div>
        <div class="card-body pt-0">
          <div class="row cal-section">
            <div class="form-group col">
              <label for="current_amount" class='col-form-label'>Value</label>
              {!! Form::text('current_amount', @$contract?->printable_value ?? null, ['class' => 'form-control', 'disabled','placeholder' => __('value'), 'data-value' => @$contract?->value ?? null, 'data-currency' => $contract?->currency]) !!}
            </div>
            <div class="form-group col-6 {{@$modifications['new_value_resume'] != @$snapshot['value'] ? "" : 'd-none'}} n-value">
                <label for="new_value_resume" class='col-form-label'>New Value</label>
                {!! Form::text('new_value_resume', @$modifications['new_value_resume'] ? cMoney($modifications['new_value_resume'], $contract?->currency, true) : null, ['class' => 'form-control new_value', 'disabled','placeholder' => __('Value')]) !!}
            </div>
            <div class="d-flex mt-2">
              <div class="form-check me-2">
                <input class="form-check-input value_action_rd" type="radio" name="value_action_resume" value="unchanged" id="unch-val-rd-resume" @checked(!isset($change_order->contract) || @$modifications['new_value_resume'] == @$snapshot['value'])>
                <label class="form-check-label" for="unch-val-rd-resume">
                  No Change
                </label>
              </div>
              <div class="form-check me-2">
                <input class="form-check-input value_action_rd" type="radio" name="value_action_resume" value="inc" id="inc-val-rd-resume" @checked(@$modifications['new_value_resume'] > @$snapshot['value'])>
                <label class="form-check-label" for="inc-val-rd-resume">
                  Increase Value
                </label>
              </div>
              <div class="form-check me-2">
                <input class="form-check-input value_action_rd" type="radio" name="value_action_resume" value="dec" id="dec-val-rd-resume" @checked(@$modifications['new_value_resume'] < @$snapshot['value'])>
                <label class="form-check-label" for="dec-val-rd-resume">
                  Decrease Value
                </label>
              </div>
              <div class="form-check me-2">
                <input class="form-check-input value_action_rd" type="radio" name="value_action_resume" value="cust" id="cust-val-rd-resume">
                <label class="form-check-label" for="cust-val-rd-resume">
                  Custom Value
                </label>
              </div>
            </div>
            <div class="form-group col-12 val-calc {{@$modifications['new_value_resume'] != @$snapshot['value'] ? "" : 'd-none'}}">
              <label for="value" class='col-form-label'>Value Change</label>
              <div class="d-flex">
                <div>
                  {!! Form::number('value_change_resume', @$modifications['new_value_resume'] - @$snapshot['value'], ['class' => 'form-control value_change', 'placeholder' => __('Value')]) !!}
                </div>
              </div>
            </div>
          </div>

          <hr class="mt-2">

          <div class="row cal-section">
            <div class="form-group col">
              {{ Form::label('c_start_date', __('Start Date'), ['class' => 'col-form-label']) }}
              {!! Form::date('c_start_date', @$contract?->start_date, ['class' => 'form-control calculator_input_date', 'disabled','placeholder' => __('Start Date')]) !!}
            </div>
            {{-- due date --}}
            <div class="form-group col-6 {{ @$snapshot['start_date'] != @$modifications['start_date'] ? '' : 'd-none' }} ">
              {{ Form::label('start_date', __('New Start Date'), ['class' => 'col-form-label']) }}
              {!! Form::date('start_date', @$modifications['start_date'], ['class' => 'form-control flatpickr calculated_date', 'placeholder' => __('Start Date')]) !!}
            </div>
            <div class="d-flex mt-2">
              <div class="form-check me-2">
                <input class="form-check-input timeline_action_rd" type="radio" name="timeline_action_sd_rs" value="unchanged" id="unch-timeline-rd-sd-rs" @checked(@$snapshot['start_date'] == @$modifications['start_date'])>
                <label class="form-check-label" for="unch-timeline-rd-sd-rs">
                  No Change
                </label>
              </div>
              <div class="form-check me-2">
                <input class="form-check-input timeline_action_rd" type="radio" name="timeline_action_sd_rs" value="inc" id="inc-timeline-rd-sd-rs" @checked(@$modifications['start_date'] > @$snapshot['start_date'])>
                <label class="form-check-label" for="inc-timeline-rd-sd-rs">
                  Extend
                </label>
              </div>
              <div class="form-check me-2">
                <input class="form-check-input timeline_action_rd" type="radio" name="timeline_action_sd_rs" value="dec" id="dec-timeline-rd-sd-rs" @checked(@$modifications['start_date'] < @$snapshot['start_date'])>
                <label class="form-check-label" for="dec-timeline-rd-sd-rs">
                  Shorten
                </label>
              </div>
            </div>
            <div class="form-group col-12 timeline-calculator {{ @$snapshot['start_date'] != @$modifications['start_date'] ? '' : 'd-none' }}">
              <label for="value" class='col-form-label'>Value Change</label>
              <div class="d-flex">
                {!! Form::number('timeline_change', @$modifications['start_date']?->diffInDays(@$snapshot['start_date']), ['class' => 'form-control timeline_change', 'placeholder' => __('Value')]) !!}
                {!! Form::select('timeline_unit', ['Day' => 'Day(s)', 'Month' => 'Month(s)', 'Year' => 'Year(s)'], null, [
                  'data-start-date' => @$snapshot['start_date'],
                  'class' => 'form-select timeline_change_unit',
                  'data-kt-select2' => 'true'
                  ])!!}
              </div>
            </div>
          </div>

          <hr class="mt-2">

          <div class="row cal-section">
            <div class="form-group col">
              {{ Form::label('c_end_date', __('End Date'), ['class' => 'col-form-label']) }}
              {!! Form::date('c_end_date', @$contract?->end_date, ['class' => 'form-control calculator_input_date', 'disabled','placeholder' => __('End Date')]) !!}
            </div>
            {{-- due date --}}
            <div class="form-group col-6  {{ @$snapshot['end_date'] != @$modifications['end_date'] ? '' : 'd-none' }}">
              {{ Form::label('end_date', __('New End Date'), ['class' => 'col-form-label']) }}
              {!! Form::date('end_date', @$modifications['end_date'], ['class' => 'form-control flatpickr calculated_date', 'placeholder' => __('End Date')]) !!}
            </div>
            <div class="d-flex mt-2">
              <div class="form-check me-2">
                <input class="form-check-input timeline_action_rd" type="radio" name="timeline_action_ed_rs" value="unchanged" id="unch-timeline-rd-ed-rs" @checked(@$snapshot['end_date'] == @$modifications['end_date'])>
                <label class="form-check-label" for="unch-timeline-rd-ed-rs">
                  No Change
                </label>
              </div>
              <div class="form-check me-2">
                <input class="form-check-input timeline_action_rd" type="radio" name="timeline_action_ed_rs" value="inc" id="inc-timeline-rd-ed-rs" @checked(@$modifications['end_date'] > @$snapshot['end_date'])>
                <label class="form-check-label" for="inc-timeline-rd-ed-rs">
                  Extend
                </label>
              </div>
              <div class="form-check me-2">
                <input class="form-check-input timeline_action_rd" type="radio" name="timeline_action_ed_rs" value="dec" id="dec-timeline-rd-ed-rs" @checked(@$modifications['end_date'] < @$snapshot['end_date'])>
                <label class="form-check-label" for="dec-timeline-rd-ed-rs">
                  Shorten
                </label>
              </div>
            </div>
            <div class="form-group col-12 timeline-calculator {{ @$snapshot['end_date'] != @$modifications['end_date'] ? '' : 'd-none' }}">
              <label for="value" class='col-form-label'>Value Change</label>
              <div class="d-flex">
                {!! Form::number('timeline_change', @$modifications['end_date']?->diffInDays(@$snapshot['end_date']), ['class' => 'form-control timeline_change', 'placeholder' => __('Value')]) !!}
                {!! Form::select('timeline_unit', ['Day' => 'Day(s)', 'Month' => 'Month(s)', 'Year' => 'Year(s)'], null, [
                  'data-start-date' => @$snapshot['end_date'],
                  'class' => 'form-select timeline_change_unit',
                  'data-kt-select2' => 'true'
                  ])!!}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endif
  </div>
  <div class="form-group col-12 ac-sec-same {{$ac_sec_same_class}} {{$change_order->action == 'Terms Update' ? 'd-none' : ''}}">
    {{ Form::label('event_date', __($change_order->getEventDateTitle()), ['class' => 'col-form-label event_date_label']) }}
    {!! Form::date('event_date', @$modifications['event_date'], ['class' => 'form-control flatpickr', 'placeholder' => __('Select Date')]) !!}
  </div>
  {{-- requested at --}}
  <div class="form-group col-12 ac-sec-same {{$ac_sec_same_class}}">
    <label for="requested_at" class='col-form-label'>Requested At</label>
    {!! Form::date('requested_at', $change_order->requested_at, ['class' => 'form-control flatpickr', 'placeholder' => __('Requested At')]) !!}
  </div>

  {{-- <div class="form-group mt-3 col-12 ac-sec-same">
    <label for="reason" class='col-form-label'>Reason</label>
    {!! Form::text('reason', null, ['class' => 'form-control', 'placeholder' => __('Reason')]) !!}
  </div> --}}

  <div class="col-md-12 mt-3 ac-sec-same {{$ac_sec_same_class}}">
    <div class="mb-3">
      {!! Form::label('description', 'Description', ['class' => 'col-form-label']) !!}
      {!! Form::textarea('description', null, ['class' => 'form-control', 'rows' => 2]) !!}
    </div>
  </div>

  @can('review change request')
    <div class="form-group col-12 my-2 ac-sec-same {{$ac_sec_same_class}}">
      <label class="form-check form-switch form-check-custom form-check-solid">
        {{ Form::label('approve_immediately', __('Approve Immediately'), ['class' => 'col-form-label']) }}
        {{ Form::checkbox('approve_immediately', 1, !isset($modifications) && 1,['class' => 'form-check-input is-invalid'])}}
        {{-- <input type="checkbox" class="form-check-input is-invalid" checked /> --}}
        <span class="switch-label"></span>
      </label>
    </div>
  @endcan

</div>
<div class="modal-footer">
    <div class="btn-flt float-end">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
        <button type="submit" data-form="ajax-form" class="btn btn-primary ac-sec-same {{$ac_sec_same_class}}">{{ __('Save') }}</button>
    </div>
</div>
{!! Form::close() !!}
<script nonce="{{ csp_nonce() }}">
  $(document).on('change', '#contract_id', function(){
    const formMethod = $(this).parents('form').attr('method');
    let contract_id = $(this).val();
    if(contract_id){
      $.ajax({
        url: route('admin.contracts.show', {contract: contract_id, getjson: true}),
        type: 'GET',
        dataType: 'json',
        success: function(data){
          // show warning change-order-exists-warning if data.pending_change_order is not null
          if(data.pending_change_order){
            $('.change-order-exists-warning').removeClass('d-none');
            // data.change_order.url
            $('.change-order-url').attr('href', data.pending_change_order.url).text(data.pending_change_order.title);
          } else {
            $('.change-order-exists-warning').addClass('d-none');
          }
          // show selected-contract-details
          $('.selected-contract-details').removeClass('d-none');
          $('.selected-contract-subject').text(data.subject);
          $('.selected-contract-company').text(data.assignable.name);
          $('.selected-contract-program').text(data.program.name);
          $('.selected-contract-value').text(data.currency + ' ' + parseFloat(data.value).toLocaleString());
          $('.selected-contract-start-date').text(data.start_date);
          $('.selected-contract-end-date').text(data.end_date);
          $('.selected-cont-ref-id').text(data.refrence_id);
          // set form action

          $('#create-change-request-form').attr('action', route('admin.contracts.change-requests.store', {contract: contract_id}));
          $('input[name="current_amount"]').val(data.currency + ' ' + parseFloat(data.value).toLocaleString());
          $('input[name="current_amount"]').data('value', data.value);
          $('input[name="current_amount"]').data('currency', data.currency);
          // var end_date = new Date(data.end_date);
          // end_date = end_date.toISOString().split('T')[0];
          $('input[name="c_end_date"]').val(data.end_date);
          $('input[name="c_start_date"]').val(data.start_date);
          $('#unch-val-rd').prop('checked', true).trigger("click").change();
          $('#unch-timeline-rd').prop('checked', true).trigger("click").change();
          updateActionTypeRadio(data.status)
        }
      });
    }
  })

  function updateActionTypeRadio(status) {
    if(status == 'Paused'){
      // hide all radion options except resume and check resume
      $('[name="action_type"]').parents('.form-check').addClass('d-none');
      $('#resume-contract').parents('.form-check').removeClass('d-none');
      $('#resume-contract').prop('checked', true).trigger('click').change();
    }else{
      // show all radio options except resume and check update-terms
      $('[name="action_type"]').parents('.form-check').removeClass('d-none');
      $('#resume-contract').parents('.form-check').addClass('d-none');
      $('#update-terms-rad').prop('checked', true).trigger('click').change();
    }
  }

  // on change of contract_id, show appropriate section
  $(document).on('change', '#contract_id', function(){
    showAppropriateSection();
  });

  function hideAllChangeRequestDetailsSections(){
    $('.ac-sec').addClass('d-none');
    $('.ac-sec-same').addClass('d-none');
    $('.change-order-exists-warning').addClass('d-none');
    $('.selected-contract-details').addClass('d-none');
  }
  // show appropriate section on radio change
  function showAppropriateSection(){
    hideAllChangeRequestDetailsSections();
    let contract_id = $('#contract_id').val();
    if(!contract_id){
      return;
    }
    // selected contract id
    $('.ac-sec-same').removeClass('d-none');
  }
</script>
<script nonce="{{ csp_nonce() }}">
  $(document).ready(function(){
    //  value change: controll visibility of new value field on change radio
    $('.value_action_rd').on('change click', function(){
      const section = $(this).parents('.cal-section');
      section.find('.new_value').prop('disabled', true);
      if($(this).val() == 'unchanged'){
        section.find('.n-value').addClass('d-none');
        section.find('.val-calc').addClass('d-none');
      }else if($(this).val() == 'inc' || $(this).val() == 'dec'){
        section.find('.n-value').removeClass('d-none');
        section.find('.val-calc').removeClass('d-none');
        calValue(section.find('.value_change'));
      }else if ($(this).val() == 'cust') {
        section.find('.n-value').removeClass('d-none');
        section.find('.val-calc').addClass('d-none');
        section.find('.new_value').prop('disabled', false);
        section.find('.new_value').val(section.find('input[name="current_amount"]').data('value'));
      }
    });

    // filter by reference id: show/hide reference id field
    $('#filter_by_ref_id').on('change', function(){
      $('#cont-ref-id').val(null);
      if($(this).is(':checked')){
        $('#cont-ref-id').parents('.form-group').removeClass('d-none');
      }else{
        $('#cont-ref-id').parents('.form-group').addClass('d-none');
      }
    });

    // on change, keyup, past, cont-ref-id: reset contract_id
    $('#cont-ref-id').on('change keyup paste', function(){
      $('#contract_id').val(null).trigger('change');
    });
  });
  $(document).on('change keyup', '.value_change', function(){
    calValue(this);
  });
  function calValue(el){
    const section = $(el).parents('.cal-section');
    let val = $(el).val() || 0;
    let action = section.find('.value_action_rd:checked').val();
    let cval = section.find('input[name="current_amount"]').data('value');
    let nval = 0;
    if(action == 'inc'){
      nval = parseFloat(cval) + parseFloat(val);
    }else if(action == 'dec'){
      nval = parseFloat(cval) - parseFloat(val);
    }
    let currency = $('input[name="current_amount"]').data('currency');
    section.find('.new_value').val(currency + ' ' + parseFloat(nval).toLocaleString());
  }

  // timeline
  $(document).ready(function(){
    $('.timeline_action_rd').on('change click', function(){
      const section = $(this).parents('.cal-section');
      if($(this).val() == 'unchanged'){
        section.find('.calculated_date').parent('.form-group').addClass('d-none');
        section.find('.timeline-calculator').addClass('d-none');
        section.find('.calculated_date').val(null);
      }else if($(this).val() == 'inc' || $(this).val() == 'dec'){
        section.find('.calculated_date').parent('.form-group').removeClass('d-none');
        section.find('.timeline-calculator').removeClass('d-none');
        calTimeline(section);
      }else{
        section.find('.calculated_date').parent('.form-group').addClass('d-none');
        section.find('.timeline-calculator').removeClass('d-none');
      }
    });
  });

  $(document).on('change keyup', '.timeline_change', function(){
    calTimeline($(this).parents('.cal-section'));
  });

  $('.timeline_change_unit').on('change', function(){
    calTimeline($(this).parents('.cal-section'));
  });

  function calTimeline(section){
    let val = section.find('.timeline_change').val() || 0;
    let action = section.find('.timeline_action_rd:checked').val();
    // let cval = $('input[name="c_end_date"]').val();
    let cval = section.find('.calculator_input_date').val();
    let nval = 0;
    let unit = section.find('.timeline_change_unit').val().toLowerCase();
    let start_date = section.find('.timeline_change_unit').data('start-date');
    if(action == 'inc'){
      // add without moment.js
      if(unit == 'day'){
        nval = new Date(cval);
        nval.setDate(nval.getDate() + parseInt(val));
        nval = nval.toISOString().slice(0,10);
      }else if(unit == 'month'){
        nval = new Date(cval);
        nval.setMonth(nval.getMonth() + parseInt(val));
        nval = nval.toISOString().slice(0,10);
      }else if(unit == 'year'){
        nval = new Date(cval);
        nval.setFullYear(nval.getFullYear() + parseInt(val));
        nval = nval.toISOString().slice(0,10);
      }
    }else if(action == 'dec'){
      // subtract without moment.js
      if(unit == 'day'){
        nval = new Date(cval);
        nval.setDate(nval.getDate() - parseInt(val));
        nval = nval.toISOString().slice(0,10);
      }else if(unit == 'month'){
        nval = new Date(cval);
        nval.setMonth(nval.getMonth() - parseInt(val));
        nval = nval.toISOString().slice(0,10);
      }else if(unit == 'year'){
        nval = new Date(cval);
        nval.setFullYear(nval.getFullYear() - parseInt(val));
        nval = nval.toISOString().slice(0,10);
      }
    }
    // if(nval < start_date){
    //   // show validation error
    //   $('.timeline_change').addClass('is-invalid');
    // }else{
      section.find('.timeline_change').removeClass('is-invalid');
      section.find('.calculated_date').val(nval);
    // }
    initFlatPickr();
  }

  // show appropriate section on radio change
  $(document).on('change', 'input[type=radio][name="action_type"]', function(){
    hideAllChangeRequestDetailsSections();
    showAppropriateSection();
  });

  // on change of contract_id, show appropriate section
  $(document).on('change', '#contract_id', function(){
    showAppropriateSection();
  });

  function hideAllChangeRequestDetailsSections(){
    $('.ac-sec').addClass('d-none');
    $('.ac-sec-same').addClass('d-none');
  }
  // show appropriate section on radio change
  function showAppropriateSection(){
    hideAllChangeRequestDetailsSections();
    let val = $('input[type=radio][name="action_type"]:checked').val();
    $('.event_date_label').parent().removeClass('d-none');
    // selected contract id
    $('.ac-sec-same').removeClass('d-none');
    if(val == 'pause-contract'){
      $('#pause-contract-section').removeClass('d-none');
      $('.event_date_label').text('Paused At');
    }else if(val == 'update-terms'){
      $('#update-terms-sectoin').removeClass('d-none');
      $('.event_date_label').parent().addClass('d-none');
    } else if(val == 'resume-contract'){
      $('#contract-resume-section').removeClass('d-none');
      $('.event_date_label').text('Resumed At');
    } else if(val == 'terminate-contract'){
      $('#contract-terminate-section').removeClass('d-none');
      $('.event_date_label').text('Terminated At');
    } else if(val == 'contract-completed'){
      $('#contract-completed-section').removeClass('d-none');
      $('.event_date_label').text('Completed At');
    }
  }

  // on change of radion button, update hidden field
  $(document).on('change', 'input[type=radio][name="action_type"]', function(){
    let val = $(this).val();
    $('#change-request-type').val(val).trigger('change');
  });
</script>