@if ($change_order->id)
    {!! Form::model($change_order, ['route' => ['admin.contracts.change-requests.update', ['change_request' => $change_order, 'contract' => $change_order->contract]], 'method' => 'PUT']) !!}
@else
    {!! Form::model($change_order, ['route' => ['admin.contracts.change-requests.store'], 'method' => 'POST', 'id' => 'create-change-request-form']) !!}
@endif
{{-- @dd($change_order) --}}
<div id="crc-sec" class="row">
  <div class="d-flex">
    <div class="form-check me-3">
      <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')>
      <label class="form-check-label" for="update-terms-rad">
        Update Terms
      </label>
    </div>
    <div class="form-check me-3">
      <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">
      <input class="form-check-input" type="radio" name="action_type" value="resume-contract" id="resume-contract" @checked($change_order->action == 'Resume')>
      <label class="form-check-label" for="resume-contract">
        Resume
      </label>
    </div>
    <div class="form-check me-3">
      <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">
      <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']) !!}

  {{-- 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', 'dependent_2_col' => 'change_request_type']),
      'data-allow-clear' => 'true',
      'data-dependent_2' => 'change-request-type'
      ]) !!}
  </div>

  {{-- program --}}
  <div class="form-group col-6">
    {!! Form::label('program_id', 'Programs', ['class' => 'col-form-label'] ) !!}
    {!! Form::select('program_id', [], [], [
      'class' => 'form-select globalOfSelect2Remote dependent-select',
      'id' => 'program_id-select',
      'data-placeholder' => __('All'),
      'data-allow-clear' => 'true',
      'data-remote' => route('resource-select', ['Program', 'dependent' => 'company_id', 'dependent_2_col' => 'change_request_type']),
      'data-dependent_id' => 'client_id-select',
      'data-dependent_2' => 'change-request-type'
    ]) !!}
  </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_2' => 'change-request-type',
      '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] : [], $change_order->contract?->uuid ?? null, [
      'data-placeholder' => 'Select Contract',
      'class' => 'form-select', 'data-kt-select2' => 'true',
      'data-remote' => route('resource-select', ['Contract', 'dependent' => 'company_id', 'dependent_2_col' => 'change_request_type', 'dependent_3_col' => 'program_id', 'dependent_4_col' => 'reference_id']),
      'data-dependent_id' => 'client_id-select',
      'data-dependent_2' => 'change-request-type',
      'data-dependent_3' => 'program_id-select',
      'data-dependent_4' => 'cont-ref-id',
      'id' => 'contract_id'
    ])!!}
  </div>

  <div class="col-12 mt-2 d-none change-order-exists-warning">
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>New Request Cannot be created!</strong> Change Request Already exists : <a href="" class="alert-link change-order-url">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 {{$change_order->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">{{$change_order->contract?->subject}}</span>
        </li>

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

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

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

  <div id="pause-contract-section" class="{{$change_order->action == 'Pause Contract' ? '' : 'd-none'}} ac-sec">
    {{-- <div class="card mt-2">
      <h5 class="card-header">Pause Contract</h5>
        <div class="card-body">
          <div class="row ms-3">
            <div class="row">
              <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="pause_until" value="manual" id="pause-manual" checked>
                <label class="form-check-label" for="pause-manual">
                  Pause Until I Resume
                </label>
              </div>
              <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="pause_until" value="custom_date" id="pause-custom">
                <label class="form-check-label" for="pause-custom">
                  Pause Until a specific date
                </label>
              </div>
              <div class="col-5 d-none pause-durantion">
                <div class="mb-3">
                  <input type="date" id="custom-date-value" name="custom_date_value" class="form-control flatpickr" data-flatpickr='{"minDate": "today"}' placeholder="Select Date">
                </div>
              </div>
              <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="pause_until" value="custom_date_from" id="pause-custom-from">
                <label class="form-check-label" for="pause-custom-from">
                  Pause from a date, until I resume
                </label>
              </div>
              <div class="col-5 d-none pause-durantion">
                <div class="mb-3">
                  <input type="date" id="custom-from-date-value" name="custom_from_date_value" class="form-control flatpickr" placeholder="Select Date">
                </div>
              </div>
              <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="pause_until" value="custom_unit" id="pause-days">
                <label class="form-check-label" for="pause-days">
                  Pause For
                </label>
              </div>
              <div class="col-5 d-none pause-durantion">
                <div class="mb-3 d-flex">
                  <span class="w-50">
                    <input type="number" id="unit-value" name="pause_for"class="form-control cusom_resum_parm">
                  </span>
                  <span class="w-50">
                    {!! Form::select('custom_unit', ['Days' => 'Days', 'Weeks' => 'Weeks', 'Months'=> 'Months'], null, ['class' => 'form-select select2 cusom_resum_parm']) !!}
                  </span>
                </div>
                <div class="col">
                  <div class="mb-3">
                    <label for="" class="form-label">Will Resume On: </label>
                    <input type="date" name="calculated_resumed_date" id="calculated_resumed_date" readonly class="form-control">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div> --}}
  </div>

  <div id="contract-completed-section" class="{{in_array($change_order->action, ['Early Completed', 'Completed']) ? '' : 'd-none'}} ac-sec">
    {{-- completion status --}}
    <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">
      <h5 class="card-header p-3">Update Terms</h5>
      <div class="card-body row">
        <div class="form-group col">
          <label for="current_amount" class='col-form-label'>Current Value</label>
          {!! Form::text('current_amount', @$change_order->contract?->printable_value ?? null, ['class' => 'form-control', 'disabled','placeholder' => __('value'), 'data-value' => @$change_order->contract?->value ?? null]) !!}
        </div>
        <div class="form-group col-6 {{@$change_order->data['new_value'] != @$change_order->data['old_contract']['value'] ? "" : 'd-none'}} n-value">
            <label for="new_value" class='col-form-label'>New Value</label>
            {!! Form::text('new_value', @$change_order->data['new_value'] ? cMoney($change_order->data['new_value'], $change_order->contract?->currency, true) : null, ['class' => 'form-control', 'disabled','placeholder' => __('Value')]) !!}
        </div>
        <div class="d-flex mt-2">
          <div class="form-check me-2">
            <input class="form-check-input" type="radio" name="value_action" value="unchanged" id="unch-val-rd" @checked(!isset($change_order->contract))>
            <label class="form-check-label" for="unch-val-rd">
              No Change
            </label>
          </div>
          <div class="form-check me-2">
            <input class="form-check-input" type="radio" name="value_action" value="inc" id="inc-val-rd" @checked(@$change_order->data['new_value'] > @$change_order->data['old_contract']['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" type="radio" name="value_action" value="dec" id="dec-val-rd" @checked(@$change_order->data['new_value'] < @$change_order->data['old_contract']['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" 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 {{@$change_order->data['new_value'] != @$change_order->data['old_contract']['value'] ? "" : 'd-none'}}">
          <label for="value" class='col-form-label'>Value Change</label>
          <div class="d-flex">
            <div>
              {!! Form::number('value_change', @$change_order->data['new_value'] - @$change_order->data['old_contract']['value'], ['class' => 'form-control value_change', 'placeholder' => __('Value')]) !!}
            </div>
          </div>
        </div>
        <hr class="mt-2">
        <div class="form-group col">
          {{ Form::label('c_end_date', __('Current End Date'), ['class' => 'col-form-label']) }}
          {!! Form::date('c_end_date', @$change_order->contract?->end_date, ['class' => 'form-control', 'disabled','placeholder' => __('End Date')]) !!}
        </div>
        {{-- due date --}}
        <div class="form-group col-6 new-end-date d-none">
          {{ Form::label('new_end_date', __('New End Date'), ['class' => 'col-form-label']) }}
          {!! Form::date('new_end_date', null, ['class' => 'form-control flatpickr', 'placeholder' => __('End Date')]) !!}
        </div>
        <div class="d-flex mt-2">
          <div class="form-check me-2">
            <input class="form-check-input" type="radio" name="timeline_action" value="unchanged" id="unch-timeline-rd" @checked(@$change_order->data['old_contract']['end_date'] == @$change_order->data['new_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" type="radio" name="timeline_action" value="inc" id="inc-timeline-rd" @checked(@$change_order->data['new_end_date'] > @$change_order->data['old_contract']['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" type="radio" name="timeline_action" value="dec" id="dec-timeline-rd" @checked(@$change_order->data['new_end_date'] < @$change_order->data['old_contract']['end_date'])>
            <label class="form-check-label" for="dec-timeline-rd">
              Shorten
            </label>
          </div>
        </div>
        <div class="form-group col-12 timeline-calc d-none">
          <label for="value" class='col-form-label'>Value Change</label>
          <div class="d-flex">
            {!! Form::number('timeline_change', null, ['class' => 'form-control timeline_change', 'placeholder' => __('Value')]) !!}
            {!! Form::select('timeline_unit', ['Day' => 'Day(s)', 'Month' => 'Month(s)', 'Year' => 'Year(s)'], null, [
              'data-start-date' => @$change_order->data['old_contract']['end_date'],
              'class' => 'form-select timeline_change_unit',
              'data-kt-select2' => 'true'
              ])!!}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="contract-terminate-section" class="d-none ac-sec">
    {{-- <div class="card mt-2">
      <h5 class="card-header p-3">Terminate Contract</h5>
      <div class="card-body">
        <div class="row ms-3">
          <div class="row">
            <div class="form-check mb-4">
              <input class="form-check-input" type="radio" name="terminate_date" value="now" id="terminate-now" checked>
              <label class="form-check-label" for="terminate-now">
                Terminate Immediately
              </label>
            </div>
            <div class="form-check mb-3">
              <input class="form-check-input" type="radio" name="terminate_date" value="custom" id="terminate-date">
              <label class="form-check-label" for="terminate-date">
                Terminate on a specific date
              </label>
            </div>
            <div class="mb-3 col-6 d-none">
              <input type="date" name="custom_date" id="custom-termination-date" class="form-control flatpickr" placeholder="Termination Date" data-flatpickr='{"minDate" : "today"}'>
            </div>
          </div>
        </div>
      </div>
    </div> --}}
  </div>
  <div id="contract-resume-section" class="{{$change_order->action == 'Resume' ? '' : 'd-none'}} ac-sec">
    {{-- <div class="card mt-2">
      <h5 class="card-header p-3">Resume Contract</h5>
      <div class="card-body">
        <div class="row ms-3"> --}}
          <div class="row">
            {{-- update start date --}}
            <div class="form-group col-6">
              <label class="form-check form-switch form-check-custom form-check-solid d-flex flex-column">
                {{ Form::label('update_start_date', __('Update Start Date'), ['class' => 'col-form-label']) }}
                {{ Form::checkbox('update_start_date', 1, @$change_order->data['start_date'] && 1,['class' => 'form-check-input is-invalid'])}}
                {{-- <input type="checkbox" class="form-check-input is-invalid" checked /> --}}
                <span class="switch-label"></span>
              </label>
            </div>

            {{-- contract start date --}}
            <div class="form-group col-6 {{@$change_order->data['start_date'] ? : 'd-none'}} new-start-date">
              {{ Form::label('start_date', __('New Start Date'), ['class' => 'col-form-label']) }}
              {!! Form::date('start_date', @$change_order->data['start_date'], ['class' => 'form-control flatpickr', 'placeholder' => __('Start Date')]) !!}
            </div>

            {{-- contract end date --}}
            <div class="form-group col-6">
              {{ Form::label('end_date', __('New End Date'), ['class' => 'col-form-label']) }}
              {!! Form::date('end_date', @$change_order->data['end_date'], ['class' => 'form-control flatpickr', 'placeholder' => __('End Date')]) !!}
            </div>
            {{-- <div class="form-check mb-4">
              <input class="form-check-input" type="radio" name="resume_date" value="now" id="resume-now" checked>
              <label class="form-check-label" for="resume-now">
                Resume Immediately
              </label>
            </div>
            <div class="form-check mb-3">
              <input class="form-check-input" type="radio" name="resume_date" value="custom" id="resume-date">
              <label class="form-check-label" for="resume-date">
                Resume on a specific date
              </label>
            </div>
            <div class="mb-3 col-6 d-none">
              <input type="date" name="custom_resume_date" id="custom-resume-date" class="form-control flatpickr" placeholder="Resume Date">
            </div> --}}
          </div>
        {{-- </div>
      </div>
    </div> --}}
  </div>

  <div class="form-group col-12 ac-sec-same {{ $change_order->id ? '' : 'd-none' }} {{$change_order->action == 'Terms Update' ? 'd-none' : ''}}">
    {{ Form::label('event_date', 'Action Date', ['class' => 'col-form-label event_date_label']) }}
    {!! Form::date('event_date', @$change_order->data['event_date'], ['class' => 'form-control flatpickr', 'placeholder' => __('Select Date')]) !!}
  </div>

  {{-- requested at --}}
  <div class="form-group col-12 ac-sec-same {{ $change_order->id ? '' : 'd-none' }}">
    <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 {{ $change_order->id ? '' : 'd-none' }}">
    <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 {{ $change_order->id ? '' : 'd-none' }}">
    <div class="mb-3">
      {!! Form::label('description', 'Description', ['class' => 'col-form-label']) !!}
      {!! Form::textarea('description', null, ['class' => 'form-control', 'rows' => 5]) !!}
    </div>
  </div>


</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">{{ __('Save') }}</button>
    </div>
</div>
{!! Form::close() !!}
<script nonce="{{ csp_nonce() }}">
  $(document).ready(function(){
    $('input[name="value_action"]').on('change click', function(){
      $('input[name="new_value"]').prop('disabled', true);
      if($(this).val() == 'unchanged'){
        $('.n-value').addClass('d-none');
        $('.val-calc').addClass('d-none');
      }else if($(this).val() == 'inc' || $(this).val() == 'dec'){
        $('.n-value').removeClass('d-none');
        $('.val-calc').removeClass('d-none');
        calValue();
      }else if ($(this).val() == 'cust') {
        $('.n-value').removeClass('d-none');
        $('.val-calc').addClass('d-none');
        $('input[name="new_value"]').prop('disabled', false);
        $('input[name="new_value"]').val($('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();
  });
  function calValue(){
    let val = $('.value_change').val() || 0;
    let action = $('input[name="value_action"]:checked').val();
    let cval = $('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');
    $('input[name="new_value"]').val(currency + ' ' + parseFloat(nval).toLocaleString());
  }

  // timeline
  $(document).ready(function(){
    $('input[name="timeline_action"]').on('change click', function(){
      if($(this).val() == 'unchanged'){
        $('.new-end-date').addClass('d-none');
        $('.timeline-calc').addClass('d-none');
        $('input[name="new_end_date"]').val(null);
      }else if($(this).val() == 'inc' || $(this).val() == 'dec'){
        $('.new-end-date').removeClass('d-none');
        $('.timeline-calc').removeClass('d-none');
        calTimeline();
      }else{
        $('.new-end-date').addClass('d-none');
        $('.timeline-calc').removeClass('d-none');
      }
    });
  });

  $(document).on('change keyup', '.timeline_change', function(){
    calTimeline();
  });

  $('.timeline_change_unit').on('change', function(){
    calTimeline();
  });

  function calTimeline(){
    let val = $('.timeline_change').val() || 0;
    let action = $('input[name="timeline_action"]:checked').val();
    let cval = $('input[name="c_end_date"]').val();
    let nval = 0;
    let unit = $('.timeline_change_unit').val().toLowerCase();
    let start_date = $('.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{
      $('.timeline_change').removeClass('is-invalid');
      $('input[name="new_end_date"]').val(nval);
    // }
    initFlatPickr();
  }

  $(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);
          $('#unch-val-rd').prop('checked', true).trigger("click").change();
          $('#unch-timeline-rd').prop('checked', true).trigger("click").change();
        }
      });
    }
  })

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

  // 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;
    }
    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');
    }
  }

  // pause Form js
  $(document).on('change', 'input[name="pause_until"]', function() {
      if ($(this).val() == 'custom_date') {
        $('#custom-date-value').parents('.pause-durantion').removeClass('d-none');
      } else {
        $('#custom-date-value').parents('.pause-durantion').addClass('d-none');
      }

      if ($(this).val() == 'custom_date_from') {
        $('#custom-from-date-value').parents('.pause-durantion').removeClass('d-none');
      } else {
        $('#custom-from-date-value').parents('.pause-durantion').addClass('d-none');
      }

      if ($(this).val() == 'custom_unit') {
        $('#unit-value').parents('.pause-durantion').removeClass('d-none');
      } else {
        $('#unit-value').parents('.pause-durantion').addClass('d-none');
      }
  });
  // end pause Form js

  // termination form js
  $(document).on('change', 'input[name="terminate_date"]', function() {
    if ($(this).val() == 'custom') {
      $('#custom-termination-date').parent().removeClass('d-none');
    } else {
      $('#custom-termination-date').parent().addClass('d-none');
    }
  });
  // end termination form js

  // resume form js
  $(document).on('change', 'input[name="resume_date"]', function() {
    if ($(this).val() == 'custom') {
      $('#custom-resume-date').parent().removeClass('d-none');
    } else {
      $('#custom-resume-date').parent().addClass('d-none');
    }
  });
  // end resume form js

  // Resume form js
  $(document).on('change', '.cusom_resum_parm', function(){
      var unit = $('select[name="custom_unit"]').val();
      var value = $('input[name="pause_for"]').val();
      var date = new Date();
      if(unit == 'Days'){
          date.setDate(date.getDate() + parseInt(value));
      }else if(unit == 'Weeks'){
          date.setDate(date.getDate() + (parseInt(value) * 7));
      }else if(unit == 'Months'){
          date.setMonth(date.getMonth() + parseInt(value));
      }
      $('#calculated_resumed_date').val(date.toISOString().slice(0,10));
  });
  $(document).on('change', '#resume_now', function(){
      if($(this).is(':checked')){
          $('.resume_now_submit').removeClass('disabled');
      }else{
          $('.resume_now_submit').addClass('disabled');
      }
  });
  // end Resume form js

  // 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');
  });

  // on change of update_start_date, show/hide new start date
  $(document).on('change', 'input[name="update_start_date"]', function(){
    if($(this).is(':checked')){
      $('.new-start-date').removeClass('d-none');
    }else{
      $('.new-start-date').addClass('d-none');
    }
  });

</script>