@php
use Carbon\Carbon;
// Sort the team users alphabetically by the user's name
$sortedTeamUsers = $teamUsers->sortBy(function($user) {
  return $user->user->name . ' ' . $user->user->lastName;
});
@endphp
@extends('layouts.mainlayout')
@section('title', 'Manage Schedule')
@section('main')
<style>
  .searchField{
    outline: 0;
    width: 12.5rem;
    padding: 0.5rem 0;
    padding-right: 1.125rem;
    font-size: .8125rem;
    line-height: 1.5385;
    color: #333;
    background-color: transparent;
    border: 1px solid #ddd;
    border-width: 1px 0;
    border-top-color: transparent;
    transition: all ease-in-out .15s;
  }

  .searchSpan{
    float: right;
  }

  .position{
    font-size: 15px;
  }

.table-fix{
  position: sticky;
}
.table-fix thead tr{
  position: sticky;
  top: 0;
  background: antiquewhite;
  z-index: 999;
}
.sticky-thead{
  position: inherit;
  overflow-y: scroll;
  height: 400px;
}
.child-row th{
  position: sticky;
  background: antiquewhite;
}
.table-fix tr.sub-child-row:nth-child(odd) {
  background-color: #eae8e8b0;
}
.parent-row{
  /* background: aliceblue;  */
}
.crossButton{
  font-size: 13px;
  font-weight: bold;
  color: #6e6ec6;
  margin-left: -15px;
  margin-top: 10px;
  cursor: pointer;
  position: absolute;
}
.class-srNo{
  font-weight: bold;
}
.table-fix td {
    padding: 0.75rem 0.5rem;
}
</style>
<div class="card">
  <div class="card-header header-elements-inline">
    <h5 class="card-title icon-users4 font-weight-bold">Edit Schedules</h5>
  </div>
  <form class="form-validate-jquery" action="{{ route('edit-schedule.update',$schedule->id) }}" method="POST">
    <fieldset class="mb-3" style="position: relative;">
      {{csrf_field()}}
      {{method_field('put')}} 
      <div class="card-body" style="padding-bottom: 0;">   
        <legend class="text-uppercase font-size-sm font-weight-bold"> </legend>
          <!-- Basic text input -->
          <div class="form-group row">
            <label class="col-form-label col-lg-3">Schedule Name
              <span class="text-danger"></span>
            </label>                    
            <div class="col-lg-9">
              <input type="text" id="name" name="name" placeholder="Add name" value="{{$schedule->name}}" class="form-control @error('team') is-invalid @enderror" required>
            </div>
          </div>                    
          <input type="hidden" id="team_id"  name="team_id" value="{{$team->id}}">            
          <div class="form-group row @if($schedule->is_default==1) d-hide @endif">
            <label class="col-form-label col-lg-3">Date Range
              <span class="text-danger"></span>
            </label>
            <div class="col-lg-9">
              <div class="row">
                <div class="col-md-6">
                  <label class="col-form-label">From Date</label>
                  @if($schedule->to_date)
                  <input type="text" id="from_date" name="from_date" data-date-format="{{ config('settings.date_format') }}" value="{{ Carbon::parse($schedule->from_date)->format(config('settings.php_date_format')) }}" placeholder="{{ config('settings.date_format') }}" class="form-control @error('team') is-invalid @enderror" readonly />
                  @else
                  <input type="text" id="from_date" name="from_date" data-date-format="{{ config('settings.date_format') }}" value="" placeholder="{{ config('settings.date_format') }}" class="form-control @error('team') is-invalid @enderror" readonly />
                  @endif
                </div>
                <div class="col-md-6">
                  <label class="col-form-label">To Date</label>
                  @if($schedule->to_date)
                  <input type="text" id="to_date" name="to_date" data-date-format="{{ config('settings.date_format') }}" value="{{ Carbon::parse($schedule->to_date)->format(config('settings.php_date_format')) }}" placeholder="{{ config('settings.date_format') }}" class="form-control @error('team') is-invalid @enderror" readonly />
                  @else
                  <input type="text" id="to_date" name="to_date" data-date-format="{{ config('settings.date_format') }}" value="" placeholder="{{ config('settings.date_format') }}" class="form-control @error('team') is-invalid @enderror" readonly />
                  @endif
                </div>
              </div>
            </div>
          </div>

          @if($schedule->is_default==1)
          <div class="form-group row">
            <legend class="text-uppercase font-size-sm font-weight-bold"></legend>
            <label class="col-form-label col-lg-3">Set as a default</label>
            <div class="col-lg-9" style="margin: auto;">
              <input type="checkbox" id="default_checkbox" name="is_default" value="1" checked/>
            </div>
          </div>
          @else
          <div class="form-group row">
            <legend class="text-uppercase font-size-sm font-weight-bold"></legend>
            <label class="col-form-label col-lg-3">Set as a default</label>
            <div class="col-lg-9" style="margin: auto;">
              <input type="checkbox" id="default_checkbox" name="is_default" value="1"/>
            </div>
          </div>
          @endif

                        
          <h3> <lebal>Team Name:- </lebal>{{@$team->team}}
            <div class="searchSpan">
              <span class="position">Filter:</span>
              <input type="text" id="nameInput" placeholder="Type to filter ..." aria-controls="data" class="searchField">
              <span id="clearButton" class="crossButton">X</span>
            </div>
          </h3>
      </div>
      <br>

      <div class="col-md-12 sticky-thead">
        <table class="table table-fix" id="user-table">
          <thead>
            <tr>
              <th>Sr.No</th>
              <th>Name</th>
              <th>M</th>
              <th>T</th>
              <th>W</th>
              <th>T</th>
              <th>F</th>
              <th>S</th>
              <th>S</th>
            </tr>
          </thead>
                    
          <tbody>
            <script> 
              var dataIds = []; 
            </script>
            @foreach($sortedTeamUsers as $teamUser)
              <tr class="parent-row" data-id="{{$teamUser->user_id}}" id="{{$teamUser->user_id}}">
                <script> 
                  var dataId = "{{$teamUser->user_id}}";
                  dataIds.push(dataId);
                </script>
                <td id="sr_{{$teamUser->user_id}}" class="class-srNo">{{$loop->iteration}}</td>
                <td> <i class="fa fa-caret-down" aria-hidden="true" style="margin: 3px;"></i>
                  {{ $teamUser->user->name . ' ' . $teamUser->user->lastName}}
                </td>
                @php
                    $mon = 0;
                    $tue = 0;
                    $wed = 0;
                    $thu = 0;
                    $fri = 0;
                    $sa = 0;
                    $sun = 0;
                    $mondayShift = "";
                    $tuesdayShift = "";
                    $wednesdayShift = "";
                    $thursdayShift = "";
                    $fridayShift = "";
                    $saturdayShift = "";
                    $sundaryShift = "";
                    $mondayShiftCount = 0;
                    $tuesdayShiftCount = 0;
                    $wednesdayShiftCount = 0;
                    $thursdayShiftCount = 0;
                    $fridayShiftCount = 0;
                    $saturdayShiftCount = 0;
                    $sundayShiftCount = 0;
                @endphp
                @foreach($shiftData as $teamShift)
                  @php
                      $scheduleDetailQuery = array(
                      'shift_id' => $teamShift->id,
                      'is_active' => 1,
                      'schedule_id' => $id,
                      'user_id' => $teamUser['user_id']
                      );

                    $getD = App\Models\Schedule\ScheduleDetail::where($scheduleDetailQuery)
                            ->latest()->first();

                    if (!empty($getD)) {
                      $mon = $getD->mon;
                      $tue = $getD->tue;
                      $wed = $getD->wed;
                      $thu = $getD->thu;
                      $fri = $getD->fri;
                      $sa = $getD->sat;
                      $sun = $getD->sun;
  
                      if ($mon){
                        $mondayShiftCount++; 
                        $mondayShift =  "(". \Carbon\Carbon::parse($teamShift->start_time)->format('H:i') ."-". \Carbon\Carbon::parse($teamShift->end_time)->setTimezone(config('settings.time_zone'))->format('H:i').")";
                        }
                      if ($tue){
                        $tuesdayShiftCount++;
                        $tuesdayShift = "(". \Carbon\Carbon::parse($teamShift->start_time)->format('H:i') ."-". \Carbon\Carbon::parse($teamShift->end_time)->setTimezone(config('settings.time_zone'))->format('H:i').")";
                        }
                      if ($wed){
                        $wednesdayShiftCount++;
                        $wednesdayShift = "(". \Carbon\Carbon::parse($teamShift->start_time)->format('H:i') ."-". \Carbon\Carbon::parse($teamShift->end_time)->setTimezone(config('settings.time_zone'))->format('H:i').")";
                        }
                      if ($thu){
                        $thursdayShiftCount++;
                        $thursdayShift = "(". \Carbon\Carbon::parse($teamShift->start_time)->format('H:i') ."-". \Carbon\Carbon::parse($teamShift->end_time)->setTimezone(config('settings.time_zone'))->format('H:i').")";
                        }
                      if ($fri){
                        $fridayShiftCount++;
                        $fridayShift = "(". \Carbon\Carbon::parse($teamShift->start_time)->format('H:i') ."-". \Carbon\Carbon::parse($teamShift->end_time)->setTimezone(config('settings.time_zone'))->format('H:i').")";
                        }
                      if ($sa){
                        $saturdayShiftCount++;
                        $saturdayShift = "(". \Carbon\Carbon::parse($teamShift->start_time)->format('H:i') ."-". \Carbon\Carbon::parse($teamShift->end_time)->setTimezone(config('settings.time_zone'))->format('H:i').")";
                        }
                      if ($sun){
                        $sundayShiftCount++;
                        $sundaryShift = "(". \Carbon\Carbon::parse($teamShift->start_time)->format('H:i') ."-". \Carbon\Carbon::parse($teamShift->end_time)->setTimezone(config('settings.time_zone'))->format('H:i').")";
                        }
                        }
                  @endphp
                @endforeach
                          
                <td>
                  {{ $mondayShiftCount > 1 ? 'Multi-Shift' : $mondayShift }}
                </td>
                <td>
                  {{ $tuesdayShiftCount > 1 ? 'Multi-Shift' : $tuesdayShift }}
                </td>
                <td>
                  {{ $wednesdayShiftCount > 1 ? 'Multi-Shift' : $wednesdayShift }}
                </td>
                <td>
                  {{ $thursdayShiftCount > 1 ? 'Multi-Shift' : $thursdayShift }}
                </td>
                <td>
                  {{ $fridayShiftCount > 1 ? 'Multi-Shift' : $fridayShift }}
                </td>
                <td>
                  {{ $saturdayShiftCount > 1 ? 'Multi-Shift' : $saturdayShift }}
                </td>
                <td>
                  {{ $sundayShiftCount > 1 ? 'Multi-Shift' : $sundaryShift }}
                </td>
                <tr class="child-row" style="display: none;">

                  <th>No</th>
                  <th>Shift Time</th>
                  <th>M</th>
                  <th>T</th>
                  <th>W</th>
                  <th>T</th>
                  <th>F</th>
                  <th>S</th>
                  <th>S</th>
                       
                  @foreach($shiftData as $teamShift)
                    @php
                      $mon = 0;
                      $tue = 0;
                      $wed=0;
                      $thu=0;
                      $fri=0;
                      $sa=0;
                      $sun=0;

                      $scheduleDetailQuery = array(
                          'shift_id' => $teamShift->id,
                          'is_active' => 1,
                          'schedule_id' => $id,
                          'user_id' => $teamUser['user_id']
                          );
                             
                      $getD = App\Models\Schedule\ScheduleDetail::where($scheduleDetailQuery)->first();
                                    
                      if(!empty($getD)){
                          $mon = $getD->mon;
                          $tue = $getD->tue;
                          $wed=$getD->wed;
                          $thu=$getD->thu;
                          $fri=$getD->fri;
                          $sa=$getD->sat;
                          $sun=$getD->sun;
                          }
                    @endphp
                              
                    <tr class="shift_{{$teamUser->user_id}} sub-child-row"  style="display: none;">
                        <td id="srNo">{{$loop->iteration}}</td>
                        <td>{{$teamShift->shift}} </td>
                        <td><input type="checkbox" id="monday" name="mon_{{$teamUser->user_id}}_{{$teamShift->id}}" data-userid="{{$teamUser->user_id}}" data-start="{{$teamShift->start_time}}" data-end="{{ \Carbon\Carbon::parse($teamShift->end_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}"  data-range-buffer-on-checkin="{{ $teamShift->range_buffer_on_checkin}}" data-range-buffer-on-checkout="{{$teamShift->range_buffer_on_checkout}}" data-buffer-checkin="{{ $teamShift->buffer_on_checkin}}" data-buffer-checkout="{{ $teamShift->buffer_on_checkout }}" @if($mon) checked @endif></td>
                        <td><input type="checkbox" id="tuesday"  data-userid="{{$teamUser->user_id}}" name="tue_{{$teamUser->user_id}}_{{$teamShift->id}}" data-start="{{$teamShift->start_time}}" data-end="{{ \Carbon\Carbon::parse($teamShift->end_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-range-buffer-on-checkin="{{ $teamShift->range_buffer_on_checkin}}" data-range-buffer-on-checkout="{{$teamShift->range_buffer_on_checkout}}" data-buffer-checkin="{{ $teamShift->buffer_on_checkin }}" data-buffer-checkout="{{ $teamShift->buffer_on_checkout }}" @if($tue) checked  @endif></td>
                        <td><input type="checkbox" id="wednesday"  data-userid="{{$teamUser->user_id}}" name="wed_{{$teamUser->user_id}}_{{$teamShift->id}}" data-start="{{$teamShift->start_time}}" data-end="{{ \Carbon\Carbon::parse($teamShift->end_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-range-buffer-on-checkin="{{ $teamShift->range_buffer_on_checkin}}" data-range-buffer-on-checkout="{{$teamShift->range_buffer_on_checkout}}" data-buffer-checkin="{{ $teamShift->buffer_on_checkin }}" data-buffer-checkout="{{ $teamShift->buffer_on_checkout }}" @if($wed) checked  @endif></td>
                        <td><input type="checkbox" id="thursday"  data-userid="{{$teamUser->user_id}}" name="thu_{{$teamUser->user_id}}_{{$teamShift->id}}" data-start="{{$teamShift->start_time}}" data-end="{{ \Carbon\Carbon::parse($teamShift->end_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-range-buffer-on-checkin="{{ $teamShift->range_buffer_on_checkin}}" data-range-buffer-on-checkout="{{$teamShift->range_buffer_on_checkout}}" data-buffer-checkin="{{ $teamShift->buffer_on_checkin }}" data-buffer-checkout="{{ $teamShift->buffer_on_checkout }}" @if($thu) checked  @endif></td>
                        <td><input type="checkbox" id="friday"  data-userid="{{$teamUser->user_id}}" name="fri_{{$teamUser->user_id}}_{{$teamShift->id}}" data-start="{{$teamShift->start_time}}" data-end="{{ \Carbon\Carbon::parse($teamShift->end_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-range-buffer-on-checkin="{{ $teamShift->range_buffer_on_checkin}}" data-range-buffer-on-checkout="{{$teamShift->range_buffer_on_checkout}}" data-buffer-checkin="{{ $teamShift->buffer_on_checkin }}" data-buffer-checkout="{{ $teamShift->buffer_on_checkout }}" @if($fri) checked  @endif></td>
                        <td><input type="checkbox" id="saturday"  data-userid="{{$teamUser->user_id}}" name="sa_{{$teamUser->user_id}}_{{$teamShift->id}}"  data-start="{{$teamShift->start_time}}" data-end="{{ \Carbon\Carbon::parse($teamShift->end_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-range-buffer-on-checkin="{{ $teamShift->range_buffer_on_checkin}}" data-range-buffer-on-checkout="{{$teamShift->range_buffer_on_checkout}}" data-buffer-checkin="{{ $teamShift->buffer_on_checkin }}" data-buffer-checkout="{{ $teamShift->buffer_on_checkout }}" @if($sa) checked   @endif></td>
                        <td><input type="checkbox" id="sunday"  data-userid="{{$teamUser->user_id}}" name="sun_{{$teamUser->user_id}}_{{$teamShift->id}}" data-start="{{$teamShift->start_time}}" data-end="{{ \Carbon\Carbon::parse($teamShift->end_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-range-buffer-on-checkin="{{ $teamShift->range_buffer_on_checkin}}" data-range-buffer-on-checkout="{{$teamShift->range_buffer_on_checkout}}" data-buffer-checkin="{{ $teamShift->buffer_on_checkin }}" data-buffer-checkout="{{ $teamShift->buffer_on_checkout }}" @if($sun) checked  @endif></td>
                    </tr>
                  @endforeach
                </tr>
              </tr>
            @endforeach

          </tbody>
        </table> <!-- end-->
      </div>
    </fieldset>
          
    <div class="d-flex justify-content-end align-items-center" style="margin-top: 2.5rem; margin-bottom: 1.5rem;">
      @if($schedule->status == 1) 
          <a href="{{ url('change-status', $schedule->id) }}"
            class="btn btn-primary ml-3" name="changeStatus" value="0">Publish Schedule
          </a>           
      @else
          <a href="#"           
            class="btn btn-primary ml-3" name="changeStatus">Already Published
          </a>                          
      @endif
          <button type="submit" class="btn btn-primary ml-3">
            <i class="icon-paperplane ml-2"></i>Update Schedule
          </button>
          <a class="btn btn-default btn-close btn btn-primary ml-3" href="{{route('add-custom-schedule.create', [ 'teamId' => $team->id])}}">Add Another Schedule</a>
          <a class="btn btn-default btn-close btn btn-primary ml-3" href="{{ route('scheduleshow.show' , base64_encode($team->id) ) }}">View All Schedule</a>
    </div>
  </form>
    <!-- </div> -->
</div>

<!-- /form validation -->
@endsection
@section('js')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script type="text/javascript">
  $(document).ready(function () {
      $("#user-table input[type='checkbox']:Checked").each(function () {
       let clickedCheckbox = $(this);
    let checkboxId = clickedCheckbox.attr("id");
    let userId = clickedCheckbox.attr("data-userid");

    let start = clickedCheckbox.attr("data-start");
    let end = clickedCheckbox.attr("data-end");
    // let bufferCheckin = clickedCheckbox.attr("data-buffer-checkin") || "00:00:00";
    // let bufferCheckout = clickedCheckbox.attr("data-buffer-checkout") || "00:00:00";
    let rangeCheckin = clickedCheckbox.attr("data-range-buffer-on-checkin") || "00:00:00"; 
    let rangeCheckout = clickedCheckbox.attr("data-range-buffer-on-checkout") || "00:00:00"; 

    // let effectiveStart = subtractTimes(start, rangeCheckin);
    // effectiveStart = subtractTimes(effectiveStart, bufferCheckin); // apply both range and buffer

    // let effectiveEnd = addTimes(end, bufferCheckout);
    // effectiveEnd = addTimes(effectiveEnd, rangeCheckout); // apply both range and buffer
     let effectiveStart = subtractTimes(start, rangeCheckin); 
    let effectiveEnd = addTimes(end, rangeCheckout); 
    
    if (clickedCheckbox.is(":checked")) {
      $("input[type='checkbox'][id='" + checkboxId + "'][data-userid='" + userId + "']").each(function () {
        let other = $(this);
        if (other.is(clickedCheckbox)) return;

        let oStart = other.attr("data-start");
        let oEnd = other.attr("data-end");
        // let oBufferCheckin = other.attr("data-buffer-checkin") || "00:00:00";
        // let oBufferCheckout = other.attr("data-buffer-checkout") || "00:00:00";
        let oRangeCheckin = other.attr("data-range-buffer-on-checkin") || "00:00:00"; 
        let oRangeCheckout = other.attr("data-range-buffer-on-checkout") || "00:00:00"; 

        // let otherEffectiveStart = subtractTimes(oStart, oRangeCheckin);
        // otherEffectiveStart = subtractTimes(otherEffectiveStart, oBufferCheckin);

        // let otherEffectiveEnd = addTimes(oEnd, oBufferCheckout);
        // otherEffectiveEnd = addTimes(otherEffectiveEnd, oRangeCheckout);
         let otherEffectiveStart = subtractTimes(oStart, oRangeCheckin);
        let otherEffectiveEnd = addTimes(oEnd, oRangeCheckout);
        
        if (timesOverlap(effectiveStart, effectiveEnd, otherEffectiveStart, otherEffectiveEnd)) {
          console.log("🔁 Overlap Detected");
          console.log("🟩 Current Shift Start:", effectiveStart);
          console.log("🟩 Current Shift End:", effectiveEnd);
          console.log("🟦 Other Shift Start:", otherEffectiveStart);
          console.log("🟦 Other Shift End:", otherEffectiveEnd);
          other.prop("disabled", true).prop("checked", false);
        }
      });
    } else {
      $("input[type='checkbox'][id='" + checkboxId + "'][data-userid='" + userId + "']").prop("disabled", false);
    }
  });


    $("input[type='checkbox']").change(function () {
    let clickedCheckbox = $(this);
    let checkboxId = clickedCheckbox.attr("id");
    let userId = clickedCheckbox.attr("data-userid");

    let start = clickedCheckbox.attr("data-start");
    let end = clickedCheckbox.attr("data-end");
    // let bufferCheckin = clickedCheckbox.attr("data-buffer-checkin") || "00:00:00";
    // let bufferCheckout = clickedCheckbox.attr("data-buffer-checkout") || "00:00:00";
     let rangeCheckin = clickedCheckbox.attr("data-range-buffer-on-checkin") || "00:00:00"; 
    let rangeCheckout = clickedCheckbox.attr("data-range-buffer-on-checkout") || "00:00:00"; 

    // let effectiveStart = subtractTimes(start, rangeCheckin);
    // effectiveStart = subtractTimes(effectiveStart, bufferCheckin); // apply both range and buffer

    // let effectiveEnd = addTimes(end, bufferCheckout);
    // effectiveEnd = addTimes(effectiveEnd, rangeCheckout); // apply both range and buffer
    let effectiveStart = subtractTimes(start, rangeCheckin); 
    let effectiveEnd = addTimes(end, rangeCheckout); 
    
    if (clickedCheckbox.is(":checked")) {
      $("input[type='checkbox'][id='" + checkboxId + "'][data-userid='" + userId + "']").each(function () {
        let other = $(this);
        if (other.is(clickedCheckbox)) return;

        let oStart = other.attr("data-start");
        let oEnd = other.attr("data-end");
        // let oBufferCheckin = other.attr("data-buffer-checkin") || "00:00:00";
        // let oBufferCheckout = other.attr("data-buffer-checkout") || "00:00:00";
        let oRangeCheckin = other.attr("data-range-buffer-on-checkin") || "00:00:00";
        let oRangeCheckout = other.attr("data-range-buffer-on-checkout") || "00:00:00";

        // let otherEffectiveStart = subtractTimes(oStart, oRangeCheckin);
        // otherEffectiveStart = subtractTimes(otherEffectiveStart, oBufferCheckin);

        // let otherEffectiveEnd = addTimes(oEnd, oBufferCheckout);
        // otherEffectiveEnd = addTimes(otherEffectiveEnd, oRangeCheckout);
         let otherEffectiveStart = subtractTimes(oStart, oRangeCheckin);
        let otherEffectiveEnd = addTimes(oEnd, oRangeCheckout);
        
        if (timesOverlap(effectiveStart, effectiveEnd, otherEffectiveStart, otherEffectiveEnd)) {
          other.prop("disabled", true).prop("checked", false);
          console.log("🔁 Overlap Detected");
          console.log("🟩 Current Shift Start:", effectiveStart);
          console.log("🟩 Current Shift End:", effectiveEnd);
          console.log("🟦 Other Shift Start:", otherEffectiveStart);
          console.log("🟦 Other Shift End:", otherEffectiveEnd);
        }
      });
    } else {
      $("input[type='checkbox'][id='" + checkboxId + "'][data-userid='" + userId + "']").prop("disabled", false);
    }
  });

  // Utility functions
  function addTimes(time1, time2) {
    const [h1, m1, s1] = time1.split(':').map(Number);
    const [h2, m2, s2] = time2.split(':').map(Number);

    let totalSeconds = h1 * 3600 + m1 * 60 + s1 + h2 * 3600 + m2 * 60 + s2;
    let hours = Math.floor(totalSeconds / 3600) % 24;
    let minutes = Math.floor((totalSeconds % 3600) / 60);
    let seconds = totalSeconds % 60;

    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
  }

  function subtractTimes(time1, time2) {
    const [h1, m1, s1] = time1.split(':').map(Number);
    const [h2, m2, s2] = time2.split(':').map(Number);

    let t1 = h1 * 3600 + m1 * 60 + s1;
    let t2 = h2 * 3600 + m2 * 60 + s2;

    let diff = Math.max(0, t1 - t2);
    let hours = Math.floor(diff / 3600);
    let minutes = Math.floor((diff % 3600) / 60);
    let seconds = diff % 60;

    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
  }
  
     function timesOverlap(start1, end1, start2, end2) {
            console.log("Start1:", start1);
            console.log("End1:", end1);
            console.log("Start2:", start2);
            console.log("End2:", end2);
        
            const isOverlapping = !(end1 <= start2 || end2 <= start1);
            console.log("Overlap Detected:", isOverlapping);
            return isOverlapping;
        }

    
    var defaultCheckbox = $("#default_checkbox");
    var fromDateBlock = $("#from-date-block");
    var toDateBlock = $("#to-date-block");
    var fromDatePicker = $("#from_date");
    var toDatePicker = $("#to_date");

    fromDatePicker.on('click',function(){
      initializeDatePickers();
    });
    function initializeDatePickers() {
      var datF = $("#from_date").data('date-format');
      var selectedForamt = datF.replace("yyyy", "yy"); 

      fromDatePicker.datepicker({
        autoclose: true,
        startDate: '-0m',
        dateFormat: selectedForamt
      }).on('changeDate', function(selected) {
        console.info("setting the date here");
        let minDate = new Date(selected.date.valueOf());
        toDatePicker.datepicker('setDate', null);
        toDatePicker.datepicker('setStartDate', minDate);
      });

      toDatePicker.datepicker({
        autoclose: true,
        dateFormat: selectedForamt
      });
    }

    $(document).on("click", ".parent-row", function() {
      var shiftID = $(this).data('id');
      var childRow = $(this).next('.child-row');
      var shiftElement = $(".shift_" + shiftID);

      if ($(this).hasClass('active')) {
        // Double-click on the same row, hide all rows
        hideActiveRows();
      } else {
        // Hide all opened rows
        hideActiveRows();

        childRow.show();
        shiftElement.show();
        $(this).addClass('active');
      }
    });

    $('#clearButton').on('click', function() {
      $('#nameInput').val('');
      $('.parent-row').show();
      $('#clearButton').hide();
      });

      var searchValue = $(this).val().trim();
      if (searchValue === '') {
        $('#clearButton').hide();
      } else {
        $('#clearButton').show();
      }

    $('#nameInput').on('keyup', function() {
      var searchValue = $(this).val().trim();
      if (searchValue === '') {
        $('.parent-row').show();
        $('#clearButton').hide();
      } else {
        $('.parent-row').hide();
        $('#clearButton').show();
      }

      hideActiveRows();
      var name = $(this).val();
      $.ajax({
        url: "{{ route('searchname') }}",
        type: "GET",
        data: {
          name: name
        },
        success: function(response) {
          $(".parent-row").hide();

          $.each(response, function(index, user) {
            var userId = user.id;
            $("tr#" + userId).show();
            initializeDatePickers();
          });

          if (name.length === 0) {
            $('.parent-row').show();
          }
        }
      });
    });

    function hideActiveRows() {
      $(".parent-row.active").each(function() {
        var shiftID = $(this).data('id');
        var childRow = $(this).next('.child-row');
        var shiftElement = $(".shift_" + shiftID);

        childRow.hide();
        shiftElement.hide();
        $(this).removeClass('active');
      });
    }

    defaultCheckbox.click(function() {
      console.info("checkbox clicked");
      fromDateBlock.toggleClass('d-hide');
      toDateBlock.toggleClass('d-hide');
    });

    initializeDatePickers();
  });
</script>
@endsection